How to add a Gravity Form to your Divi WordPress site!

You're Reading: How to add a Gravity Form to your Divi WordPress site!
We love Gravity Forms! It is an excellent contact form plugin with lots of features.

Having an easy to use, and more importantly, a reliable contact form is extremely important for your website. You want people to contact you! We’ve covered the differences between the Divi Contact Form and Gravity Forms in the past, so today we will focus on adding a Gravity Form contact form to your website. 

Hannah Raeside

Office Manager, Pod Creative

Customize the form!

Your basic, main contact form should be simple with little more than Name, Email Address, and a space for the visitor to leave their message. And that’s it! Specialized or customized forms can be longer and more complex, but your basic contact form should be that, basic. The simpler the form, the easier it is for visitors to reach out to you! 

Creating a new form

On the dashboard of your website click on Forms on the left-hand black sidebar. Then click on “Add New” to create a new form. Title your Form appropriately, such as Contact Form, and give it a description. This will make it easier to differentiate if you have multiple contact forms for different pages. 

Adding a new form

The fantastic thing about Gravity Forms is they tell you how to create a new form! Follow these straightforward instructions to create your new form. We have summarized the steps below for you. 

Rocketship speeding up WordPress
  1. Select a Field Type from the right-hand panel. For Contact forms, we typically choose the Name Field Type in the Advanced Fields.
  2. Click on the Field Type you want to add it to the editor on the left-hand side.
  3. Click where it says Field ID (number) to activate the editing dropdown. From here you can change your Field Label, add Rules, and a description if you wish.
  4. Add the rest of your Field Types.
  5. Once you have chosen all your desired Field Types you can click and drag each Field Type to re-arrange if necessary.
  6. Save your form by clicking the blue “Update Form” button.

Reminder!

Keep your main contact form simple and limit the number of required fields!

Adding your form to your Divi WordPress page or Post

Now we are at the fun part! Let’s work on adding your brand new form onto your website.

  1. Navigate to the page or post you wish to add your form.
  2. Add a new row and set your columns. We recommend no less than three column!
  3.  Add in a Code Module.
  4. Paste the code to the right into the code module.
  5. Make sure your id=# matches your form ID. For example, in the below quick video, the form ID for the test form I created was 10, so therefore the code would be:  [gravityform id_10 title….
  6. And you’re done! Enjoy your new contact form!

Side note, to find your Gravity Forms ID you will need to navigate to Forms on the backend of your side, and the ID is the number you will need for id=# (pictured to the right).

wrapping
up

Gravity Forms is our go-to form plugin for many reasons, including ease of creation, seamless integration with third-party applications, and the fact it stores entries on your website for safekeeping! Following our instructions above will get you well on your way to creating easy to use contact forms. 

Do you want to know more about what we do?

Pin It on Pinterest