Forms
      Back to home
      1. Rock Content Knowledge Base
      2. Ion
      3. Forms

      Library Forms: Adding CAPTCHA to custom HTML forms

      Did you know CAPTCHA is an acronym for Completely Automated Public Turing test to tell Computers and Humans Apart? Typically, CAPTCHA serves-up an image that displays a phrase, and the respondent must accurately type this phrase into a field to successfully submit the form. This is used to prevent non-humans from submitting your forms.

      You can use Google's gratis reCAPTCA product to add CAPTCHA functionality to your ion experiences. To include a CAPTCHA tool on your form(s), you'll leverage ion's custom HTML form feature. Please note, CAPTCHA is not available for table-generated forms. Now, let's get started!

      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

      A server scriptlet and custom HTML form sample are attached to this support post that you can plug into your console. You'll use these attachments and follow the steps listed below to add a form with CAPTCHA to your ion pages. Now, let's add the scriptlet to your console, making minor updates to the sample:

      1. Open the scriptlet attachment and copy the code.
      2. Navigate to the global Libraries menu and select "server scriptlets."
      3. Add a scriptlet category or navigate into an existing one. Paste your code into the editor.
      4. Find the line of code that includes "URL += "secretkey=xxxSecretKey";" and replace "xxxSecretKey" with the one you obtained from Google, then save.
      5. Navigate back into the scriptlet and view the URL in your browser window. Make a note of the sscID value in the URL.

      Next, let's add the custom form to your ion console. Attached to this support post, you'll find a sample custom HTML form that includes the reCATCHA JavaScript outside of the form tags. 

      1. Open the custom form attachment and copy the code.
      2. In your console, navigate to the global Libraries menu and select "forms."
      3. Add a form category, or navigate into an existing one, then add a new form. Label the form, select custom HTML as the "form type" and save.
      4. Paste your sample form code into the editor.
      5. Find the line containing "Recaptcha.create("xxxCAPTCHAkey", element, {" and replace "xxxCAPTCHAkey" with the site key you've generated in Google. 
      6. Find the line containing "result = liveballScriptlet(1,"rct=json",reqStr);" and replace 1 with the "sscID" value you've noted earlier.
      7. Save.

      This example uses the "white" theme for the CAPTCHA. See Google's reCaptcha support if you wish to change the theme.

      A developer can code additional data fields into this sample form or simply use it as a reference point. If you want to save the data field values into your console, click on the pencil icon labeled "save as is" beside each field, and from the drop-down menus you'll select the corresponding ion data collection field. 

      Last but not least, let's add the form to a test creative:

      1. Navigate to a testing or sandbox Portfolio > Campaign and add a creative with a form editor.
      2. Click over the form editor and select the form with CAPTCHA you've just added to your console.
      3. Link the form to a follow-on page

      Now you're ready to test your form with CAPTCHA! 

      The ion team is available to implement this for you as a project, if you'd prefer for us to do the legwork. Feel free to contact your Account Manager if you have any questions.