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 February 20, 2023

How to Customize Your Divi Contact Form Design

Want to have more control of your Divi contact form styling? This guide will show you how to customize your Divi contact form design to stand out!

How to Customize Your Divi Contact Form Design

Approximate read time: 4 minutes

A contact form is a primary way your visitors can get in touch with you.

Whether for email marketing, lead generation, or simply reporting a problem, a contact form will help you do it.

And it doesn’t hurt if it looks good, too. But how do you customize your contact form using the WordPress Divi theme?

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

Don’t worry.

This post will show two ways to style your contact form (and other forms) for Divi:

  1. Divi’s builder for forms
  2. A 3rd-party Divi form builder

Let’s get started.

Subscribe on YouTube

How to style your contact form with Divi

Divi has a simple design editor built into its page builder.

So, go to Pages in your WordPress dashboard and choose the page you want to show your form on.

Pages tab in WordPress dashboard

Next, click the button to edit with the Divi builder.

Divi builder button

Once the page builder loads, click to add a new block. You can choose whichever Divi contact form layout you want, but we’ll choose a single block for this example. 

Next, search Divi Contact Form Module and add it.

Page builder block

Once you add your form, click the Design tab to change the elements.

You can change the fields, text, buttons, and more to make your form unique.

Once you’re finished editing, click the checkmark button to save your changes.

If you’re familiar with CSS, you can edit your Divi contact form’s CSS by clicking Advanced, then Custom CSS.

Pretty easy, right?

If you want more power over your forms and design, check out this free Divi form builder ?.

How to style your Divi contact form with Formidable Forms

The form builder we’re talking about is Formidable Forms.

It’s the most advanced WordPress form builder you can find. But don’t let “advanced” put you off. It’s actually very simple to use.

Best of all, it’s free. 

Formidable has a premium option with many great features, which we recommend. But you don’t have to pay for the awesome design tools Formidable gives you.

 Get Formidable Forms now!

So, get Formidable installed and activated then we’ll get started.

Designing your Divi form has three quick steps:

  1. Create a form
  2. Edit the style
  3. Publish the form

Let’s dive into it.

Formidable Forms Free WordPress Plugin

Step 1: Create a form

In your WordPress dashboard, go to Formidable → Forms and click the Add New button in the top left.

Formidable Add New Button

You can start one of our pre-built templates, which saves you a TON of time. But you need a premium plan.

If not, you can choose Blank Form to start from scratch.

Choose your form type

Next, give your form a name and click Create.

The plugin will take you to its drag and drop form builder, which makes form building simple. Simply drag and drop the field you want, then customize it in the field settings on the left.

Radio buttons, checkboxes, date/time pickers, and more are all available.

Formidable drag and drop builder

For a contact form, we recommend a Text, Email Address, and Paragraph field for a basic form.

You can add extra form field types like file uploads, spam protection (like Google Recaptcha), or even add conditional logic to make your form stand out.

Once you’re finished customizing your form, it’s time to give it a makeover.

Before you do that, though. Click Update to save your changes.

So, we’ll head to the Style tab.

Step 2: Edit the style

Formidable’s Visual Styler makes it easy to change how your form looks.

Plus, it has a few pre-made design templates for premium users to customize everything in one click.

Formidable design templates

If you want more control over your form, click the three dots in the corner of the template, and choose Edit.

Here, you can customize every part of your form. Title, description, colors, submit button, fields, font size, and more.

Formidable Vsual styler

And as you make the changes, you’ll see them on your form in real-time.

Feel free to play around with the different options to make the form exactly what you want! Plus, just like the Divi form CSS, you can customize the CSS of your Formidable form, too.

Then, click Update to save your changes.

Now we just need to display your form!

So before you leave the Style tab, click Embed → Insert manually and copy the WordPress shortcode.

You’ll need it in the next step.

Step 3: Publish the form

Head to the post or page with your Divi layout where you want to display the form.

Then add a new Divi module, and search for Code.

Divi code block

Add the module, then paste the shortcode you copied in the previous step into the box.

Once you click the checkmark button, your form is ready to go!

Why use Formidable Forms for your Divi contact form styling?

Formidable’s styler makes designing the form page layout simple, but it doesn’t stop there.

It’s also fantastic at handling what you want to do after the user submits the form.

Formidable Forms banner

Show a success message, redirect them to another page, or even show them gated content. With Formidable, the power is in your hands, and you can decide.

Plus, you get tons of great features:

  • Many form templates to speed up form building
  • Conversational forms to help increase conversions
  • Conditional logic to create a personal experience
  • Landing pages to create an entire contact page
  • Email notifications to alert you or connect with a visitor

But we recommend checking the full feature page to see how Formidable benefits you.

 Get Formidable Forms now!

Are you ready to customize your Divi contact form design?

Form design is tons of fun once you start to play around with it.

And whether you use Divi or Formidable Forms, you have the tools to make your form stand out.

So, if you’re wondering, “How do i style a Divi contact form success message?” This post on designing your success message is for you.

Last, follow us on Facebook, Twitter, and YouTube for more WordPress tips and tricks!

Read more about styling your forms!

  • employee engagement survey How to Create an Employee Engagement Survey (In 3 Steps)
    Read More
    How to Use Custom Forms with the Themify Ultra WordPress Theme How to Use Custom Forms with Themify Ultra WordPress Theme
    Read More

Did you know that Formidable Forms is one of the fastest WordPress form builder plugins available today? If you're not already using it, get started with our free plugin or the full-featured pro version!

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. Jim Buell says

    November 5, 2020 at 9:52 am

    I'm replying to update on this problem and an interim solution, which CampusPress helped me with. I'd mistaken the problem I experienced as being dependent on which browser I was using. Instead, it had to do with how I was logged in. CampusPress has a custom site setting in the WordPress Settings>Reading Dashboard that permits specifying a site-wide password -- any visitor who knows that password can proceed to the site, without a login name. Trouble is, Formidable's CSS styles attempt to load before that password check, but can't be applied then. So when I was logged in with developer credentials, all was good. But on any other browser or machine, the styles wouldn't apply. That pertained not just to the Divi stylesheet here, but to the default Formidable styling, as well; it's just that I'd only noticed the problem while attempting to set up the Divi FF style. The workaround has been to paste the necessary CSS from FF's stylesheet into Divi's Theme Options area in the dashboard. That way, even though the CSS styles don't apply at first when they should, they do apply via the Theme Options. I think CampusPress may be following up with Formidable to see if they might be able to come up with a better solution by changing when the CSS gets called, but for now, this workaround does work.

    Reply
    • Steve Wells says

      November 5, 2020 at 1:41 pm

      Thanks for sharing these details and the work-around. We'll look into this and see if there is a better way to load that CSS so it works better with CampusPress.

      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