Integrate a custom captcha service with Customer Insights - Journeys forms

Customer Insights - Journeys forms allow you to use custom captcha bot protection to validate form submissions. This article gives an example of how to integrate Google reCAPTCHA. The flow is similar for other captcha services. The steps in this article apply to marketing and event registration form types.

The process consists of these steps:

1. Add reCAPTCHA to the form.
2. Add the captcha text value to the form submission once the form is submitted.
3. Activate reCAPTCHA plugin and safely store the private key.

Step-by-step example: Integrate Google reCAPTCHA

1. Add reCAPTCHA to the form

1. Create a form in the Customer Insights - Journeys form editor.

2. Add a data-validate-submission="true" attribute to the <form> element, which enables custom validation on the form submission:

3. Add a <div id="g-recaptcha"> in the form as placeholder for reCAPTCHA. This div ID is used as a reference later. You should put the placeholder between the last field and submit button.

4. Publish the form and embed the form into your website.

5. Edit the page where the form was embedded. Add the script provided by Google into the page header. This script loads the reCAPTCHA with the onLoad callback parameter. This callback is called as soon as the captcha is loaded.

   <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback" async defer></script>
   

6. Add the onLoadCallback function:

   function onloadCallback() {
       grecaptcha.render('g-recaptcha',
       { 
         sitekey: '{sitekey}',
       });
   }
   

   Replace the {sitekey} placeholder with the one provided by Google. This callback function renders the reCAPTCHA inside the placeholder <div id="g-recaptcha"> you created earlier.

7. Register the onloadCallback function to be called by the form loader:

document.addEventListener("d365mkt-afterformload", onloadCallback);

2. Add the captcha text value to the form submission

Once the form is submitted, the g-recaptcha-response parameter is added automatically to the form submission. In the next steps, you'll build a plugin that hides this value, as it will be added to the ValidationOnlyFields list in the response object returned by the plugin code.

3. Activate reCAPTCHA plugin

1. Navigate to Settings > Form settings > reCAPTCHA.
2. Enter the private key. Your private key is saved in a secure storage location.
3. Activate the plugin by switching the Status toggle.