How To Make a Divi Contact Form With Formidable Forms

Divi offers a simple way to add contact forms to your WordPress website. However, Divi contact forms lack more powerful features.

Many popular WordPress themes offer built-in tools to help you create contact forms. These tools are often adequate for basic purposes.

Still, they're not comparable with plugins whose sole purpose is to help you design and set up forms in WordPress. Divi contact forms are simple to use, but they run into frequent limitations.

If you're using Divi, your best bet is to combine the theme with a powerful contact form solution such as Formidable Forms. That way, you get the best of both worlds – a fantastic page builder tool and a comprehensive form builder solution.

In this article, we'll show you how to make Divi contact forms. We'll also show you how to use your Divi contact page with Formidable Forms. Let's get to it!

An introduction to Divi

Divi is one of the most popular WordPress themes on the market and with good reason. For example, the theme comes with a powerful front-end page builder. This feature enables you to put together your website and view exactly what visitors will see any time you make changes to it:

The Divi theme offers dozens of pre-built modules that you can use to build your website. One of those is the Divi Contact Form module. It includes fields for the Name, Email address, message, and success message:

You can use that module with one of Divi's contact page templates. The Divi theme comes with hundreds of pages and full website templates that you can use. Every template is fully customizable. In addition, once you get the hang of using the Divi page builder, you'll be able to create stylish websites quickly.

How to create a Divi contact form with Formidable Forms

Creating a Divi contact form using the theme's built-in modules is pretty simple. However, if you need more options, you'll need to use a slightly different approach.

Before you start this tutorial, you'll need to install Formidable Forms first. Once you've done this, go ahead and move on to step one.

Step 1: Make a contact form using Formidable Forms

Creating a contact form is simple. If you want to set up a contact form quickly, go to Formidable → Forms → + Add New. Select the Contact Us option from the menu that pops up:

Set a name and a description for the form and launch the form builder. Here's what the default Contact Us template looks like:

You can modify or remove any fields within the contact form template. You also have access to a broad range of fields that you can add. These fields include simple options such as paragraphs, as well as more complex elements like datepicker calendars and file upload fields:

You might want to also enable WordPress spam protection. Doing so can prevent contact form spam and ensure you receive only genuine messages.

With Formidable for your Divi contact forms plugin, you get many more options including:

• Accept payments with custom order forms.
• Send form data to email marketing services.
• Allow file uploads from your contact form.
• Confirm email addresses and review answers before submit.
• Add conditional logic and page breaks for higher conversion rates.
• Calculators, quizzes, surveys, polls, user registration, donation forms, and many more.

Once your form is ready, save it and return to the Formidable → Forms page. You'll see a list of all your existing forms here, including individual shortcodes for each entry:

Copy the shortcode for your contact form and save it for the next step. Now it's time to place that contact form on your website using the Divi Builder.

Step 2: Place your contact form using the Divi Builder

The Divi Builder enables you to place shortcodes from other plugins using its Code module. Go to the page that you want to customize and open the WordPress editor.

If it's a new page, WordPress will ask you if you wish to use the Block Editor or the Divi Builder:

Launch the Divi Builder. Then you'll get the option to design the page from scratch or use one of Divi's many templates.

If you opt for a template, you'll find the theme offers a broad range of Divi contact page designs to choose from:

Whether you choose to use a template or not, Divi will enable you to add rows and modules within the post or page that you're editing. The system works similarly to the Block Editor. However, you get access to far more modules (instead of blocks).

Select the option to add a module and look for the Code element:

Choosing that module will open a new window that includes multiple tabs and configuration settings. The only field you need to worry about is the Code option. Go ahead and paste your Formidable Form's shortcode inside and click on the check mark icon at the bottom of the window:

Divi will parse the shortcode right away and replace the Code module with your contact form.

However, keep in mind that the form might not match the style of the rest of the page. To change that, you'll need to style your form to match Divi.

Conclusion

Creating basic Divi contact forms using the theme is very quick. However, these forms aren't as customizable as the ones you can make using Formidable Forms. If you want the best of both worlds, you can combine Formidable Forms with Divi. That way, you get access to all the powerful Formidable Form features while using the Divi Builder.

Here's how to create Divi contact forms using Formidable Forms, in two simple steps:

1. Create a contact form using Formidable Forms.
2. Place the contact form in the Divi Builder.

If you're ready to create a new Divi contact form, get started with the best free form builder plugin for WordPress today. You'll get a broad range of features that make it the best tool you can use with Divi!