Search

How to Add Ninja Forms to Elementor Page (Two Different Methods)

Elementor (the pro version) comes with a Form widget that you can use to add a form to the page/template you are creating. If you have been using Ninja Forms before installing Elementor, you can add your existing Ninja Forms forms to an Elementor page or template.

There are at least two ways to add a Ninja Forms form to an Elementor page. We will cover them in this article. Before getting started, edit the Elementor page where you want to add your Ninja Forms form to. Or, you can also create a new page. If you are new to Elementor, you can read the beginners’ we have written to learn how to use Elementor.

Method one: Using the Shortcode widget

Elementor has a widget called the Shortcode widget. You can use this widget to integrate WordPress plugins that use shortcodes with Elementor, including Ninja Forms. This widget is available on both the free version and the pro version of Elementor. Before using this widget, copy the shortcode of the form you want to add to the Elementor page. To do so, go Ninja Forms -> Dashboard. You can see the shortcodes of your forms on the Forms tab.

Switch to the Elementor editor and drag the Shortcode widget to the canvas area.

Paste the shortcode you have just copied to the Shortcode block under the Content tab on the left panel.

If the live preview of the form doesn’t appear on the canvas area, try to preview your page by clicking the eye icon.

This method doesn’t allow you to customize the look of your form.

Method two: Using an add-on

If you want to have an option to customize the look of your form when integrating Ninja Forms with Elementor, you can use an add-on. Two Elementor add-ons that you can use are Essential Addons and Happy Addons. These add-ons have a widget that you can use to add a Ninja Forms form to an Elementor page. Essential Addons and Happy Addons are freemium add-ons and the widgets to add a Ninja Forms form are available in the free version.

You can get the free version of Essential Addons and Happy Addons on the plugin directory of WordPress. Read the differences between Happy Addons and Essential Addons before making a decision which add-on you should install.

In this example, we will demonstrate how to add a Ninja Forms form using Essential Addons. Assuming you have installed and activated Essential Addons on your WordPress site, edit the page you want to add your Ninja Forms to with Elementor. Drag the Ninja Forms widget to the canvas area.

Go to the left panel. Select a form you want to add from the dropdown menu on the Ninja Forms settings block under the Content tab. You can also show/hide the form title, labels, and placeholder.

Open the Errors block to show/hide the error messages and validation errors.

To style up your form, you can open the Style tab. There are about 11 setting blocks you can open.

1. Form Container

You can open this block to customize the container of your form. You can set things like the form width, form background, form margin, form padding, and so on.

2. Title & Description

You can open this block to customize the title and the description of your form. You can set the text color, typography (font size, font family, font style), alignment, and margin.

3. Labels

You can open this block to the customize the form labels. You can set the text color and the typography of your form labels.

4. Input & Textarea

You can open this block to customize the fields of the form. You can set the alignment, background color of the form fields, text color of the form fields, border radius of the form fields, the width of the fields, the height of the fields, and so on.

You can customize both the normal state and the focus state of your form. Simply click the FOCUS tab to customize the fields of your form on the focus state. Focus state itself refers to a state where you place your cursor on a certain field (active field).

5. Field Description

You can open this block to customize the field description of your form. You can set the text color, typography, and the spacing.

6. Placeholder

You can open this block to set color of the placeholder of your form.

7. Radio & Checkbox

If you have a complex form that contains radio buttons and checkboxes, you can open this block to customize them. Enable the Custom Styles option to use custom styles. You can set the size, color, border width, border color, and so on.

You can customize both the normal state and the checked state. Simply click the CHECKED tab to customize the checked state.

8. Submit Button

You can open this block to customize the submit button of your form. You can set things like button alignment, button width, button background color, button text color, button border radius, and so on.

9. Success Message

You can open this block to set the color and typography of the success message of your form.

10. Required Fields Notice

You can open this block to set the text color and typography of the notice of the required fields of your form.

11. Errors

You can open this block to customize the error messages and the validation errors of your form. You can set the text color and typography.

That’s it. You can continue editing your page by customizing other widgets. Once done, click the PUBLISH/UPDATE to publish/update your for page.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to save yearly expense up to $219? why not?

Leave a Comment

Haven’t used Elementor Pro yet?