Freestyle Forms: Adding CAPTCHA 2.0

Did you know CAPTCHA is an acronym for Completely Automated Public Turing test to tell Computers and Humans Apart? Typically, CAPTCHA serves-up a checkbox must be checked before a form can be submitted to prevent non-humans from submitting your forms.

You can use Google's gratis reCAPTCA product to add CAPTCHA functionality to your ion experiences. You can include Google's reCAPTCHA 2.0 product with your ion freestyle forms.

First, you'll need to pick up a secret key and a site key by visiting the link below to log-in to Google reCAPTCHA. You can log-in using an existing Google account or by creating a new one:

https://www.google.com/recaptcha/admin/create

Server scriptlet and javascript samples are attached to this support post that you can plug into your console's server scriptlet and script libraries, respectively. You'll use these attachments and follow the steps listed below to add reCAPTCHA to your ion freestyle forms.
 

Server Scriptlet

Let's add the server scriptlet to your console first and make minor adjustments to the attached server scriptlet sample.

  1. Open the "reCAPTCHA Server Scriptlet" attachment and copy the code.
  2. Click the Libraries menu in your console’s side nav and select "Server Scriptlets."
  3. Add a scriptlet category or navigate into an existing one.
  4. Click green " New scriptlet" button to add a new reCAPTCHA server scriptlet to the selected category.
  5. Give your scriptlet a title and paste "reCAPTCHA Server Scriptlet" code into the editor.
  6. Replace secretKey example value of "XXXXXX" with your secret key. Please note that the double quotes should remain wrapped around your value.
  7. Save
  8. Click scriptlet title to navigate back into the scriptlet and view the URL in your browser window. Make a note of the sscID value in the URL in your address bar. This value will be referenced in the javascript set up in the next section.

Javascript

Next, let's add some javascript to your console that will run the server scriptlet and perform CAPTCHA validation upon form submission.

  1. Open the "reCAPTCHA Page Script" attachment and copy the code.
  2. Click Libraries menu in your console’s side nav and select "Scripts."
  3. Add a script category or navigate into an existing one.
  4. Click green "New script" button to add a new script to the selected category.
  5. Give your script a title and paste "reCAPTCHA page script" code into the editor.
  6. Replace scriptletID value of X with sscID value from your server scriptlet as noted in step 8 of Server Scriptlet section above.
  7. Save

Widget

Now we are going to create a widget that will be dragged into your ion page(s) to add CAPTCHA to your freestyle form(s).

  1. Open the "reCAPTCHA Widget" attachment and copy the code.
  2. Click the Libraries menu in your console’s side nav and select "Widgets."
  3. Click green “New widget” button at the top of the page to add a new widget.
  4. Give your widget a name and select a category or create a new one for your widget.
  5. Paste "reCAPTCHA Widget" code.
  6. Replace sitekey example value of "XXXXXX" with your secret key. Please note that the double quotes should remain wrapped around your value.
  7. Save

Page Setup

With the scriptlet, page script and widget ready, it's time to bring it all together in your page.

  1. Navigate into your form page
  2. Open the script editor and add the reCAPTCHA page script to the <head>
  3. Click OK
  4. Hover over the Basics category in your creative studio and drag widget icon into your form just above the submit button.
  5. Select reCAPTCHA widget

 Your form should now be all set to use CAPTCHA to verify that a human is submitting the form and not a robot!