How To Style Your WordPress Forms (Easy Examples) (2024)

A good-looking form equals a high conversion form — and we are here to give you some great tips on how to style your WordPress Forms!

In this blog post, you’ll not only learn tips for styling your WordPress forms, but we’ll also show you how to tweak the style of your forms, using our Layout & Styles add-on and turn an ugly duckling into a beautiful swan without mastering CSS!

Table of contents

1. Five quick tips to style your WordPress forms
2. Styling your forms to match your WordPress theme
3. Mobile responsiveness of your forms
5. How to style your Submit button (and a CTA button)
7. Apply style across ALL your forms
8. Change the Font Family in your form
9. Make the form more attractive

1. Five quick tips to style your forms

Certainly, you can have a form that looks attractive and converts well. You just need to know some basic techniques and use the right styling plugin to save yourself possible frustrations. By all means, let us show you how to make styling your WordPress forms an easy ride!

Don’t put field labels in weird places.

You should almost always align the field labels above the field. Top-aligned fields look more pleasant to the visitor’s eye and are much easier to process. In general, people read from left to right, so aligning the fields to the left side is a good idea.

Less is more

Every form field your visitor has to fill out increases friction. For this reason, make sure to remove all unnecessary fields. There is nothing better than a nice clean style of the form that is easy to read!

Use multi-step forms if your form is too long.

Forms that are too long don’t look good. With this in mind, if your form must be long, don’t overload your site visitors by making them scroll forever or even making them leave. Break the form into smaller parts and make the first part very short and simple. Multi-step forms tend to have higher conversion rates, so don’t lose your leads if you don’t have to.

Spice up your form with a unique and compelling image

Imagery that lets the user see the people behind the form will go a long way toward making the user feel comfortable. Therefore, the canned stock photos on your WordPress forms are just not a good idea. Instead, use original and unique images that are more personal.

Here is a quick guide on how to easily add an image to your WordPress form using Ninja Forms:

1. Add an HTML field
2. Add the image in the HTML field settings using the Summernote WYSIWYG editor integrated into Ninja Forms.
   

You can insert not only images but also videos. If you would like to learn more about the editor, you can check our super easy tutorial, How to Easily Customize Your Ninja Forms Email!

Make the call-to-action button (CTA) bold and attractive.

CTA buttons are some of the most essential elements of your form. Even the small adjustments on your CTA button that might look trivial at the beginning can considerably impact your form conversation rates. The golden rule is to remember not to go too crazy when designing your call-to-action button. Do you want to learn some of the best practices when optimizing and styling your button? Skip to the section on howto style your submit button!

2. Styling your WordPress forms to match your theme

Let’s be honest—it’s a tough choice to select a WordPress theme for your website. Besides, there are so many out there! The first thing to remember is that Ninja Forms is designed to inherit the style of your WordPress theme to match your page aesthetically.

While this is often not a problem, not all themes are created equal, and you should be thoughtful when picking your theme. Some of them might render the styling plugin essentially worthless, no matter how good the plugin is. When a theme’s CSS is well-written, it’s fantastic. But it can cause headaches when styling rules have been written overly broad or just poorly in general.

All things considered, using our Layout & Styles add-on, you can easily tweak the appearance of your form to match your site better and improve the overall look of your form. However, if you are trying to style your WordPress forms and styling rules are not working, there are two scenarios:

Error in the WordPress theme’s stylesheet

If there is an error in the WordPress theme’s stylesheet with a higher priority, the theme will keep trying to overwrite some styles from the Ninja Forms plugin, as our CSS is written with low priority. The solution is to toggle on Show Advanced CSS Properties to insert your CSS.

Your theme does not adhere to WordPress best practices

If your theme does not adhere to WordPress best practices, it might be difficult to use our Layout & Styles or any styling plugin whatsoever. Poorly coded themes that have power over your form appearance can make your forms look bad. With this in mind, we recommend you contact your theme support or use a different theme.

On the other hand, if you feel attached to your theme but hate that it messes up how your forms are displayed, follow our advanced tricks for tweaking the appearance of your form here.

Not to mention, there are some dos and don’ts when looking for a theme. Check this article to learn powerful theme tips and find out some of the best WordPress themes for 2021!In addition, keep in mind that if your theme features custom code, updating it with the latest versions will overwrite all your customizations. To safely update a customized theme, do not update the theme directly, but use a child theme to avoid losing your customizations. Follow this tutorial.

3. Mobile responsiveness of your WordPress forms

Nowadays, approximately half of the site visits come from mobile devices. Underestimating the mobile responsiveness of your form might turn away over half of your audience.

