Some time ago I posted, Awesome Add-ons for the Gravity Forms Plugin, and one of the plugins I recommended was, Gravity Forms Terms of Service Field. Ed recently commented that this plugin was no longer available.
This was a nice add-on that allowed you to, add a Terms of Service field that can disable the Submit button that will re-enable when the user scrolls through the Terms of Service.
I did a quick search and found two other plugins that would provide similar results.
Additionally, I thought I’d show you how to accomplish this without an additional plugin.
This tutorial is very basic and very simple solution.
If your terms of service is really long, you may just want to link to a separate page on your site.
The first steps are to create your form with Gravity Forms (not included in this tutorial).
Now that you have your form all setup, you need to add the terms of service section and setup the conditional logic to control the button availability.
Step 1: Add an HTML Block to your form
While in the form editor. On the right side of the screen you’ll see a section titled, “Standard Fields”. Open this section by clicking on the title.
Once the items are displayed, you want to click the “HTML” button.
Step 2: Setup the HTML field to function as your Terms of Service
Open the HTML block, and fill out the three available fields.
1. Field Label
This is just for admin use. And will not be displayed on your website.
This section is where you will place your Terms of Service. Remember this section accepts HTML so your can layout your content however you’d like.
If you want the content to automatically align with your other form fields, do not check the box! If you are using a bunch of HTML to layout your content, you will likely want to check this box to eliminate any display issues.
Step 3: Add a checkbox field to your form
From the “Standard Fields”, you’ll click on the “Checkboxes” button to add a new checkbox field
Step 4: Setup the checkbox field
In this step, you’ll setup 3 fields in the “Properties” section and one field in the “Advanced” section.
1. Properties: Field Label
Leave this field black. This would be used to display a title for this field, but this checkbox is an extension of the HTML block setup in step 2 so it doesn’t really need a title.
2. Properties: Choices
Delete all but one “choice” by clicking on the minus button to the right of the field.
Then, in the remaining option, you’ll want to type your message, “I have read and agree to the Terms of Service”.
3. Properties: Required
This is very important. When you are using a terms of service field it is usually because it is an important element. Therefore, you want to make sure this field is required. This will prevent anyone from submitting the from without first checking the box.
1. Advanced: Admin Label
This field is for your sanity. Number 1 above, “Field Label”, was left blank, so when a form is submitted, the submission for this field would say something like Checkboxes: Field ID 23.
Step 5: Enable Conditional Logic for the submit button
To add a layer of protection, to prevent anyone from submitting without actually accepting your terms, you can hide the submit button until the checkbox we just setup in step 4 is checked.
1. Switch to the Form Settings Screen
To do this, scroll to the top of your screen and look for the white navigation bar with option “Form Settings”, then click that link.
2. Set conditional logic
Scroll down to the “Form Button” section and make the following changes.
a. Check the box to “Enable Conditional Logic”
b. Set your settings as shown
c. Select your checkbox field
d. Make sure “is” is selected
e. Your checkbox field should automatically be selected
Be sure to use the comments if you have any questions or need some help getting this working.
Please note: The Gravity Forms Plugin (affilink) is required for this tutorial, and it is not a free plugin.