How to Create a Form in Gravity Forms
Last Updated
20th September 2022
Overview
Description
This document will show how to create, embed and configure a contact form on a WordPress
website using the Gravity Forms plugin.
The exact fields used will depend on each case. However, this document will give a general
overview of the different types of form fields that can be created.
Execution Time
30 Minutes
When To Run This Process
When creating a new Contact Form
Outcome
A functional contact form
Tools & Services
Gravity Forms
SOP Series
This SOP is part of a series of SOPs for Gravity Forms.
1. Current SOP
2. How to Add Captcha to Gravity Forms
Process
This process will be split into 4 sections:
1. Initial Setup
2. Building a form
3. Configuring form settings
4. Embedding a form
1. Initial Setup
● Go to the Gravity Forms Pricing Page
● Select the relevant plan and check out
● Go to the Downloads section of the dashboard
● Download the latest version of Gravity Forms
● Go to the WordPress dashboard and click on Plugins > Add New.
● Click on Upload Plugin
● Upload the .zip file provided by Gravity Forms
● Follow the instructions on the screen and activate the plugin
● Once installed, there will be a new Forms menu in the WordPress dashboard
2. Building a form
Creating the form
● To get started, click on Forms > New Form.
● Give the form a title
○ This Title may be visible to the audience, so name the form appropriately
● Add a description of what the form is for in the description box
Adding Fields - The Basics
Several fields can be added. To do this, simply drag and drop the block on the right-hand side
into the form field.
Fields are stacked vertically but can be put horizontally side by side if required.
Once added, click on the block to bring up the customization options for that block.
All blocks will contain:
1. Field Label - This is the title of the field that will show up to the user
2. Description - This will add a description underneath the field title
3. Input Mask - This can be used to explain the format of what they should enter, e.g.,
DD/MM/YYYY if its a date
4. Rules - Any field can be made mandatory using the required option, and it can also
reject duplicates using the No Duplicates option
Adding Fields - Advanced Options
There are several advanced options available in Gravity Forms. Some come in their own special
blocks, whereas others are settings in the block’s configuration menu.
While there are other options available, this document will stick to explaining the most frequent
and valuable options.
Placeholder (Field Settings > Appearance)
This option will show a custom placeholder message that will disappear when the user starts
typing. This is intended to give users a hint as to what they should be writing.
Custom Validation Message (Field Settings > Appearance)
This can be updated to display a custom message if the form is rejected. For example, they
have not entered all of their information. For example, it can reaffirm why a field is necessary.
Default Value (Field Settings > Advanced)
This can be used to populate the field with a default value. Using the dynamic field option (the
{...} button), it is possible to dynamically fill this field with personal information, such as the
user's email address. These fields can help streamline data collection, especially when used
with the Visibility option (more on that below).
This option will depend on the exact website and its setup—test before launching.
If the desired value is unavailable, it is also possible to use the Allow field to be populated
dynamically check box to pick a custom option. However, it will require the assistance of a
developer.
Visibility (Field Settings > Advanced)
This can be used to hide a field from the user. This is particularly useful for streamlining contact
forms by collecting default data dynamically, such as Name, Email Address, IP Address, etc.,
without having the user input it manually.
Set up the Default Value as explained above, and then select Hidden
Conditional Logic
Conditional Logic can be used to set up branching pathways. For example, if a user selects an
option that says “I am a customer” it is possible to ask them for their Customer ID.
Create or select the block that is required to show conditionally.
Under Field Settings click on Conditional Logic and use the configuration options to decide what
will show and when
In this example, the Customer ID field will only show if they select “I am a customer” to the
previous question.
3. Configuring form settings
Once the form fields are completed, all logic and advanced settings are in place; it is required to
configure the form in multiple areas.
In the editor, click on the Settings button to bring up the various settings options.
Form Settings
Most settings on this page are self-explanatory but can be adjusted and tweaked as required.
If working with a developer, it is possible to enter custom CSS on this page.
Confirmations
It is possible to edit the default confirmation message on this page to give clarity. For example,
for a job application, it would be better to change the confirmation message to:
“Thanks for applying. If successful, we will review your application and reach out in the next 14
days.”
Additionally, it is possible to set exactly how the confirmation message appears:
1. Text - The form field will disappear, and the confirmation text will appear in its place
without reloading the page
2. Page - The form will take the user to a new page with the confirmation text
3. Redirect - It is possible to set a custom redirect page that they will land on
It is also possible to set up conditional confirmation pages. This can be used to display specific
confirmations to specific people.
Conditional Logic options will appear after a second confirmation page has been created.
For example, if this form were for a job application but their stated experience does not match
the company's requirements, the form could automatically send them a rejection message.
Once done, save the confirmation.
Notifications
The notifications option will decide what happens after the contact form is submitted.
It will be sent to the website admin's inbox, usually hosted by the hosting provider. It is important
to ensure that it is also forwarded to a regular email address, as admin email addresses are
usually unchecked.
● The Name is the name of the notification, only visible in Gravity Forms
● Under Send to email, enter the email address where the contact form should be
forwarded.
● Under From Email, there are two options.
○ Admin Email - This means all contact form messages will be received from the
admin. It will not be possible to reply directly to these messages.
○ User Email - It is also possible to dynamically populate the user's email address
here so that it appears as though the user has sent the email
● Reply to can also be populated dynamically so that the default reply address is the user
who submitted the form.
● BCC can be set up if a copy of the email is required in multiple locations
● Subject is the subject line that will appear on the email which is forwarded
Under Message, there are multiple options. It is best practice to open the message with an
explanation of its purpose. For example:
“We have just received a new application for the role of “Marketing Assistant.”
It is then possible to use the {...} option to dynamically add the information collected into the
form.
Once complete, click Update Notification to save it.
4. Embedding a form in Gutenberg
Once the form has been completed and the forwarding set up, it can be embedded on the
website.
● Open up the desired post or page where the form is to be displayed
● Type /gravityforms to bring p the Gravity From Selector
● Select the desired form from the list
● Note that the form will not display in Gutenberg’s editor. It is required to Preview the
page to see how it looks.
● Once it is successfully embedded, load the page and test the form and verify it is
working as intended.
○ If using conditional logic, test all conditional variants in the form
