How to add a Gravity Form to your Divi WordPress site!
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.
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.
- Select a Field Type from the right-hand panel. For Contact forms, we typically choose the Name Field Type in the Advanced Fields.
- Click on the Field Type you want to add it to the editor on the left-hand side.
- 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.
- Add the rest of your Field Types.
- Once you have chosen all your desired Field Types you can click and drag each Field Type to re-arrange if necessary.
- Save your form by clicking the blue “Update Form” button.
Updating the notifications
Before adding your new contact form to the website we want to pop into the notification settings to make some edits.
- Click on Forms on the left-hand black bar
- Underneath the “From Name” hover your mouse over “Settings” and click on Notifications.
- Click on Edit underneath Admin Notification
- Under the Send to Email option fill in the email you wish to receive the notifications.
- Under “From Name” click the drop-down tab to the right of the box, select Name (First), and then space.
- After the space click on Name (Last) and then press the space bar again.
- Place a – (dash) and click on Email
- In the “From Email” box click the dropdown to the right and select Email.
- Scroll down and click Update Notification.
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.
- Navigate to the page or post you wish to add your form.
- Add a new row and set your columns. We recommend no less than three column!
- Add in a Code Module.
- Paste the code to the right into the code module.
- 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….
- 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).
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.