WPForms Documentation

Documentation, Reference Materials and Tutorials for WPForms

How to Add Custom CSS to Your WPForms

Depending upon the design of your site, you might want to style the look and layout of your form to match your theme. WPForms makes that possible with Custom CSS classes.

If you don’t like the video, or need more instructions, then please continue reading.

How to Add Custom CSS in WPForms

Styles are configured using the field “CSS Classes” setting. This is located in the Fields » Advanced Options section.

First start by selecting the field that you want to modify from the right side preview area.  Then name your custom css class and save your form.

Create custom css class

If you would like to include multiple classes, simply separate each class with a space between the class names. Also see How to Create a Multi-Column Form Layouts to learn which CSS classes are already created within WPForms.

Multiple CSS Classes

Finally you can modify your CSS code. You can do this in a child theme style.css file or using a plugin to change the css code for your form.

Styling Additional Form Elements

If you’d like to modify other parts of your form, like the submit button, you can do that as well with CSS Classes.

Click on the area that you would like to modify. In our example, we selected the “Submit” button.  You will be directed to Settings » General to create a CSS Class.

Add CSS Class to Submit Button

Form Using Custom CSS

How to Add Custom CSS to your WPForms

Custom CSS Example

.email,.phone,.name,.message,.submit {
    color: #5f9ea0 !important;
}

div.wpforms-container-full .wpforms-form input[type=date],div.wpforms-container-full .wpforms-form input[type=datetime],div.wpforms-container-full .wpforms-form input[type=datetime-local],div.wpforms-container-full .wpforms-form input[type=email],div.wpforms-container-full .wpforms-form input[type=month],div.wpforms-container-full .wpforms-form input[type=number],div.wpforms-container-full .wpforms-form input[type=password],div.wpforms-container-full .wpforms-form input[type=range],div.wpforms-container-full .wpforms-form input[type=search],div.wpforms-container-full .wpforms-form input[type=tel],div.wpforms-container-full .wpforms-form input[type=text],div.wpforms-container-full .wpforms-form input[type=time],div.wpforms-container-full .wpforms-form input[type=url],div.wpforms-container-full .wpforms-form input[type=week],div.wpforms-container-full .wpforms-form select,div.wpforms-container-full .wpforms-form textarea {
    background-color: #5f9ea0 !important;
}

div.wpforms-container-full .wpforms-form .wpforms-one-half,div.wpforms-container-full .wpforms-form .wpforms-three-sixths,div.wpforms-container-full .wpforms-form .wpforms-two-fourths {
    width: 50%;
    margin-left: 0 !important;
    padding-right: 10px !important;
}

Where to Place Your Custom CSS

You can place the custom CSS in your WordPress theme in many ways.

First, you can add it to your WordPress theme by going to Appearance » Customize » Additional CSS. Add your CSS code to this location and save your changes.

Customizer Add CSS

Alternatively, you can add this code to your site with a plugin like Simple CSS.

Keep in mind that using these methods, your custom CSS will apply to your current theme only. If you change themes, your code will no longer apply.

Now you’re all set to customize the look and layout of your form!

For inspiration, you can check out these contact form style examples.