GravityWiz – Perks – Terms of Service

Hey everyone, I love GravityWiz and the Perks they build for GravityForms. Awesome products. Especially Populate Anything. The idea that you can reach into wordpress, the database, or even different form entries and retrieve values, options, and more is really cool. Makes the forms super dynamic. I just wanted to share a couple of things about the Perk: Terms of Service. If you’ve ever downloaded anything from Apple, or any of the other big software giants, you probably noticed: they prompt you with a Terms and Conditions popup, then they require you to scroll all the way to the bottom, then – well you know the rest!

They ask you to click the checkbox (I agree… etc…), and finally the SUBMIT button is enabled or appears. If you know about these things, then you might also know that when you do submit, it’s a binding contract in a court of law. Yep!! Most of them are! and get this: they don’t require your e-signature!! Nope…. all they require is that checkbox that acknowledges you accept them, and that you read them. Hopefully you did! Well, you might be wondering (if you sell software like I do, or services) how to do something similar? Have no fear, that’s where this perk comes in.

Install the Terms and Services perk: https://gravitywiz.com/documentation/gravity-forms-terms-of-service/ read about it first. Once you install it, also install the perk: Populate Anything Believe me, you’ll want it for what I’m about to show you.

1. Open an existing form or create a new one
2. Create a set of fields: name, address, email
3. Add a HIDDEN text-area field (more on this later, as to why)
4. Add a Terms of Service field
5. Change the SUBMIT Button “conditional display” to: Show when Terms of service is Checked
6. SAVE FORM

This is your basic form, it will serve you extremely well in place of electronic signature capture. Now, let’s modify it a bit.

Why a Hidden Text Area Field?

This allows you to use Populate Anything – to READ the POST_CONTENT of a page or another post (ie: the big long HTML designed terms of service), and push it dynamically in to the Terms of Service field. It also has the benefit of storing that version of the page with the form submission, so that: if you ever look “back in history” as to whom agreed to which version, it’s there – in the form entry itself. Pretty clever eh?

Create a new page or post (doesn’t matter which)… DO NOT put any fancy videos, or graphics, or embeds in it. Instead, simply put HTML content (using your favorite page builder). But most of all, put your legal text (from your lawyer) in it and format it all as HTML. Save this post, and copy the POST / PAGE ID to your clipboard.

1. Then – go back and edit your form.
2. Edit your hidden field
3. Select Populate Value Dynamically
4. Click Filter: by POST_ID
5. Type or paste in the POST_ID of the page you saved
6. SAVE FORM
7. Name the field: Hidden Terms of Service
8. Copy the ID of the Hidden Terms of Service Field
9. Select the Perk: Terms of Service field (the one the user will see)
10. Edit the VALUE and put the dynamic variable in the Value: @{Hidden Terms Of Service:<id>} where the <id> is the FIELD ID from the hidden terms of service.
11. IMPORTANT!! Make sure your Hidden Terms of Service field is ABOVE your Perk: Terms of Service field.
12. SAVE FORM
13. PREVIEW FORM

The first time you load the preview it may take a second to load the HTML content from the database, and push it in to the terms of service display field. But it works!! you now have a dynamic Terms of Service field checkbox!! Whenever you “update the original post” (ie: edit your original terms of service), it will automatically show up in the form for the next person that needs to fill it in.

Styling can be done on the form page with a little bit of CSS. It doesn’t take much. Unfortunately though, it does require the !important; flag. The recommended practice for all your CSS should be: try not to use the !important; CSS flag if you can avoid it! We like to: Make the TERMS OF SERVICE scrolling field a bit longer, change the background color of the disabled checkbox label to a bit more light grey, and add a bit of spacing to the left of the checkbox label. The CSS is below:

/* Set the height of the terms container to 40em */
.gptos_terms_container {
    height: 40em !important; /* Adjust the height as required */
}

/* Apply a lighter grey color for the disabled checkbox label */
 .gptos_input_container .gfield_checkbox input[disabled] + label,
 .gptos_input_container .gfield_checkbox.disabled label {
    color: #bbbbbb !important; /* Lighter grey color for disabled state */
}

/* Add left margin to the checkbox label (for both disabled and non-disabled states) */
 .gptos_input_container .gfield_checkbox label {
    margin-left: 8px !important; /* Left margin for the label */
}

There are so many cool things you can do with GravityWiz perks, and GravityForms. We hope we’ve helped a bit. If you LIKE what we do, and what we offer – then drop us a comment below. We’d love to hear from you!