Go to athemes.com

Using the Ninja Forms Widget

Want to style your Ninja Forms to match the rest of your site? The Ninja Forms widget in aThemes Addons lets you select any form created with the Ninja Forms plugin and fully customize its appearance using Elementor’s visual editor.

In this guide, we’ll walk you through how to use the Ninja Forms widget in aThemes Addons for Elementor.

Table of Contents
  1. Activating the Widget
  2. Exploring Widget Options
  3. Customizing the Style Tab
  4. Following Usage Tips

Before you get started, make sure you’ve installed and activated the aThemes Addons plugin on your WordPress site along with Elementor.

Activating the Widget

Go to your WordPress admin dashboard and navigate to the aThemes Addons dashboard. Search for Ninja Forms and toggle the widget on to activate it.

Exploring Widget Options

Configuring the Ninja Forms Section

The Ninja Forms section provides the following options:

  • Title – Add a custom title above the form.
  • Form Title Tag – Select the HTML tag for the title (H1, H2, or H3).
  • Select Your Form – Choose from a dropdown of all forms created with Ninja Forms.
  • Form Alignment – Set the overall form alignment.
  • Content Alignment – Align the form content within the container.
  • Form Width – Define the form width in pixels or percentage.
  • Stretch Button – Toggle to make the submit button span the full form width.
  • Button Max Width – Set a maximum width for the submit button.
  • Alignment (Button) – Control the button alignment independently.

Customizing the Style Tab

The Style tab lets you customize the visual appearance of every part of the form.

Styling the Container

  • Background – Set a solid color or gradient background.
  • Padding – Adjust the inner spacing of the container.
  • Border – Configure border color, width, and radius.
  • Box Shadow – Add a shadow effect to the container.

Styling the Title

  • Color – Set the title text color.
  • Typography – Customize font family, size, weight, and other typography settings.

Styling the Labels

  • Color – Set the label text color.
  • Typography – Customize font family, size, weight, and other typography settings.

Styling the Fields

  • Background Color – Set the input field background.
  • Text Color – Change the text color inside fields.
  • Border Radius – Round the corners of input fields.
  • Placeholder Color – Set the color for placeholder text.
  • Border – Configure border color and width.
  • Padding – Adjust the inner spacing of fields.
  • Spacing – Control the gap between fields.

Styling the Button

  • Typography – Customize the button text font settings.
  • Text Color – Set the button label color.
  • Background – Choose a solid color or gradient for the button.
  • Border – Configure border color and width.
  • Border Radius – Round the button corners.
  • Padding – Adjust the inner spacing of the button.
  • Hover Effects – Set different colors and styles for the hover state.
  • Box Shadow – Add a shadow effect to the button.

Following Usage Tips

  • Ensure the Ninja Forms plugin is installed and active before using this widget.
  • Use the styling options to create a consistent design that matches your site’s branding.
  • Test the form display on multiple devices to verify responsiveness.
  • Keep forms short and focused to improve completion rates.

That’s it! You’ve successfully learned how to use the Ninja Forms widget in aThemes Addons to style and display your forms with Elementor.

Next, would you like to display a list of pages on your site? Check out our guide on using the Page List widget to learn more.

image_print