How to Add Custom CSS Styles for WPForms

Introduction

Code snippets using custom CSS styles need to be added to your site. This tutorial will give you multiple options on how to add these code snippets to your site.

Implementation Options

CSS is a powerful tool for styling your site, as well as your forms. There are 3 main approaches to adding custom CSS to your site:

Using the WordPress Customizer

Since WordPress version 4.5, WordPress has given us a built-in tool to add any custom CSS styles to your theme or any plugin you have installed which makes this a popular choice for adding your CSS.

To learn more about the WordPress Customizer, check out their documentation.

You can find the WordPress customizer by navigating to Appearance » Customize » Additional CSS.

Just remember after you add your CSS to click the Publish button to save your changes. As long as the theme remains active, your custom CSS will be applied.

Using a specific plugin for adding CSS

Using a specific plugin created solely for this purpose is an extremely easy way to add custom CSS to your site.

We’re going to be using the Insert Headers and Footers – Code Snippets by WPCode plugin.

To find out more about this plugin, please check out the site for further information including dedicated documentation.

Since we’re adding CSS using the PHP action add_action, you’ll want to create a new snippet and select the Add Your Custom Code.

Give your snippet a name that will make sense to you and select PHP Snippet from the Code Type dropdown and then under the opening php bracket, you can add your CSS snippet. You can see an example of that below.

add_action( 'wp_head', function () { ?>
<style>

	/* write your CSS code here */
	ul#wpforms-999-field_27 li label, 
	ul#wpforms-999-field_26 li label {
    padding: 10px;
    transition: all ease 0.3s;
    background: linear-gradient(to right, #e27730 50%, #cd631d 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    color: white;
	}
	
	ul#wpforms-999-field_27 li.wpforms-selected label, 
	ul#wpforms-999-field_27 li label:hover, 
	ul#wpforms-999-field_26 li.wpforms-selected label, 
	ul#wpforms-999-field_26 li label:hover {
		cursor: pointer;
		border-radius: 2px;
		background-position: right top;
	}
	
	ul#wpforms-999-field_27 li input, 
	ul#wpforms-999-field_26 li input {
		display: none;
	}
	
	ul#wpforms-999-field_27 li, 
	ul#wpforms-999-field_26 li {
		float: left;
		width: auto;
		display: inline-block;
		padding: 10px 10px 10px 0!important;
	}

</style>
<?php } );

Below the snippet is a few more options to set such as the insertion method and where to run the snippet.

Finally, once you’ve added your snippet and finished your settings you can then click Update. You can also switch the toggle from Inactive to Active.

Using CSS Hero

If you’d prefer to not touch any code, WPForms has a complete tutorial on how to use CSS Hero. To find out more about this, please follow this tutorial.

Creating a child theme

Child themes are recommended for more advanced development. You can find out how to create a child theme by following this tutorial.

In each child theme is the required style.css, in this file is where you would add your custom CSS.

Notes

When adding any kind of custom code to your site, it’s important to make sure you protect your code. So no matter what approach you choose, it’s a good idea to always back up your site first. That way, you’ll have access to older versions of site files and the database if needed.

Additional Links

For additional information on custom CSS for WPForms, check out these reference links:

• Styling documentation for WPForms
• A complete list of docs for styling WPForms using CSS

FAQ

Q: How does this help me with adding custom CSS for WPForms?

A: This tutorial isn’t specificly for WPForms custom CSS, but for any custom CSS you may want to add for your theme or any other plugin.

Simply find which option above is easier for you to add any code snippets, including the WPForms code snippets mentioned in the Tutorials and Snippets section.