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.
Note: reCAPTCHA is a type of CAPTCHA, developed by Google.
Important
- Note: This app is not a “core app” under UW-Madison’s Google Privacy Policy or Terms of Service.
- Support: Support is not available from the UW-Madison Google team for non-core apps. We recommend the following for assistance:
- Review Google documentation.
- What is CAPTCHA?
- Creating a reCAPTCHA Account
- Adding reCAPTCHA Keys to WiscWeb
- Including CAPTCHA in Gravity Forms
- Troubleshooting
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:
Creating a reCAPTCHA account
- Sign into your UW-Madison Google Cloud Platform account. (If you don't have one yet, make sure you sign up for one).
- Note: You will need to click the Console link in the upper right, after signing in.
- If you are connected to multiple accounts, select your NetID account.
- Note: You will need to click the Console link in the upper right, after signing in.
- Select APIs & Services
- Follow the instructions for preparing your reCAPTCHA account:
- Enable the reCAPTCHA Enterprise API
- Configure roles and permissions
- Navigate to IAM & Admin > IAM in your dashboard
- Edit the permissions for your personal account by clicking the pencil icon
- Add a role for “reCAPTCHA Enterprise Admin”
- Add a role for “reCAPTCHA Enterprise Agent”
- Follow the instructions for setting up the reCAPTCHA key
- Display name: Name of your website
- Platform type: website
- Domain list: Domain of your website (make sure to click “Done” after typing it in)
- Expand the “Web application firewall (WAF), Domain verification, AMP pages, and challenge” section.
- Instructions for this option are located in Google’s reCAPTCHA keys instructions
- Instructions for this option are located in Google’s reCAPTCHA keys instructions
- Enable the “checkbox challenge” toggle
- Note: Score-based challenges will not work for Gravity Forms.
- Note: Score-based challenges will not work for Gravity Forms.
- Challenge security: Medium difficulty is recommended.
- Select Create Key
- Instead of adding the
script
tag to thehead
of your site, you’ll need to choose the Use Legacy Key option - Secret key - You should now be presented a secret key for reCAPTCHA. Please save this secret key somewhere as you will need it later.
- 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.
- 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.
- 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.
- Copy the Site Key from your recently created reCAPTCHA account
- Navigate to your WiscWeb Dashboard from a different browser session. In this window, make sure you are logging in with your personal account credentials.
- Click on Forms from the left navigation menu
- Choose Settings
- Choose reCAPTCHA
- Locate the reCAPTCHA Settings fields
- Paste in site key into the Site Key field
- Go back to your other browser window and copy the Secret Key from your new reCAPTCHA account
- Navigate to your WiscWeb browser window and paste the secret key into the Secret Key field in the reCAPTCHA Settings
- 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.
- In WiscWeb, navigate to Forms by selecting it from the left navigation menu in the Dashboard
- Choose the form to which you'd like to add CAPTCHA functionality
- From the Editing environment, scroll down to where you'd like to add the CAPTCHA element (usually at the very bottom of the form).
- From the menus on the right, open the accordion for Advanced Fields
- Click and drag the CAPTCHA button and place it where you want in the form
- If everything is set up correctly, your CAPTCHA field will show up as expected:
- 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.