The Ninja Forms Widget allows you to embed and customize Ninja Forms within your Elementor layouts easily. It’s ideal for creating and managing contact forms, feedback forms, or any type of form you need on your website.
Activate the widget
This widget is part of the aThemes Addons for Elementor plugin. To activate it, go to your admin area, visit the aThemes Addons dashboard, search for the widget, and click on the switch to activate it. It will now be available in your Elementor interface.
Widget options
Ninja Forms Section
- Title: Enter a title for the form, which will be displayed above the form.
- Form Title Tag: Select the HTML tag for the form title (e.g., H1, H2, H3, etc.).
- Select your form: Choose the Ninja Form you want to display from a dropdown list of available forms.
- Form Alignment: Align the form to the left, center, or right.
- Content Alignment: Align the form content (labels, fields) to the left, center, or right.
- Form Width: Adjust the maximum width of the form in pixels or percentages.
- Stretch Button?: Toggle to make the submit button stretch to the full width of the form.
- Button Max. Width: Set the maximum width for the button when “Stretch Button?” is enabled.
- Alignment: Align the button to the left, center, or right.
Style tab
Customize the appearance of your Ninja Forms under this tab. You have a variety of options to ensure the widget matches your website’s design and branding perfectly.
Container Style
- Background: Set the background for the form container using solid colors or gradients.
- Padding: Adjust the padding inside the form container to control spacing.
- Border: Configure the border settings, including color, width, and radius for the form container.
- Box Shadow: Apply a shadow effect to the form container to add depth.
Title Style
- Color: Set the color of the form title.
- Typography: Customize the typography settings for the form title, including font size, weight, and style.
Labels Style
- Color: Set the color of the form labels.
- Typography: Customize the typography settings for the form labels, including font size, weight, and style.
Fields Style
- Background Color: Set the background color of the input fields.
- Text Color: Customize the text color inside the input fields.
- Border Radius: Adjust the border radius of the input fields to control the roundness of the corners.
- Placeholder Color: Set the color of the placeholder text in the input fields.
- Border: Configure the border settings for the input fields, including color, width, and style.
- Padding: Adjust the padding inside the input fields to control spacing.
- Spacing: Set the spacing between input fields.
Button Style
- Text Color: Set the color of the text inside the button.
- Background: Customize the background of the button using solid colors or gradients.
- Text Shadow: Apply a shadow effect to the button text to add depth.
- Border: Configure the border settings for the button, including color, width, and style.
- Border Radius: Adjust the border radius of the button to control the roundness of the corners.
- Box Shadow: Apply a shadow effect to the button to add depth.
- Padding: Adjust the padding inside the button to control its size and spacing.
- Hover Effects: Customize hover effects for the button, including hover color, background, and border.
These style options ensure that your Ninja Form looks professional and integrates seamlessly with your site’s overall design.
Usage tips
- Ensure you have installed and activated the Ninja Forms plugin to use this widget.
- Customize the form appearance to match your site’s branding using the extensive styling options available.
- Regularly check and update your forms to ensure they are working correctly and collecting the necessary information.
Conclusion
The Ninja Forms Widget is a powerful tool for integrating and customizing forms on your Elementor-powered website. With its flexible options, you can create a seamless and professional user experience for your visitors.