Skip to the content

Adding Google reCAPTCHA in D365 Marketing Forms

Web forms are susceptible from bot attacks. These bots automatically submit web forms with potentially harmful content. To prevent this, we use CAPTCHA to distinguish a form submission between a real human and a bot.

D365 Marketing Forms offer the CAPTCHA functionality. However, this may not be the best option to use if you’d like to implement CAPTCHA.

Downsides of OOB CAPTCHA are:

  • Hard to read letters
  • Audio is hard to understand
  • I thought I typed the letters correctly, but it still wouldn’t accept it

We’d like a CAPTCHA functionality that is easy to use, easy to understand and quick to complete

Google reCAPTCHA is a good substitute as they have different options for CAPTCHA , it is easy to use, and it is free! You just need a google account to set up the site keys. The different options are:

  • reCAPTCHA v2 – checkbox
  • reCAPTCHA v2 – Invisible
  • reCAPTCHA v2 – Android
  • reCAPTCHA v3

To know more about the differences of each reCAPTCHA, head over to Google’s reCAPTCHA documentation.

For this form, we decided to use reCAPTCHA v2 – checkbox. To add, follow the steps below:

1. Setup your reCAPTCHA settings from Google reCAPTCHA Admin site. Save the site key as this will be needed in code.

Also, add the website domain where you will be adding the reCAPTCHA element. Add this under the ‘Domains’ section on the admin site.

2. On your D365 marketing form, add the below code where you want the CAPTCHA to appear.

<div id="html_element"></div>

Note that we do not add the javascript that renders the CAPTCHA into the marketing form. For some reason, the form blocks the reCAPTCHA scripts to function properly. We need to add the reCAPTCHA scripts where you would embed the form.

For this example, we want the reCAPTCHA to appear before the Message input element and the Submit button.

Code behind of this form is:

3. Change the status of your form to ‘Go Live’. Then go to Form Hosting tab. First, add a new Form Page to generate the embed code for your form.

Fill out the required fields. Once saved, the embed code will be auto generated.

4. Next, make sure the website where you would embed the form is whitelisted. Add a new Form Whitelist record and enter the domain of the website on the Name field.

Add the domain as below:

5. On the web page where you would embed the D365 Marketing form, add the script below either within the head element (<head></head>) or before the embedded form. It is important to add this script before the embed form to ensure that the onloadCallback method has already been loaded before it gets called by another script. The script below has a timeout of 3 seconds before calling the function that would render the reCaptcha element. This is to ensure that the embedded form has already been loaded prior to calling the reCatpcha render method.

<script type="text/javascript">
     
var onloadCallback = function() {
        setTimeout(function(){grecaptcha.render(
'html_element', {
         
'sitekey' : 'your_site_key'
        });},3000);
      };

 
</script>

6. Still on the same html page, add this script below the D365 marketing form, or just before the closing body tag. This will load the google reCAPTCHA.

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

For this example, the complete code that we would insert into the website is below:

7. Reload the page where you’ve embedded the form with the reCaptcha element. It should show the D365 Marketing form with the reCaptcha tickbox as below.

Once the user has ticked the box, Google reCAPTCHA will return a token to the user which needs to be verified on the server side. This will be the next part of this blog.

 

 

 

Need more Information?

Check our Case Studies for examples of how we've helped various companies realise the benefits of Customer Engagement...

The OA Systems development team has a really detailed understanding of every layer of our business

Ayla Hutton, Technology and Projects Manager at Safety ‘n Action

OA Systems

Building C
Level 1/95 Ascot Avenue
Greenlane
Auckland 1051

Careers at OA

We are always looking for people who are excellent and passionate at what they do to join our team. If this sounds like you then we'd love to hear from you!

Need some help?

Customer Engagement can help improve customer relations, increase customer revenues, maximise cross and up-selling, create better communications and optimise your marketing.  Get in touch for a chat about how Customer Engagement 365 can help you...