ReCaptcha on Marketo Guided Forms, Possible?

[Anonymous]

I've been trying to install google recaptcha on marketo's new guided forms for a few weeks now with no luck. Recaptcha works fine on the old landing pages, but not the new guided landing pages. Has anyone found a solution to this?

Nathan

[SanfordWhiteman]

Are you using my old recipe for reCAPTCHA? That works fine with either LP style.

[Anonymous]

I am sorry. I could not get it to work for guided landing pages

[SanfordWhiteman]

Can you post a link to your example page?

Also, what are doing on the back end (for verification) now? (That is, which field names are you using to send to Google and record results?)

[Anonymous]

Have you built a guided landing page with reCaptcha? If so, please share the knowledge.

To answer your question: I am a new employee and a deveoper set uo the old reCaptcha on the old LPs. So assuming everything is set up on the backend already (This is the HTML page with the form and soppsosed to be a reCaptcha just above 😞

https://enews.mckessonspecialtyhealth.com/Test-reCaptcha_ReStart--Test-002.html​

This code in the header:

<script src="//app-sj03.marketo.com/js/forms2/js/forms2.min.js"></script>

<script src='https://www.google.com/recaptcha/api.js'></script>

<script>

MktoForms2.whenReady(function(form) {

  var formEl = document.querySelector('#mckesson_recaptcha_container');

  recaptchaEl = document.querySelector('.g-recaptcha');

  // disable form until reCAPTCHA has returned a valid response

  form.submittable(false);

  // move reCAPTCHA inside recaptcha container

  formEl.appendChild(recaptchaEl);

  form.onValidate(function(builtInValidation) {

  if (!builtInValidation) {return;}

  var recaptchaResponse = grecaptcha.getResponse();

  if (!recaptchaResponse) {

  recaptchaEl.classList.add('mktoInvalid');

  } else {

  recaptchaEl.classList.remove('mktoInvalid');

  form.addHiddenFields({

  munchkinTokenLastShift: recaptchaResponse

  });   // re-enable form

  form.submittable(true);

  }

  });

});

</script>

This code where I want the reCaptcha to apppear:

<div class="g-recaptcha" data-sitekey="6LdczxYTAAAAAJ_BFNBzhdig1fd7I0ygDKZYVsUL" style="transform: scale(0.87); -webkit-transform: scale(0.87); transform-origin: 0 0; -webkit-transform-origin: 0 0;"></div>

Will putting the reCaptcha in an iframe work? How?

[SanfordWhiteman]

No, you can't inject the reCAPTCHA into an additional IFrame (nor can I see why you would want to!).

If you look in the browser console, you can quickly see 2 errors...

     Uncaught TypeError: Cannot read property 'appendChild' of null
     Uncaught Error: ReCAPTCHA placeholder element must be empty

... because you don't actually have a DIV.g-recaptcha in your markup at the time the code executes (you have a commented-out one, but that obvs. doesn't matter).

There's also weird stuff like:

     var formEl = document.querySelector('#mckesson_recaptcha_container');

That's not the form element, so using that variable name means guaranteed confusion later on. (In my original code, formEl is the <FORM> tag, as the name suggests.)

It looks like you're attempting to only lightly massage my original example code but are using different markup. That won't work: at a certain point you need to bite the bullet and write code that fits the environment. Doesn't look like a Guided vs. Free-form LP question, but rather a "not the same HTML" question!

[Anonymous]

Right. So would you happen to know the shortest path to a working landing page with recaptcha? I assumed all I need is the site key and place a little code in the right places and it would be done... Is this a simple build or something complex? 

[SanfordWhiteman]

So would you happen to know the shortest path to a working landing page with recaptcha? I assumed all I need is the site key and place a little code in the right places and it would be done... Is this a simple build or something complex?

It's not complex to my mind, but it's tricky (maybe TRICKYCON 3 on a 5-1 scale)   My demo took a 2-3 hours to build out, if I recall correctly (there's some weirdness between the 2 different APIs for getting the reCAPTCHA result code, or at least was back then). 

If you don't care about the layout of the form + reCAPTCHA area, or having an unclicked reCAPTCHA stop the form from submitting, it's extremely easy! It's integrating the two, and styling them with an effort toward integration, that is tricky.

If you've never done anything like this before with Marketo Forms, it's complex.

[Anonymous]

Right! At this point, having the recaptcha work on a guided LP is all I need.

[SanfordWhiteman]

But that's what I was saying: there's no compatibility issue with Guided vs. Free-form.

It's that you need to match the code that does the linking and embedding to your HTML markup. If your GLPT were emitting the same code as the FFLPT, it would work fine; if you broke the FFLP, it would break there, too.