I use Gravity Forms on almost every project I work on. It can build basic contact forms quickly and easily, but it can do so much more. I’ve put together a few tips and tricks I’ve learned over the past couple years working with the plugin. Feel free to add your own in the comments.
1. Dropdown validation
Gravity Forms lets you choose which form fields are required on any given form. This gives you plenty of flexibility. However, making dropdowns required can be tricky. I like to put a ‘-‘ for the first value of a dropdown, but somehow this was passing the “required” test. I dug a little deeper and found that I had to remove the value associated with the label.
- Add a dropdown field and enter your data
- Make field required
- Check “show values”
- Remove the value for the first item in the dropdown
Now the user will be required to choose an option from the dropdown.
2. Pass data into a form from another page
Gravity Forms has a couple different ways to populate a form field dynamically. Recently I used the query string method to pass data from one page to a form on another page.
I needed some custom fields from the page to be added to the form on the next page. To accomplish this, I added the custom field data to the end of the form link as a query string. Here’s an example of the code:
<a href="/form-page/?custom_field=<?php echo get_post_meta( $post_id, 'custom_field_name', true ); ?>">Go to Form</a>
When the user clicks on the link, it takes them to the form and pre-populates the designated field with the custom field value. To get the form to recognize the query string, you have to set two values in Gravity Forms, “allow field to be populated dynamically”, and “parameter name”.
- On the form field, click the Advanced tab
- Check “allow field to be populated dynamically”
- Set the parameter name to the name of your query key, in this case “custom_field”
3. Adjust the layout of Gravity Form fields
Gravity Forms comes with some built in classes that you can add to your fields to adjust their layout on the page. Most of the time these classes will get you 95% of the way to the styling you want.
To add a class to a form field, click on the Advanced tab and paste the class name in the “CSS Class Name” field.
Note that these only work with the “top label” form layout option.
Some of the built in classes for laying out fields that I use all the time include:
Another neat trick I just used recently is creating a scrolling “Terms of Service” field. Instead of having the text take up half the page, add the following class to a section break field:
There are many more classes available on the Gravity Forms documentation. Remember you can always add your own classes and write your own custom CSS styles as well.
4. Quickly add values to dropdowns, radio buttons, or checkboxes
If you have a lot of data that you need to add to one field and don’t want to enter each one individually, Gravity Forms comes with a feature called “Bulk Add/Predfined Choices”. This can be a real time saver. I remember the first time I found it, AFTER spending over an hour entering data the hard way.
- Add a field, such as a dropdown
- Click “Bulk Add/Predefined Choices” under the choices section
- Choose an option from the left to add predefined choices, or paste in your own list of data on the right. Make sure each value is on a separate line.
- Click “Insert Choices”
Some of the time saving options include a list of Countries, States, Days of the Week, Months of the Year, and many other common options. You can even save your own data as a custom choice if you need to use the data in more than one field (or form).
5. Add a mailing list opt-in to Gravity Forms
This last one is made possible by the plethora of plugin extensions built to work with Gravity Forms. If you do a search on the WordPress repository you will find quite a few of them. Gravity Forms also has a few Basic and Advanced extensions on their site available to users with a Business and/or Developer license.
My go to email service is Mailchimp, and Gravity Forms has a Basic extension custom built to integrate with their service. After downloading it from Gravity Forms and installing it on your site, the process is pretty simple.
- Go to Forms->Settings in the WordPress admin
- Enter your MailChimp API key (here’s how to find it)
- Go to Forms->Mailchimp and create a new feed
- Choose a list from Mailchimp
- Choose the Gravity Form where you want to add the opt-in field
- Map the Gravity Forms fields to your Mailchimp fields
- Choose “Enable” for opt-in condition and choose the field that will cause the user to “opt-in”. I like to use a checkbox field for this that says something like “I would like to receive news and updates”.
- Choose whether to use a double opt-in and if to send a welcome email
I hope you found these tips and tricks helpful. They just scratch the surface of what is possible with Gravity Forms. And if you don’t have a copy of it yet, you can purchase a license here.