Ninja Forms
Make your existing form match the site so more people fill it in.
Style any Ninja Forms form in Elementor: ready-made designs, fields in columns, custom checkboxes, focus states, the button and every message. Needs Ninja Forms.
Elementor widget
Requirements
- Elementor 3.5 or newer
- WordPress 6.2 or newer
- PHP 7.4 or newer
- Licence: free — installs straight from Moduly
Add it to a page
- Edit the page with Elementor.
- In the widget panel, search for Ninja Forms. Our widgets sit in the Moduly category and carry the Moduly badge.
- Drag it onto the page.
- Set it up in the Content tab, style it in the Style tab, and use Advanced for spacing, motion and visibility.
Settings
Ninja Forms
| Setting | What you can set |
|---|---|
| Form | — Choose a form — or Contact Me |
| Show Form Title | On / off |
| Hide “Fields marked with *” Note | On / off |
| Preview Messages | Off, In the editor or Always · Shows a sample success and error message under the form, so you can style them without submitting. “Always” also shows them on the live page — for style guides only. |
Design & Layout
| Setting | What you can set |
|---|---|
| Form Design | Plugin default, Clean — bordered, Soft — filled, Underline or Dark background · A finished starting point. Everything in the Style tab still overrides it. |
| Accent Color | Focus ring, checked boxes and the button of the chosen design. |
| Fields in Columns | Short fields sit side by side; text areas, choice lists and the button keep the full width. |
| Columns | Pick one |
| Column Gap | 0–80 |
| Hide Labels | Hidden visually but kept for screen readers — use placeholders so people still know what to type. |
| Choices in a Row | Lay checkbox and radio options side by side. |
| Custom Checkboxes & Radios | Draw the boxes with CSS so their size, border and colours can be styled. |
| Form Max Width | 240–1400 |
| Form Position | Left, Center or Right |
Style tab: design controls for Form Container, Form Title & Description, Labels, Fields, Checkboxes & Radios, Descriptions & Help Text, Submit Button or Validation & Messages — colours, typography, spacing, borders and hover states.
Tips
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
Troubleshooting
- Changes not showing on the live page? Regenerate CSS in Elementor → Tools → Regenerate CSS & Data and clear any page cache.
Related
- Works well with: Caldera Forms, Calendly, Contact Form 7.