Harish Gupta

How to show multiple Recaptcha on the multiple forms on the same page in Marketo

Blog Post created by Harish Gupta on Jan 5, 2020

Recaptcha is the service that protects your website from SPAM and abuse. Adding Recaptcha for one form on the page in Marketo is a very easy task but when you have to add Recaptcha on multiple forms on the same page hosted in Marketo then it's really a painful task. Use the below generic script on your template or page and add as many forms as you want, the script will replicate the Recaptcha automatically as per the form count.

 

MktoForms2.whenReady(function(form) {

var widgetId,

recaptchaEl;

form.submittable(false);

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

idForCaptcha = formEl.id + '-captcha',

$parentContainer = $(formEl).closest('.mktoForm'),

$recaptchaEl = $('<div/>').attr('id', idForCaptcha);

$parentContainer.append($recaptchaEl);

recaptchaEl = $recaptchaEl.get(0);

widgetId = grecaptcha.render(idForCaptcha, {

'sitekey' : 'Add your site key' });

form.onValidate(function(builtInValidation) {

if (!builtInValidation) return;

var recaptchaResponse = grecaptcha.getResponse(widgetId);

if (!recaptchaResponse) {

recaptchaEl.classList.add('mktoInvalid');

} else {

recaptchaEl.classList.remove('mktoInvalid');

form.addHiddenFields({

lastRecaptchaUserInput: recaptchaResponse

});

form.submittable(true);

}

});

});

Outcomes