Getting Started with Gravity Forms in WordPress

This page contains affiliate links, meaning we get a commission if you decide to make a purchase through our links, at no cost to you. Please read our disclosure for more info.

Don’t forget to subscribe to our YouTube channel to stay up-to-date.

Gravity Forms is a powerful form builder which you can use in your WordPress site to build custom forms and form workflows.

You can use it to create something simple such as a contact us form, or something complex, such as a multi-page form.

Gravity Forms can be used to create surveys, polls, user registration forms (create a WordPress account), newsletter sign-up forms, eCommerce forms, and so much more.

It’s a premium WordPress plugin only, and they do not offer a free version.

You can purchase a license by going to the Gravity Forms pricing page and clicking on Buy Now.

Gravity Forms licenses.

They offer three licenses; Basic, Pro and Elite.

If you need to use Gravity Forms on unlimited sites then you’ll need to get the Elite license.

Each license comes with a set of add-ons, and the more expensive license you purchase, the more add-ons you get.

The Pro license gets the Basic and Pro add-ons. Elite gets all the add-ons.

You can not purchase a single Elite add-on if you’re on the Basic license.

So check all the add-ons and see which one you’ll most likely use because this could determine which license you need to buy.

Getting Started

Purchase License

Go to Gravity Forms pricing page and click on Buy Now on the license you want to purchase.

Gravity Forms elite license.

Fill in the purchase form and click on PLACE MY ORDER.

Gravity Forms - place my order

Download Gravity Forms Plugin

Log into the Gravity Forms website and in the Your Downloads section, you’ll see Gravity Forms and all the add-ons.

Gravity Forms add-on list.

Click on Download to download the plugins locally.

Gravity Forms License Code

In the Your License section, you’ll see the license code, which you need to add into your WordPress site, and you can see how many sites are using the code.

Install Gravity Forms Plugins and Add-ons

1. First, make sure you’ve downloaded the plugin and any add-ons and go into your WordPress site and click on Plugins > Add New.

2. Click on Upload Plugin and upload the plugins to your WordPress site.

3. Activate the plugin, click on Settings, and then add the license in the Support License Key section.

Now you’re ready to build robust and custom forms using Gravity Forms.

Create Form

We’ll create a custom Contact us form in WordPress using Gravity Forms.

It’ll consist of the following fields:

  • First name
  • Last name
  • Email
  • Technology (drop down)
    • WordPress
    • Shopify
  • Version (only appears if Shopify is selected)
  • Plan (only appears if Shopify is selected)
  • Message

We’ll add conditional logic to the Version and Plan fields, and we’ll make the form a multi-page form.

1. Click on Forms in the Admin Sidebar.

Gravity Forms admin screen.

From this section, you can create new forms and manage existing ones.

2. Click on Add New.

3. Add a name into Form Title and a description into Form Description. Then click on Create Form.

The Form Description appears on the form before the fields. You could use it to add instructions for users. The Form Description can be changed or removed from the Form Settings section.

Add Fields to Form

Once a form is created you are redirected to the form edit screen where you can add fields.

Gravity Forms form edit screen.

Click on a field you want to add and drag and drop it into the area on the left.

Or just click on the field, and it’ll automatically appear on the left.

Add First and Last Name Fields

1. Click on Single Line Text, then select the new field. You should see the Field Settings on the right.

2. Enter First name into Field Label, and check Required.

3. Click Add Fields, then Single Line Text, this will add another field.

4. Select the new field, enter Last name into Field Label, and check Required.

5. Click on Save Form at the top.

6. Click on Preview and a new browser window will open with the fields and a submit button.

Add Email Field

1. Click on Email (under Advanced Fields) from the Add Fields section.

Then select the field.

2. Leave Email as the Field Label and check Required to make the field mandatory.

3. The Email field has a unique option called Enable Email Confirmation. It adds an additional field to verify the email address.

It’s up to you if you want to use this option.

4. Click on Save Form.

Add Drop Down Field

1. Click on Drop Down from the Add Fields section.

Then select the field.

2. Enter Technology into Field Label and enter “What technology do you use?” into Description. Check Required to make the field mandatory.

