--- title: "How to Style Ninja Forms in WordPress (NO CSS)" url: https://nexterwp.com/docs/style-ninja-forms-in-wordpress/ date: 2023-02-14 modified: 2026-09-28 lang: en author: "Aditya Sharma" description: "Ninja Forms builds its fields with its own markup and its own stylesheet, which is convenient until you want the form to look like the rest of your site. The..." image: https://nexterwp.com/wp-content/uploads/2024/05/style-ninja-forms-in-wordpress-1024x519.jpg word_count: 537 --- # How to Style Ninja Forms in WordPress (NO CSS) ## Key Takeaways - Nexter Blocks External Form Styler Block styles Ninja Forms without CSS and requires the Ninja Forms Plugin, the default WordPress Block editor, and Nexter Blocks installed and activated. - Style tab sections cover Input Field, Textarea Field, Submit/Send Button, Checkbox/Radio Field, and File/Upload Field for Ninja Forms. - Nexter Blocks External Form Styler Block adjusts form headings, labels, hints, outer section rows, form messages, and overall form width. - Nexter → Blocks lets a user search for External Form Styler and turn on the toggle before selecting Form Type as Ninja Form and choosing a form from Select Form. Ninja Forms builds its fields with its own markup and its own stylesheet, which is convenient until you want the form to look like the rest of your site. The External Form Styler wraps that form and gives you Nexter's styling controls over it. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-contact-form-stylers/) ## Before You Start - **Edition:** Free — the External Form Styler works in Nexter Blocks (free) and with Nexter Blocks Pro.- **Block to enable:** External Form Styler, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Also required:** the Ninja Forms plugin, installed and active. This block styles that plugin's form — it does not create forms of its own. ## Video Tutorial https://youtu.be/fOP2g1LLDWg?t=596 ## Steps - Build your form in **Ninja Forms** as usual. ![Enabling the External Form Styler block in Nexter > Blocks](https://nexterwp.com/wp-content/uploads/2023/02/external-form-styler-activation-new-1.webp) - Add the **External Form Styler** block to the page. ![Adding the External Form Styler block](https://nexterwp.com/wp-content/uploads/2023/02/external-form-styler-ninja-form-contact.webp) - Set **Form Type** to **Ninja Forms** and choose your form. ![Choosing Ninja Forms as the form type](https://nexterwp.com/wp-content/uploads/2023/02/external-form-styler-contact-form-input-field-3.webp) - Style the labels, fields and button. ![The styling controls](https://nexterwp.com/wp-content/uploads/2023/02/external-form-styler-contact-form-checkbox-radio-field-2.webp) - Check the published page. ![A styled Ninja Forms form](https://nexterwp.com/wp-content/uploads/2023/02/external-form-styler-contact-form-file-upload-2.webp) > *With no form chosen the block renders its own **"Please select Form"** message rather than an empty space — measured, so a half-configured block is easy to spot.* ## How It Behaves This block does not build forms. It renders the form your form plugin already provides and gives you Nexter's styling controls over it — labels, fields, buttons and spacing — without writing CSS. - Choosing Ninja Forms makes the block build that plugin's own shortcode for the form you selected — measured on a published page.- The output is wrapped in a Ninja Forms-specific container, which is what the block's style controls target.- Ninja Forms keeps doing its own work — field logic, validation, submissions and email are untouched by the block.- **Ninja Forms renders its fields with JavaScript.** If a style seems not to apply, check it on the published page rather than in the editor, where the form may not be fully built. > ***If the form plugin is not active, the page shows the shortcode as plain text.** Measured on a published page with the plugin removed: the block printed the literal shortcode instead of a form. If you see square brackets where your form should be, the form plugin is missing, deactivated, or the form was deleted.* ## Limitations - **The block styles a form, it does not create one.** Fields and logic stay in Ninja Forms.- Because Ninja Forms builds its markup in the browser, styling depends on that markup appearing as expected.- Styling applies per block instance rather than to the form everywhere.- The label-style option is Contact Form 7 only — measured, other form types do not receive it. ## Troubleshooting ### The page shows [ninja_form id=…] as text Ninja Forms is not active. Measured with the plugin absent: the block prints the shortcode as plain text instead of a form. ### It says "Please select Form" No form has been chosen in the block yet. Pick one from the form list. ### The form looks unstyled for a moment then changes That is Ninja Forms building its fields in the browser. The styling applies once the form has rendered; check the finished state on the published page. ### My styling is not applying at all Check **Form Type** is set to Ninja Forms. A mismatched type builds the wrong shortcode and the selectors will not match. ## Related Docs - [Style Contact Form 7](https://nexterwp.com/docs/style-contact-form-7-in-wordpress/)- [Style WPForms](https://nexterwp.com/docs/style-wpforms-in-wordpress/)- [Style Gravity Forms](https://nexterwp.com/docs/style-gravity-forms-in-wordpress/)- [Style Everest Forms](https://nexterwp.com/docs/style-everest-forms-in-wordpress/)