In this documentation, we will discuss the customization of the Ninja Forms widget, brought to you by the Element Pack addon for Elementor.
Enable The Ninja Forms Widget
To use the Ninja Forms widget from Element Pack, first, you have to enable the widget.
Go to WordPress dashboard > Element Pack Plugin dashboard.
Then, Click the 3rd Party Widgets Tab.
Search the Ninja Forms Widget Name.
Enable the Ninja Forms Widget.
Hit the Save Settings Button.
Note: To use this widget in the Elementor editor, you need to install the Ninja Forms Plugin separately.
Inserting the Ninja Forms widget
Go to the Elementor Editor Page and Hit the “+” icon Button.
Search the Ninja Forms widget.
Drag the widget and drop it on the editor page.
Work With The Content Tab
Layout Section
Go to Content > Layout
1. Select Form: You can select the form that you have already created. Here we have selected the basic information form.
(Note: To customize the form in the editor, create a form first in the Ninja Forms dashboard that includes the information you want to collect from your audience.)
Work with The Style Tab
Label Section
Go to Style > Label
Color: You can change the form’s label color with this option.
Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Input Section
Go to Style > Input
Placeholder Color: You can change the placeholder color with this option.
Text Color: You can change the input text color with this option.
Background Color: You can change the input field background color with this option.
Textarea Height: You can adjust the textarea height with this option.
Padding: You can adjust the inner space of the input field with this option.
Element Space: You can adjust the space between the labels with this option.
Border Type: This option allows you to add borders to your items. You can select various border types from this option. Such as Solid, Double, Dotted, Dashed, Groove.
Border Width: You can set the thickness of the border with this option.
Border Color: You can change the border color with this option.
Border Radius: You can control the roundness of the border
Submit Button Section
Go to Style > Submit Button
In this section, we have two more tabs. These are Normal & Hover. Let’s start with the Normal Tab -
Text Color: You can change the submit button text color with this option.
Background Color: You can change the button background color with this option.
Border Type: You can add and change border types with this option.
Border Width: Set the thickness of the border with this option.
Border Color: You can change the border color with this option.
Border Radius: This option controls the roundness of the border.
Box Shadow: You can add a shadow effect to the button with this option.
Padding: You can adjust the inner space of the submit button with this option.
Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Now, let’s proceed to the Hover Tab -
Text Color: You can change the submit button text hover color with this option.
Background Color: You can change the submit button background hover color with this option.
Border Color: You can change the border hover color with this option.
Additional Option Section
Go to Style > Additional Option
Fullwidth Option: Enable the switcher to make the input field full-width.
Fullwidth Textarea: Enable the switcher to make the textarea field full-width.
Fullwidth Button: Enable the switcher to make the button full-width.
All done! You have successfully customized the Ninja Forms widget on your website.
Video Assist
You can also watch the video tutorial to learn more about the Ninja Forms widget. Please visit the demo page for examples.
Thanks for being with us.