---
title: "How to Customize Ninja Forms in Elementor (NO CSS)"
url: https://theplusaddons.com/docs/customize-ninja-forms-in-elementor/
date: 2023-02-15
modified: 2026-09-17
lang: en
author: "Aditya Sharma"
description: "Ninja Forms builds forms quickly, but its own styling options are thin and the finished form usually inherits whatever your theme does with inputs. The Ninja Form widget in The..."
image: https://theplusaddons.com/wp-content/uploads/2023/02/How-to-Customize-Ninja-Forms-in-Elementor-NO-CSS-1024x536.jpg
word_count: 997
---

# How to Customize Ninja Forms in Elementor (NO CSS)

## 

- The Ninja Form widget in The Plus Addons for Elementor restyles labels, single-line fields, text areas, checkboxes and radio buttons from the Elementor panel without touching CSS.
- The Plus Addons for Elementor ships the Ninja Form widget in the free edition, and it appears only when Ninja Forms is active and at least one form already exists.
- Elementor element cache makes the form disappear after the first visit, so Advanced > Layout > Cache Settings is set to Inactive on the widget to keep Ninja Forms scripts loading.
- The Plus Addons 6.5.0 panel leaves Submit/Send Button, Form Heading, Field Hint, Outer Field and Form Container with no front-end effect, while checkbox and radio styling depends on Ninja Forms > Settings > Opinionated Styles set to Light or Dark.

**Ninja Forms** builds forms quickly, but its own styling options are thin and the finished form usually inherits whatever your theme does with inputs.

The **Ninja Form** widget in The Plus Addons for Elementor restyles an existing Ninja form from the Elementor panel — labels, single-line fields, text areas, checkboxes and radio buttons — without touching CSS. It also needs one cache setting changed so the form keeps showing after the first visit, covered below.

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/ninja-forms-styler/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Free** — the Ninja Form widget ships in the free The Plus Addons for Elementor plugin, and every styling control described here is available without Pro.- **Widget to enable:** **Ninja Form**, switched on under **The Plus Addons > Widgets**. It only appears there while the **Ninja Forms** plugin is active.- **You need the form plugin:** **Ninja Forms** installed and activated, with at least one form already created. The widget styles a form that plugin renders; it does not build one.- **Elementor:** the free Elementor plugin is enough. None of these controls needs Elementor Pro.- **You need a form:** build one in **Ninja Forms > Add New** first. The **Select Form** dropdown only lists forms that already exist.

## Turn the Widget On

- Go to **The Plus Addons > Widgets** in the WordPress dashboard.- Search for **Ninja Form**.- Switch its toggle on.

