recaptcha v3 on page with multiple forms

Question

I'm using this code to implement multiple forms on a page:
 
var arrayFrom = Function.prototype.call.bind(Array.prototype.slice);
var MKTOFORM_ID_ATTRNAME = "data-formId";

MktoForms2.whenRendered(function(form) {
  var formEl = form.getFormElem()[0],
    rando = "_" + new Date().getTime() + Math.random();
  arrayFrom(formEl.querySelectorAll("label[for]")).forEach(function(labelEl) {
    var forEl = formEl.querySelector('[id="' + labelEl.htmlFor + '"]'),
        forElName = $(forEl).attr('name'),
        labelID = "Lbl" + forElName + "_" + rando;
    if (forEl) {
      labelEl.htmlFor = forEl.id = forEl.id + rando;
      labelEl.id = labelID;
      $(forEl).attr('aria-labelledby', labelID);
    }
  });
});

And also this code to add a hidden field to the forms:
 
var arrayFrom = Function.prototype.call.bind(Array.prototype.slice);
var MKTOFORM_ID_ATTRNAME = "data-formId";

arrayFrom(config.formIds).forEach(function(formId) {
  var loadForm = MktoForms2.loadForm.bind(MktoForms2,config.podId,config.munchkinId,formId),
    formEls = arrayFrom(document.querySelectorAll("[" + MKTOFORM_ID_ATTRNAME + '="' + formId + '"]'));
  (function loadFormCb(formEls) {
    var formEl = formEls.shift();
    formEl.id = "mktoForm_" + formId;
    loadForm(function(form) {
      form.addHiddenFields({ lastFormURL : window.location.href.replace(/https?:\/\//i, "") });
      formEl.id = "";
      if (formEls.length) {
        loadFormCb(formEls);
      }
    });
  })(formEls);
});

I'm trying to add recaptcha v3 to the forms now using this example: https://codepen.io/figureone/pen/JQPgPE
Can anyone help me get this code to work on multiple forms and combine it to the existing code that's being used above?

SanfordWhiteman · Answer

Since you're using multiple forms, you have to

move the injection of the reCAPTCHA JS library, and its own ready listener, outside the Forms 2.0 whenReady event, or at least mark that the lib has already been injected and don't inject it again
make sure all the forms' submit buttons are disabled until the central/shared reCAPTCHA object says it's ready

It's not difficult, but tbh... if this doesn't make sense right off the bat, you should hire a developer to implement it for you. Making sure multiple form event listeners cooperate is exponentially harder than just copying-and-pasting the code for a single whenReady function.

(Also, of course, you need to do the reCAPTCHA v3 integration with Marketo Smart Campaigns, which isn't the same as the v2, or the reCAPTCHA won't be doing anything!)

Sign up

Login with SSO

Login to the community

Login with SSO