Getting Started with Gravity Forms in WordPress - WebWash (2024)

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 ourYouTube channelto stay up-to-date.

Gravity Formsis 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 Formscan 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 pageand clicking on Buy Now.

They offer three licenses; Basic, Proand Elite.

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

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

The Prolicense gets the Basicand Proadd-ons. Elitegets all the add-ons.

You can not purchase a single Eliteadd-on if you’re on the Basiclicense.

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 pageand click on Buy Nowon the license you want to purchase.

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

Download Gravity Forms Plugin

Log into the Gravity Formswebsite and in the Your Downloadssection, you’ll see Gravity Forms and all the add-ons.

Click on Downloadto download the plugins locally.

Gravity Forms License Code

In the Your Licensesection, 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 Pluginand upload the plugins to your WordPress site.

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

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

Create Form

We’ll create a custom Contact usform 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 Formsin the Admin Sidebar.

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

2. Click on Add New.

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

The Form Descriptionappears on the form before the fields. You could use it to add instructions for users. The Form Descriptioncan be changed or removed from the Form Settingssection.

Add Fields to Form

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

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 Settingson the right.

2. Enter First nameinto 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 nameinto Field Label, and check Required.

5. Click on Save Format the top.

6. Click on Previewand 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 Fieldssection.

Then select the field.

2. Leave Emailas the Field Labeland check Requiredto make the field mandatory.

3. The Emailfield 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 Downfrom the Add Fieldssection.

Then select the field.

2. Enter Technologyinto Field Labeland enter “What technology do you use?” into Description. Check Requiredto make the field mandatory.

3. Click on Edit Choices; thisallows 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 Textfrom the Add Fieldssection.

Then select the field.

2. Enter Messageinto Field Labeland check Required.

3. Click on Save Form.

Preview Form

Once you’re ready to review the form. Click on Previewin 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 Submitto 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 Embedbutton 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: [ gravityform id =”1″ title=”true” ]

3. Let’s create a new page called Contact Us. In the Create Newsection, enter Contact Usand 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 Publishup 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 usand 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 Entryblock 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 Urlis 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 Confirmationto 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. Textwill display whatever is added to the Messagefield.

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

4c. Redirectcan 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 Stringfield.

Gravit Formsoffers 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 Notificationadded by default.

This will send an email to the Administration Email Addressconfigured 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 Newon the Notificationspage.

2. In Nameenter User confirmation.

3. Choose Select a Fieldfrom Send Toand choose Emailfrom Send To Field.

This will use the email address used in the Emailfield as the Sent Tovalue.

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 Moveicon 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 Firstand Last namenext 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 Formscan do just this.

Let’s add some conditional logic where a Versionfield will appear only when WordPressis selected from Technology, and if Shopifyis selected, then a Planfield 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 Textfield below Technology.

2. Enter Versioninto Field Labeland in Descriptionadd:

“What version of WordPress are you using?”

Make the field required as well.

3. Add another Single Line Textfield and enter Planinto Field Labeland in Descriptionadd:

“What Shopify plan are you on?”

Make the field required as well.

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

Add Conditional Logic

Now we need to add conditional logic to both fields.

1. Select Versionand click on Conditional Logicin the Field Settings.

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

Showthis field if Allof the following match:

Technology is WordPress

Click on Save Form.

3. Select Plan and click on Conditional Logicin the Field Settings.

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

Showthis field if Allof 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 Pagefrom 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 Pageto add another PAGE BREAKand 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 PAGINGyou can adjust the Progress Indicatorand add page names.

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

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

Form Settings

Gravity Formsallows 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 Descriptiondoes 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 honeypotoption.

Go to the Form Settingssection and switch on Anti-spam honeypotin the Form Optionssection.

Gravity Forms offers reCAPTCHAsupport 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.