Divi is known for its visual building tool that allows you to draft pages and create beautiful layouts, all from the front end of your website. Although Divi comes with the ability to create a form, you are limited to one module, the Contact Form module. With our WordPress form builder, you have access to a variety of templates, a plethora of fields, integrations, and much much more.
Not only that, but Divi makes the process of adding Ninja Forms extremely easy. So keep reading to find out how easy it is to add Ninja Forms to your WordPress website and get the most out of our drag-and-drop form builder while using Divi.
Adding WordPress Forms to Your Divi Website
Divi gives you the option to add Ninja Forms in two ways; the Append a Ninja Form and the shortcode method.
1. Append a Ninja Form
While editing your WordPress page or post, in the sidebar on the right side of the editor, there is an option to Append a Ninja Form. Select your Ninja Form from the dropdown menu to display the WordPress form at the bottom of the page or post.
2. Shortcode Method
To add WordPress forms using the shortcode method, view the front-end of the page or post that you would like to add the WordPress form too. In the WordPress Admin toolbar at the top of your page or post, click the Enable Visual Builder button to start front-end editing.
You will be given three template options, choose, Build From Scratch, then select Start Building. To insert the WordPress form shortcode, click on the gray module icon and search for the Text module. You can do this by clicking the Insert module icon, choosing Text from the module list, and then pasting in your Ninja Forms shortcode ( Ninja Forms > Dashboard ) to the text editor field.
Bonus: Styling the WordPress Form
Divi provides you with the option to add a simple background to your WordPress form, and that’s it. For additional customization, you will need the Layout and Styles add-on. The Layout and Styles add-on offers you an easy way to change text colors, font sizes, field borders, and much much more without CSS.
Once installed, hover over Ninja Forms to open the menu, scroll down, and click on Styling. Doing so will bring you to Ninja Forms Style Settings. This is where you will be able to make all the styling modifications for your WordPress form that you desire.
Customizing the Field Labels
To edit the field labels, go to Ninja Forms > Styling > Default Field Styles > Label Styles. To change the color of the labels, find Text Color, then click on Select Color. Doing so will bring up a color picker from which you can choose your color.
Customizing the Submit button
Modifying the submit button can be done by navigating to Ninja Forms > Styling > Field Type Styles > Submit. To edit the background color and text color of the Submit button, open the Submit Element dropdown. To change the hover state of the button, open the Submit Hover Element dropdown.
For more WordPress form styling tips, check out our guide on How to Make Gradient Submit Buttons for Your WordPress Form and How to Style Your WordPress Forms ( Easy Examples )
Adding WordPress Forms with Divi is Easy!
As you can see, adding WordPress forms with Divi can be done in two ways; by appending and adding them as shortcodes to a text module. Consider giving your form the gift of style! Layout and Style can be purchased with any membership or on their own. All add-ons come included with priority support and a 14-day money-back guarantee. So try it out today, see what you think, and if you don’t like it, ask us for a refund 😊
