WiscWeb - 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. These instructions assume that you already have a Google Cloud Platform account setup for your group and that your website is already launched.
Note: reCAPTCHA is a type of CAPTCHA, developed by Google.

Important

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 web 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.

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

reCAPTCHA screen example

Creating a reCAPTCHA account

  1. Sign into your UW-Madison Google Cloud Platform account. (If you don't have one yet, make sure you sign up for one). 
    1. Note: You will need to click the Console link in the upper right, after signing in.

      The Console link appears just after the language dropdown, in the top left corner of the screen.

    2. If you are connected to multiple accounts, select your NetID account. 

  2. Select APIs & Services



  3. Follow the instructions for preparing your reCAPTCHA account:

    1. Enable the reCAPTCHA Enterprise API
    2. Configure roles and permissions

      1. Navigate to IAM & Admin > IAM in your dashboard
      2. Edit the permissions for your personal account by clicking the pencil icon
      3. Add a role for “reCAPTCHA Enterprise Admin”
      4. Add a role for “reCAPTCHA Enterprise Agent”

  4. Follow the instructions for setting up the reCAPTCHA key
    1. Display name: Name of your website
    2. Platform type: website
    3. Domain list: Domain of your website (make sure to click “Done” after typing it in)

  5. Expand the “Web application firewall (WAF), Domain verification, AMP pages, and challenge” section.
    1. Instructions for this option are located in Google’s reCAPTCHA keys instructions


      The Web Application Firewall section is a dropdown below where you add the domain to the domain list.

  6. Enable the “checkbox challenge” toggle
    1. Note: Score-based challenges will not work for Gravity Forms.


      The checkbox challenge is a toggle that appears below the "Disable domain verification" toggle

  7. Challenge security: Medium difficulty is recommended.

  8. Select Create Key

  9. Instead of adding the script tag to the head of your site, you’ll need to choose the Use Legacy Key option


    The legacy key option lies within the Integration tab.

  10. Secret key - You should now be presented a secret key for reCAPTCHA. Please save this secret key somewhere as you will need it later.
    1. If you need to find it again, it is located in reCAPTCHA Enterprise > Dashboards (under your “Enterprise Key” box) > Integration (tab) > Use Legacy Key Link. This will pop up a new window where you can re-copy this key.

      The Legacy Key link will bring up a modal window that overlays the screen. There will be an option there to copy your new legacy secret key.

  11. Site key - Navigate back to the reCAPTCHA Enterprise area. Your site key is the “Key ID” listed in the “Enterprise Key” box. Please save this site key somewhere as you will need it later.

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. Choose reCAPTCHA

  6. Locate the reCAPTCHA Settings fields

    reCAPTCHA fields in the Gravity Forms settings

  7. Paste in site key into the Site Key field

  8. Go back to your other browser window and copy the Secret Key from your new reCAPTCHA account

  9. Navigate to your WiscWeb browser window and paste the secret key into the Secret Key field in the reCAPTCHA Settings

  10. 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 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.


Keywords:
CAPTCHA, spam, Gravity Forms, form, reCAPTCHA, email 
Doc ID:
86048
Owned by:
Jenna K. in WiscWeb
Created:
2018-09-26
Updated:
2024-07-30
Sites:
DoIT Help Desk, WiscWeb