< All Topics

Add Ninja Forms to your website using this widget. You can fully customize the Forms to improve the UI/UX of the forms. Ninja Forms have a lot of customization options and layouts which you can use by drag and drop.

Pro tip
Add Ninja Forms to your website that will enhance the UX and UI of your website and forms. Make sure to enter the correct details for the form everywhere.

How to use the Ninja Forms Widget of The Plus Addons For Elementor

The Ninja Forms widget comes with different layouts. Let’s understand how to use this widget in the tutorial below. 

Table Of Contents

Adding Ninja Forms To WordPress

First, you need to download and install the Ninja Forms from wordpress.org or their official website. To download, go to the link: https://wordpress.org/plugins/ninja-forms/ as shown in the picture below.

Once you have Installed the Ninja Forms to your WordPress, then you need to follow the steps as shown in the video below. You can also create new forms the in Ninja Form forms section.

General Steps

Search for the Ninja Forms element from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the Ninja Forms widget. First, click on the Content tab.

1. Content

Ninja Form

Select Form

Select your desired Ninja form you want to display on the website.

Style

Select the form style you want to display on the website.

Select Style for the Ninja Form widget.

2. Style

The Style tab is used for customizing the appearance of all the Ninja Form widget components. All these styling options include customizing the fonts, colors, background, margins, and padding which are common across all the widgets. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Form Heading

Set the inner padding, Typography, Margin, Label, Symbol, box Shadow, Box Border with this option.

Field Hint

Set the inner padding, Typography, Margin, Label, Symbol, box Shadow with this option.

Label Styling

Set the inner padding, Typography, Margin, Label, Symbol with this option.

Input Fields Styling

Set the inner padding, Typography, Margin, Label, Symbol, box Shadow with this option.

Textarea Fields Styling

Set the inner padding, Typography, Margin, Label, Symbol, box Shadow with this option.

Checkbox/Radio Field

Set the inner padding, Typography, Margin, Label, Symbol, box Shadow, Box Border with this option.

Submit/Send Button

Set the inner padding, Typography, Margin, Label, Symbol with this option.

Outer Field

Set the inner padding, Typography, Margin, Label, Symbol, box Shadow, Box Border with this option.

Form Container

Set the inner padding, Typography, Margin, Label, Symbol with this option.

Response Message

Set the inner padding, Typography, Margin, Label, Symbol, box Shadow, Box Border with this option.

Extra Option

Set the inner padding, Typography, Margin, Label, Symbol, box Shadow, Box Border with this option.

On Scroll View Animation

On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View On Scroll View Animation Tutorial

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?