How to use Custom CSS on WordPress WPForms

This is a how-to guide to create your custom CSS with WPForms, any WordPress built-in widget or plugin. The WPForms is a good widely used form plugin, but the pre-made templates are only available in the paid version. Therefore, I needed to create some basic custom CSS to add borders and backgrounds to my contact form.

We will use the custom class names which is an option provided by WPForms to make it easy for handling the class names. In this case, we have to define the class name for each item of the form, which in my case is Name, Email, Message and Submit button. So, under the Advanced option of each item, I give the CSS Class name like contact-name, contact-email, contact-message and contact-button as shown in Fig.

If the class name is not defined, you need find the respective Class name using the Brower Web Developer option in order to write the custom CSS. In that case, the class name is usually the last name within in Class attribute. See the Screenshot of the Web Developer Option.

The CSS code

So, here is code that will create border of the form input, adjust the width of the input fields (based on screen pixels) and change the submit button color.

.contact-submit  {
background: linear-gradient(to right, #007bff, #1e90ff) !important;
color: white !important;
margin-top: 15px !important;
right: 0px !important;
padding: 15px 15px 15px 15px !important;
border-radius: 10px !important;
}

.contact-name input, .contact-email input, .contact-message textarea {
	border: 1px solid #ccc !important;
	padding: 10px 15px !important;
	border-radius: 10px !important;
	width: 70% !important;

}

.contact-message textarea {
	height: 150px !important;
	}

@media (max-width: 768px) {
.wpforms-form .contact-name input, .contact-email input, .contact-message textarea {
        width: 100% !important
    }

A little nugg about the code

@media – It is a query rule, that will apply CSS styles based on different characteristics of the screen such as resolution, screen orientation. In our code, will set the width of the text input boxes to 100% on mobile devices and 70% on desktop screens.

!important – This will override the default style with your own custom CSS codes if the conflict occurs. This should be used when you use custom CSS with WPForms.

.contact-name input – Here .contact-name is a class name that we defined earlier in WPForm and input is the type selector which represents the text input. Without input type selector, the border will be wrongly applied to entire Name and Text Input fields as shown in the below Fig.

.contact-message textarea – Same as the above example, textarea is the type selector which inherit the class contact-message. You can trace those values in Web Developer Option View as shown in Fig.

And, other syntaxes are pretty much self-explanatory. Also, you can check the beginner guide in the WPForms site for different CSS examples.

And, finally put your code as the Custom CSS. Here is a link to show how my contact form appears.