Generally speaking, the Ninja Forms are built to be mobile-friendly as long as your theme has proper styling rules in place to handle responsive scaling, like reducing the number of columns on smaller screen resolutions. Many form builders won’t tell you this, and then you might wonder why your forms look a bit funky on mobile devices.

Here are some tips for good mobile form design:

• A form that presents as clean and crisp in a mobile format will look great on a desktop, but it is not always the other way around.
• Your users are working with limited horizontal screen space. Keep the field labels at the top of the field, never to the left or right! Don’t make them scroll left to right in addition to up and down.
• Dropdowns are not such a great idea. Don’t make the user scroll through 100+ fields on a mobile screen if you can avoid it.
• Avoid redundant fields. Users are likely to fill out the form with fewer input fields, and any additional field means extra time spent for the user.

Take into account that many themes out there are mobile-friendly but might not look good. Make sure you test your WordPress theme demos in different browsers and devices. Remember, Ninja Forms will look just as your theme author intended. So, if your WordPress theme does not look good on mobile devices, your form won’t look good either.

4. Changing the layout of your WordPress forms (rows & columns)

Do you want to organize fields on your form into clean rows and columns without the need for code? Using the and itsdrag & drop feature allows you to style your WordPress forms without facing difficult challenges. You can create rows, add a field to its row, change the order of the row, create a space on a row, or remove it completely.

You can create a multi-column layout by grabbing fields and dragging them to the right or left. When using drag & drop, make sure you always drag the fields to the blue line area to make the desired change in your form layout. When it turns green, it means you are good to go to drop the field. All of this is incredibly easy to do.

You can delete the column or leave space. Resize bar allows you to resize fields between the columns.

We don’t set a cap on how many fields can be added in a horizontal row. There are no hardcoded Ninja Forms limit to how many columns or rows you can place on your form. You should, however, keep in mind that having too many columns will unlikely result in to form displaying properly, especially if viewed on mobile devices. Want to learn more about row and column form layouts? Check this article.

5. How to style Submit/CTA button with Layout & Styles add-on

Want to make design changes on the Submit button such are color, shape, size, or border without the use of code? We’ll show you a simple example of how to accomplish that. But before you jump into styling your button, here are some best practices to follow:

Color
It comes as no surprise the colors affect us all. You’ve heard of the psychology of colors, and you know it works. The coloring of the CTA button plays a significant role on your form or your website as it has been shown to affect the conversion rates. Here is an interesting and quick read on how colors affect conversion rate. You shouldn’t forget that as much as the color matters, it also depends on your site design. Under these circ*mstances, the high contrasting colors work great to make buttons stand out.

Text
The message on your CTA button should be clear and short. That is to say, you should try to limit the text to two or a maximum of five words. Omit the boring words like Submit and exchange them for action-packed text such as Join Us, Learn, Discover, Get Started, Book a class, and more!

The size of the text should be big enough to draw the attention of your visitors, but not too overwhelming to overlook the rest of the important content on your form. You can also test your button text from the second person (Get your free e-book) to the first person (I want my free e-book) to see which performs better.

Shape and size
There are two most common button shapes: rounded and rectangular. It’s hard to say which shape performs better as it might depend on different factors and settings. Ultimately, the best way to find out is A/B testing to see what works the best for you.

There is no secret formula to knowing what should be the ideal size for your CTA button. With this in mind, just make sure it’s big enough to get noticed but not too big to look disproportional to its surroundings.

Position
Keep in mind your CTA button should always have a white space separating the button from other elements on your WordPress form. As a result, using the negative space correctly will make your CTA button pop.

Styling Submit (or any) button!

To get started, all you need is the free Ninja Forms plugin and . Once you have both installed, navigate to your Ninja Forms builder and add a new Submit field. Then, click on the Submit field and open the Styles section.

In our example, we will work with Element Styles and Element Hover Styles sections:

By default, your button will inherit the style of your theme (on the left). On the right is an example of an edited button using the Layout & Styles add-on.

Here is what the inside of the Ninja Forms styling section will look like:

You can toggle on Advanced CSS properties and tweak the button even more by defining the following CSS properties:

Use border-radius: 30px; if you want to make your button rounded, you only need to adjust the px size
Use line-height: 0px; if your text on the button does not look centered
Use font-family: Arial, Helvetica, sans-serif; if you want to change the font type just edit the family-name (times, arial, courier) and generic-family (serif, sans-serif, cursive)
Use font-weight: bold; if you want to make your text bold.

Need to center your Submit button? Click on your button and navigate to Styles > Element Styles > Toggle on Show Advanced CSS Properties, and insert the following into the Advanced CSS block:

