How to Build Custom WordPress Forms with Beaver Builder

Beaver Builder is a page-building WordPress plugin that offers you the tools to create beautiful web pages for any WordPress theme. You can even create a basic contact, login, and subscribe form but that’s it.  Our WordPress form builder provides you with a variety of templates, includes an endless combination of use cases, and comes with awesome integrations.

Not only that but Beaver Builder makes the process of adding WordPress forms extremely easy.   Read below to find out how easily you can add Ninja Forms to your WordPress website and get the most out of our WordPress form builder while using Beaver Builder.

Adding WordPress Forms with Beaver Builder

The Beaver Builder provides you with three easy different ways to add Ninja Forms to your WordPress website; the Ninja Forms Widget, Append a Ninja Form, and the shortcode method.

1. Ninja Forms Widget

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.

Bonus: Styling the WordPress form

Beaver Builder 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 Beaver Builder is easy!

As you can see adding WordPress forms with Beaver Builder can be done in three easy ways.  Through the Ninja Forms Widget, by Appending a Ninja Form, or with a shortcode.  Consider giving your form the gift of style! Layout and Style can be purchased with any membership or on its 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 😊