WPForms Blog

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

How to Style Contact Forms

How to Style Contact Forms in WordPress (With Examples)

by Courtney Robertson on Dec 8, 2016

Do you want to change the look of your forms?  Out of the box, your forms may look rather plain on your site.  Thankfully, WPForms can be easily customized using CSS in your WordPress theme. In this article, we’ll show you how to style contact forms in WordPress.

If you don’t know how to write CSS code, don’t worry. We can still walk you through customizing your form styles. Just follow our tutorial on how to style WPForms without knowing any code.

Getting Started

The first thing you need to do is install and activate the WPForms plugin. Here’s a step by step guide on how to install a WordPress plugin.

Also, you’ll need to have a form created. See our tutorial on How to Create a Simple Contact Form as an example to get started.  Here’s our form:

plain contact form

Your form may look slightly different, since it will inherit some of its styling from your WordPress theme. Other than that, it’s very basic.

WPForms generates code for each form to give it its basic styling. For many users, this will be enough since the default styling will be unobtrusive and not distract from their site’s design.

However, if you want to create a unique look for your forms, you will need to add your own CSS code to customize the style.

There are two ways to do this:

  1. styling all WPForms with the same code
  2. styling a single form individually

We’ll show you how to do both, and then share some examples for your inspiration.

1. Styling Contact Forms in WordPress

Every form made with WPForms uses the CSS class .wpforms-form in the form HTML tag. You can use that class to style WPForms without affecting other forms on your site, such as your comment submission form under each post.

Every individual element in the form (fields, buttons, etc.) also has a proper ID and CSS class associated with it, which you can use for more precise targeting.

In this example, we’ve styled our form’s labels and text area background with the following code:

/** WPFORMS WPFORMSLABEL **/
.wpforms-form label{
 color:rgb(8, 152, 166)!important; 
}

/** WPFORMS Input Textarea **/
.wpforms-form input, .wpforms-form textarea{
 background-color:rgba(8, 152, 166, 0.39)!important; 
}

/** WPFORMS BUTTON COLOR **/
.wpforms-form button{
 background-color:rgb(8, 152, 166)!important; 
}

/** WPFORMS SUBMIT BUTTON **/
button.wpforms-submit{
 color:#FFFFFF!important; 
 background-color:rgb(242, 163, 8)!important; 
}

/** WPFORMS SUBMIT BUTTON Hover **/
button.wpforms-submit:hover{
 color:rgb(255, 255, 255)!important; 
 background-color:rgb(8, 168, 191)!important; 
}

The end result would look like this:

an example of some basic styles applied to a contact form

You have several options for how to include the CSS code mentioned above.  First, you can add it to WordPress by going to Appearance » Customize » Additional CSS.  Add your CSS code to this location and save your changes.

Adding CSS using the WordPress Customizer

If you prefer, you can place this code into your child theme‘s stylesheet.  You can also add this code to your site with a plugin like Simple CSS.

2. Styling Individual Contact Forms

One thing to keep in mind with CSS we used above is that it will be applied to all forms made with WPForms on your website. If you are using multiple contact forms and want to style each of them differently, then you will need to use the unique ID generated by WPForms for each form.

Simply open a page containing the form you want to modify. Take your mouse to the first field in the form, right click » Inspect Element.

right click inspect

The browser screen will split, and you will see the source code of the page. In the source code, you need to locate the starting line of the form code.

inspecting the form elements to discover the form ID

As you can see in the screenshot above, our contact form code starts with the line:

<div class="wpforms-container wpforms-container-full" id="wpforms-14">

The id attribute is a unique identifier generated by WPForms for this particular form.

We will use this ID in our CSS to style our contact form. We will replace .wpforms in our first CSS snippet with #wpforms-14.


/**Form Background Color**/

div#wpforms-14 {background-color: rgb(242, 163, 8) !important}

/** WPFORMS WPFORMSLABEL **/
.wpforms-form label{
color:rgb(8, 152, 166)!important;
}

/** WPFORMS Input Textarea **/
.wpforms-form input, .wpforms-form textarea{
background-color:rgba(8, 152, 166, 0.39)!important;
}

/** WPFORMS BUTTONCOLOR **/
.wpforms-form button{
background-color:rgb(8, 152, 166)!important;
}

/** WPFORMS SUBMITBUTTON **/
button.wpforms-submit{
color:#FFFFFF!important;
background-color:rgb(242, 163, 8)!important;
}