Want to change the color once the user mouseover the button? In our example below, we changed the blue color of the submit button to green color by navigating to the Element Hover Styles section.

You can also add a slight shadow to the button by using box-shadow: 1px 2px #969493. You only need to adjust the size of the shadow and change the hex color code.

That’s it! Now you should know how to style your Submit button! You can use our example to easily duplicate these settings and adjust them to your specific design. If you want to learn how to customize your submit button even more, for example adding a gradient, check our step-by-step guide Add a Gradient to Your CTA Button in WordPress!

6. Styling Terms & Conditions checkbox on sign up form

We thought we would include a simple hint on how to fix alignment issues as many users have been asking this question. Here is an example of a Single checkbox not being aligned with the HTML block:

If you are experiencing these alignment issues while using both, the Single Checkbox field and HTML field, as shown above, you can do the following:

Click on Single Checkbox Field and navigate to Styles > Wrap Styles and Toggle on Show Advanced CSS Properties. Now type into Advanced CSS margin-top: 20px; or the pixel value that works the best for your form. In our example, 20px margin does the trick!

Sometimes, you want to change the color of the link. The easiest way to do it is to open the HTML block, switch to the code editor, and insert style=”color: your color;” within the code. You can also insert a hex color code.

Bonus: If you want to use the Single checkbox for your Terms & Conditions, you can insert a link directly to the label of the Single Checkbox field. Example:

I agree to the <a href=’www.example.com’> Terms and Conditions</a>

Then, using the Layout & Styles add-on, you can style the Single checkbox label further, making changes to the font under the Label Styles (as we are styling Label) > toggle on Advanced CSS. In the example below, we changed the weight of the font from bold to normal and changed the font style to italic.

7. Apply style across ALL your forms

If you wish to style your WordPress forms globally, you can easily do that by applying global styling settings. Just navigate to Ninja Forms Dashboard > Styling.The list of displayed Styles will depend on your installed add-ons.

You can also clear styles applied across all your forms by pressing the Clear All Styles button. The other way is to open the Advanced menu of your form builder > Styles. Each field can be styled individually by opening that field’s settings window.

If you don’t see style changes occurring on the front end, navigate within your site to Ninja Forms > Settings > Advanced Settings and try changing the Opinionated Styles setting to None.

8. Change Font Family in your form

Have you wondered how you can change the font family on your form? We got your back! First, make sure you enable Developer Mode.

To enable navigate to Ninja Forms > Settings > Advanced Settings > click ‘Dev Mode’. Enabling this feature will give you access to advanced settings within Ninja Forms. Next, navigate toNinja Forms > Styling > Default Styles > Element > click ‘Advanced CSS’and add font-family: <whateverTheFontFamilyIsCalled>;

That’s it! You’ve just changed the font family of your WordPress forms. if you want to learn more about font styling with Ninja Forms and , check our step-by-step tutorial: How to Customize WordPress Forms (Font Styling)

9. Make the form more attractive

A great-looking form delivers a visually enjoyable experience to your visitors, turning them into happy customers. And you should do all that it takes to prevent people from looking away from your forms.

As an example, above, we showed you how to style your Submit button. In the next few paragraphs, we’ll show you how you can apply your acquired skills to style anything on your forms and make them look more attractive!

Once you install our free Ninja Forms plugin and you should see the section Styles for any form field you add to your form. Each field will always have the following parts within the Styles section: Wrap Styles, Label Styles, and Element Styles. Here is an example of how you can apply that to your form:

Wrap Styles – styling space surrounding the Label
Label Styles – styling Label (identification of field) only
Element Styles – styling of a field where you insert a text

Bear in mind the Styles section will have more segments depending on the form field (E.g. File Uploads, Progress bar, Button, etc.).

Basic terms to know when using Layout & Styles add-on

Changing the layout and styles of a WordPress form usually requires manually editing files with CSS code. Luckily, you don’t need to know CSS to style your forms with the Layout & Styles add-on. But, it will be extremely helpful if you are familiar with which terms to use when using our add-on.

Knowing little basics will help you navigate through Layout & Styles add-on much easier, as you’ll better understand where you need to make the specific CSS changes.

You will also learn how to style your WordPress forms better and you’ll improve your overall design skills. Therefore, let’s start with a quick terminology you’ll be happy to know!

Container
Let’s think of it as a “holder” (parent element) of all contents (child elements) inside of it.With the help of a container, you can make your form responsive with fixed width.

CSS Class
A group of HTML elements with similarities (like color and font-size). You can use a CSS class to group elements and then apply unique style properties (formatting) to those elements.

