Re: Step by step guide to recaptcha

SanfordWhiteman
Level 10 - Community Moderator

Re: Step by step guide to recaptcha

You'll have to wait for the blog post with up-to-date directions.

Lawrence_Mien1
Level 2

Re: Step by step guide to recaptcha

This may be horribly incorrect, but I was following this guide and trying to modify it for a landing page form rather than an embedded form and for the life of me can't get it to work.

I added the forms2 code below like so, but maybe it's not incorrect? It's the only part where I havent followed it to a tee...

<div class="mktoForm" id="primaryForm" mktoName="Primary Form" style="margin-bottom:40px;padding:10px 20px;min-height:80px;"></div>

<div>

                <script>

                MktoForms2.whenReady(function (form) {

                      var formEl = form.getFormElem()[0],

                        emailEl = formEl.querySelector('#Email'),

                        submitEl = formEl.querySelector('BUTTON[type="submit"]'),

                        recaptchaEl = document.querySelector('.g-recaptcha’),

                        formElId = form.getId();

                      if ("${GoogleRecaptcha}" == "block") {

                        form.submittable(false);

                        // force resize reCAPTCHA frame

                        recaptchaEl.querySelector('IFRAME').setAttribute('height','140');

                        // move reCAPTCHA inside form container   

                        formEl.appendChild(recaptchaEl);

                      }

                    form.onValidate(function(builtInValidation){       

                      //code to handle the recaptcha

                      if("${GoogleRecaptcha}" == "block") {

                          if (!builtInValidation) return;

                          //calling the recaptcha

                          var recaptchaResponse = grecaptcha.getResponse();

                          if (!recaptchaResponse) {

                              recaptchaEl.classList.add('mktoInvalid');

                          } else {

                              recaptchaEl.classList.remove('mktoInvalid');

                              form.addHiddenFields({

                                  lastRecaptchaUserInput: recaptchaResponse,

                                  lastRecaptchaEnabledFormID: formElId

                              });

                              form.submittable(true);

                          }

                      }     

                    });

                });

                </script>

            </div>

            <div id="InvisibleRecaptcha" class="g-recaptcha" data-sitekey="${GoogleRecaptchaSiteKey}" data-size="invisible" data-callback="donothing"></div>


What could be wrong here?
Just in case the html code section isnt showing up correctly....

SanfordWhiteman
Level 10 - Community Moderator

Re: Step by step guide to recaptcha

Far better to supply your code inline, highlighted with the Advanced Editor's syntax highlighter.

https://s3.amazonaws.com/blog-images-teknkl-com/syntax_highlighter.gif

Or just link to the URL on which you're trying the code.

Note on Marketo LPs, forms customization JS needs to go just before the closing </body> tag, if you're not already doing this. You can't put it in the <head> or elsewhere in the <body> because it depends on the Forms 2.0 library loading first.

Also, image attachments don't show up in all versions of the Community. I didn't see anything there until I switched browsers -- you can paste images directly into posts if necessary.

Lawrence_Mien1
Level 2

Re: Step by step guide to recaptcha

Ah okay. I think I included used the right container for the post.

This is what I have for the form

<div class="mktoForm" id="primaryForm" mktoName="Primary Form" style="margin-bottom:40px;padding:10px 20px;min-height:80px;"></div>

<div id="InvisibleRecaptcha" class="g-recaptcha" data-sitekey="${GoogleRecaptchaSiteKey}" data-size="invisible" data-callback="donothing"></div>

I had this just right after the form, but now i've moved it to just before the </body> tag

<script>

MktoForms2.whenReady(function (form) {

var formEl = form.getFormElem()[0],

emailEl = formEl.querySelector('#Email'),

submitEl = formEl.querySelector('BUTTON[type="submit"]'),

recaptchaEl = document.querySelector('.g-recaptcha’),

formElId = form.getId();

if ("${GoogleRecaptcha}" == "block") {

form.submittable(false);

// force resize reCAPTCHA frame

recaptchaEl.querySelector('IFRAME').setAttribute('height','140');

// move reCAPTCHA inside form container

formEl.appendChild(recaptchaEl);

}

form.onValidate(function(builtInValidation){

//code to handle the recaptcha

if("${GoogleRecaptcha}" == "block") {

if (!builtInValidation) return;

//calling the recaptcha

var recaptchaResponse = grecaptcha.getResponse();

if (!recaptchaResponse) {

recaptchaEl.classList.add('mktoInvalid');

} else {

recaptchaEl.classList.remove('mktoInvalid');

form.addHiddenFields({

lastRecaptchaUserInput: recaptchaResponse,

lastRecaptchaEnabledFormID: formElId

});

form.submittable(true);

}

}

});

});

</script>

Lawrence_Mien1
Level 2

Re: Step by step guide to recaptcha

Sanford Whiteman​ it seems it still doesn't work, so there must be something wrong with my code...

SanfordWhiteman
Level 10 - Community Moderator

Re: Step by step guide to recaptcha

What's the URL where this is running?

Lawrence_Mien1
Level 2

Re: Step by step guide to recaptcha

SanfordWhiteman
Level 10 - Community Moderator

Re: Step by step guide to recaptcha

You have an invalid quotation mark:

pastedImage_0.png

Which throws this in the console:

pastedImage_1.png

Fix that and try again.

Lawrence_Mien1
Level 2

Re: Step by step guide to recaptcha

Hmm I've made the change but it still hasn't gone through.
This is the flow steps i'm calling the webhook with, so the results are showing that it's doing nothing...


Screen Shot 2019-01-24 at 2.37.52 PM.png

SanfordWhiteman
Level 10 - Community Moderator

Re: Step by step guide to recaptcha

Trying to troubleshoot backwards from the Call Webhook activity isn't going to work. You shouldn't be looking on the Marketo side at all, except perhaps for the Filled Out Form activity (the only way to audit what was posted by the browser). The browser is where everything happens.

Here you can see you've purposely added a condition which prevents the reCAPTCHA fingerprint from being added to the form:

pastedImage_4.png

You really need someone to troubleshoot this who can quickly trace JS code and knows what's needed.