How to Build a Divi Contact Form That Matches Your Theme

Divi comes with a built-in contact form module, and on the surface that Divi contact form looks like enough. Then a lead messages you, the form fires, and the entry vanishes into the inbox you swore you'd clean up in 2022. There's no database, no backup, and no way to pull a list of who reached out last month.

You can fix that without leaving Divi. Just build the form with Formidable Forms, drop the shortcode into a Divi Code module, and you get a styled form on the front end with every submission saved, searchable, and ready to export.

This guide walks through the process end to end: building the form, styling it to match your Divi layout, embedding it on a page, and pulling up submissions later.

Why the built-in Divi contact form falls short

The Divi Contact Form module covers the basics. Name, email, message, a success notice. It works for a low-traffic site where you mostly want an email to land in your inbox.

The limits show up fast though:

• Entries are not stored anywhere on your site. If an email fails to deliver, the submission is gone.
• Styling controls are decent but stop at the form. There is no Visual Styler for matching brand colors across multiple forms.
• No conditional logic, no multi-step layouts, no calculations, and no file uploads beyond the basics.
• Spam protection is limited to a simple captcha question.

To get a real contact database with Divi alone, you need a separate add-on like Contact Form Helper. At that point you are stitching plugins together to recover a feature most form builders include by default.

Formidable Forms gives you everything you need for contact forms: the database, the styling tools, the spam protection, and the entry management in one plugin. And the Divi side of the workflow stays exactly the same. You build the page in Divi, you just drop in a shortcode instead of a Divi module.

What you'll need

• A WordPress site running the Divi theme or Divi Builder
• Formidable Forms Lite (free on WordPress.org) or Formidable Forms Pro for templates, conditional logic, and the AI form builder

That's it. No code, no separate database plugin, no extra email setup beyond what you already use.

Step 1: Build the contact form in Formidable

From your WordPress dashboard, go to Formidable → Forms and click Add New.

You have three starting points:

1. Blank form, which opens an empty canvas
2. Contact Us template, a pre-built form available on Formidable Forms Pro
3. AI form builder, which generates a form from a prompt (also Pro)

Pick whichever fits. The drag and drop builder opens with your fields on the canvas and a panel of field types on the left.

For a contact form, you typically want:

• Single Line Text for the name
• Email for the email address
• Paragraph for the message
• Phone if you need a callback option

Click any field on the canvas to rename it, mark it required, or change validation. Field labels and placeholders edit in the panel on the right.

Add spam protection

Bots find contact forms within hours of going live. Before you publish, we recommend enabling one of our spam protection methods:

• Google reCAPTCHA, the most familiar checkbox-style challenge
• Cloudflare Turnstile, invisible most of the time and friendlier to legitimate users
• Honeypot, a hidden field that catches automated submissions without a visible challenge

Any one of them keeps the inbox clean. Turnstile is the lightest touch for users. For a deeper look at keeping forms protected, see the guide to secure WordPress forms.

Optional: useful extras

If your contact form needs to do more than capture a message, Formidable handles it without a second plugin:

• File Upload for resumes, photos, or screenshots
• Conditional logic to show or hide fields based on what someone selects (Pro)
• Multi-page forms to break long requests into steps (Pro)
• Confirmation field to make people retype their email address before submitting

Click Save in the top right and give the form a name.

Step 2: Configure notifications and confirmation

A form that collects submissions but never tells you they happened is a form that loses you customers. Go to the Settings tab inside the form builder.

Set up an admin notification

Under Actions and Notifications, click the email action. By default, Formidable sends every submission to the WordPress admin email.

Customize the Subject so it stands out in your inbox. Something like New contact form message from [name] is more useful than the default. Click the three dots in the bottom right corner to open a dropdown and insert field values directly into the subject and body.

Send a confirmation to the user

Add a second email action and set the To field to the email captured in the form. Use field IDs to pull in the person's name and echo their message back to them. This single touch makes a contact form feel like a real reply queue instead of a black hole.

Decide what happens after submit

In the Confirmation form action, you can choose what shows after someone submits:

• A success message on the same page (the default)
• A redirect to a thank-you page
• A redirect with the form data appended, so the next page can personalize the experience

Save your settings before moving on.

Step 3: Drop the form into a Divi page

If you're ready to publish the form, go to Formidable → Forms and find the contact form you created. Next, click the angle brackets:

