How to Create a Divi Contact Form in WordPress

How to Create a Divi Contact Form in WordPress

Looking for an easy way to create a Divi contact form for your WordPress site?

Divi is one of the most popular WordPress themes on the market. It comes with a user-friendly builder that lets you customize your website from the front end. You can add page modules like the call to action button, contact form, and more. 

With the Divi Contact Form module, you can create and insert a contact form without any third-party services. This is great if you want an easy way to add a basic contact form on your site.

However, you’ll need a powerful form builder plugin like WPForms for advanced features such as user submissions, email marketing, and more. 

This is why Divi Builder also comes with a WPForms module so you can easily add professional contact forms in a few clicks.

In this post, we’ll show you these two methods of creating a Divi contact form in WordPress:

Creating a Contact Form with Divi Builder

If you don’t already have Divi, first, you’ll need to sign up for a Divi Account. Then, you’ll be able to access the dashboard and download your theme file.  

Divi

After you install and activate the Divi Theme on your WordPress dashboard, open any page or post where you want to add your Divi contact form. 

In the post editor, you’ll see the Use Divi Builder button. Click on the button to launch the builder in the front end of your site. 

divi builder post editor

On the next screen, you’ll get to see the options to build a page from scratch, choose a premade layout or clone an existing page.

For this tutorial, we’ll start with the fresh page and add the contact form. 

build from scratch divi

Then you’ll see the Divi builder where you can choose a row template that matches your needs.

add row divi builder

After you add the row, you can see the Insert Module panel that lets you add different types of content modules.

If you scroll down, you’ll find the Contact Form module. Simply click on it to insert the Divi contact form on your site. 

divi contact form module

By default, the contact form consists of three form fields: Name, Email, and Message. You can click on the Add New Field button to add other form fields as per your needs. 

divi contact form editor

Additionally, you’ll find options to edit the title, submission successful message, and submit button text in the Text settings. 

divi form name and settings

Divi also lets you send email messages so you can get notified about new form submissions. 

Furthermore, you’ll find other useful options such as redirect links, spam protection, background settings, and more.

divi contact form settings

With the Divi contact form module, you can easily add a simple contact form to your WordPress site. There are plenty of customization options so you can match the style of your brand. 

If you want to add more advanced features to your Divi contact form, then you’ll need to use a good form builder plugin. 

And that’s exactly what we’re going to do in the next method. We’ll show you how to create a Divi contact using the most powerful WordPress form builder, WPForms

Create a Divi Contact Form with WPForms

WPForms

WPForms is the best drag and drop form builder plugin for WordPress. It lets you create any type of forms like contact forms, registration forms, download forms, and more in just a few clicks. 

WPForms comes with 100+ pre-built form templates so you don’t need to create a contact form from scratch. You can add or remove any form fields and customize them as you like. And you don’t even need any coding knowledge for this. 

All the contact forms you create with WPForms will be 100% responsive so they’ll display beautifully on any screen size. There’s even a built-in spam protection option so you can prevent spam and fraud form submissions on your site. 

With over 5 million active installations, WPForms is loved by all types of businesses around the world. If you’re a Divi user and want to add amazing contact forms to your site then you can also go ahead with WPForms. 

Here are some of the reasons why you should build your Divi contact form with WPForms:

  • Easy to use and set up
  • Advanced form notifications and confirmations
  • File upload and content submission functionality
  • Built-in form submission management system
  • Email marketing integration to grow your email list
  • Form abandonment option to capture partial form entries
  • Form fields for eCommerce and payment options

And the great news is, there is a WPForms module in the Divi Builder. So you can easily add the contact form you build with WPForms on your site.

Also, you can use WPForms on any WordPress site, with or without Divi. If you ever decide to stop paying for Divi, the forms you create with WPForms will remain intact on your site.

With that said, let’s learn how to create a contact form with WPForms + Divi. 

Step 1: Install and Activate WPFroms Plugin

First off, you’ll need to sign up for a WPForms account

WPForms offers flexible pricing plans that are designed to fit the requirements of all types of businesses. You can choose a plan that is suitable for your business. And there’s a lite version that’s available for free.

After you sign up, you’ll be able to access your WPForms dashboard. You’ll find the plugin file along with your license ley on the Downloads tab. 

WPForms license key

You need to install this plugin file on your WordPress site. For more details on this, you can check our guide on how to install a WordPress plugin.

