How to Create a Contact Form with Gravity Forms

January 10, 2022

Tory Barber

Form Illustration

Create Form Structure

1. Install and Active Gravity Forms

You will need Gravity Forms installed and activated for this tutorial.

Don’t have it? Buy it here.

2. Navigate to Forms > New Form

Start creating a form by navigating the the Gravity Forms area in your WordPress admin area, then click “New Form”

Gravity Forms New Form Screenshot

3. Title and Describe New Form

Give your form a new title and description (optional) then click “Create Form”

Gravity Forms Create a New Form Title Screenshot

4. Drag and Drop Required Elements in Builder

Select elements from right hand dropdowns and drag them over to the building area on the left.

Continue this process until all required elements are listed in the order you’d like them to appear on your website.

Gravity Forms drag and drop builder gif

5. Label and Set Required Elements

Select an element, then enter in a label, and select whether or not a user is required to fill out this field

Gravity Form Field Label Screenshot

6. Ensure Fields are the Same Width

Phone and email fields have a smaller width than other elements by default. If you’re using either of these elements, click on the block, click on the “Appearance” tab, then set the “Field Size” to large.

Gravity Forms Field Size Screenshot

7. Click Update Form

You now have the basic structure of your form created

Set Up Notification Settings

1. Navigate to your Form’s Notification Settings

Gravity Form Notification Settings Button Screenshot

2. Click Edit on Auto-Generated Notification Setting

Gravity Forms automatically creates a notification setting for you using the WordPress admin email. We will be editing this notification.

Gravity Form Notification Settings Screenshot

3. Change “Send to Email”

Remove the “{admin_email}” text, and replace with the email you’d like the form information sent to

You can list multiple emails by separating each address with a comma

Gravity Forms notification settings send to screenshot

4. Set the Subject Line

Edit the subject line to something that reflects the purpose of the form and will be easily identifiable in your inbox.

5. Organize Your Message

Gravity Forms automatically creates a message that will list all the elements you chose in your form, and all the information someone entered in those fields. This is likely all you need for your form, however you can get a little more fancy if you’d like.

Using the text editor, you can write a standardized message, and using Merge Tags (the small icon button to the left of the text editor) you can pull in individual field information in a customized list.

Gravity Forms notification settings merge tags screenshot

6. Press “Update Notification”

Add Form to Page

1. Locate your form’s ID number

Go to the Gravity Forms List Forms page, and locate your form’s ID

Gravity Forms ID Screenshot

2. Add Gravity Forms Shortcode to your page

Navigate to the page you’d like to add the form to. Press edit and add a shortcode element

Add the following shortcode to your page, replacing the ID number with the one you discovered in step 1 of this section:

[ gravityform id=’1′ title=’false’ description=’false’ ]

*Get rid of spaces before brackets*

3. Save, View, and Test Your Form

Make sure your test you form to ensure it works like you intended.

Style Your Form

1. Add a CSS Class to Form

Navigate to your forms settings and add a unique class name in the “CSS Class Name” field. Then scroll down to the bottom of the page and press “Update Form Settings”.

Gravity Forms CSS screenshot

2. Plan How You’d Like it to Look

Plan which elements you’d like to change so you can easily target them with CSS.

Design tip: At a minimum, fonts and button styles should follow what’s been used in the rest of the site.

3. Add CSS

Navigate to Appearance > Customize > Custom CSS to open a global CSS editor.

Using your browser’s dev tools, inspect the page, and find the CSS classes/IDs for the aspects of the form you’d like to style. Using these classes/IDs and the class you set in step one, target the fields you’d like to style, and add CSS in global CSS editor.

Design tip: This is the minimum styling I use on my forms (replace CSS values with your styles)

.contact-form label {

   color: var(–font-color-dark);

   font-family: var(–font);

   font-weight: 500;

   font-size: 18px;



.contact-form .gform_button {

   background-color: var(–primary-color);

   border-color: var(–primary-color);

   color: var(–font-color-light);

   padding: 15px 35px;

   text-align: center;

   border-radius: 100px;

   border-width: 2px;

   border-style: solid;

   font-family: var(–font);

   font-size: 18px;

   font-weight: regular;

   letter-spacing: 1px;

   text-shadow: none;



.contact-form .gform_button:hover {

   background-color: var(–secondary-color);

   border-color: var(–secondary-color);


   letter-spacing: 2px;


Tory Barber Headshot Thumbnail

About Me

Hi I’m Tory!I’m a Graphic Designer, Web Developer, and AI OBSESSED artist from good ol’ Canada, eh!I record all the things I learn as I dive deeper into the Generative AI rabbit hole so I can teach people like you!

Follow Me

Prompt Inspo In Your Inbox!

Latest Articles

No Results Found

The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.

Latest Posts

Dall-e 3 Announcement Breakdown

Dall-e 3 Announcement Breakdown

OpenAI just announced that they will be releasing Dall-e 3 in the fall. Learn when you can get access and what Dall-e 3 improves on the latest model.