Ninja Forms inherits the style of your WordPress theme, and while the primary customization magic comes from using a styling plugin, our free core plugin has some tricks up its sleeve to help you style your forms for free.
Let’s take a look at how you can style your WordPress forms for free with our core plugin, packed with tons of awesome features, offering more flexibility than many other form builders out there!
Table of contents
- Things you can style for free with Ninja Forms
- Other methods to style your forms without styling plugin
- Need more form customizations? Try the Layout & Styles add-on!
1. Things you can style for free with Ninja Forms
Let’s explore what you can customize on your form without a styling plugin or customizing your WordPress theme’s stylesheet.
Create inline radio buttons
Curious about how to transform the Radio List field from looking like this:
into looking like this?
Navigate to the form builder, click on the Radio Button field, and find the Display section > Custom Class Names > Container. Add the three-col-list to the Container section and save.
That’s it! If you would like your Radio buttons or other list field such as the Checkbox field neatly formatted into columns, you would follow the rule below:
- two-col-list
- three-col-list
- four-col-list
- five-col-list
- six-col-list
Please note, if you don’t see the Custom Class Names setting, please navigate within your site to Ninja Forms > Settings > Advanced Settings and enable the checkbox for Form Builder Dev Mode. This will allow advanced options to appear within your form. To learn more, check our tutorial How to Create Inline Radio Buttons in WordPress.
Create multi-column layouts with the Repeatable Fieldset
Constructing a multi-column layout with repeaters is easy and the process is very similar to making the Radio list horizontal. The core version of Ninja Forms includes custom helper classes to assist you in creating column layouts.
The helper classes can be used to arrange the repeating fields side-by-side offering more control to display the repeating fields horizontally instead of vertically.
- first – add to the first field in a group of fields to create a row.
- one-half ( most popular )
- one-third
- two-thirds
- one-fourth
- two-fourths
- three-fourths
- one-sixth
- two-sixths
- three-sixths
- four-sixths
- five-sixths
To create multi-column layouts you need to navigate to Repeatable Fieldset > Display > Custom Class Names > Container.
Depending on the column layout you want to create, you will need to select the appropriate helper class. To learn how to create a two-column layout or a three-column layout, check our step-by-step tutorial How to Create Multi-Column Layouts with the Repeatable Fieldset.
Add an HTML field to your form
If you want to spice up the look of your form a little, you can use the HTML field that is a part of our free core plugin. This versatile field allows you to include formatted text, introduce extra spacing, showcase links, or feature various media types such as video, logo, document, or other.
Regardless of your familiarity with HTML, you can tailor the HTML field using the built-in Summernote editor tool, or you can insert your own HTML code to customize it.
To learn how you can use the HTML field in your WordPress forms, check the tutorial 5 Ways to Use an HTML Field in Your WordPress Form.
Remove fields marked with * are required
When you mark your fields as required for your users, the following line will show up on the top of your form:
There are two ways you can remove the Remove fields marked with * are required from your form; you can use CSS code if you are familiar with it. The other option is navigating to the Advanced tab of your form builder > Display settings > ‘FIELDS MARKED WITH AN * ARE REQUIRED’ and entering a blank space.
That’s it! If you want a step-by-step tutorial on both methods or learn how to change the color of this text, check out the blog post How to Remove Fields marked with an *are required in Ninja Forms.
Change the label position of the form field
This free feature is hidden under the Developer mode, so unlock it for free to get access to the Advanced tab. Once you are in, you can change the position of the label or even hide the label if you like.
The default label position for a form field in Ninja Forms is above the element. This means if you name the field where users are typing their email address “Email”, the form label will be above the place where the user types in the email address.
If you decide to hide the Label and want to use a Placeholder instead, check our tutorial How to Add a Placeholder to a WordPress Form Field.
Add display settings to your form field
Ninja Forms builder provides several styling options to enhance your form fields. With display settings, you can customize placeholders, add help text, and include extra descriptions to create a more polished and user-friendly form.
Just be sure to use the display settings wisely and maintain consistency for a professional and user-friendly design.
Customize an email notification
Although email notification isn’t technically part of the form itself, it occurs afterward, you’ll appreciate the flexibility of styling the email message you send to your users after they submit your form.
You can attach files to the email, include a copy of the user’s submission, add media to the message, customize the text, and even use merge tags to dynamically pull data from the form.
To learn more about styling your email message, check our blog post Customize an Email Notification Message in WordPress.
Change a form title heading
At Ninja Forms you can easily, hide or rename the form title. You can also customize the form title heading with options from H1 to H6. You’ll get to this setting by navigating to the Advanced tab of your form builder > Display settings.
Here, you can also customize error messages if the user enters incorrect information or wants to skip the fields that are required on your form.
2. Other methods to style your forms without styling plugin
If you need more styling options and don’t want to use the styling plugin from Ninja Forms, there are other ways to change the look of your forms. You can manually add CSS to style your forms using the WordPress Customizer or Theme style.css.
To access the WordPress Customizer, navigate to your site’s dashboard, go to Appearance > select Customize > Additional CSS and add your custom CSS.
Please note the Customizer can be used to style forms, but the extent of styling depends on your theme or form plugin’s compatibility with the Customizer.
If you are comfortable editing theme files, you can also add CSS directly to your theme style.css. This offers more control over specific pages or elements. To access your stylesheet, navigate to your theme editor > Styles > Advanced CSS.
Many themes come with built-in styling options for your forms, so be sure to explore your theme’s settings to see what’s available.
Additionally, if you are using a page builder like Elementor, Beaver Builder, or Divi, you can customize form styles directly within the builder’s interface. However, note that styling options are usually somewhat limited.
3. Need more form customizations? Try the Layout & Styles add-on!
If you need more styling flexibility and customizations, try our Layout & Styles add-on. It’s beginner-friendly, yet well-versed users with CSS will love the Advanced CSS section to write their custom rules for more experimentation.
Here is a sneak peek at what you can style with the styling plugin from Ninja Forms:
- Change the layout of your WordPress forms (rows & columns)
- Display form fields side by side
- Change the size of a form field in WordPress
- Add rounded corners to WordPress form fields
- Make a single-line form in 3 simple steps
- Change the font size, color, or font family
- Style a progress bar on the multi-step form
- Customize previous and next buttons on your WordPress form
- Style your Submit button in WordPress
- Make a gradient Submit button for your form
- Change the CTA button hover color & more
Unlike other form builders in the WordPress space, you can purchase our extensions individually without committing to a membership plan. Get only what you need, when you need it. Plus, you’ll love that your add-ons will work on both, staging and production (live) sites!
