WiscWeb - WordPress UW Theme - Adding CAPTCHA to Gravity Forms

This document will walk you through the process of creating a reCAPTCHA account for your site and adding the reCAPTCHA keys to Gravity Forms in your WiscWeb project. Note: reCAPTCHA is a type of CAPTCHA, developed by Google.

 What is CAPTCHA?

CAPTCHA is a simple test that allows the browser to distinguish between a human user of your form and machine input by a bot. Adding it to your site forms will allow you to restrict submissions by bots, which will cut down on the amount of spam emails that come in to your department. 

A lot of web forms offer CAPTCHA and the design of each can range from checking a box, identifying images, adding up numbers, or just retyping letters. Essentially, it is a test that is nearly impossible for a bot to successfully answer but simple for a human user to complete.

Here's an example of reCAPTCHA, the form we encourage you to use with your WiscWeb forms:

reCAPTCHA screen example

 Creating a reCAPTCHA Account

Please note that we highly encourage you to set up your CAPTCHA account using a service account rather than a personal account. That way, if you were to leave your position, your team can still access and modify the information in the account. These steps will assume you are using a service account for this process.

  1. Open a new incognito or private browsing window in your browser
  2. Navigate to https://www.google.com/recaptcha/admin
  3. Type your NetID email (netID@wisc.edu) into the "Email or Phone" field and click the blue Next button

    Google login screen

  4. You should be redirected to the Shibboleth login screen. Login with NetID credentials

    Shibboleth login screen

  5. You will be asked which account you'd like to sign into. The various options will appear in a bulleted list. Select the service account you'd like to set up the CAPTCHA account with. 
  6. You should now be logged in to Google's reCAPTCHA tool with your service account. (reCAPTCHA is a form of CAPTCHA, developed by Google). At the top of the page will be a list of the sites for which you've already setup reCAPTCHA. Scroll down and locate the section that says Register a New Site
  7. In the Label field, type in the name of the website you'd like to add CAPTCHA for

    Label field in Google's reCAPTCHA tool

  8. Choose the first option, reCAPTCHA v2, from the reCAPTCHA options list

    reCAPTCHA radio button options in Google's reCAPTCHA tool

  9. Type in the WiscWeb domain of the website you'd like to add CAPTCHA to.  (Example: yoursitename.wiscweb.wisc.edu) You do not need to include the https://

    Domain field in Google's reCAPTCHA account setup form

  10. You should also add your production domain to the list (Example: yoursitename.wisc.edu)
  11. Check the box to accept the reCAPTCHA Terms of Service

    Accepting Terms of Service checkbox in Google's reCAPTCHA setup form

  12. Uncheck the box that says "Send alerts to owners"
  13. Click the blue Register button
  14. You will be brought to a new page which should show the new reCAPTCHA keys that you will need to copy and paste into your WiscWeb project

    reCAPTCHA keys in Google account

 Adding reCAPTCHA Keys to Your WiscWeb Project

In order to be able to add CAPTCHA to your WiscWeb forms, you will have to first adding the reCAPTCHA Site and Secret Keys to your Gravity Forms settings.

  1. Copy the Site Key from your recently created reCAPTCHA account
  2. Navigate to your WiscWeb Dashboard from a different browser session. In this window, make sure you are logging in with your personal account credentials.
  3. Click on Forms from the left navigation menu
  4. Choose Settings
  5. Scroll to the bottom of the page and locate the reCAPTCHA Settings area

    reCAPTCHA fields in the Gravity Forms settings

  6. Paste in site key into the Site Key field
  7. Go back to your other browser window and copy the Secret Key from your new reCAPTCHA account
  8. Navigate to your WiscWeb browser window and paste the secret key into the Secret Key field in the reCAPTCHA Settings
  9. Click the blue Save Settings button

 Including CAPTCHA in a Form

In order to include CAPTCHA in one of your forms, you will simply need to add this field to the form in your editing environment.
  1. In WiscWeb, navigate to Forms by selecting it from the left navigation menu in the Dashboard
  2. Choose the form to which you'd like to add CAPTCHA functionality
  3. From the Editing environment, scroll down to where you'd like to add the CAPTCHA element (usually at the very bottom of the form).
  4. From the menus on the right, open the accordion for Advanced Fields

    Advanced field options in Gravity Forms

  5. Click and drag the CAPTCHA button and place it where you want in the form

    CAPTCHA button in Gravity Forms

  6. If everything is set up correctly, your CAPTCHA field will show up as expected:

    reCAPTCHA screen example

  7. Make sure to click the blue Update button to save your changes to the form

Troubleshooting

  • If you try setting up your reCAPTCHA account with only your production domain and do not include your WiscWeb domain, you will receive an error when you try pasting the code into the Form Settings in WiscWeb. Make sure to include your WiscWeb domain (yoursitename.wiscweb.wisc.edu) when setting up the account. 
  • If you do not copy and paste the entire site or secret key into the Forms Settings, you will see an error. Make sure you are copying and pasting the entire key before you continue.
  • If you do not save your changes in WiscWeb, the process will not work. Make sure to select the Save Settings button after pasting in your keys and make sure to select Update after adding the CAPTCHA button to your form.

See Also:




Keywords:CAPTCHA, spam, Gravity Forms, form, reCAPTCHA   Doc ID:86048
Owner:Jenna K.Group:WiscWeb CMS
Created:2018-09-26 10:58 CDTUpdated:2018-10-05 15:13 CDT
Sites:DoIT Help Desk, WiscWeb CMS
Feedback:  0   0