Want to Add Custom CSS to WordPress Forms? (a Beginner’s Guide)

0 Shares

CSS can be tricky, but with a little practice and a few tips and tricks, you can make big adjustments to the way your forms look!

Found the perfect theme for your website, but it leaves your forms looking off?

Wish you could change the color of this, the height of that, but can’t figure out how?

Want to give your WordPress forms a personal touch, like rounded field edges or catchy hover effects, but it looks like too much of a hassle to learn how?

You can learn how to apply basic styling, and correct bad styling being applied from a theme or plugin, pretty easily. Don’t be scared to try!

We’ve all been through one of these scenarios, at least.

A client (or family member or friend!) falls in love with a theme. It’s perfect in almost every way for them, but darn it all if it doesn’t make your form fields 5 pixels high or the input text yellow.

Build a form, place it on a page, wish you could tweak the background color just a bit to make it stand out more. Or round the edges to make it match other page elements. Or give it a subtle but attention-grabbing effect when it’s hovered over with a mouse.

It doesn’t take as much time to learn how to add custom CSS to WordPress forms. Sure, styling can be a pain sometimes. But you can use what you find below to make it a lot faster, and a lot more painless than you think!

DISCLAIMER: Please be aware that what we’re about to delve into constitutes custom CSS/Styling of your WordPress forms. This falls outside the scope of support our team is able to officially provide. That said, I will be more than happy to answer what questions I can in the comments at the bottom of the page 🙂

First, make these two simple tools your friend.

These are the two tools you’re going to need to get down to business. Any kind of styling at all is going to require getting familiar with the first one at the very least. The second will just make the job all the easier. They’re easy to learn and use, so don’t sweat it. Here they are.

1. Your browser’s Element Inspector

Most any modern browser has one, and it’s right under your nose. I’ll be using Chrome from here on out, and strongly recommend doing your styling work from it.

To open your inspect tool, right click anywhere on your form and select Inspect. The window that slides open is your element inspector. From here you can mouse over the different lines of HTML elements that make up your form. The specific area of the form that line relates to will become highlighted in the body of the form on the left.

Conversely, you can right click/inspect anywhere on your form, and the inspector will show you the line that corresponds to it.

The far right hand column of the element inspector shows the CSS that’s being applied to the elements on the page. Click on any element in the left column, and the CSS being applied to that element will display on the right. If you have some janky styling being applied by a theme or plugin, you can use this to help identify it.

We’ll get further into how to use the element inspector to add custom CSS to WordPress forms below.

2. Live CSS Editor

Live CSS Editor is a plugin for Chrome. Once installed, it will add an icon at the top right of your browser window. Clicking on that icon will open a little window that you can enter CSS rules into:

live css editor icon in the chrome browser

Rules written like this will show you the visual change they’ll make to the page for you and you only. They’ll also go away when you close the window. It’s a perfect tool to experiment with different rules to see if they’ll work for you without actually altering the page. Use this to temporarily and experimentally add custom css to WordPress forms completely risk free!

Next, get familiar with writing a basic CSS rule that will change styling on a form

What do you want to do? We can round corners, change colors, add things on hover, change field height, and much much more. All we need to do is write a rule for it. It’s not hard, it just takes a bit of practice and some knowledge of the basics. This section will cover how to write a basic CSS rule from scratch using a simple example.

This example rule changes the height of a form field to 100 pixels:

Each CSS rule consists of a selector and a declaration, and should be formatted as the example.

The selector is the HTML element you’re targeting. It goes before the { } brackets. You can target any element on the page, but with WordPress forms you’re typically going to be targeting a class or ID. In that case, you need to prefix your selector with either # (for an ID) or . (for a class). More on that in the next section. The selector in this rule is #nf-field-298, or the ID Ninja Forms field 298.

The declaration defines the change you want to make to the element. It goes inside the { } brackets, and consists of a property followed by a value. You can follow a selector with multiple declarations if you want, each on a new line, and each ended with a semicolon ; The declaration in this rule is height: 100px; with a property of height and a value of 100px.

Here’s visual using these terms:

With that down, let’s move on to changing something in an actual form.

First, identify what on your form you want to change (choosing a selector)

