Need more flexibility for Divi forms? Learn how to style customizable contact forms to match your theme using Formidable Forms.
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.
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.
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.
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:
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:
You can also choose styles when you're editing individual forms from the Settings tab:
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:
- Go to Formidable → Import/Export in your WordPress dashboard
- Use the Choose File button to select the .xml file that you downloaded
- Click the Upload file and import button
You should see a success message:
Then, you'll see a new "Divi" style when you go to Formidable → Styles:
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.
6 Fastest Loading WordPress Themes
The Best WordPress Themes (Paid & Free)
How to Build a WordPress Website (In 7 Easy Steps)
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.
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.