Invisible reCaptcha about october-plugin-forms HOT 3 CLOSED

For people seeking help:

Invisible reCaptcha just need a callback js function that kicks off the form submission:

On whatever page you need an invisible reCaptcha

    {% put scripts %}
        <script type="text/javascript">
            var onSubmit = function(token) {
                jQuery('{{ __SELF__ }}').submit();
            };
        </script>
    {% endput %}
    {% component "ExtendedGenericForm" %}

Now invisible reCaptcha trigger goes on your form submit button

<button 
    id="{{ __SELF__ }}"
    data-callback="onSubmit"
    class="g-recaptcha"
    type="submit"
    data-sitekey="{{ __SELF__.settings.recaptcha_site_key }}"
    data-size="invisible">
</button>

Remember that {{ __SELF__ }} refers to either the component name or it's alias if defined.

You don't need to do anything else, the plugin will do the reset for you and validate the captcha.

It's also a very good idea to check on the documentation page : invisible reCAPTCHA v2

I don't have time to make a PR but hopefully this will help.

from october-plugin-forms.

Thank you for this! I wasn't able to make it work with jQuery('{{ __SELF__ }}').submit(); though.

I had to use jQuery('#myAwesomeForm').submit(); instead.

from october-plugin-forms.

I'm trying to solve problem with default browser HTML5 validation. It won't validate before form submission. Does anybody have a solution for that? I think that whole recaptcha should be on separate div and not on "button" element. Seems like the execution of ReCaptcha is bound to button element.

from october-plugin-forms.