How To Use The Ninja Forms Widget By Atomic Addons

The Ninja Forms widget by Atomic Addons shows a form you built with the Ninja Forms plugin and lets you style it in Elementor. You keep building the form and its actions in Ninja Forms; the widget places it and sets its look. This guide covers adding the widget and its settings.

Enable the Ninja Forms Widget

Ninja Forms is a Free widget and works with the free Atomic Addons plugin. It needs the free Ninja Forms plugin: until that is active, the widget's card in the dashboard shows an Install Ninja Forms button and cannot be turned on. Then switch it on:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Ninja Forms. You can also open the Forms / User category.

4. 4

   Turn the Ninja Forms widget on.

5. 5

   Click Save Settings.

Add the Ninja Forms Widget

Create your form first under Ninja Forms → Dashboard, then:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Ninja Forms. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Layout

Open the widget and go to Content → Layout. In Select Form, pick the Ninja Forms form to show; the list says “Form Not Found!” while you have none. Until you pick one, the editor shows a reminder and visitors see nothing.

Style the Ninja Forms

Everything below is on the Style tab:

• Label — color and typography.
• Input — colors, border, radius, padding and typography of the fields.
• Submit Button — the button's look in normal and hover states.
• Additional Option — Fullwidth Input, Fullwidth Texarea and Fullwidth Button stretch those parts across the form.