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 your WordPress theme, 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. To access this template free, enter your email below to get the download. Then, 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.
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.