This will open the shortcode menu, where you can get the shortcode for the form.

Using its Code module, the Divi Builder lets you place shortcodes from other plugins. So you can easily insert the Formidable Forms shortcode and display the form.

On the next screen, click Insert manually to get the shortcode you can copy.

Now head to Pages in your WordPress dashboard. Open the page where the form belongs and launch the Divi Builder.

If you are starting from scratch, pick a layout or insert a blank section. Inside the section, click the gray plus icon to add a new module and search for Code.

Paste the Formidable shortcode into the Code module's content field and click the green checkmark to save. Divi parses the shortcode immediately and the form renders inside the layout.

Save the page, click Exit Visual Builder, and view the live page to confirm everything looks right.

Step 4: Style the form to match your Divi theme

Divi gives you tight control over typography and color across your site, which means a form that ignores that styling looks out of place. Fortunately, Formidable's Visual Styler matches it in a few clicks.

In your dashboard, go to Formidable → Styles. You can either edit the default style applied to every form, use an existing style template, or create a new style and assign it to your contact form.

The Visual Styler has live preview, so adjust on the left and watch the form update on the right. The settings you'll usually touch:

• Field colors: background, border, focus state
• Typography: font family, size, label weight
• Submit button: background color, hover state, border radius
• Form layout: full width, padding, field spacing

Match the values to your Divi theme settings. Pull the exact hex codes from Divi's Theme Customizer to keep things consistent.

If you live in CSS, the Visual Styler has a Custom CSS panel where you can add overrides. For a full list of what's possible, browse the CSS Examples in our knowledgebase. Pro users also get pre-built style templates that match common themes, so you can pick one as a starting point and tweak from there.

Save the style, refresh the page with your form, and the new look is live.

Get Formidable Forms to unlock the full Visual Styler, conditional logic, and the Contact Us template.

Step 5: View and manage submissions

In your dashboard, go to Formidable → Entries.

Every submission across every Formidable form on your site lives here. Use the form filter dropdown at the top to narrow it to just your contact form. From the list you can:

• Open an entry to read the full message
• Edit any field if a typo needs fixing
• Delete entries that turn out to be spam that slipped through
• Export the list to CSV for email marketing or CRM imports

If you build a lot of forms, the entry list quickly becomes one of the most-used screens in your dashboard. It is the reason to use Formidable over the built-in Divi module. Nothing gets lost.

Beyond contact forms

Once your contact form is running, the same workflow opens up most of what a small business website needs:

• Order forms that take payments through Stripe or PayPal and save every order
• Quote requests with conditional logic so people only see the fields that apply to them
• Job applications with resume uploads
• Event registrations with limits and waitlists
• Surveys and polls with results you can display anywhere on the site using Formidable Views

Each one is the same three moves: build the form in Formidable, paste the shortcode into a Divi Code module, style it once and forget about it.

Wrapping up

A Divi contact form that you actually want to use takes about fifteen minutes to set up. Formidable handles the form logic, the database, the styling, and the entry management. Divi handles the page where it lives. Each plugin does what it is best at, and you stop worrying about lost submissions.

When you're ready, try Formidable Forms free and build the contact form your Divi site should have had from the start.

Can I use Formidable Forms with the free Divi theme?

Yes. Formidable Forms Lite works with any WordPress theme, including the free version of Divi. The Code module and shortcode workflow is identical whether you are on the free Divi theme or a paid Elegant Themes plan.

How do I style a Divi contact form success message?

In the form's Settings → General tab, edit the On Submit message. You can format it with HTML, include field IDs to echo the submitter's name, and style it with custom CSS if you want it to match your Divi theme.

Does the Divi Contact Form module save entries to a database?

No. The native Divi module only emails submissions. To save entries on your site, you need a third-party plugin like Formidable Forms or a Divi add-on like Contact Form Helper.

Will the form load fast on a Divi page?

Yes. Formidable loads only the assets needed for the form on a given page, and the Divi Code module adds no extra rendering overhead. Combined, the form adds a small fraction of a second to page load on a typical site.

Can I show form submissions on the front end of my site?

Yes, with Formidable Views (available on Formidable Forms Pro). You can publish entries as a searchable directory, a calendar, a table, or a map anywhere on your site. Useful for testimonials, member directories, and any user-submitted content.