![The Plus Addons Widgets screen with the Ninja Form widget switched on](https://theplusaddons.com/wp-content/uploads/2023/02/ninja-forms-activation-1024x361.png)

## Add the Widget and Pick a Form

- Edit a page with Elementor.- Drag the **Ninja Form** widget on to the canvas.- In **Content > Select Form**, choose your form.

![Select Form in the Ninja Form widget, with an empty Elementor canvas beside it](https://theplusaddons.com/wp-content/uploads/2026/09/formstylers-ninja-select-form.webp)

> *The Elementor canvas stays empty after you pick a form. Preview or publish the page to see the form.*

## Stop the Form Disappearing After the First Visit

Elementor caches widget output by default. When this widget is served from that cache, Ninja Forms' own scripts are not loaded and the page shows **no form at all**. Only the first visit after the cache is cleared shows it. Turn caching off for this widget:

- Select the **Ninja Form** widget.- Open **Advanced > Layout**.- Set **Cache Settings** to **Inactive**.- Click **Update**.

> *You can instead turn the cache off for the whole site under **Elementor > Settings > Performance** by setting **Element Cache** to **Disable**. That affects every widget on the site, so the per-widget setting is usually the better choice.*

## Style the Labels

**Style > Label Styling** sets the typography, **Label Color** and margin of the label above each single field, such as Name, Email or Message. The group title above a set of radio buttons or checkboxes keeps its own style.

## Style the Input Fields and Text Areas

**Style > Input Fields Styling** covers the single-line fields — text, email, number, phone and select. **Style > Textarea Fields Styling** covers the multi-line boxes. The two sections carry the same controls:

- **Padding** and **Margin**, per device.- **Typography**, **Text Color** and **Placeholder Color**.- **Background Type** — colour, gradient or image.- **Border Options**: switch **Box Border** on before **Border Style**, **Border Width** and **Border Color** take effect. **Border Radius** works either way.- A **Normal** / **Focus** tab.

## Style Checkboxes and Radio Buttons

- In the WordPress dashboard, go to **Ninja Forms > Settings**.- Under **Advanced Settings**, set **Opinionated Styles** to **Light** or **Dark**, then save.- Back in Elementor, open **Style > CheckBox/Radio Field**. The **Check Box** and **Radio Button** tabs set the option text colour and the checked and unchecked colours of the boxes and circles.

> *The boxes and circles are drawn by Ninja Forms' own styles. With **Opinionated Styles** on **None**, the browser's plain checkboxes show and only the option text colour changes.*

![Radio buttons and checkboxes restyled with the Ninja Form widget, with Ninja Forms Opinionated Styles set to Light](https://theplusaddons.com/wp-content/uploads/2026/09/formstylers-result-ninja-checkbox-radio-v2.webp)

## The Result

![A Ninja form on the front end with the widget's label, input field, text area, radio button and checkbox styling applied; the Submit button keeps Ninja's own Light style](https://theplusaddons.com/wp-content/uploads/2026/09/formstylers-result-ninja-v2.webp)

## Sections That Have No Effect in Version 6.5.0

These sections are in the panel, but in The Plus Addons 6.5.0 they change nothing on the front end:

| Section | What happens |
| ------- | ------------ |
| **Submit/Send Button** | The button keeps Ninja Forms' own look. Use **Opinionated Styles** in Ninja Forms to change it. |
| **Form Heading** | The form title keeps its default style. |
| **Field Hint** | Hint and description text keep their default style. |
| **Outer Field** | The rows around each field stay unstyled. |
| **Form Container** | The box around the form stays unstyled. |

## How It Behaves

- Fields, actions and email settings stay in **Ninja Forms**. The widget never edits the form.- Padding, margin, typography and border widths are all per-device.- Nothing renders in the Elementor canvas — check your work with **Preview Changes** or on the published page.

## Limitations

- **With Elementor's element cache on, the form disappears after the first visit.** Set **Advanced > Layout > Cache Settings** to **Inactive** on the widget.- **The form does not render inside the Elementor editor.** The canvas is empty until the page is previewed or published.- Submit/Send Button, Form Heading, Field Hint, Outer Field and Form Container have no effect in version 6.5.0.- Checkbox and radio styling needs Ninja Forms' **Opinionated Styles** set to Light or Dark.- There is no **File/Upload Field** section in this widget, so a Ninja Forms file upload field keeps the browser's own control.- **Border Style**, **Border Width** and **Border Color** do nothing until **Box Border** is on.

## Troubleshooting

### The widget is not in the Elementor panel

Check that Ninja Forms is active, then that the **Ninja Form** toggle is on under **The Plus Addons > Widgets**.

### The canvas is empty after I pick a form

The form does not render in the Elementor canvas. Preview or publish the page to see it.

### The form shows once, then the page is blank

Elementor is serving the widget from its cache. Set **Advanced > Layout > Cache Settings** to **Inactive** on the widget and update the page.

### The Submit button does not change

**Submit/Send Button** has no effect in version 6.5.0. Change the button with Ninja Forms' **Opinionated Styles** setting instead.

### Checkbox colours do nothing

Set **Ninja Forms > Settings > Opinionated Styles** to **Light** or **Dark**.

### My border colour does nothing

Switch **Box Border** on in that section first.

## Related Docs

- [How to Customize Contact Form 7 in Elementor (NO CSS)](https://theplusaddons.com/docs/customize-contact-form-7-in-elementor-no-css/)- [How to Customize WPForms in Elementor (NO CSS)](https://theplusaddons.com/docs/customize-wpforms-in-elementor/)- [How to Customize Everest Forms in Elementor (NO CSS)](https://theplusaddons.com/docs/customize-everest-forms-in-elementor/)- [How to Create an Elementor Form for Free](https://theplusaddons.com/docs/create-an-elementor-form-for-free/)

## Frequently Asked Questions

**Q: What do I need before I can customize Ninja Forms in Elementor without CSS?**
A: The setup depends on three things: Ninja Forms must be installed and activated, at least one form has to exist already, and Elementor free is enough. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides the Ninja Form widget in the free plugin, but the widget only appears when Ninja Forms is active. That matters because the widget styles an existing form instead of building one from scratch.

**Q: Why does the form stay empty in the Elementor editor after I pick it?**
A: That empty canvas is normal for this widget. The form does not render inside the Elementor editor, so you will not see it on the canvas after selecting it. Preview Changes or publish the page to check the real output. This is easy to misread as a broken widget, but it is just how this widget behaves in The Plus Addons for Elementor.

**Q: How do I stop a Ninja Form from disappearing after the first visit?**
A: Elementor cache is usually the reason. When the widget is served from cache, Ninja Forms scripts are not loaded and the page can show no form after that first cached hit. Set Advanced > Layout > Cache Settings to Inactive on the Ninja Form widget, then update the page. If you want a site-wide fix instead, Elementor > Settings > Performance can disable Element Cache for every widget.

**Q: What parts of a Ninja Form can I style in Elementor without CSS?**
A: The widget covers labels, single-line fields, text areas, checkboxes and radio buttons. It also gives separate controls for label typography and color, input and textarea padding and margin per device, text and placeholder color, background type, border options, border radius, and Normal / Focus states. That split matters because single-line fields and multi-line boxes are controlled in different sections.

**Q: How do checkbox and radio button colors work with this widget?**
A: Checkboxes and radio buttons depend on Ninja Forms' own Opinionated Styles setting. Set Opinionated Styles to Light or Dark in Ninja Forms > Settings > Advanced Settings before styling them in Elementor. The Plus Addons for Elementor then lets you change option text color plus checked and unchecked colors. With Opinionated Styles set to None, you only get plain browser controls and text color changes.

**Q: Which styling sections do nothing in version 6.5.0?**
A: Submit/Send Button, Form Heading, Field Hint, Outer Field and Form Container have no front-end effect in version 6.5.0. That means those controls may still appear in the panel, but they will not change what visitors see. For example, the Submit/Send Button keeps Ninja Forms' own look unless you change it through Opinionated Styles inside Ninja Forms itself.