Custom Class Names – Wrapper & Element located under Advanced > Display Settings:
The Wrapper is the most top-level div of the form. The Element part is when the actual form fields are inserted. Example:

When you don’t apply a color to the Element, the Wrapper’s color is applied to the whole form. Styles applied to the Element may take precedence. These settings are just for custom class names you can give to your form. You could then target those classes with CSS.

Display
The display property specifies how wrap, label, or element is displayed. Ninja Forms has 4 display options including Default, Block, Inline, Inline block.

Block – displays an element as a block element (like <p>), it starts on a new line and takes up the whole width
Inline Block – the element itself is formatted as an inline element, but you can apply height and width values
Inline – displays an element as an inline element (like <span>), height and width properties will not have any effect

Label
It is associated with its corresponding text input. This is how users will identify individual fields. (First Name, Address) You can change the position of the label by navigating to the section Advanced > Display Settings > Advanced > Default Label Position.

Title Styles
Here you can style the header/name of your form. Assuming you can’t see the name of your form, navigate to the Advanced > Display Settings > toggle on Display Form Title.

Background Color
The background-color property sets the background color of an element in a HEX color value.

Border Width
This can accept values from 1 to 4. Example:

• 1px – This is will add a 1 pixel border on all four sides.
• 1px 2px – This will add a 1 pixel border on the top and bottom and a 2 pixel border on the left and right sides
• 1px 2px 3px – This will add a 1 pixel border on the top, a 2px border on the left and right sides, and a 3 pixel border on the bottom.
• 1px 2px 3px 4px – This will add a 1 pixel border on the top, 2 pixel on the right, 3 pixel on the bottom, and 4 pixel on the left.

Border Color
This offers a verysimplecolor picker for you to either dial in a selected color or type in a HEX color value.

Text Color
This offers a very simple color picker for you to either dial in a selected color or type in a HEX color value. Example: #FF5733

Height
Choose the height of your element with an integer followed by px or %. As in 500px or 100%.

Width
This CSS property is used to set the width of the content area of an element with an integer followed by px or %. As in 500px or 100%.

Margin
The space outside of an element’s border. Think of it as adding outer spacing. Example:

• 1px – This is will add a 1 pixel margin on all four sides.
• 1px 2px – This will add a 1 pixel margin on the top and bottom and a 2 pixel margin on the left and right.
• 1px 2px 3px – This will add a 1 pixel margin on the top, a 2px margin on the left and right, and a 3 pixel margin on the bottom.
• 1px 2px 3px 4px – This will add a 1 pixel margin on the top, 2 pixels on the right, 3 pixels on the bottom, and 4 pixels on the left.

Padding
Think of it as adding inner spacing. The space between element content and border inside. Can be top, right, bottom, and left. Example;

• 1px – This is will add a 1 pixel padding on all four sides.
• 1px 2px – This will add a 1 pixel padding on the top and bottom and a 2 pixel padding on the left and right.
• 1px 2px 3px – This will add a 1 pixel padding on the top, a 2px padding on the left and right, and a 3 pixel padding on the bottom.
• 1px 2px 3px 4px – This will add a 1 pixel padding on the top, 2 pixels on the right, 3 pixels on the bottom, and 4 pixels on the left.

Float
The float property describes the position of an element. You can use the float property if you want to place a particular content or an image to the left or right allowing another element (e.g. text) to wrap around it. Ninja Forms Styles accept either left, right, or none.

Show Advanced CSS Properties
In case you are well versed with CSS and want to experiment, this option is for you. Here you can write in any rules that you wish, just like you would if you were writing CSS within its file. Just remember to end each line with a semi-colon.Example:

• border-radius: 5px;
• line-height: 18px;
• box-shadow: 2px 2px 2px 3px #333333;

Want to dig into CSS more, so you can style your WordPress forms like a pro? W3 Schools offer an excellent free CSS course in case you want to learn something extra. Also, you can check our blog post on How To Add Custom CSS To WordPress Formsor learn how to hide the asterisk on the required field in CSS.

Style your WordPress forms with Layout & Styles!

To sum up, we hope after reading our guide on how to style your WordPress forms, you learned something new and useful that can help you improve the look of your forms. We introduced you to our styling plugin and showed you how to easily change the look of submit button and organize form fields to multiple rows and columns. Additionally, we described some of the best practices for styling your forms and showed you the basic CSS terminology to help you improve your design skills.

Have you already tried our to tweak the appearance of your form? Let us know what you like, or dislike! After all, we want to know your opinion, so we can make it better!

Don’t want to miss another article? Sign up for our newsletter to get notified about the latest blog posts or exclusive deals from Ninja Forms!