3. Click on Edit Choices; this allows you to change the drop-down options.

4. Remove the existing options by clicking on the “-” icon.

5. Add the following options:

  • WordPress
  • Shopify

You can reorder the choices by clicking on the handle on the left and moving it up or down.

6. If you click on Bulk Add / Predefined Choices, you can bulk-add options or select from existing lists.

7. Once the options have been added click on Save Form.

Add Paragraph Text Field

1. Click on Paragraph Text from the Add Fields section.

Then select the field.

2. Enter Message into Field Label and check Required.

3. Click on Save Form.

Preview Form

Once you’re ready to review the form. Click on Preview in the top right.

You’ll be redirected to a new browser window with a preview of the form.

Change Submit Button

You can adjust the submit button by clicking on it from the form edit page.

If you want to change the default button text from Submit to something else, you can do it from here.

Embed Form

At this point we have a working form but we need to embed it into a page for it to be displayed.

1. Click on the Embed button to see the options.

2. You can embed the form into a new or existing page or post.

You can even copy the shortcode if you’re not using the Block Editor.

The shortcode will look like this:

3. Let’s create a new page called Contact Us. In the Create New section, enter Contact Us and click on Create.

4. You should be redirected to the page with the form embedded. A custom block is used to embed the form.

5. Select the form and turn off the Form Title, or Contact Us will be displayed twice.

6. Once you’ve configured the form publish the page by clicking Publish up the top.

View and Manage Entries (Form Submissions)

We’ve created and embedded a form. Now let’s look at how to manage the incoming entries (submissions). At the end of the day, the whole point of having a form is to receive user entries.

1. Go to the embedded form and submit the form a few times.

2. You can view the entries from the form page by hovering over Forms > Contact us and click on Entries.

Or, from the Admin Sidebar, click on Forms > Entries.

3. From the Entries page you can view and manage all form entries.

You can do the following:

3a. View unread, starred and Trash.

3b. Search form field values.

3c. Run bulk actions on entries.

3d. Display extra columns in entries table. Click on the cog-wheel.

Then select which columns you want in the table.

3e. You can switch between form entries by clicking on the down arrow and selecting another form.

4. To view the entry details, click on the first column or click on View.

5. On the entry details page, you can see the form field values on the left.

6. In the Entry block on the right-hand side, you can see when the entry was submitted, by which user and where the form was submitted (Embed Url).

Often you will have the same form embedded on different pages so the Embed Url is important to determine on which page the form was submitted.

Form Confirmations

A confirmation message will be displayed when you submit a form and one is added by default. However, the text can be customized.

1. Go back to the form edit screen, hover over Settings, and then click on Confirmations.

2. Click on Default Confirmation to edit the existing one.

3. Change the message to: “Thanks for contacting us! We will get in touch within 24 hours.

4. You have three confirmation types: Text, Page and Redirect.

4a. Text will display whatever is added to the Message field.

4b. Page will redirect you to any WordPress page when the form is submitted.

4c. Redirect can be used to redirect off your WordPress site.

Redirecting to a different page or off-site is helpful if you want to track how many users have submitted the form.

You could go one step further and construct custom UTM codes using the Pass Field Data via Query String field.

Gravit Forms offers lots of ways to track confirmation messages and redirects.

Form Notifications

Gravity Forms has the ability to send notification emails when the form is submitted.

1. Go back to the form edit screen and hover over Settings, then click on Notifications.

2. You’ll see an Admin Notification added by default.

This will send an email to the Administration Email Address configured in Settings, General.

3. You can turn the notification off by clicking on Active.

And to turn it back on, click on Inactive.

The ability to enable or disable notifications is helpful for debugging email issues.

Create Notification

Let’s send a confirmation email which will be sent to the email address submitted in the form.

1. Click on Add New on the Notifications page.

2. In Name enter User confirmation.

3. Choose Select a Field from Send To and choose Email from Send To Field.

This will use the email address used in the Email field as the Sent To value.

4. Enter “Email confirmation: {form_title}” into Subject.

Merge Tags

Any string with a {} is a merge tag. The above example will add the form title where {form_title} is. Best to think of merge tags as similar to shortcodes.

You can see all the available merge tags by clicking on the following icon:

