Ninja Form
Take your Ninja Forms from functional to fantastic, right inside the Elementor editor. This element lets you seamlessly embed any form you’ve built with Ninja Forms and then style every single part of it to match your site’s design perfectly. Choose from multiple pre-made design layouts in one click, or dive deep to customize the labels, input fields, checkboxes, and submit button with colors, borders, spacing, and typography. It gives you complete visual control over your forms without touching a line of code, so you can create conversion-friendly forms that look like they were designed as part of the page from the start.
One-Click Design Layouts
Start your form’s appearance by selecting from a variety of pre-built style kits. This instantly applies a cohesive look to your entire form, providing a professional starting point that you can then fine-tune to your liking.
- Apply a complete visual style to your form in a single selection.
- Great for quickly maintaining design consistency across multiple forms.
- Use a layout as a foundation and then customize it further.
Pixel-Perfect Field Styling
Gain detailed control over every aspect of your form’s input areas. Adjust the background, text color, border, and rounded corners for both text fields and textareas, and precisely control their dimensions, padding, and alignment for a perfect fit.
- Style the normal and focus states of inputs independently.
- Set exact widths and heights for different field types.
- Use padding and borders to create spacious, easy-to-use forms.
Complete Button & Feedback Control
Design a submit button that encourages clicks and style the messages users see. Customize the button’s colors, size, borders, and hover effects, and ensure your success messages and error notices are presented clearly and match your brand.
- Create custom button widths and full hover effect styling.
- Ensure form feedback (success/errors) is visually clear for users.
- Add box shadows and typography styling to the submit button.
Frequently Asked Questions For Ninja Form
Do I need the Ninja Forms plugin installed?
Yes, this element works as a bridge between Ninja Forms and Elementor. You must first install and activate the free Ninja Forms plugin from WordPress.org and create your forms there before you can select and style them with this element.
What's the difference between "Labels" and "Placeholder" options?
Labels are the permanent text titles above or beside a field (like “Your Name”). Placeholders are the faint example text inside the field that disappears when typing. The element’s controls let you show or hide each one independently for greater design flexibility.
Can I make the form responsive on mobile devices?
Absolutely. While the element provides specific width and height controls, you can use Elementor’s built-in responsive editing modes (for desktop, tablet, and mobile) to adjust settings like padding, font size, and button width for each screen size.
How do I style error messages or the success notification?
The styling panel includes dedicated sections for “Errors” and “Success Message.” You can use these to change the text color, background, and typography of these system messages so they fit your site’s design and are easily noticeable by visitors.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Caldera Forms
