Skip to content

How to Build Custom WordPress Forms with Beaver Builder and Ninja Forms

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.

Ninja Forms form builder for WordPress with Beaver Builder

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: 

  • Unlimited forms
  • 28 different form field types
  • Add an unlimited number of form fields
  • 18 pre-built form templates
  • Custom HTML field
  • Full GDPR automation
  • 100% mobile responsive
  • Multiple form autoresponders (email notifications)
  • Unlimited number of entries
  • Drag and drop interface

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:

  • Conditional logic
  • Layout and style
  • Multi-step forms
  • File uploads
  • Excel export
  • PDF form submission
  • Zapier
  • PayPal Express
  • Stripe
  • Recurly subscriptions
  • ActiveCampaign integration
  • ConvertKit integration
  • CleverReach integration
  • Save progress
  • User analytics
  • Hubspot
  • Salesforce
  • Zoho CRM
  • Slack
  • Trello
  • ClickSend SMS

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:

Time Needed : 5 minutes

How to add Ninja Forms to your WordPress website with Beaver Builder

  1. Option 1: Use the Ninja Forms widget in Beaver Builder

    This is probably the easiest way to add your Ninja Forms to your webpages and blog posts in Beaver Builder. You just need to select the widget and choose your form.

  2. Option 2: Use the append a Ninja Form function

    If you want to add your form at the end of your page or post, then the best method is using the append a Ninja Form method.

  3. Option 3: Use the shortcode method

    When you create a Ninja Form, it will be allocated a unique shortcode ID. To use this method for adding your forms to your posts and pages in Beaver Builder, you just need to copy and paste the shortcode.

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

Before You Start

Before using any of these methods for adding forms in Beaver Builder, you’ll first need to create the form you want to use within the Ninja Forms WordPress plugin dashboard. I’ve created a step-by-step tutorial for creating forms using Ninja Forms in WordPress – if you’ve not built a form with Ninja Forms before, check out my guide (opens in a new tab) before coming back here to continue adding your Ninja Form to Beaver Builder

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.

Using Beaver Builder with Ninja Forms

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.

Appending a Ninja Form to add it to Beaver Builder

3. Shortcode Method

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

Shortcode method for adding Ninja Forms to Beaver Builder page builder in WordPress

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.

Other Customization Options With Layout & Styles

  • 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

  1. How do I use Ninja Forms in WordPress?

    Ninja Forms is one of the most beginner-friendly plugins for creating forms in WordPress. It offers templates to enable you to create forms really quickly and easily. To read more about how to install Ninja Forms and create your first form, check out my step-by-step guide to creating a WordPress form with Ninja Forms.

  2. What types of forms can I create with Ninja Forms?

    You can create a wide range of forms using Ninja Forms, including contact forms, quote forms, questionnaires, event registrations, user registrations, feedback forms, and more. In addition to the templates available, you can also use the blank form option to create a completely customized form using the 25+ form fields that Ninja Forms includes for free.

  3. Is Ninja Forms free?

    Yes and no. There is a 100% free core plugin that has the basic Ninja Forms functions, including 18 form templates, an email autoresponder, and a wide range of form fields. You can install it from your WordPress dashboard in the WordPress plugin repository.Like most form builders, however, Ninja Forms also offers premium features. You have the option to either purchase a standalone add-on such as the Conditional Logic add-on or the Layout & Styles add-on, or you can choose a membership plan which bundles add-ons together in money-saving packages.

  4. Does Beaver Builder integrate with other form builders?

    Yes, Beaver Builder integrates with other form builders – but there’s no definitive list of form builders that work seamlessly with Beaver Builder as Ninja Forms does. If you choose another form builder plugin, you may need to use custom HTML or a widget to add your forms to posts and pages in Beaver Builder

  5. Is Beaver Builder free?

    There is a free version of the Beaver Builder page builder that you can install from your WordPress dashboard in the plugin repository. However, as with most page builder plugins, the best features are reserved for the premium version, which starts at $99 for the first year. One of the great things about Beaver Builder is that after the first year, you’ll get a 40% discount on your subscription.

The free version of Beaver Builder includes features such as:

Content Modules

  • Photo
  • Button
  • Heading
  • Icon
  • Text Editor
  • HTML
  • Audio
  • Video
  • Sidebar

Other Features

  • Full-width, column-based layouts.
  • Lightweight and semantic markup for maximum performance.
  • Photo, color, and video row backgrounds.
  • Mobile-friendly, responsive layouts.
  • Add your own CSS classes and IDs.
  • Use WordPress Widgets and shortcodes.
  • Works with Pages, Posts, and Custom Post Types.

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

Content Modules

  • Contact Form
  • Tabs
  • Slider
  • Pricing Table
  • Map
  • Subscribe Form
  • Social Icons

Other Features

  • Beautiful pre-made layout templates.
  • Save, export, and reuse full-page layouts, rows, and modules.
  • Build your own custom modules.

How useful was this post?

Click on a star to rate it!

Average rating 4.9 / 5. Vote count: 30

No votes so far! Be the first to rate this post.

Martyn Denial

Martyn Denial

I've been building websites with WordPress for over 10 years, and now I spend my days giving advice to others on how to make the most of WordPress for their websites. I'm also experienced in SEO and affiliate marketing, but WordPress is what I do best!View Author posts

Cookie Consent Banner by Real Cookie Banner