So what do you want to change? Identifying our selector is the first part of writing a rule to add custom CSS to WordPress forms. Just as an example, let’s change the height of a field. This is just a stock “Contact Us” template form appended to a page, using the Twenty Seventeen theme. Let’s adjust the height of the email field.

Right click/inspect the Email field on the page:

selector identified for the email field via the element inspector

In Ninja Forms, each form field has a specific ID that’s unique to that field. It will always be nf-field followed by a number. You can see it here for the email field as id=”nf-field-298″. Targeting a specific field’s ID is a good way to avoid inadvertently targeting other fields that you don’t mean to with your rule.

Our selector for the email field in this example will be #nf-field-298 … if you’re replicating this on your own install, the only part that will be different is the number at the end (298).

What if I want to change something about the form that’s not a field?

Same basic concept. Want to change the background of a form? Right click/inspect the body of the form, then hover your mouse over different lines until you have the whole thing highlighted:

form container highlighted in the element inspector

It might take some trial and error depending on what you want to target- that’s where experimenting with Live CSS Editor comes into play in the next section. Here, we see the ID of the form container: id=”nf-form-41-cont” and the class: class=”nf-form-cont”. We want to target the ID of this specific form’s container (Form 41) rather than the class. The former will change just this form, the latter will change all Ninja Forms!

Here our selector would be #nf-form-41-cont

Next, define the change you want to make (writing a declaration)

We said above that we want to change the height of the email field, and identified the selector #nf-field-298. The next thing to do is to define the declaration by giving it a property (height), and a value (100px).

Following the formatting above, we come out with the example rule displayed earlier:

Open up Live CSS Editor and write your rule there. You’ll see the height of the field change as you write:

So you’ve successfully changed the height of a field! You probably don’t want a 100px tall email field, but if adjusting height is what you’re after, all you have to do is tweak the value to suit you.

There are many other things you can do to add custom CSS to WordPress forms. We’ll hit some common styling properties in the next section.

Hey! I’ve followed the example to the letter, but it’s not working!

It happens. Sometimes other plugins and/or the theme you’re using can apply styling themselves that overwrite changes you try to make. That shouldn’t happen- any plugin or theme developed to WordPress standards should be following conventions that prevent that. But, it happens.

Here’s what to do.

Option 1: Stick an !important tag onto your declaration. It would look like this:

Generally speaking, you don’t want to use these. Sometimes they become an inevitability though unless you’re doing everything from scratch yourself. Essentially, any declaration carrying the !important tag will take precedence over other rules styling the same element in almost all cases. It’s not the best way to add custom CSS to WordPress forms, but sometimes circumstances make it a necessity.

Option 2: If you’re repeatedly hitting a wall with applying styling, you’ve probably got a plugin or theme that’s gone rogue with their own styling. If you have a test/dev/staging site (you should), activate a default WordPress theme (Twenty Seventeen, Twenty Sixteen, etc), disable other plugins, and try this agin. It will work if you’ve written the rule correctly. From there, start reactivating things one by one, checking your styling after each new reactivation. When your styling disappears, the last thing you reactivated is the culprit. Reach out to their support folks with your data, or find an alternative.

Using the section above you can now write a basic rule! Here are some common form styling properties you might want to try next.

The example above showed how to adjust the height of a form field. There’s plenty of other things you might want to do to your forms. Change the background color? Style field labels? Round corners? Add hover effects? Style placeholder text? This is where we get to the fun stuff 🙂

Please note that the examples below are intended to highlight the before/after differences and get you pointed int he right direction to make the changes you want to make. In short, the examples aren’t intended to be pretty… that’s up to you! 🙂

Change your form’s background color

Want to make your form stand out against the page’s background? You want to use the property background-color, and your value can be either an RGB or Hex code.

You’ll want to use your element inspector to find the ID of the form container to use as your selector. Just mouse over lines until the entire form is highlighted. It will look like id=”nf-form-x-cont” where x is a number.

form background has turned a darker grey, setting it apart from the rest of the page

Round the edges of a field or anything else with corners

Fields too boxy? Submit button too square? There’s an easy fix. The border-radius property is what you’re looking for. Pixel values work here too, and you’ll need to experiment in Live CSS Editor to find the exact value that works for you. The higher the number, the rounder things are going to get. Here’s a submit button with a border-radius: 25px;

