Re: Step by step guide to recaptcha

SanfordWhiteman · ‎04-26-2020

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

Lawrence_Mien1 · ‎01-18-2019

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 · ‎01-18-2019

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

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 · ‎01-22-2019

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 · ‎01-23-2019

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

SanfordWhiteman · ‎01-23-2019

What's the URL where this is running?

Lawrence_Mien1 · ‎01-24-2019

It's here: https://info.xsolla.com/2019q1-xsolla-aboutus-lp.html

SanfordWhiteman · ‎01-24-2019

You have an invalid quotation mark:

Which throws this in the console:

Fix that and try again.

Lawrence_Mien1 · ‎01-24-2019

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...

SanfordWhiteman · ‎01-26-2019

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:

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