🎉 Biggest Summer Sale Yet! Up to 70% Off Lifetime Plans + 50% Off Membership Deals!  Learn more >>

Beginners Guide to Styling WPForms Contact Forms + Submit Button [Article]

By
Fabrizio Van Marciano

Welcome back. In this tutorial, we’ll look at some simple examples of using CSS to style your WPForms contact form and submit button.

WPForms is a fantastic plugin for creating simple contact forms for your WordPress website. Although these days I like to use Piotnet Forms for creating customized forms, I’ve certainly used WPForms on many website projects in the past.

WPForms is one of the most popular web form plugins available, currently powering over 6 million WordPress sites.

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

Ensure you have WPForms installed

First, I’ll assume that you already 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, then search WPForms. The great thing about this plugin is the free version is often all you need for a new website.

Adding CSS to your WordPress theme

Once you’ve created your contact form, it’s time to add some CSS.

At the time of updating this tutorial, I was not aware of any customization plugin that is available for WPForms, which is why we have to use CSS.

Why style the forms?

If you were to use WPForms without adding any CSS for styling, they would look pretty boring. A little bit like this –

Most times and depending on the theme you’re using as well, the forms will use your theme’s default CSS to add styles to the forms automatically. I may be wrong, but I believe that to be correct.

Adding CSS is easy regardless of what theme you are using. From your WordPress dashboard, you can head to Appearance > Customize and then find the Additional CSS field.

Using a Code Snippet plugin: The other option is to install the WPCodeBox code snippet plugin and create a new CSS snippet called WPForms Styles. This is a premium plugin for adding and managing custom code snippets to your website. If you use a website builder like Oxygen or Bricks to build your site, it is one that I recommend. You can learn more about it here.

OK, so let’s assume you will use the CSS field provided inside your existing WordPress theme. Before you add any CSS inside 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. These are optional. (these might change with updated versions of WPForms)

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.

I’m going to use the class name .my-submit-button to add CSS to the submit button.

Next, we’ll begin adding some CSS to affect our forms globally, 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 so you can preview the changes. See the image below.

1. Adding CSS to WPForms – Container CSS

OK, so let’s begin adding some CSS to style 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 (radius) 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. For example, change the background color, increase padding, or increase the border radius.

For the background color, you can also use hex color codes. Check this resource out for additional colors.

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

2. Adding CSS to WPForms – Input Fields CSS

OK, so the next piece of CSS will help make your forms look clean and minimal.

You’ll notice that the input and text fields will appear slightly 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 below –

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

/* Input fields CSS
------*/
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.

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

/* Form Labels CSS
------*/
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? We used the class name .my-submit-button. 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 snippet 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.

/* Submit button static state
------*/
.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;
}

/* Submit button hover state
------*/
.my-submit-button:hover {
     background: #2980b9 !important;
     color: #fff !important;
}

Additional Styles That You Might Like

OK, so before I wrap up this little tutorial, I want to share a few more style examples that you might like the look. You can copy the 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

The CSS code snippet below should be a great starting point if you’re looking for a clean and modern appearance for your WPForms. 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.

As a member, you get access to free support around implementing tutorials into your project. 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.

Video

Currently, there isn’t a video version of this tutorial available. We are hoping to include one soon.

Go straight to the main video