/** WPFORMS SUBMITBUTTON Hover **/
button.wpforms-submit:hover{
color:rgb(255, 255, 255)!important;
background-color:rgb(8, 168, 191)!important;
}

The resulting form would show an orange background on just this form, but no other forms on the rest of your site.

how to style one form on site

Contact Form Examples

You’re on your way to having a customized contact form. You can encourage your visitors to complete your contact form by giving it an attractive and eye-catching style.

Stuck for style ideas? Check out a few examples we’ve found from around the web:

Clean and Colorful

Neil Patel’s form is clean and incorporates a button color that matches the website colors.  Each field has removed any borders around the entry box as well.  A 2-column layout has been implemented throughout most of the form questions as well.

Neil Patel Form Example

Color Accents

Sweet Grace Ministries as styled their contact form to include the accent color in the form field titles, as well as within the drop-down menu.

Sweet Grace Contact Form Example

Font Styling

GirlBoss tweaked the font style on their submit button.

Styling the font of you contact form submit button with CSS

Symbols vs. Word Labels

UnMarketing has included some eye catching symbols as form labels.

UnMarketing Contact Form

Now you’re all set! We hope this article helped you learn how to style contact forms in WordPress.

Want another way to encourage your visitors to complete your contact form? Check out our guide on how to create popup forms in WordPress.

What are you waiting for? Get started with the most powerful WordPress forms plugin today.

Have a great contact form example? Share a link to it in the comments below.