5. Enter the following into Message:

Hi {First name:4},
Thanks for contacting us.
Here is a confirmation of what you sent:
{all_fields}

NOTE: Merge tags do have IDs in them; simply copying them over (from here) may not work because the field ID would be different on your site. Select the merge tag using the icon mentioned above.

6. Once everything has been configured click on Update Notification.

7. When you submit the form, you should receive an email to the address specified in the email field.

Field Layout

The layout of the form can be changed by adding fields into columns. This is a great way to organize the form fields.

Let’s add first and last names next to each other.

1. Click on the Move icon on Last name.

2. Move it to the right of First name, you should see a vertical line appear.

3. When you let go you should see First and Last name next to each other.

4. You can adjust the width of the column by clicking the vertical line and moving it left to right.

5. You can also move new fields beside other fields.

Add Conditional Logic to Fields

No form builder would be complete without the ability to conditionally show or hide fields.

Gravity Forms can do just this.

Let’s add some conditional logic where a Version field will appear only when WordPress is selected from Technology, and if Shopify is selected, then a Plan field will appear.

Add New Fields

First, we’ll need to add the two new fields: Version and Plan.

1. Edit the form and add a Single Line Text field below Technology.

2. Enter Version into Field Label and in Description add:

“What version of WordPress are you using?”

Make the field required as well.

3. Add another Single Line Text field and enter Plan into Field Label and in Description add:

“What Shopify plan are you on?”

Make the field required as well.

At this point you should see two new fields; Version and Plan.

Add Conditional Logic

Now we need to add conditional logic to both fields.

1. Select Version and click on Conditional Logic in the Field Settings.

2. Click on Enable Conditional Logic toggle, and choose the following:

Show this field if All of the following match:

Technology is WordPress

Click on Save Form.

3. Select Plan and click on Conditional Logic in the Field Settings.

4. Click on Enable Conditional Logic toggle, and choose the following:

Show this field if All of the following match:

Technology is Shopify

Click on Save Form.

Now when you change the options from the Technology drop-down the fields below will change.

Create Multi-Page Forms

Another way to organize fields on the form is to create a multi-page form.

If you have a form with many fields, then it’s recommended that you break the form into multiple pages. Nothing more daunting for a user than opening a form and seeing a single page with lots of fields.

Let’s convert our form into a multi-page form.

1. On the form edit screen, click Page from Standard Fields.

2. You should see extra lines appear on the left.

At the top you’ll see, START PAGING:

At the bottom you’ll see, END PAGING.

Then you’ll see PAGE BREAK, move this section to where you want to create a page.

3. Move PAGE BREAK, so it’s after Email.

4. Click on Page to add another PAGE BREAK and move it after Message.

5. Click on Save Form.

Now the form has a progress bar and three steps to complete.

Adjust Multi-Page Settings

If you click on the START PAGING you can adjust the Progress Indicator and add page names.

You can change the next and previous buttons if you click on any of the PAGE BREAK sections.

Gravity Forms gives you lots of flexibility when building multi-page forms.

Form Settings

Gravity Forms allows you to change settings on each form. You can access the settings by clicking on Settings > Form Settings.

Form Basics

Change the form title and description. The Form Description does get displayed on the form below the title when embedded.

Form Layout

From this section you can change the layout options for the form.

Save and Continue

This option allows you to save partially completed forms.

Restrictions

This section allows you to add limits to the form.

Form Options

From here you can turn on honeypot and animated transitions.

Spam Control

Gravity Forms has a few options for adding spam protection to forms.

The simplest solution is to use the Anti-spam honeypot option.

Go to the Form Settings section and switch on Anti-spam honeypot in the Form Options section.

Gravity Forms offers reCAPTCHA support via an add-on plugin.

Summary

If you’re looking for a powerful form builder in WordPress, then look no further than Gravity Forms.

But you shouldn’t limit Gravity Forms for just basic forms. You can use it to create newsletter sign-up forms, webinar registration forms, job applications, event registration forms and so much more.

We’ve been using Gravity Forms on WebWash for years and are happy with our decision.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Newsletter

Sign up and get notified when the next WordPress tutorial is published.