How to Build Custom WordPress Forms with Beaver Builder and Ninja Forms | WP Web Whizz (2024)

Last updated on October 21st, 2022 at 09:58 am

Beaver Builder is one of the most popular page builders for WordPress, but while it’s a great way to build and edit your web pages in a visual, front-end format when it comes to adding forms to your web pages, it has some serious limitations.

You can use Beaver Builder to create basic forms, like contact and subscription forms (although only with the premium version), but for anything more advanced, like conditional logic, multi-page forms, and forms with payment processing options, you need to integrate a third-party form builder.

Beaver Builder works with various different form builders, such as WPForms, Gravity Forms, and Contact Form 7, but my favorite is Ninja Forms. It offers a great range of features and is incredibly flexible.

In a hurry? Jump straight to the how-to guide!

Why Use Ninja Forms with the Beaver Builder Page Builder

Even if you only need a basic form for your WordPress website, there are a lot of advantages to using Ninja Forms to create your forms. Ninja Forms is free to add to your WordPress setup and can be installed directly from the WordPress repository.

Benefits of Ninja Forms

Ninja Forms offers a ton of features in the core plugin (did I mention it’s totally free to add to your website?), including:

The free features are great, beating the majority of other WordPress form builders), but the biggest benefit of Ninja Forms is the way you can customize it to perfectly meet your needs. Other form builders tend to have a very basic free version and an expensive paid version where you could end up paying a high premium for features you’ll never use or need.

Ninja Forms is different. Not only is the free core plugin packed with features, but you can pick and choose from an ever-increasing range of add-ons, each available to purchase separately or as part of a bundle. Add-ons include:

Individual add-ons start at $49 per year for a single site (with use on up to 20 sites for $99).

If you want more than one add-on, however, it may be cheaper to purchase a membership bundle. For as little as $49/year, you can get the Basic Membership subscription which includes the File Uploads, Conditional Logic, Layout & Styles, and Multi Step Forms add-ons, plus a 10% discount on additional add-ons.

Adding Ninja Forms WordPress Forms with Beaver Builder

In Beaver Builder, there are three easy ways to add Ninja Forms to your WordPress website:

In this tutorial, I’ll walk you through each method, so you can quickly and easily add Ninja Forms to your posts and pages.

Using the Ninja Forms Widget to Embed Forms

Within any WordPress page or post, you will see an option to use Beaver Builder or the Standard Editor. Select Launch Beaver Builder. Doing so will redirect you to the front end, where you can add modules to style your page or post.

Clicking the blue plus sign will bring up the Module menu. Typing Ninja Forms into the search bar will bring up the Ninja Forms Widget. Drag and drop the widget onto the page, and select the WordPress form you want to be displayed.

2. 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. Choose your Ninja Form from the dropdown menu to display the WordPress form at the end of the page or post.

3. Shortcode Method

In the page/post editor, open the Module menu by clicking the blue plus sign. Search for the Text module. Paste the Ninja Forms shortcode ( Ninja Forms > Dashboard ) into the text editor to embed the WordPress form to your page or post.

Do More With Ninja Forms and the Layout and Styles Add-On

Beaver Builder enables you to add a simple background to your WordPress form, but for even more customization options, you will need to purchase the Layout and Styles add-on for Ninja Forms. The Layout and Styles add-on offers you an easy way to change text colors, font sizes, field borders, and much much more without needing to use 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 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.

• Change the background of a form using a built-in color picker tool
• Adjust form border size and color
• Adjust field border size and color
• Add more or less space between fields
• Change text color
• Make fields taller or shorter, wider or narrower
• Add custom styles to form elements, labels, and wrappers.
• Add styles to your form’s success and error messages

Summing Up

Beaver Builder integrates seamlessly with Ninja Forms, enabling you to add beautiful forms to your posts and pages. The best thing about Ninja Forms is that the core plugin is free to use (forever) and has enough features to enable you to create simple forms.

To get the most out of Ninja Forms, however, I recommend upgrading to the Basic Membership plan, which includes the four most popular add-ons for Ninja Forms: Conditional Logic, Layout & Styles, File Upload, and Multi Step forms.

It would cost you $49/year to buy just one of those add-ons, but with the Basic Membership plan, you can save $149 as Ninja Forms has a great offer for 50% off the normal price of the Basic Membership plan, making it just $49 for the first year! Plus, Ninja Forms has a no-quibble 14-day money-back guarantee, so you can try premium features risk-free.

Frequently Asked Questions About Ninja Forms and Beaver Builder

The free version of Beaver Builder includes features such as:

The premium version of Beaver Builder, however, includes more advanced features like: