Gravity Forms Terms of Service Setup with Conditional Logic

THIS POST MAY CONTAIN AFFILIATE LINKS. PLEASE READ OUR DISCLAIMER FOR MORE INFO.

This tutorial will show you how to create a custom “Terms of Service” field with conditional logic, however, the latest version of Gravity Forms eliminates the need for this hack. They have now built into core a “Consent” field which provides a solution to this same problem.

Image taken from Gravity Forms Beta 2.5

Gravity Wiz (paid plugin) also has a “perk” called, “GP Terms of Service” that adds this functionality to the Gravity Forms Advanced Fields as a ready to use field.

This is a snapshot of what it looks like, you can also test out the demo here.

This tutorial is very basic and very simple solution.

Originally, this tutorial was created to eliminate the need for any additional plugins, but again, it will still work today, if you wish to have a better functioning terms of services field than the built in option.

If your terms of service is really long, you may just want to link to a separate page on your site, or use the Gravity Wiz add-on mentioned above, it will allow for scrolling.

The first steps are to create your form with Gravity Forms (not shown 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

gravity forms terms of service

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.

2. Content
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.

3. Margins
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.

gravity forms HTML Block

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.

gravity forms terms of service

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.

gravity forms terms of service

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.

gravity forms button conditional logic

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
gravity forms button conditional logic

Be sure to use the comments if you have any questions or need some help getting this working.

Please note: The Gravity Forms Plugin is required for this tutorial, and it is not a free plugin.

0 0 votes
Article Rating
Subscribe
Notify of
guest

20 Comments
Inline Feedbacks
View all comments
Matt
Matt
4 years ago

Thank you for this great tutorial. Helped me do a quick fix on my site in just a few minutes. Much appreciated!

Robert
4 years ago

When i add the conditional logic to the send button, my whole form just disappears from the page. Any ideas?

Mike Sewell
5 years ago

This worked great for my forms, thanks for the tip!

Kieran McMutrie
Kieran McMutrie
6 years ago

Thanks really good tutorial just what I wanted

Dima Yaremenko
Dima Yaremenko
6 years ago

I would appreciate if you would delete my previous comments. Here is the screenshot of the code.comment image?dl=0

Dima Yaremenko
Dima Yaremenko
6 years ago

Thanks! Just want to share a code that will wrap your terms so it will look better. Simply replace YOUR TEXT GOES HERE with your Terms.

YOUR TEXT GOES HERE

Dima Yaremenko
Dima Yaremenko
Reply to  Dima Yaremenko
6 years ago

sorry, the code is invisible in the comment. if you know how to fix it, please do.

Dave
Dave
7 years ago

Thanks for the guide, but as you see, when you have a required field for checkbox without label, there’s is a ugly Asterix (*) at the top of the field, how do you put the asterix beside the option so it doesn’t look this ugly?

Chris Eggleston
Chris Eggleston
Reply to  Dave
7 years ago

Hey Dave,

Have you tried it with the new Placeholder feature? I wrote an article on how to use placeholders in the latest gravity forms plugin version => https://chrisegg.com/use-gravity-forms-placeholders/. Here is the form with required fields not showing Asterix. https://gformshacks.com/gravity-forms-placeholders/

– Chris

Ryan Rhoades
7 years ago

Thanks so much for this – really helped me figure out a problem that I was stuck on for over a month.

Quick question though – is there a way to make it so that when the form is submitted, that it doesn’t reload the page the form was embedded in and have it stay stuck at the top of the page?

The form I’m using is at the bottom of the page but if for example the user does not enter one of the required fields, they have to click “submit” and then scroll the whole way back to the bottom of the page in order to see that they had missed something.

I’d rather not have an entirely separate page used for just the form but I’m stumped on how to fix this.

Thoughts?

Chris Eggleston
Chris Eggleston
Reply to  Ryan Rhoades
7 years ago

I’m glad it was helpful, sorry you didn’t find it sooner!

Did you enable Ajax when adding the form to the page? This allows the form to display errors and to be submitted without requiring the page to load.

If you have not enabled ajax on the form, it’s a simple fix in the gforms shortcode on the page. Just make sure ajax=”true” is in the shortcode like below.

[gravityform id="1" name="Example Form Code" title="false" description="false" ajax="true"]

You can test it here => https://demo.chrisegg.com/gformshacks/sample-page/

-Chris

jennifergoddard
jennifergoddard
7 years ago

Thanks, this was extremely helpful and clear. Trey raises a good point, but I think unless you change TOS frequently, it should be easy to keep track by noting the date of submission and comparing to date of TOS change.

Trey Mitchell
Trey Mitchell
7 years ago

Thanks for sharing. The only problem I see with this is that Gravity Forms doesn’t keep the HTML field as a submitted form field. So if your Terms of Service change, there’s no record of what each person agreed to. I added a hidden field with the TOS statement in it. Also not ideal because I have to be sure I remember to update both any time it changes.

John
John
8 years ago

Hello Chris:

The information above is great, however I am trying to mimic a behavior from CF7 where the submit button is visible but not ‘clickable’ until a checkbox is checked. I can see the absolute certainty of hiding the button altogether until what you want is selected, but I like having the submit button visible. Any ideas?

Thanks.

Debora Crosby
8 years ago

THanks you Chris! This tutorial was EXACTLY what I was looking for. Nicely done.

Chris Eggleston
Reply to  Debora Crosby
8 years ago

Hi Debora, you’re welcome. I’m glad it was useful! If there are any other specific tutorials you need for gravity forms let me know and I’ll get them out for you!

Ed Coyne
Ed Coyne
8 years ago

This will work just fine. Thanks, Chris!

Chris Eggleston
Reply to  Ed Coyne
8 years ago

Great!