submit button has rounded edges

Change the label of a field

There’s a ton of things you can do to field labels. Not bold enough, or too bold? Use the font-weight property. Larger? Smaller? Use the font-size property. Change the font to a whole new family (e.g. Times, Arial, etc) using font-family. In the below example the font-weight has been dropped, while increasing the font size.

Name field label has been increased in size and less bold

Style placeholder text

Placeholder text in a field is target-able too, and oddly enough is something too many themes don’t handle well. If you want to modify a field’s placeholder text, get the ID of the field and append ::placeholder immediately after it, per the below example. (no spaces). You can then modify any property you like: font-style, font-weight, color, etc. The below example will italicize the placeholder text.

placeholder text within the message field has been italicized

Teach your submit button to do tricks when the mouse hovers over it

Who says you can’t teach inanimate objects new tricks? The :hover effect can be added to any element with whatever stylistic changes you want. When a user’s mouse hovers over the element, the change you define will take place. Simply append :hover to your selector when writing the rule.

In the below example, the submit button will turn blue when it’s being hovered over.

submit button changes to aqua blue color on mouse hover

More useful properties and other resources

Don’t see the property you want to change described here? Don’t worry, there are hundreds you can play with. W3 Schools offers a nice list of properties. There’s a handy-dandy tool for finding the hex code for virtually any color you want at htmlcolorcodes.com. If you prefer (or would like RGB codes) there’s another color code list at cloford.com. As a general reference to discover new things you can do, I personally love browsing W3 School’s CSS Tutorial, using it as an index to discover new things!

Chances are what you’re looking for is out there. If you’d like to add custom CSS to WordPress forms that you can’t find a property for, feel free to ask away in the comments below. I can’t promise I’ll know, but someone might! 🙂

I have my rule. Tested it. It works. How do I implement it live?

This will probably be a lot easier than you think! Traditionally, you would need to add CSS changes directly to your child theme’s stylesheet. Fortunately, that’s not the only way anymore. Here are your options.

Option 1: The old-fashioned way (moderate difficulty)

If you’re intent on doing it the old fashioned way, you’ll need an FTPS tool like Cyberduck or Filezilla to gain access to your server and your WordPress files. After logging in, pop open the wp-content folder, then the themes folder. You’ll see your active theme’s folder in there.  Open it, and locate the style.css file. You’ll need software like Sublime Text to open, read, and edit the file. You can paste your changes there. However…

Using this method, you’ll really need to create a child theme folder, and add your changes to the style.css of the child theme. If you do not, you will lose these changes the next time your theme updates!

Option 2: The easy way.

With most modern themes, you can add CSS changes from your WordPress dashboard. This can be found under Appearance > Customize > Additonal CSS.

add custom css to wordpress forms via your theme's customizer option

Simply copy and paste the rule you’ve worked out into this editor, and publish. It also has the handy-dandy feature of saving and sharing prior to live publication. This makes for a great collaboration tool. This is hands down the easiest method, but may not be available if you’re using an older theme.

Option 3: Layout & Styles

Using the Layout and Styles add-on, you can add custom CSS to WordPress forms directly in the form builder. You’ll find elements and properties already available there. All you need to do is input a value, and the change is made.

If you don’t see the property you want to use already listed, there’s an Advanced CSS Properties option too. Input property: value there and you’re good to go. This eliminates the need to identify specific selectors!

To style a field, just click the field and expand the Styles options. To make general changes to the form itself, click the Advanced tab of the builder and open the Styles settings there.

add custom css to wordpress forms via the Layout and Styles add-on

styling the Name field label, same as the example from the section above.

Congratulations! You can now add custom CSS to WordPress forms!

You can add custom CSS to WordPress forms to achieve basically any look for you forms that you want. Following the steps and using the tools above, you can discover, test, and implement safely.

You’ll find the comments below! Have any neat tricks that you’d like to share? What changes would you like to be able to make to your forms?

You can learn how to add custom CSS to WordPress forms and correct bad styling being applied from a theme or plugin pretty easily. Don't be scared to try!Click To Tweet
0 Shares