recaptcha v3 on page with multiple forms

[My_Nguyen]

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]

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!)

[My_Nguyen]

Do you recommend v2 or v3 on Marketo forms?

[SanfordWhiteman]

v3 for sure.

[My_Nguyen]

Can we have the hidden fingerprint field already in the form, or do we need to add it using a script?

[SanfordWhiteman]

The field can already be on the form in Form Editor. The value must be set using JS, but it's fine if the input is already there.