Comments

  1. None of the information provided about how to alter the default buttons appearance for the customers theme is helpful. It’s a waste of time sifting through all this.

    1. Hi Kate,

      Sorry you didn’t find this post useful. We tried to make it as comprehensive and helpful as possible. Which buttons exactly are you trying to style, and how are you trying to style them? With more information, we can help you get the style you want. Feel free to reply here, or contact support for specific help.

      You might also consider trying out CSS Hero. It lets you just point & click to style your forms, without having to mess with code.

      Hope that helps.

  2. I love some of these modifications. How do I change the submit button?

    Apparently it’s by adding CSS code in the Submit Button CSS class line, but I need the code. What I tried didn’t work : {border-radius: 5px; background-color: #7f7f7f;}

    I’m trying to change the color of the button and make the radius more round.

    1. Thanks Leila! I’m glad you found the post useful 🙂

      You’ll actually want to add that bit of code in the Appearance » Customize » Additional CSS menu in the WordPress dashboard (you can see a screenshot above).

      Try adding this:

      button.wpforms-submit {border-radius: 5px !important; background-color: #7f7f7f !important;}

      If you need any assistance, feel free to get in touch with support!

    1. Hi Rene,

      Yes, this is absolutely possible! To target a specific item like this, however, we need to be able to see the form embedded on your site. Could you contact us in support with that URL and any other details you think might be helpful? 🙂

    1. Hi Royston,

      To add a border to your forms you will need just a little CSS:

      div.wpforms-container-full {
      border: 1px solid #eeeeee;
      padding: 15px 20px;
      }

      Feel free to modify that CSS to fit your needs. Currently the border is set to a thickness of 1 pixel (1px) and has a light grey color (#eeeeee).If you’re not sure what color hex code you’d like to use, you can create one with this color picker.

      In case you’re interested, there are a ton more details about all of the CSS options available for borders here.

      You’ll notice, too, that the CSS I shared also includes padding: 15px 20px;. This pushes the border away from the form text (without it, the border would appear to touch the text). This will add 15 pixels of padding to the top and bottom of the form and 20 pixels of padding to the right and left sides.

      I hope this helps! If you have extra questions about this, feel free to contact us in support! 🙂

  3. Wasn’t the goal of WPForms to be “the most user-friendly WordPress form builder” in the market? For changing something simple like the look of a button to match the design of your site, you need to start digging into CSS???

    1. Hi JD,

      Currently we don’t have any plans to release a full blown form style editor. The primary reason is because it’s not a feature that the majority of our users would use but would take a lot of time to support properly.

      However, we do realize that having the ability to style items in this manner is preferred by some users, so we partnered with CSS Hero and now have full support. You can learn more about CSS Hero here https://wpforms.com/wpforms-css-hero-customization-made-easy/. Of course, CSS Hero can be used site wide, not just for your contact forms. It’s a super handy plugin and lets users avoid touching any code. We also have a coupon code you can use at checkout WPFORMSVIP.

      So at the end of the day, instead of reinventing the wheel and building our own editor, we decided to partner with someone who is already an expert when it comes to “frontend editors.”

      I hope that helps! Have a good one 🙂

      1. I started working with the CSS samples and it is actually simpler than I thought.

        But I cannot figure out how to center or right align the Submit button. Any CSS sample code for that?

      2. Hi Jean-Dominique,

        Happy to help! Give this CSS a shot:

        div.wpforms-container-full .wpforms-form .wpforms-submit-container {
        text-align: right;
        }

        You can change ‘right’ to ‘center’ (no quotes) depending on what you end up deciding 🙂

      3. I am also looking for some CSS to change the background and text color of the confirmation after submitting the form. The background is always light green currently and I would like to change it to match the color scheme of my web site.

      4. No problem! We have a tutorial over in our developer docs that should help you out: Remove confirmation message box styling.

        If you only want to change the background color (and keep all other styling), you’ll just need this small snippet of CSS:

        div.wpforms-confirmation-container-full {
        background: #ffffff;
        color: #000000;
        }

        You can replace those hex codes (#ffffff, which is white and #000000, which is black) with any values you like. The background hex code can also be replaced with ‘none’ (no quotes) to just remove the background color altogether.

        If you’re not sure what hex code to use, I like this tool.

        I hope that helps! 🙂

      5. I was able to change the confirmation box with below code. But whatever I do, the text always stays black. Have a look at below CSS. I assume the color entry is to set the color of the text. Am I correct?

        div.wpforms-confirmation-container-full {
        color: #ffffff;
        margin: 0;
        background: none;
        border: none;
        padding: 0;
        }

        div.wpforms-confirmation-container-full p:last-of-type {
        margin: inherit;
        }

    1. Hi Jean-Dominique,

      That link covers all form fields, the confirmation message styling is in this doc, and a tutorial on customizing the submit button can be found here. We’ll certainly keep working on improving these tutorials to make them as easy to find and use as possible 🙂

  4. I’m trying to remove the bullet that comes before the element in the form field (li.choice-1::before) . Since it’s a pseudo-element I can’t figure out how to remove it. It’s 6px by 6px and colored #666

    I’d also like to change the fonts on the form but I can’t seem to do this either.

    Any advice on these two points?

    1. Hi Adam,

      The answer to your first question depends a bit on the specific CSS for your page, but you could try this CSS:
      li.choice-1::before { display: none; }

      I would suggesting giving that a shot, and if it’s not quite right let us know (we’ll probably need to see your embedded form, so you could share those details in a ticket).

      The fonts for your forms are pulled from your theme, but can be changed with CSS like this: .wpforms-container { font-family: arial; }

      Just swap arial out for whichever font you like! If you’d like to bring in additional fonts beyond what your theme offers, here’s a tutorial on how to do that.

      If you run into any issues with either of these, could you please contact us in support?

      Thanks! 🙂

      1. Hi Jess,

        Neither of these seem to work. I’ll have to contact via support. I think the reason that the bullet points can’t be edited is because ::before is a pseudo-class rather than a regular class. I’m puzzled about the fonts.

        Thanks so much for the quick reply!

  5. Do you have a full list of all the WPForms CSS classes? I’d love to style more than just the text fields and submit button.

  6. i want to inline name box and email id with subscribe button all 3 should be in same line with different different box width . kindly please help me i am tired of trying i request you to help me i want to make like this https://snag.gy/ATkNeX.jpg . tell me the css for this

    1. Hi Ron,

      I apologize for the trouble! If you check out this tutorial, it will show you how to get all of your form fields on a single line.

      Making these boxes different widths along that line is a bit more custom, but if you’d like to reach out to us in support we’d be happy to help you with this.

      Thanks 🙂

  7. Hi there, thanks for a wonderful form and page. I am new to CSS but I have successfully managed to customize my form in the “extra CSS field” in word press: with this code.

    The problems has occured when I individually try to customize the button of a second form. I identified the id number of the form and when I use your example above with the background color, it works. But I can not figure out how to cuastomize the button color and hover color.

    I could enormously appreciate your help.

    Thank you

    1. Sorry for the typos in previous message. Also this is the code I put in so far in the “additional css” section:

      /** WPFORMS WPFORMSLABEL **/
      .wpforms-form label{
      color:rgb(8, 152, 166)!important;
      }

      /** WPFORMS Input Textarea **/
      .wpforms-form input, .wpforms-form textarea{
      background-color:rgba(255, 255, 255)!important;
      padding: 20px 10px !important;
      }

      /** WPFORMS BUTTON COLOR **/
      .wpforms-form button{
      background-color:rgb(52, 0, 166)!important;
      }

      /** WPFORMS SUBMIT BUTTON **/
      button.wpforms-submit{
      color:#FFFFFF!important;
      background-color:rgb(220, 0, 0)!important;
      padding: 20px 32px !important;
      width: 100% !important;
      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19) !important;
      }

      /** WPFORMS SUBMIT BUTTON Hover **/
      button.wpforms-submit:hover{
      color:rgb(255, 255, 255)!important;
      background-color:rgb(172, 9, 9)!important;
      }

      .wpforms-submit {
      background-color: orange!important;
      border-radius: 5px!important;
      font: bold 20px Calibri, serif!important;
      }

      where would I put in the ID number for the second form on the site that Iw ould like to personalize individually?

      1. Hi Per Sparf,

        Great question! You’ll want to add the ID for the form before the existing selectors you have. Here’s an example:


        #wpforms-48 .wpforms-form label {
        color:rgb(8, 152, 166)!important;
        }

        In that example, my form’s ID is 48. In case it helps, you can find the form ID in the shortcode where your form is embedded or right on WPForms > All Forms (here’s a screenshot).

        This should work for all of the CSS you shared above. If you run into any issues, though, please feel free to contact us in support either through our forum or a ticket 🙂

    1. Hi Gabe,

      You can change the vertical distance between fields by adjusting the following CSS:

      div.wpforms-container-full .wpforms-form .wpforms-field {
      padding: 10px 0;
      }

      Right now, there are 10 pixels of padding at the top and bottom of each field, but if you include this CSS with a changed value it will apply to all fields. Just note that you’ll only want to change the first number (10px), as the zero applies to the left-right padding.

      In case it helps, you can find a ton more styles that can be changed for various form fields at this tutorial 🙂

  8. How do you change the font of the text that is being typed into a form? In other words, if I have a contact form on a site that is styled using the Google Muli font, what CSS do I need to have Muli be the font that appears in every box as the visitor types their responses? Thanks!

    1. Hi Bill,

      To change the only the font of the user input (not form labels, etc — only what your visitors type in), you can use this CSS:


      .wpforms-container input {
      font-family: 'Muli', sans-serif;
      }

      The only thing to note is that any Google Font will only work in your form if the font is already being loaded on your form page (which it sounds like it is). Just in case, though, here’s a tutorial from WPBeginner on how to include Google Fonts on your site.

      I hope that helps! 🙂

      1. I thought I was done, but the CSS you provided works (great) for single line input fields but not for “message” or paragraph fields.

      2. Hi Bill,

        You’re absolutely right – sorry about that! Here’s the modified CSS that will catch the Paragraph Text fields as well:


        .wpforms-container input, .wpforms-container textarea {
        font-family: 'Muli', sans-serif;
        }

  9. Thanks for this article, it’s been really helpful.

    The only thing I can’t seem to find is how to change the input font colour! I’ve changed labels, background colour etc, but wondered if I’ve missed the bit about inputting the text.
    My contact form is on a dark background and I’d like the user’s input text to be white.
    Hope you can help.

    1. Hi Susan,

      No problem! To change the text inside of input boxes, you’ll need to use the following 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 {
      color: #fff;
      }

      I’ve gone ahead and set the hex value in this CSS to #fff, which is white. If you add this CSS to your site using the instructions in this article you should be all set!

      I hope this helps! 🙂

      1. Hello,

        How would I got about appyling a border-radius value to all of the text-area and input fields in the form?

        I’ve currently tried multiple values with no success.
        Tried this:

        div.wpforms-container-full .wpforms-form {
        border-radius: 10px!important;
        }

        Tried this:
        .wpforms-form {
        border-radius: 10px!important;
        }

        Tried this:
        .wpforms-form input {
        border-radius: 10px!important;
        }

        With no success.

        Here is the code I am currently using to style my form:

        div.wpforms-container-full .wpforms-form {
        border-radius: 10px!important;
        }

        /**Form Background Color**/
        .wpforms-form {
        border: 1px inset!important;
        background-color:#2196F3!important;
        padding: 20px 20px;
        }

        /** WPFORMS WPFORMSLABEL **/
        .wpforms-form label{
        font-size: 14px!important;
        color:#212121!important;
        }

        /** WPFORMS Input **/
        .wpforms-form input {
        height:30px!important;
        border: 1px inset!important;
        background-color:#BBDEFB!important;
        }

        /** WPFORMS Textarea **/
        .wpforms-form textarea {
        border: 1px inset!important;
        background-color:#BBDEFB!important;
        }

        .wpforms-form textarea:focus {
        background-color:#BBDEFB!important;
        border-color: #000!important;
        }

        .wpforms-form input:focus {
        border-color: #000!important;
        background-color:#BBDEFB!important;
        }

        /** WPFORMS BUTTONCOLOR **/
        .wpforms-form button{
        background-color:rgb(8, 152, 166)!important;
        border-color:#FF9800!important;
        }

        /** WPFORMS SUBMITBUTTON **/
        button.wpforms-submit{
        color:#757575!important;
        background-color:#BDBDBD!important;
        }

        /** WPFORMS SUBMITBUTTON Hover **/
        button.wpforms-submit:hover{
        color:#000!important;
        background-color:#FF9800!important;
        border-color:#000!important;
        font-weight: bold;
        }

        Any help would be appreciated.

        Thank you

      2. Hi dlb1001,

        Sorry for the trouble, and I’d be happy to help 🙂

        This should be the CSS you need:


        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 {
        border-radius: 10px;
        }

        In case it helps, you can find all default CSS for input areas in this tutorial (if you follow that link it should take you to the Global Form Field Selectors section, then you’ll want to look under Boxes Around All Input Fields.

        If you’d like to customize more aspects of your forms, that tutorial is a great reference for finding what CSS to use to target the right part(s) of your forms.

        I hope that helps! 🙂

  10. Hello!

    I am using WP Forms and would like to have my field and submit button in one row.
    Is it possible to do that with custom CSS?

    Kindly,
    Kerli

  11. Hi, thanks so much for the great information and support. My question is a little different. In my forms I’m capturing information and then want that information formatted in a user friendly way in the NOTIFICATION email

    I’ve pretty much got it formatted the way I want with a header image, and various changes to the text using simple and commands.

    What I’d like to do is have the logo that is on top of the notification email centered. Can you let me know what CSS I would use for that?

    Thanks a lot. I’m liking and appreciating WPForms the more I use it and tweak it.

  12. Hi I have read through all these comments and made some changes with reasonable success, however I cannot find anything that would help me to change the font-family, fon- size and font colour of the placeholder text. Can you advise please?

    1. Hi Stuart,

      Great question! You can make these changes to all placeholder text by using CSS like this:

      .wpforms-container input::placeholder {
      color: #aaaaaa; /* light grey */
      font-size: 12px;
      font-family: Arial;
      }

      I created the values for the text color (which uses a color hex code, like #aaaaaa above), font size, and font family above, but you can replace these to best fit your site design.

      I hope that helps! 🙂

  13. Hello dear Support Team!

    First of all, I love wpforms!

    My question is:

    Is it possible to change only in the submit button the colour of the letters?

    Now it is black and I would like to change is white.

    Thank you for the answer!

    Dora

    1. Hi Dora,

      Definitely! We actually have a tutorial all about customizing submit button styles. From that, I’ve pulled just the CSS you’d need to change the button’s text color to white:

      div.wpforms-container-full .wpforms-form input[type=submit],
      div.wpforms-container-full .wpforms-form button[type=submit] {
      color: #fff;
      }

      The hex value #fff, represents the color white. In case it helps, the easiest way to add this CSS is in the WordPress CSS editor under Appearance » Customize » Additional CSS.

      I hope this helps! 🙂

  14. I have code in place for multiple WP Forms on my site. One of the most used, I am unable to change the Label color to #ffffff. I double checked the code to make sure the correct form number was in place. What could be the issue

  15. I need to place a paragraph of text before a response box.

    The only way I could do this is to use a Single Line Text or Paragraph Text box and pre-filling in the “Placeholder” field. I realize that there is no way to “lock” this field.

    I would like to change the font on this pre-filled text to black font (instead of the default gray). I can’t seem to get the CSS to do this.

    1. Hi Tom,

      If you’re using any of our paid licenses, the best approach for this is to use an HTML field. Or if you’re using Lite, you might consider using the description area of a field – or the description area of the form (in the form builder under Settings > General).

      Whichever approach you choose, we have a tutorial to help you apply custom styles. Here’s our tutorial on styling placeholder text, and here’s our tutorial on styling most other aspects of your form.

      I hope that helps! If you have additional questions, please let us know! We provide support for our paid license holder here and for our Lite users here.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.