TL;DR: Building custom WordPress forms using Ninja Forms and Divi is really easy. All you need is the (free) core Ninja Forms plugin and the Divi page builder. This expert tutorial will teach you step-by-step how to do it.
There are lots of reasons why you might want to include a form on your website. For example, you might want to add a contact form so visitors can ask questions, or you might want to add a form so that people can register for an event, sign up for your newsletter, or submit an application.
The Divi page builder does include a contact form block, but if you want to create different types of forms then you need a third-party form builder plugin for WordPress. There are plenty of different form builders available, but my favorite is Ninja Forms.
Jump straight to the tutorial or keep reading to find out why I recommend Ninja Forms and Divi.
Why Ninja Forms?
There are dozens of different form builders available, most of them with plugins to integrate with your WordPress posts and pages, so why choose Ninja Forms? The simple answer is that it’s one of the most beginner-friendly and versatile form builder plugins available.
In 2020, I worked on a project that tested 30+ form builders, and Ninja Forms stood out as one of the best. Does it do everything? Not quite (for example, Ninja Forms doesn’t offer HIPAA compliance), but for most bloggers and business owners, it does everything you need it to do.
Here’s some other reasons to choose Ninja Forms:
- It’s flexible. Unlike most form builders, Ninja Forms allows you to pick and choose the premium features that you want or need. It has a range of add-ons that you can buy individually (starting at $49/year) or as part of a bundle (you can make big savings using a bundle!)
- It’s simple. Some form builder plugins have lots of complex settings that you need to figure out. Ninja Forms uses a kind of wizard to walk you through creating your forms (you can also check out my guide to creating a form with Ninja Forms), making it beginner-friendly.
- It’s versatile. Ninja Forms works with most page builders; in addition to Divi, it works with Beaver Builder, Elementor, and the Gutenberg editor. When you install the core Ninja Forms plugin (which is 100% free, forever), it installs a native block for the Gutenberg editor, too, so you just have to drop the block in place and choose the form you want to display.
The Ninja Forms core plugin is free to install from the plugins repository. Enable more features with add-ons — they all come with a 14-day money-back guarantee so you can get a refund if you’re not happy.
Benefits of Using the Divi Page Builder
If you’ve clicked on this post in the search results, I’m guessing that you’re already using Divi as your WordPress page builder. Just in case you’re not, I wanted to share some thoughts about Divi. You can skip straight to the tutorial if you already know why Divi is a great choice!
I’ve used a lot of page builders for WordPress over the years, including Thrive Themes, Elementor, Beaver Builder, Visual Composer/WP Bakery, and, of course, Divi. Divi was one of the first page builders I tried, and it has improved immensely since then. While I mainly use Thrive Themes and the Gutenberg editor for my WordPress websites now, there are a lot of advantages to using Divi.
- It’s a theme and a page builder. You don’t need a separate theme when you’re using Divi. It’s an all-in-one package that offers 1000+ pre-designed layouts.
- It’s fully customizable. With Divi, you have a ton of customization options, including specific mobile/smartphone customizations, module customizations, header and navigation customizations, layout and typography customizations, button styles, and more.
- It’s perfect for eCommerce. Divi integrates seamlessly with WooCommerce, with a range of WooCommerce modules, including product galleries, product reviews and ratings, and product upselling.
- It’s beginner-friendly. You’d think with a product that has so many features, it would be complicated, but Divi is actually really beginner-friendly. It also has excellent support, plus an active community where you can get help from other Divi users.
Want to try Divi before you buy? You can take Divi for a test run with the free Divi demo. There’s also a 30-day money-back guarantee, so you can try it risk-free.
Adding WordPress Forms to Your Website Using Divi Page Builder
Divi allows you to add Ninja Forms in two ways: the shortcode method and the Append a Ninja Form method. I recommend the shortcode method as it gives you complete control over where your form is displayed, whilst the Append a Ninja Form method only allows you to add a form to the end of your post or page.
IMPORTANT!
If you haven’t already created the form you want to use, you’ll need to create it before you continue the tutorial. Head to Ninja Forms in your WordPress dashboard and follow the form creation wizard to create your form, either using a pre-designed template or a blank template. You can also check out my step-by-step tutorial for creating a form using Ninja Forms, then head back here to continue adding your form using Divi.
Shortcode Method
Divi doesn’t have a Ninja Forms module built-in like Gutenberg does, but thanks to the Ninja Forms shortcodes, you can easily add forms to posts and pages. This adds an extra step to the process, but it’s still simple and beginner-friendly.
Time Needed : 5 minutes
Adding a Ninja Form to a New Page or Post in Divi
Step 1: Copy the Ninja Forms shortcode
Before creating a new page, head into the Ninja Forms dashboard to get the shortcode of the form you want to add to your page. Copy the full shortcode (including the [ ]) — you’ll need this in a minute.Step 2: Create a new page or post and enable the Divi visual builder
Create your new post or page with the “Add New” button. In the WordPress Admin toolbar at the top of your page or post, click the “Enable Visual Builder” button to start front-end editing.Step 3: Set up your new page
In the front-end editor, you will be given three template options. For this tutorial, I suggest choosing “Build From Scratch” then select “Start Building.” Add any content you want to appear on the page — for example you might want to add a short paragraph above a contact form explaining how long it might take you to respond to messages, or to direct visitors to consult an FAQ page before contacting you.
Step 4: Add your Ninja Forms shortcode
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 (that you copied earlier) to the text editor field.
Before creating a new page, head into the Ninja Forms dashboard to get the shortcode of the form you want to add to your page. Copy the full shortcode (including the [ ]) — you’ll need this in a minute.
Create your new post or page with the “Add New” button. In the WordPress Admin toolbar at the top of your page or post, click the “Enable Visual Builder” button to start front-end editing.
Adding Ninja Forms to an Existing Page With Divi
The tutorial above shows you how to add a Ninja Form to a new page, but what if you want to add a form to an existing page? The steps are essentially the same, except you’ll choose the existing post or page that you want to add your form to instead. You can skip step 3 above, as you’ll already have content on your page.
In step 4, just add a new module where you want to position your Ninja Form and paste in the shortcode.
Append a Ninja Form
While editing your WordPress page or post, in the sidebar on the right side of the main editor (not the visual 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.
Styling the WordPress Form
Divi allows you to add a simple background to your WordPress form, and that’s it. Because you’re not creating the form with Divi directly, just using Divi to display the form you’ve created, you can’t customize the appearance of the form from within the Divi settings, unfortunately.
The core Ninja Forms plugin (the free version) includes some basic styling options, but if you want to customize your forms further, 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 having to understand 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
The submit button can be modified 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.
You can even add gradient effects to your buttons using the Layout and Styles add-on for Ninja Forms, to make your buttons really stand out.
Summing Up: Adding Forms in WordPress Using Ninja Forms and Divi
Ninja Forms and Divi make a great combination, adding to the already-exceptional functionality that Divi offers. Although Divi doesn’t have a native Ninja Forms module, it’s easy to add Ninja Forms to posts and pages created with Divi using the Ninja Forms shortcode method.
You can also add forms to the end of your page using the append Ninja Form function in post settings — this method is useful if you want to add a custom comment or feedback form at the end of blog posts, for example.
Both Ninja Forms and Divi are great choices for beginners thanks to their intuitive interfaces and extensive documentation.
Frequently Asked Questions About Ninja Forms and Divi
Does Ninja Forms work with other page builders?
Yes, Ninja Forms works with other page builders, including Elementor and Beaver Builder. It’s also fully compatible with the default Gutenberg editor. Want to learn how to use Ninja Forms with Beaver Builder? Check out my how-to guide!
Does Gravity Forms and other form builders work with Divi?
Yes, Gravity Forms works with Divi and other page builders for WordPress. In the Gravity Forms plugin for WordPress, you can use the third-party Divi add-on, which adds a module for Divi that enables you to insert Gravity Forms into posts and pages easily.
Are Ninja Forms secure?
Ninja Forms doesn’t provide additional security features, but as long as your website has an SSL certificate installed, then yes, Ninja Forms are secure. For added security you might want to consider adding a security plugin to your WordPress setup.
Are Ninja Forms HIPAA compliant?
No, Ninja Forms doesn’t offer HIPAA compliance. Other form builders, such as Gravity Forms, do offer HIPAA compliance, but usually, you will need to purchase an add-on to take advantage of HIPAA compliance with form builders.
Are Ninja Forms free?
The core plugin for Ninja Forms is 100% free to use, forever. You can create basic WordPress forms such as contact forms with the free Ninja Forms plugin, but to get the most out of Ninja Forms, you really need to purchase add-ons or subscribe to a membership bundle.
How do I use Ninja Forms plugin?
Ninja Forms is really easy to use and is designed to be beginner-friendly. You simply install the plugin and follow the step-by-step wizard to create your first Ninja Form. You can read my tutorial on how to build a contact form using Ninja Forms for additional advice on how to get started with Ninja Forms.
