Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Formidable Team / Last Updated November 25, 2021

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.

How to Make a Divi Contact Form With Formidable Forms plugin

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.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

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 builder

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:

The Divi contact form module

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:

Creating a new contact form using Formidable Forms

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

The Contact Us form template in Formidable Forms

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:

Adding form fields to a Formidable Forms

You might want to also enable 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:

Checking the shortcode for a Formidable Forms form

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:

Choosing which editor to use in WordPress

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:

Divi contact page layouts.

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:

Using the Code element in Divi to integrate a contact form plugin

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:

Using the Code module to add Divi contact form

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!

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Comments

  1. Sadesh Abeysinghe says

    November 28, 2021 at 2:17 am

    Thanks for the information

    Reply
  2. Sergey Filippov says

    November 28, 2021 at 3:49 am

    Very competently and intelligibly explained! Important information ! Thanks !

    Reply
  3. [email protected] says

    October 24, 2022 at 4:30 am

    doesnt work on mobile view

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get Email Updates

Popular Resources

    • How to Create a Searchable Database on a WordPress Site
    • Create a WordPress Custom Calculator: Easy, Powerful Results
    • How to Create a Fitness Tracker in WordPress
    • Formidable Views: The Best WordPress Custom Application Plugin
    • How To Require Email To Download Files in WordPress
    • How to Create Conditional Drop Down Lists in WordPress Forms
    • Best Gravity Forms Alternative for WordPress: Formidable Forms vs. Gravity Forms
    • How to Make a Quiz in WordPress
    • WPForms Alternative: Formidable Forms vs. WPForms Compared

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews