How To Style WPForms Web Form And Button With Simple CSS


Written by
Fabrizio Van Marciano
Last updated on
May 12, 2022

A while back, I shared with you a tutorial on how to customize your Contact Form 7 forms using basic CSS.

A few of the readers of FVM have got in touch to as if I could do a similar tutorial for WPForms. Since I also use WPForms myself, I was happy to create this tutorial.

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 creating contact forms. I use this plugin on Fabrizio Van Marciano, so that means even the inquiry forms for my services are created with WPForms.

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

First of all, I’ll assume that you have the WPForms plugin installed and activated on your website and that you have at least one form embedded somewhere on 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 useful features built-in. However, you can use the free version, this tutorial will work just the same.

Adding CSS to your theme

I personally don't know of any styling plugin available for WPForms. In any case, you know that I prefer to use my own CSS. The real challenge is identifying the CSS classes.

I've seen some websites that actually don't style the forms and they just don't look that striking. That's my opinion. A website's contact form should look on-brand at least. Here's what a form created in WPForms looks like without styling –

Sometimes, depending on the theme you're using as well, the forms will use the theme's default CSS to automatically add styles to the forms.

Adding CSS is easy. From your WordPress dashboard, you simply head to Appearance > Customize and then find the Additional CSS field.

But, before your add any CSS here, first, you need to take a look at the settings features in your 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 – Form 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 the 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 via the Customizer. See then image below.

If you prefer to watch the short tutorial video below, 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.

The CSS 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 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 the image below.

The code below is for two states – button, and button:hover. This is very basic CSS, and again, you can play around with the values to modify 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 heart's content.

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 CSS snippets 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

Once again, I use WPForms Lite for this tutorial. For my websites, I use the premium version. You can download the free version here. If you're interested in checking out what the pro version has to over, click here.

Posted in

Oxygen Builder Web Design Course


Learn how to build an awesome website for your business with my complete, Ultimate WordPress + Oxygen Builder Web Design Video Course

Website designed by Fabrizio

Shop


Web Design CourseCode Shop

Contact

Copy link