how to make a divi contact form

How to Make a Divi Contact Form: 2 Different Methods

Editorial Note: We may earn a commission when you visit links on our website.

Are you looking for a simple and straightforward way to create a Divi contact form for your WordPress website?

You’ll be pleased to hear that you can easily create a contact form through a WPForms integration and the Divi Contact Form Module.

In this guide, we’ll walk you through the steps for both methods so that you can choose the option that suits you the best.

How to Make a Divi Contact Form

You can create a Divi contact form with WPForms or the Divi Contact Form Module. Follow the steps below for both methods:

Create a Contact Form with Divi Builder

With the Divi Contact Form Module, you can easily create input fields like email, text, checkboxes, radio buttons, and dropdowns.

Step 1: Install the Divi Theme on WordPress

The first thing you need to do is sign up for a Divi account. Since Divi is a premium theme, you’ll have to buy a subscription, which costs $89 annually.

the divi landing page

After that, navigate to the Members Area from your Elegant Themes Account and click the Download The Divi Theme button.

download the divi theme

Once you have the Divi Theme zip file, go to your WordPress dashboard. From there, navigate to Appearance » Themes and click the Add New button.

add new theme wordpress

All you need to do now is click on the Add New Theme button, upload your file, and then click on the Install Theme button.

install divi theme

Once the Divi Theme is installed on your website, click the Activate button, and you should be good to use the Divi Builder.

Step 2: Add a Page and Load the Divi Builder

Create a new page or post, and wait for the WordPress Post Editor to open up.  To load the Divi Builder, click the purple Use Divi Builder button.

use divi builder

This will reload the page with the Divi builder and display three options: build a page from scratch, choose a premade layout, or clone an existing page.

Since we’re walking you through the steps of creating a contact page in Divi from scratch, click on the Start Building button.

divi build from scratch

Awesome! Now, all you need to do to create your contact form is load the Divi Contact Form Module. Let’s get to it.

Step 3: Add the Divi Contact Form Module

In the Divi Builder, click on the + (Plus) button, and from the list of options, choose a New Row template that matches your needs.

divi builder add row

Once you add a row, a library of modules will open up. From the New Module tab, scroll down and click on the Contact Form module.

divi contact form module

Once you add the Contact Form module, you’ll notice three form fields: Name, Email, and Message. Your contact form is now ready!

Step 4: Configure Your Divi Contact Form

To start, click the Contact Form in the Divi Builder to open its customization options. You can click the Add New Field button to add other form fields.

divi contact form settings

If you scroll down a bit, you’ll also find additional options under the Text menu to edit the title, the confirmation message, or change the submit button text.

divi contact form text settings

You’ll also find useful tools like background settings, spam protection, redirect links, and more. Feel free to change them as required.

Create a Divi Contact Form with WPForms

WPForms is the best drag-and-drop form builder for WordPress, which you can use to create contact forms, calculation forms, order forms, and more!

Step 1: Install the WPForms Plugin

As the best form builder plugin for WordPress, WPForms successfully integrates with Divi to make the form creation process a breeze.

Even the Lite version of the plugin comes with a ton of features that can prove more useful in comparison to the Divi Contact Form Module.

However, if you upgrade to Pro, you can take advantage of additional features like advanced form fields, entry management, file uploads, and more!

the wpforms homepage

Once you decide what license level suits your needs, go ahead and install the WPForms plugin. Check out this guide on installing a WordPress plugin for the steps.

Step 2: Create Your Contact Form

Now, to create a new form. Go to WPForms from your WordPress dashboard and click the Add New option.

WPForms add new

After that, give your form a name and pick a template. For this guide, we’ll choose the Simple Contact Form to speed up the form creation.

use simple contact form template

Inside the form builder, this is how your form will look. Feel free to add, change, or rearrange fields as you please.

divi contact form wpforms

That’s about it! You’ve successfully created a contact form using WPForms. Now, let’s customize your notifications and confirmations.

Step 3: Customize Notifications & Confirmations

Setting up notifications ensures that you always know about new form entries. It’s in the form builder. Go to Settings and then Notifications.

form notification settings wpforms

From here, you can make changes to the default notification settings, such as the subject line, or alter the emails that are sent to the recipients.

contact form notifications

Now, in the Settings menu, choose Confirmations from the list of options to set up replies for when a form is submitted successfully.

WPForms confirmation page

Next, choose which type of confirmation is most appropriate for your website, whether it be a message, a page display, or a redirect.

contact form confirmation

To keep your form and its settings up to date, don’t forget to save your changes. The form is now ready to be published through Divi.

save form wpforms

Step 4: Publish Your Divi Contact Form

To add this contact form, go to the Divi Builder and pick a row style, as we did for the Divi contact form module.

insert single row divi

Divi comes with an integration for WPForms, so to add the form, search for WPForms in the search box and select the module that appears.

select wpforms module in divi

After the WPForms module has been added in Divi, additional settings will appear. For instance, here you can:

  • Choose which form you want to add.
  • Enable settings that show the form title.
  • Enable settings that show the form description.

Once you are ready, proceed to select your form from the dropdown menu that is located under Form.

divi select form

Your selected form will now automatically be added to the Divi page. Make sure to hit the green Checkmark button to save your settings.

save divi form

Great job! Your Divi contact form with WPForms is now ready! If you want to customize it further, check out these additional design settings.

FAQs about Creating a Divi Contact Form

Using the Divi theme and its many features, like contact forms, is a popular topic among our readers. Here are answers to some questions about it.

Does Divi have a contact form?

Yes, Divi comes with a contact form module. This tool allows you to add a contact form to your pages easily, without needing extra plugins. However, the features may be limited as compared to a dedicated form builder like WPForms.

How do I edit a Divi contact form?

To edit a Divi contact form, go to the page where the form is located in your Divi Builder. Click on the module that says “Contact Form”. Here, you can change fields, adjust styles, and customize form notification and confirmation settings directly.

Does WordPress have a built in contact form?

WordPress itself does not come with a built-in contact form feature. However, WordPress users can easily add contact forms to their websites by using plugins. Divi, when installed on WordPress, provides an integrated contact form module, eliminating the need for additional plugins.

How do I create a pop up contact form in Divi?

Creating a pop-up contact form in Divi involves using the Divi Builder and a bit of creativity. Firstly, design your contact form in a standard section. Then, use the Divi Builder’s visibility options to hide this section on the page.

Lastly, trigger the section to show as a pop-up by linking it to a button or link on your page. This method may require custom CSS or a Divi pop-up plugin for smooth operation. A simpler method, however, would be to use OptinMonster!

Next, Learn How to Create a Price Calculator in WordPress

Looking for an easy solution on how to create a price calculator for your website to start selling items online? Check out this guide for the step-by-step process of setting up a simple order form with an automated price calculator for your website.

If you are wondering how to encourage users to fill out a form requiring their email to download a file, then that’s possible too. Check out this guide on How to Require an Email Address to Download a File.

Fix Your WordPress Emails Now

Ready to fix your emails? Get started today with the best WordPress SMTP plugin. If you don’t have the time to fix your emails, you can get full White Glove Setup assistance as an extra purchase, and there’s a 14-day money-back guarantee for all paid plans.

If this article helped you out, please follow us on Facebook and Twitter for more WordPress tips and tutorials.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.