Once you install and activate WPForms on your site, navigate to the WPForms » Settings tab on your admin dashboard. 

Here, you’ll need to enter the license key and click on the Verify Key button.

verify wpforms license

Then, you’ll see the verification successful message. Now you can start creating your contact form using WPForms.

Step 2: Create a Contact Form

To create a new form, head over to the Add New tab on your WordPress dashboard. This will launch the template library where you can search for a suitable contact form template for your site. 

For this tutorial, we’re going to start with the Simple Contact Form template. This template includes all the basic form fields required for a contact form like name, email, and message. You can also preview any other template to see which one is better for you.

Enter a name for your contact form and click on the Use Template button on the form template of your choice. 

create divi contact form in wpforms

In the next screen, you’ll see WPForm’s drag and drop form builder. All the form fields are on the left side and the form preview is on the right side of the page. 

You’ll find a wide range of useful form fields like numbers, dropdown, multiple choice, file upload, rating, rich text and so much more.

wpforms form fields

To insert a form field, you only need to drag it from the left side and place it on the form preview. 

wpforms drag and drop

If you want to customize any of these form fields, you can click on them and you’ll see the field options. There are options to change the form label, description, required, and other additional options depending on the form field.

add file upload to divi contact form

Once you add all the required fields to your Divi contact form, click on the Save button on the top of the form builder. 

Next, you’ll need to set up form settings, notifications, and confirmations. 

Step 3: Configure Form Settings

To change form settings, open the Settings » General tab from the left menu panel on the form builder. Here, you can change the form name, form description, submit button text, and more. 

There is also the option to enable anti-spam protection on your site. This will set up Google reCAPTCHA for your contact form

general settings wpforms

To head over to the  Settings » Notifications tab to set up email notifications for your Divi contact form. You’ll see there is a default notification that is sent to the admin email address. 

You can add multiple email addresses or click on the Add New Notification button to send more than one form notifications. 

With this, you can notify you and your team members about new form submissions, send customers their submission details, and more. 

form notificaitons wpforms

If you want more information on this, you can check our guide on How to Set Up the Right Form Notifications & Confirmations.

Likewise, WPForms lets you decide what happens after a user submits their contact information on your site. Go to the Settings » Confirmations tab and you’ll see the option to choose the confirmation action.

wpforms-confirmations

So you can show a custom ‘thank you’ message on the frontend after the user hits the submit button. Or, choose the redirect options to send users to a different page on your site or an external URL.

Once you’re done with the form settings, make sure you click the Save button.

Now that your contact form is ready, you can insert it on your website using Divi Builder. 

Step 4: Add WPForms Module in Divi

To add this contact form on any page or post, open the Divi Builder and choose a row layout as we did for the Divi contact form module.

The only difference here is that you’ll need to search for the WPForms module. 

divi wpforms contact form

After you insert the WPForms block, you’ll see the settings to choose the contact form you just created. There are options to show the title and description of your contact form as well. 

choose wpforms contact form

You can even change the design and styling for your contact form with the Divi Builder. When you’re happy with how your Divi contact form looks, click on the right tick mark button.

Step 5: Publish Your Divi Contact Form

The final step is to publish your contact form. For this, click on the 3 dots button on the bottom of the Divi Builder.

publish divi contact form

Then, you’ll see the different options such as zoom, responsive preview, and more. On the right side, there are two buttons: Save Draft and Publish. 

Click on the Publish button to publish your page and contact form on your WordPress site. 

publish your divi contact form

You’ve successfully created a contact form using Divi and WPForms. While Divi does offer a contact form module, it lacks some features like file upload, entry management, and email list integration. 

With WPForms, you can easily solve these issues. It is packed with features and functionalities that help you create all types of contact forms from basic to professional. 

WPForms also lets you create WordPress forms for any purpose depending upon your requirements. You can build order forms, event registration forms, sign-up forms, and so much more.

And that’s it for today! We hope this tutorial helped you learn how to create a Divi contact form in WordPress with ease. 

If you want more help with WordPress forms, you can check these resources out:

These posts will help you register users on your WordPress forms and grow your email lists. The last one will help you reduce abandonment rates on your form and improve your conversions.

The post How to Create a Divi Contact Form in WordPress first appeared on IsItWP – Free WordPress Theme Detector.

What’s My SEO Score?

Enter the URL of any landing page or blog article and see how optimized it is for one keyword or phrase.

Rating
%d bloggers like this: