Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Blog
  • Support
  • Login
  • Get Formidable Forms

Formidable Team / Last Updated December 21, 2021

How to Style WordPress Forms to Match the Divi Theme

Need more flexibility for Divi forms? Learn how to style customizable contact forms to match your theme using Formidable Forms.


How to Style WordPress Forms to Match the Divi Theme

The Divi theme and plugin let you design your WordPress site using a visual, drag-and-drop interface. While Divi includes its own modules for basic contact forms and email opt-in forms, those modules are limited in what they can do, which is why many Divi users turn to dedicated WordPress form plugins like Formidable Forms.

But that leads to a new issue - if you're using a separate form plugin, how do you make your Divi forms match the rest of your Divi site to ensure a cohesive design?

Formidable Forms lets you inherit form styles from the best WordPress themes, but you might want more detailed control over exactly how your Formidable Forms appear in Divi.

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

To help, we're going to show you how to style Formidable Forms to match the Divi theme without needing to use your own custom Divi form CSS (though you certainly can if you want to!).

That way, you get the best of both worlds - the flexibility of Formidable Forms with the visual aesthetic of your Divi site.

Subscribe on YouTube

How to Style Formidable Forms to Match Divi

Below, you'll learn how to create your own custom style for Divi forms. But if you'd prefer to save some time, we have a pre-built Divi style template for Formidable Forms that you can import to have your forms instantly match the styling of the default Divi theme. Once you get the download, you can import it directly to your WordPress site using the instructions at the end of this article.

Otherwise, follow along to learn how to style Divi forms from scratch in Formidable Forms…

1. Open Formidable Form Styler and Create Divi Style

The Formidable Form Styler tool gives you a visual interface to style your Divi contact forms to match the rest of your Divi website. While you can use your own Divi forms CSS, the interface also lets you customize everything using non-technical settings and a live visual preview.

To open the Formidable Form Styler, go to Formidable → Styles in your WordPress dashboard.

Then, you can choose to either:

  • Edit the existing Formidable Forms style.
  • Create a dedicated style just for your Divi forms. Note, creating multiple stylesheets is a Pro-only feature.

Divi form style settings

2. Choose Your Style Options

Next, use the options on the side to customize your form's style to match your Divi theme. As you make changes, you'll see the live preview on the right side of your screen update to reflect those changes.

For example, you can see how the preview has changed in the screenshot below. Note, this is what our pre-made downloadable Divi form style looks like:

Premade divi form style template

Unfortunately, we can't provide the exact settings you need to use because it depends on how you've configured Divi's many style options and/or which Divi layout pack you're using.

But if you want a good starting off point, the pre-built Divi form style for Formidable Forms is a great choice. You can then further customize the template to match whatever changes you've made to Divi's looks.

3. Assign Your Style to Your Divi Forms

Once you're happy with your style, you'll need to assign it to the form(s) that you want to use the Divi styling.

A quick way to do this is from the Manage Styles tab in the Style interface. Here, you'll get a list of all your forms and you can use the drop-down to quickly change styles:

Set style per WordPress form

You can also choose styles when you're editing individual forms from the Settings tab:

Set style on single WordPress form

And that's just it! You learned how to style Formidable Forms to match your Divi website.

How to Import the Pre-Made Divi Form Style to Formidable Forms

If you want to use Formidable Forms' pre-built Divi form style, here's how you can import it:

Once you enter your email to download the style template, you should get an option to download an .xml file.

Keep this .xml file handy because you'll need it. Then:

  1. Go to Formidable → Import/Export in your WordPress dashboard
  2. Use the Choose File button to select the .xml file that you downloaded
  3. Click the Upload file and import button

Upload WordPress form style template

You should see a success message:

Import Divi form styling template

Then, you'll see a new "Divi" style when you go to Formidable → Styles:

Edit Divi form styling

Divi + Formidable Forms: Better Together

Divi gives you the power to build beautiful WordPress sites. Formidable Forms gives you the power to build functional, flexible forms. Combine them and you can build beautiful forms for any use that seamlessly fit into your Divi designs. Learn how to change WordPress themes without missing a beat.

The Formidable Form Styler is available to both free and paid users, but you'll need the Pro version of Formidable Forms to create multiple stylesheets and import pre-made form styles, like our Divi style template.

If you're not a paid user yet, learn about the many Pro features that make Formidable Forms the best WordPress form plugin for Divi.

Read more from the Formidable blog

  • Fastest WordPress Themes 6 Fastest Loading WordPress Themes
    Read More
    Best WordPress Themes - free & paid The Best WordPress Themes (Paid & Free)
    Read More
    how to build a WordPress website How to Build a WordPress Website (In 7 Easy Steps)
    Read More

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 to Steve Wells 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 Calculator in WordPress: 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
    • The Best Gravity Forms Alternative: 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
  • Blog

Copyright © 2022 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