Okay I'm starting to catch on, and I appreciate your feedback - just a few more questions if you don't mind.
- I was under the impression that regardless of whether a bot tried to hardcode a value in the captchaResponse field, it would trigger the Marketo submission process when they submit the form, and thus overwrite that field with the correct value when submitted. If this is not the case, then I understand why everything needs to handled via serverside.
- As I mentioned, we have multiple places where we would ideally have the validation response (Adobe Analytics, paid media gtags, etc) to ensure all of these sources have the same data, otherwise for instance a paid media partner might claim they were driving real leads that turn out to be bots, or Adobe Analytics data might be inflated. Perhaps Salesforce would need to be our source of truth, but we are basically trying to avoid the need to clean multiple databases. Do you have any thoughts on this?
- I've provided an updated code snippet below which reflects how we originally used Marketo for our validation. Does this look like the correct implementation? This was the implementation where we were still getting an empty value in that hidden field, and the Marketo validation was not always working (not necessarily returning an error, just not working).
/* ======= START RECAPTCHA ======= */
// user config for recaptcha
var userConfig = {
apiKeys : {
recaptcha : "6LcmDNkaAAAAANWk6B6LIUw8z_X2_u0Fw4TxvZtX"
},
fields : {
recaptchaFinger : "lastRecaptchaUserInput"
},
actions : {
formSubmit : "form"
}
};
/* inject the reCAPTCHA library */
recaptchaLib = document.createElement("script");
recaptchaLib.src="https://www.google.com/recaptcha/api.js?render=" + userConfig.apiKeys.recaptcha + "&onload=grecaptchaListeners_ready";
document.head.appendChild(recaptchaLib);
// Add recaptcha process
MktoForms2.whenReady(function(mktoForm) {
var formEl = mktoForm.getFormElem()[0],
submitButtonEl = formEl.querySelector("button[type='submit']"),
moveEl = formEl.querySelector('.google-recaptcha-disclaimer');
// move disclaimer text row below submit button
[].forEach.call(formEl.querySelectorAll('.mktoForm > .mktoFormRow'), function(row) {
!row.contains(moveEl) || formEl.appendChild(row);
});
/* pending reCAPTCHA widget ready */
submitButtonEl.disabled = true;
/* pending reCAPTCHA verify */
mktoForm.submittable(false);
mktoForm.locked = false;
mktoForm.onValidate(function(native) {
_satellite.logger.log('In form onValidate function, initializing ReCAPTCHA')
if (!native) return;
grecaptcha.ready(function() {
grecaptcha.execute(userConfig.apiKeys.recaptcha, {
action: userConfig.actions.formSubmit
})
.then(function(recaptchaFinger) {
var mktoFields = {};
if (mktoForm.locked == false) {
_satellite.logger.log("primary recaptcha response resolved");
mktoForm.locked = true;
mktoFields[userConfig.fields.recaptchaFinger] = recaptchaFinger;
mktoForm.addHiddenFields(mktoFields);
mktoForm.submittable(true);
mktoForm.submit();
} else {
_satellite.logger.log("secondary recaptcha response resolved");
}
// save token in data element for reference in googleEvent helper
_satellite.setVar('recaptchaToken', recaptchaFinger);
});
});
});
});
var recaptchaListeners = {
ready : function() {
MktoForms2.whenReady(function(mktoForm){
var formEl = mktoForm.getFormElem()[0],
submitButtonEl = formEl.querySelector("button[type='submit']");
submitButtonEl.disabled = false;
});
}
};
Object.keys(recaptchaListeners).forEach(function globalize(fnName){
window["grecaptchaListeners_" + fnName] = recaptchaListeners[fnName];
});
/* ======== END RECAPTCHA ======== */
.png)