How To Customize WPForms In WordPress Using Simple CSS

Written by Fabrizio Van Marciano
Updated on 
July 26, 2019

A short while ago, I shared with you a tutorial on how to customize your Contact Form 7 forms using basic CSS. I’m so pleased that the post has helped a lot of WordPress website owners. Some of my readers have been in touch with me to ask if I could do a similar tutorial for WPForms. Since I use WPForms myself, here we go!

Before we get started, if you are using Contact Form 7 and want to use CSS, then do check out that tutorial here.

OK, so WPForms is now my plugin of choice for contact forms for WordPress.

Over on my main blog at Magnet4Blogging I use the Gravity Forms plugin, which I also love.

In fact, it turns out that I love using all three of these plugins, but if you’re struggling to decide which contact form plugin you should use on your WordPress website, then do check out my detailed comparison post over on Magnet4Blogging here.

OK, so let’s get started with this tutorial.

First of all, I’ll assume that you have the WPForms plugin installed and activated in your website and that you have at least one form embedded somewhere in your page. If you don’t, you can download and install WPForms by going to Plugins > Add New.

By the way, guys and dolls, I use the premium version of WPForms, which has a few more additional features built-in, but you can use the free version, this tutorial will work just the same.

Adding CSS to your theme

Adding CSS to your WPForms web forms is the simplest way to customize the look and feel of your forms. Without some additional CSS, your forms can look pretty dull and boring, like this –

Now, depending on what theme you’re using for your WordPress site, in 99.99% of the cases, you should be able to use the Additional CSS field located under Appearance > Customize.

But before we add any CSS here, first we need to take a look at the settings feature in our forms.

There are essentially two fields under WPForms settings (for each form) where you can add class names for CSS. These fields are called Form CSS Class and Submit Button CSS Class.

Adding CSS to WPForms – CSS Class Fields

For now, we’ll leave the Form CSS Class field empty and just add a class name to the Submit Button CSS. Unless, of course, you have multiple forms on your site where you want to style each form differently. See image below.

Next, we’ll begin adding some CSS to our global forms, so go ahead and navigate to Appearance > Customize > and click on the Additional CSS tab. Don’t forget to navigate to the page where your form is displayed. See image below.

If you prefer to watch the tutorial video, you can do so below. Don't forget to subscribe to my Channel for more tutorial videos like this in the future.

Adding CSS to WPForms – Container CSS

OK, so let’s begin adding some custom code for our form. We’ll start by changing the background color and padding of the container for our form. See image below.

The CSS code snippet below will make the background a slight grey/blueish gradient color, as shown in the example image above. It will also add a 20px padding around the form elements, and add a slightly rounded border to the container itself, or the background if you want to call it that.

You can modify any of the values to each of the properties below to your liking.

div.wpforms-container-full {
     background-color: rgba(149, 165, 166, 0.45);
     padding: 20px;
     border-radius: 5px;
 }

Adding CSS to WPForms – Input Fields CSS

OK, so the next piece of code will help make your forms look clean and minimal. You’ll notice that the input and text fields will appear a little larger, and the border around the form fields will also disappear. There will also be a 3px border-radius around the form fields. Check it out -

Once again, you can modify the values for each property to your liking.

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 {
     padding: 22px !important;
     border: none;
     border-radius: 3px; 
}

Adding CSS to WPForms – Labels CSS

Right then, so the next bit of CSS code will add some styling to the label for your form fields.

The font size is increased, and so is the spacing between each word and character. You will also notice that the typeface is in uppercase too.

Once again you can change anything here that you want.

Again, you can adjust these values to match the look and feel of your website.

div.wpforms-container-full .wpforms-form .wpforms-field-label {
     font-size: 18px;
     letter-spacing: 1px;
     word-spacing: 2px;
     text-transform: uppercase;
 }

Adding CSS to WPForms – Submit Button CSS

Finally, we get to the submit button for your form.

If you remember, we created a custom Class Name for this under the settings page for the contact form, right? So here’s what we need to do now –

We simply add this class name, followed by some declarations we want to use to customize the button. See image below.

The code below is for two states – button, and button hover. This is very basics CSS and again, you can play around with the values to customize the button to match the look and feel of your website.

.my-submit-button {
     background: transparent !important;
     color: #2980b9 !important;
     border: 2px solid #2980b9 !important;
     border-radius: 5px !important;
     padding: 15px !important;
     text-transform: uppercase !important;
     letter-spacing: 1px !important;
}
.my-submit-button:hover {
     background: #2980b9 !important;
     color: #fff !important;
}

Additional Styles

OK, so before I wrap this little tutorial up, I want to share with you a few more style examples that you might like the look. You can copy the entire CSS code below and tweak it to your liking.

Wireframe Style Form

/* WPFORMS CSS - WIREFRAME STYLE
-----------------------*/
div.wpforms-container-full {
     background-color: #fff;
     padding: 20px;
     border: 2px solid #494949;
     border-radius: 5px;
 }
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 {
     padding: 22px !important;
     border: 2px solid #494949;
     border-radius: 3px;     
}
div.wpforms-container-full .wpforms-form .wpforms-field-label {
     font-size: 18px;
     letter-spacing: 1px;
     word-spacing: 2px;
     text-transform: uppercase;
}
.my-submit-button {
     background: #2980b9 !important;
     color: #fff !important;
     border-radius: 5px !important;
     padding: 15px !important;
     text-transform: uppercase !important;
     letter-spacing: 1px !important;
}
.my-submit-button:hover {
     background: #494949 !important;
     color: #fff !important;
}

Clean Modern Style Form

If you’re looking for a super clean and modern appearance for your WPForms, the CSS code below should be a great starting point. You can modify any part of the CSS to match your website.

/* WPFORMS CSS - MODERN STYLE
----------------------------*/
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: #E8E8E8;
     padding: 22px !important;
     border: none;
     border-radius: 3px;     
}
div.wpforms-container-full .wpforms-form .wpforms-field-label {
     font-size: 15px;
     word-spacing: 2px;
}
.my-submit-button {
      background: linear-gradient( to right, #67b26f, #4ca2cd) !important;
      font-size: 16px !important;
      font-weight: bold;
      color: #fff !important;
      border: none !important;
      border-radius: 5px !important;
      margin-top: 5px !important;
      padding: 15px !important;
      text-transform: capitalize !important;
      letter-spacing: 1px !important;
}
.my-submit-button:hover {
      -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57) !important;
      -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57) !important;
      box-shadow: 5px 40px -10px rgba(0,0,0,0.57) !important;
      transition: 0.3s !important;
}

It’s a wrap!

So there you have it. I’ve tried to keep this tutorial as simple as possible to follow. Nothing too complex, I hope. If you run into any problems using the codes above, or you find the CSS just doesn’t work on your site, feel free to send me a quick email here to let me know.

Enjoy.

Get WPForms

Again, I used the plugin WPForms for this tutorial, you can download the free version here, or you can purchase the premium version which I highly recommend. The premium version offers a lot more options and features with regards to functionality, form behavior, and so on. Click here to learn more about the premium version of WPForms.

Posted in ,

Are you ready to kickstart your web design project?

Let's work together to turn your website design and creative marketing ideas to life. Hit the 'Start Project' button to book your free 30-minute strategy consultation with me.
© Fabrizio Van Marciano Web Design Services. A division of Van Marciano Media. All Rights Reserved.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram