My name is Alastair Lee and in this video, I’m going to look at the process of adding a CAPTCHA to your Adobe Experience Manager adaptive form. There are two types of CAPTCHAs that you can add to your forms including the built-in service offered by Adobe Experience Manager, as well as Google’s reCAPTCHA service. If you’d like to include Google’s reCAPTCHA service, then your best starting point is Google.com/recaptcha There you can sign up for an API key. You’ll get a client secret and a client key. She’ll need those to set up your cloud service. Let’s take a look at that now by logging into Adobe Experience Manager I’m gonna click on the tools icon, go to deployment and then cloud services and scroll right to the bottom, where I can see the Google reCAPTCHA cloud configurations. I can see that I’ve already got mine set up, if we take a look at it, it’s simply a site key and a site secret. You’ll get both of those from Google’s site. Once you’ve got those entered and set up as a cloud service you can start adding CAPTCHAs to your forms. Do that by navigating to forms and then forms and documents. I’ve already got a start of a form here, so Newsletter Registration so I’ll select this and click Edit.

I’ve got my side panel open. Let’s take a look at the components that I can add to my form. You can see here we’ve got a CAPTCHA component You can simply drag and drop that directly onto the form itself. If I click to configure this CAPTCHA component, there are a few different options including the CAPTCHA service that I’d like to use. Now this is set to default which we use the Adobe Experience Manager built-in CAPTCHA service. Take a look at that first. We can also select reCAPTCHA, if we prefer to use Google service. In addition to setting the CAPTCHA service I can also set the validation messages here in the configuration, as well as the element name and title. Once that’s done you can click OK, If you’ve made any changes, And we’ll take a look at this by previewing the form.

You can see here it’s a very basic form I’m just gonna fill out my name and email address and we’ve got a CAPTCHA we can reload that, If it’s not clear and this CAPTCHA will validate. So if I fill out something that doesn’t match the CAPTCHA and try to submit Adobe Experience Manager comes back and validates that, telling me to fill it in again. Let’s try once again with a correct CAPTCHA and hit submit. You can see here that’s worked just perfectly. Let’s go back and edit this form to add Google’s CAPTCHA service. So I’ve got my CAPTCHA component selected, I’m gonna go ahead and configure that, We’ll change this from default to reCAPTCHA. You can see there are a couple of different options here. First I can point it to my cloud service. So if you’ve got more than one set up, you can select your cloud service from this dropdown list box. Then you can select the style of the reCAPTCHA, either normal or compact. Once those are set up and you’ve got your validation messages set click OK to save your changes. We can go back and preview this form.

Once again, I’ll just enter some information here.

You can see Google’s reCAPTCHA is available here. I’ll click to indicate I’m not a robot. In some cases depending on how you’ve set your security over on Google’s site, you may be presented with a test but you can see here that we’re able to validate the CAPTCHA, just as we were with AEM’s built-in service. That’s how to add a CAPTCHA to an AEM adaptive form. Thanks for your time.