Gravity Forms is a premium forms solution for your WordPress site. Using Gravity Forms isn’t difficult, but getting the most from the tool takes some understanding of its advanced capabilities.
Why did we take the time to spell out all the ways you can use Gravity Forms?
We believe that an effective website is a fulcrum that your customers and your business use to maximize value. We call this Hub and Spoke Marketing. The hub is the website and marketing channels are the spokes.
Your forms are the most common interaction device on the website. They are the point of the fulcrum. As such, you want forms to be as useful as possible.
We use and recommend Gravity Forms. It’s an excellent plugin that’s easy to use for simple applications like Contact Us or a subscriber form. It’s also a powerful tool that can be used to solve many advanced UI challenges.
To make the most of this prime opportunity, here are the points we’ll be covering:
- Setting Up a Simple Gravity Form
- Using Gravity Forms Ready Classes
- Building a More Complex Gravity Form
- Confirmation Choices
- Setting Gravity Forms Controls
- Connecting Gravity Forms With MailChimp
- Using Gravity Forms and Stripe For a Website Shopping Cart Alternative
- Using Dynamic Content in Gravity Forms
Setting Up a Simple Gravity Form
If you host your website on our server, then we will continue to pay for the license. How cool is that?
This video goes through the steps required to create a simple form. As with most things in WordPress, there are several ways to add a new form. The first screen asks you to give the form a name. Call it something descriptive. You can easily change this later.
Gravity Forms has several field groups. In most situations, the Standard and Advanced Field groups are all you need. There are other field types as well. We will touch on them later in this post.
Open up the field group that has the field type you are using. Name and Email are both in the advanced group. I’ve no idea why this is this way.
You can add a field to the form by clicking on the button label in the field group or you can drag the field button over to your form to position the field in the form. If you click to add the field it will be added to the bottom of the form. Fields can be repositioned by clicking and dragging.
When your form is complete, click Update to save it.
Congratulations, it’s a form.
Styling Gravity Forms Layouts – Ready Classes to the Rescue
Styling Gravity Forms, especially how the fields are laid out within the form, gives forms a significant usability boost. Gravity Forms don’t look too bad out of the box, but some thought and consideration into how the fields are laid out within the form will make it easier to use.
The first thing is the layout. The next is asking for the information you need when you need it. We will dig into this in the next post. For now, we will talk about how to layout a form using Gravity Forms.
A fundamental principle of UX is “Don’t make me think.” Accepting this, you don’t want users to struggle with the form. You want them to immediately see what’s required and understand how they should respond.
The default Gravity Form layout stacks the fields. There are times when this is fine. Not many times, but I’m sure it happens.
Rather than stacking the fields fill the area with form fields in a way that makes it easy to see what information is needed and how to provide it. Fortunately, styling Gravity Forms with Ready Classes lets you do this.
So what are Ready Classes?
They are labels that CSS uses to tells the browser where and how to position something. The complete list of Gravity Forms Ready Classes can be found by following this link: Gravity Forms Ready Classes.
Styling Gravity Forms Fields – Columns Ready Classes
Within the Appearance tab, you will find a field labelled Custom CSS Class. This is where you add the Ready Class.
You can choose between two columns (Halves) and three columns (Thirds). The logic is obvious: gf_left_half and gf_right_half will position the fields in a row of two, one left and one right. gf_left_third, gf_middle_third and gf_right_third sets up a row with three fields in it.
Styling Gravity Forms – List Ready Classes
In addition to columns for fields, there are Ready Classes to convert lists into columns. What would be more appealing, a single column of twelve radio buttons with white space to the right or would it be more appealing to have the twelve radio buttons laid out in three columns of four? With the Gravity Forms List Ready Class, gf_list_3col, this is possible.
There are multiple column List Classes: _2col, _3col, 4, 5 6 and inline, that you can use. “Inline” places the list items in a line under the field’s label.
There are multiple column List Classes: _2col, _3col, 4, 5 6 and inline, that you can use. “Inline” places the list items in a line under the field’s label.
Another handy Ready Class is List Hight, gf_list_height_25. This Ready Class only works with multiple choice/checkbox lists. It adds padding to the height value of items in your list.
Handy when you have items hanging because they are of uneven height. List hights are available from 25px through 150px in increments of 25.
Other Gravity Forms Ready Classes
But wait, there’s more!
gf_scroll_text – a Ready Class that adds a scroller to the Section Break. This is handy for adding Term & Conditions to a form.
gf_hide_ampm – a Ready Class that hides the am and pm in the time field. This manages the am and pm labels on the form.
gf_hide_charleft – a Ready Class that hides the characters left indicator on the paragraph form when using the max characters control.
An attractive form is friendly. A friendly form is more likely to be completed. Put some thought into styling gravity forms, use the existing tools to make it easy for users to provide the information you need.
Building a More Complex Gravity Form
First and foremost, when designing your form consider user experience. Forms, especially when the website’s primary objective is conversion, are the point of the fulcrum.
Getting web forms right is vital to an effective website. Forms are your main point of interaction. There are four guiding principles to keep in mind:
- Keep it human
- Make it easy
- Efficient forms convert
- Show them the way
Keep it Human – Approachable Forms Convert
A friendly form is much more likely to be completed. In the minds of many consumers, friendly equals trustworthy. Keep it fun. Use the HTML block to insert images to highlight and emphasize. Explain the steps in a human voice. In essence, design your website forms as if you are a human, not a CPA.
Make it Easy – Ask for Information in a Logical Way
Simple is better than complex. Ask for information that’s sensible given the situation. Ask for the information in a logical order and avoid unnecessary technical jargon. Use the field description to explain how you will be using the data and how it will benefit the user.
Efficient Forms Convert – Design to Save Time
Vertical/single column layouts work well. This is especially true when the form is presented in a lightbox. Don’t ask for information that isn’t needed. Use conditionals to save time. If you are asking for data that isn’t required unless certain conditions are met, then use conditional logic only to show the field when the condition is met.
Show Them the Way – Adding Guidance Makes Complex Forms Less Scary
Add messages using the HTML block to guide users. Tell them where they are in the form and explain why you need the information.
Use section breaks to separate sections. The Section Break description can be used to introduce the next section and it can be used to explain what’s going to happen.
Use the Gravity Forms Page Break function to break long and complicated forms into pages. The form won’t be any shorter, but by breaking it up into bite-sized chunks, it will be less intimidating. And there’s a handy progress bar option that helps you communicate how much more is in front of users.
Even a simple thing like a horizontal rule can help users stay oriented.
When a user submits a Gravity Form the subsequent confirmation message is a prime opportunity to extend their engagement. Their attention as at a peak level, they’re looking for confirmation that they’ve done the right thing. Give it to them. They’re also looking for clarity regarding the next steps.
As a result, if you ask, they will likely do something else for you. It doesn’t matter what the form is, they’ve taken an action, which suggests a commitment to a decision and to your brand. Don’t waste this opportunity with a default confirmation message.
Under Settings > Confirmation > Edit, Gravity Forms gives you three options for confirmation: Text, Page or Redirect. We will take each in turn.
This is the text message that pops up on the screen when a form is submitted. There is a default confirmation message that you can and should edit, “Thanks for contacting us! We will get in touch with you shortly.”
Rewrite this message in the brand’s voice and ensure it makes sense in the context of the form being submitted. For example, if the user is requesting to be contacted by a salesperson, the confirmation message should say something about a sales representative will respond within so many hours.
You can add images, a CTA of some sort, perhaps a button, or a sales offer. There are lots of things that can be done. Use this high engagement opportunity to create value for your customers and for your business.
When you insert the form in a page, enable Ajax and the page won’t move around when a user clicks Submit. If you don’t do this, there’s a risk that the confirmation message will appear below the fold when the page renders after the form is submitted.
This is also the place to add a confirmation pixel if you are using one.
This allows you to use all the real estate that a page provides to maximize the impact of the Gravity Forms confirmation process. Use the hero area of the page to deliver your confirmation message. Say thank you with enthusiasm.
You can also invite them to learn more, to consider other products or services, complete another step in a process or another form. The options are endless.
One caveat, whatever you decide to do, be sure that it’s creating value for customers. This doesn’t mean you can’t sell more stuff, but make it relevant to what they’ve just done.
This is similar to page confirmation but different in several ways. You can use this to send users to another destination, say a Facebook group or page or another website altogether. The destination should be introduced in the form and/or relevant to the form they have just completed, but in some circumstances, it can be an effective choice.
You’ll want to be careful about how you use this, you don’t want to create confusion. Users may not believe that the form was submitted and return to your website to submit the form again. This is annoying and can lead to duplicate entries.
Setting Gravity Forms Controls
It’s important when you are designing and eventually building a form that you consider how the form will be used, how it will offer value for website visitors and for your business. Both constituents are important, there should be a balance between the two interests. If it comes down to it, err on the side of your visitors’ interests. They are, ultimately, the most important.
Keep the form as simple as possible. Don’t make users have to think about what you mean or what you are asking. Don’t make it frightening or too intrusive. Don’t have them ponder, “Look at all the information they want. I don’t have time for this.”
So let’s take a closer look at how to set Gravity Forms controls.
General Forms Controls
Once you have added a field to a form you have three control areas: General, Appearance and Advanced. This structure is used consistently so you’ll see the same three options in every field type.
The General area has a three-part structure: Controls, Options, and Rules. This is also used consistently. The details will be specific to the field type but the approach is the same.
The Field Label and Description will appear in the form as written. The options area is where the details are managed. At the bottom, you will see the Rules associated with the field type. There is always the option to make the field required. Occasionally, depending on the field type, there will be other rules here.
The Appearance tab lets you manage how the field type appears within the form. Each field type will give you options that are appropriate to the type. Generally, the functions are self-explanatory. For example, in this case, a Name field type, you can prompt users with default content.
You will also have the option to override some global setting here. For example, the default Field Label Visibility is set in global form settings. The same is true for Description Placement and Sub-Label Placement. Within the form’s Appearance controls you can override the default settings.
The Advanced Controls are, well, advanced. For the most part, you won’t need to touch them.
There are two controls under Visibility that you will use more frequently.
The first controller determines whether or not the field will appear on the form.
There are times when you want data, the page URL for example so that you understand the entry’s context, but you don’t want this information displayed in the form on the page. To accomplish this, you would change the controller from Visible to Hidden.
The second allows you to display the item based on conditions. For example, if they indicate that they want something, then ask them to select a color.
Connecting Gravity Forms With MailChimp
There are four steps in connecting Gravity Forms with MailChimp. At first glance, this may seem like a lot of steps, but it will be worth it. You’ll connect your favorite form builder with your preferred email service provider. The steps are as follows:
- Add the Gravity Forms MailChimp Add-On to Gravity Forms
- Connect Gravity Forms and MailChimp using the MailChimp API key
- Creating Groups in MailChimp
- Connecting a Form to MailChimp
Step One: Add the Gravity Forms MailChimp Add-On to Gravity Forms
Go to Add Ons in the Gravity Forms menu, scroll down about halfway until you see the MailChimp card. Click Install and follow the instructions.
Once the Gravity Forms MailChimp Add-On is installed and activated, go to Settings in the Gravity Forms menu. A principle followed by Gravity Forms and many other well-made plugins is to set global connections in the plugin settings screen.
Gravity Forms does this with MailChimp. In Settings, you will add the MailChimp API key. To get the API key, you will need to jump over to MailChimp. There’s a handy link in the Gravity Forms settings screen that makes this easy.
Step Two: Connect Gravity Forms and MailChimp using the MailChimp API key
Over in MailChimp, open your account settings from the Account dropdown menu.
Select Extras and then select API keys. Click the button to Create a Key and then copy your new API key. Head back to Gravity Forms and paste the API key in the field labeled MailChimp API Key. Click Update Settings and look for a green checkmark. This tells you that your website and more specifically, Gravity Forms, is connected to your MailChimp account.
Step Three: Creating Groups in MailChimp
MailChimp wants you to only have and use one list. They do this for many good reasons. The main one is that it will save you money. Multiple lists mean there is a good chance you will have duplicates. MailChimp charges for the number of subscribers in your list, so if you have duplicates you will be paying for each record more than once.
To help manage your list, MailChimp uses Groups. A record can be in multiple Groups. You can use groups to create segments and use segments for targeting email campaigns and email automation. So return to MailChimp and get grouping.
Leave the Account dashboard, select or create your list, and look for Groups under Manage Contacts. Select Create a Group and you will be shown a screen with a number of options. You need to create a group in MailChimp for the contacts generated by the form before connecting a specific form to your MailChimp account.
The radio buttons are there for MailChimp generated forms so they’re not important to you. I usually select the last one, “Don’t show these groups in my Signup Form.” You want to think about how your groups are organized. Since this is for forms on your website, I usually call the group category Source and then use the form name for the group names. You can use this approach or another one that works for you, but be consistent and try to make the labels self-explanatory. You will thank me later.
Step Four: Connecting a Form to MailChimp
Now that we have Gravity Forms and MailChimp connected globally, and we’ve created a Group in the MailChimp list, it’s time to join a form to MailChimp. In Gravity Forms, select or create a form, and under Settings look for MailChimp. In the MailChimp settings screen, you will create a new feed to connect this form to your MailChimp list.
First, you’ll give the feed a name and then select the list you want to connect to. The screen will present the fields that are available in MailChimp and ask you to map the form fields to the fields in MailChimp.
Note that the previously created group category and group name appear as a choice. Make the appropriate selections, and you’re good to go. You have now connected your form to MailChimp and in addition to being stored in the Gravity Forms database, contacts will be automatically transferred over to MailChimp and placed in the appropriate group.
Using Gravity Forms and Stripe For a Website Shopping Cart Alternative
Gravity Forms and its Stripe extension can be used to create a simple website shopping cart alternative. It’s true. You don’t need to pay for and wrestle with a shopping cart.
If you have less than 20 items, you can build a website shopping cart using Gravity Forms and the Stripe payment gateway extension. This can be done with other payment gateways as well. You can manage products and subscriptions. Taxes and shipping as well. This is a more manual set up than you would expect from a shopping cart, but once you are done you can duplicate the form and edit it for additional products and services.
The Stripe extension is included in the Gravity Forms Elite subscription, you may need to upgrade to add it.
- Go to Forms > Add ons and scroll down until you see Stripe Add-On. Click Install
- Once it’s installed, you will be asked to activate the plugin
- When the extension is enabled you will see Stripe under Forms > Settings – select this to make the connection between Gravity Forms and your Stripe account
- You will need a Stripe account. Sign up and activate the account. This will give you access to the API keys you will need to make the connection
There is an area, Payment Collection Method that lets you control the method used to collect the credit card information. The first, Gravity Forms Credit Card Field, is the least intrusive since the CC form is right there, but it’s also the least secure. It’s safe, but if your business has PCI compliance requirements, you will want to use one of the other two options.
Stripe Webhooks lets Stripe feed information back to your website. Click on View Instructions to see the information you will need to add to Stripe.
Head on over to Stripe and log into your account. There will be some bouncing back and forth as you gather up the information you need and add it to the Gravity Forms settings.
You will be looking for the Publishable and Secret keys for both the Live Feed and the Test Feed. Copy them from Stripe and paste them into the appropriate fields in Gravity Forms settings.
Now that you have made the connection between Gravity Forms and Stripe, you can build and connect a form.
You will notice that there is a new group of form building options, Pricing Fields, with new fields that you can use to build the sales form. The Stripe extension added these. It doesn’t look like much, only six new fields, but don’t be fooled, there is a lot of options inside each field that you can use to create your website shopping cart alternative. We will describe each in turn.
The Product field is the workhorse. It’s where you set up the products or subscriptions you plan to sell with your website shopping cart. It can be a single product, or you can use a dropdown menu to let them choose. If you have multiple products in a logical group, the Radio Button is a good choice.
There are times when you need to identify the product so the information is sent to Stripe and included in the receipt sent to your customer, but you don’t want to clutter up the form. In a situation like this select Hidden.
Depending on what you select, the settings change dynamically. For example, selecting Dropdown or Radio Button gives you fields where you can add products. The field Label will accept HTML so you can use this to add a product image.
When a form is connected to a payment gateway like Stripe, select “show values” and include values here. For example, if there are two subscriptions that can be selected, monthly payments or an annual prepay, then put “monthly” in the value field for the monthly subscription and “annual” in the other. This helps Stripe select which subscription to use when charging the user’s credit card.
If you select Calculation you can use this to set up taxes or volume discounts. The Calculation choice lets you insert merge tags and mathematical operators.
For example, you can use the product field (price) times the quantity field and then multiply the result by the tax rate to have a simple tax calculator. Do one of these for each state you ship to and use the conditional to display the correct one based on the state shown in the address.
The Option field lets you add options to the base product. There is a selector you can use to select the product that these options apply to and you have the choice of using checkboxes, dropdowns or radio buttons to display the options.
This field lets you insert the cost of shipping. There are several choices: a single method or you can have users select their preferred shipping method using a dropdown or radio buttons.
The total field is useful when there are multiple choices. It tells users what the total is after their selections are made. It’s also the field that’s used by the CC field.
Credit Card will be the last field in the form. Adding this lets users pay for their selections. This field doesn’t appear until the connection is made to Stripe.
Using Dynamic Content in Gravity Forms
Using dynamic content can boost your conversions. In a relay race, the baton pass can mean the difference between winning and losing. We won’t get into all the ways you can use dynamic content in your website but we will look at a common, practical and valuable cases using Gravity Forms.
When a user submits a form, any kind of form, they are telling you loud and clear that they are engaged. Since they are engaged, this is an ideal time to take advantage of their interest and ask them for more information. But don’t you hate being asked to provide the same information again? Now is the time to make friends, not annoy them. Use dynamic content to prefill Gravity Forms fields on the confirmation page.
Here are the steps and as an added bonus, there’s a short video at the end.
- Build your CTA page and form
- Create the confirmation destination page and a form that you plan to use on the page
- Edit the form being used on the CTA page
- Go to Settings > Confirmation and select Edit Default Confirmation
- Under Confirmation Type select Page
- Select the confirmation page you just created
- Check the checkbox next to Pass field data via a query string
- In the box that appears, build the query string that will be added to the destination page URL and this tells the form what data you want to be sent to the destination
- Click Save and jump over to the form that’s being used on the confirmation page.
The query string is made up of two parts, the ID and the Merge Tag. The ID is how you will identify the data element on the destination page and the Merge Tag tells the form where it can find the data.
You can easily insert Merge Tags using the tooltip button to the right of the data entry box. You can add multiple elements in the string, separate them with an ampersand (&). This will all make sense in a bit.
Now that your CTA page’s form is prepared to deliver content dynamically you will need to set up the confirmation page’s form to receive the data.
- Select the form you plan to use on the confirmation page and choose Edit
- Select the field that you want to pre-fill
- Select the Advanced tab
- Check the checkbox Allow field to be populated dynamically
- In the boxes that appear, place the ID that you used in the query string
- Repeat for all the fields you want to auto-populate
- Click update
Dynamic content is useful in this situation because it will boost the second form’s conversion and it’s not difficult to accomplish. Tell the feed what content you want to transfer and then tell the destination form where the content should be placed. Simple as that.
Now that we’ve mastered the forces of gravity using these confirmation forms and their methods, it’s time to put them to work. The moment immediately after a user has submitted this form is an ideal time to create value. Their attention and involvement are high, they’ve made a commitment to you, give them some encouragement or even better, something else to do. Don’t squander this prime opportunity.
Gravity Forms – Using Forms to Maximize Website Value
Your website users have stepped up. They’ve offered to interact with you via a form. Make it as easy as possible. Use all the tools that Gravity Forms has to offer to maximize this high-value opportunity.
For example, since you’ve made it all the way to the end, click the button below and sign up for our newsletter. We’ll keep you current on all that’s relevant.