How to Add a WordPress Form to Elementor

Did you know that the free Elementor plugin doesn’t include form-building features? Building a WordPress form with Elementor requires either the purchase of Elementor Pro, which includes a limited number of form options, or a form-building alternative.

Enter; Ninja Forms.

Our drag-and-drop form builder includes an assortment of WordPress form templates and form fields. Includes spam protection, submission management, and the freedom to build endless WordPress form solutions!

So let Elementor do what it does best, build beautiful websites and leave the form building to us! Read below to find out how easy it is to add a WordPress form to any Elementor page with Ninja Forms.

Three ways to add a WordPress Form using Ninja Forms

Setting up Ninja Forms on your WordPress website is a breeze and takes only a few minutes! All you’ll need is our free Ninja Forms plugin; once the plugin is installed and activated, the next step is to build your form.  After that, you are ready to add your form to any WordPress page or post.

1. Use the Ninja Forms widget to add your WordPress form to Elementor

Open up a WordPress page or post, and look for the blue Edit with Elementor button. This button will redirect you to the front end of your website, where you can add modules like the Ninja Forms widget to your page or post.

To add the widget, click the gray plus sign or graph icon in the Elementor menu ( upper-left ) to bring up Elementor’s Widget menu. Next, scroll until you find the WordPress dropdown.

Open it up and click on the Ninja Forms Widget.  Drag and drop the widget into the page/post, and then select the WordPress form you want to be displayed.

2. Add your WordPress form with the “Append a Ninja Form” box.

While editing your WordPress page or post, notice the sidebar on the right side of the editor; in the sidebar, look for the option  Append a Ninja Form.  Select your WordPress form from the dropdown.  That’s it! This will display the chosen WordPress form at the bottom of your page or post.

3: Use the Ninja Forms shortcode to add your WordPress form to Elementor

To add WordPress forms using the shortcode method, open the widget menu by clicking on the plus sign or graph icon in the Elementor menu  ( upper-left ).  Search for shortcode in the search field. Select the shortcode widget and paste the WordPress form shortcode ( Ninja Forms > Dashboard ) into the field, then drag-and-drop the widget to your form.

Bonus: Styling the WordPress Form

Elementor comes with the option to add a simple background to your WordPress form, but that’s it. For any additional customization, I recommend our styling plugin. Our Layout and Styles add-on offers an easy way to change text colors, font sizes, field borders, and much much more without CSS.

Once installed, hover over Ninja Forms and click on Styling.  Doing so will reveal the Ninja Forms Style Settings.  Here you can 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 hacks, check out our guide on How to Make Gradient Submit Buttons for Your WordPress Form and How to Style Your WordPress Forms ( Easy Examples )

Give your WordPress form the gift of style with the Layout & Styles add-on.   Unlike our competitors, we give you the option to purchase our add-ons individually for a single site, five sites, or 20 sites. In addition to that, all add-ons come included with priority support and a 14-day money-back guarantee.

However, if you are looking for more add-ons, you can always check our membership plans which have multiple add-ons bundled and come with extra membership discounts. The choice is yours!

So try it out today, see what you think, and if you don’t like it, ask us for a refund 😊

Adding WordPress Forms to Elementor is Easy!

As you can see, adding WordPress forms to Elementor is a cinch; whether it’s with Elementor’s built-in Ninja Forms widget, Ninja Forms Append a Ninja Form box, or the classic shortcode method, we’ve got you covered.

If you use a WordPress page builder other than Elementor and would like to know how you can add Ninja Forms to your website, check out  Beaver Builder, Divi, or Kadence tutorials.  Each article walks you through the process of adding Ninja Forms to your WordPress website.