Getting your Contact Form 7 CSS styles to fit your theme can be a challenge. Mostly because there isn’t an easy css style editor that comes with the plugin, so you have to do it manually.
Luckily, I’ve got your back!
Below are a lot of Contact Form 7 CSS examples that you can copy and paste into your site. Paste the CF7 styles below into your stylesheet and they should automatically be applied to your contact form 7 because of the default .wpcf7 class. Depending on your theme, you may be able to put these styles into the “Additional CSS” field under Appearance > Customize.
If you have multiple CF7 forms you may want to give each its own class so you can style each one separately.
The easiest way to do that is to add
<div class="uniqueClassName">in the form editor at the very top before anything else. And then add
</div>at the very bottom after everything else. See the example CF7 form code below to visualize what I mean.
<div class="uniqueClassName">
Your Name (required) [text* your-name]
Your Email (required) [email* your-email]
Subject [text your-subject]
Your Message [textarea your-message] [submit "Send"]
</div>Last step, replace uniqueClassName with something unique. Make it letters only (uppercase and lowercase are ok). Then to select that specific form for CSS styling you just put a period before the unique name you created. In my example it would be:
.uniqueClassNameNow when using the Contact Form 7 CSS code below you would replace the class .wpcf7 with you’re unique class name.
If you’re not sure where to paste the CSS code from below check out this tutorial showing the most popular (and easiest) places to put CSS in a WordPress site.
I walk you through the process step-by-step in the videos below. Scroll past the videos to find the CSS.
More Contact Form 7 Tutorials you may want to check out after this one:
- Contact Form 7 Multiple File Upload Functionality Quick and Easy
- Contact Form 7 Redirect Multiple Forms To Different Pages After Submission Without A Plugin
- Create A 2-Column Responsive Contact Form with Contact Form 7
- Get Value From URL Parameter To Pre-fill Contact Form 7
- Contact Form 7 PayPal integration To Accept Payments
CF7 Submit Button CSS
/* Submit Button CF7 CSS Styles */
.wpcf7 input[type=submit] {
padding:15px 45px;
background:#FF0000;
color:#fff;
font-size:30px;
font-weight:bold;
border:0 none;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px;
}
Contact Form 7 Style File Upload Button
/* File Upload Button CF7 CSS Styles */
.wpcf7 input[type=file] {
padding:15px 25px;
background:#abffa9;
color:#000;
font-size:10px;
border:1px solid #79c777;
-webkit-border-radius: 2px;
border-radius: 2px;
}Contact Form 7 CSS Style Labels
/* Label Text Contact Form 7 CSS Styles */
.wpcf7 label {
padding: 0 0 10px 0;
font-size: 20px;
}Contact Form 7 CSS Style Input Fields
/* Text Input Field Contact Form 7 Styles */
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=url], .wpcf7 input[type=tel], .wpcf7 input[type=number], .wpcf7 .wpcf7-select {
font-size:30px;
border: 1px solid red;
}Contact Form 7 CSS Style Text Areas
/* Textarea Field CF7 CSS Styles */
.wpcf7 textarea {
width: 100%;
color: red;
font-size: 20px;
border-color:red;
}Contact Form 7 Overal Form Styles
/* Overall Form CF7 Styles */
.wpcf7 {
background-color:gray;
}Convert Input Box To An Input Line
/* Turn an input box into an input line */
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel] {
border:none;
box-shadow:none;
border-radius:0;
border-bottom:1px solid #999;
}Style Input Fields To Change When Click On (on Focus)
/* Change input field styles when click into (on focus) */
.wpcf7 input[type=text]:focus, .wpcf7 input[type=email]:focus, .wpcf7 input[type=tel]:focus {
background-color:yellow;
border:none;
}
.wpcf7 input[type=text]:active, .wpcf7 input[type=email]:active, .wpcf7 input[type=tel]:active {
background-color:gold;
}Contact Form 7 Style Drop Down
/* Change the width a drop down menu */
.wpcf7 .wpcf7-select {
width:100%; /* you can use pixels, em, rem, % to determine the width */
font-size:20px;
}
/* Change the color of drop down menu text */
.wpcf7-select {
background-color:#ffffff; /* it won't work without a background color set */
color:#028002;
}Contact Form 7 Style Radio Buttons
/* Radio button styles*/
.wpcf7 input[type="radio"] {
position: absolute !important;
left: -9999px !important;
}
.wpcf7-radio span.wpcf7-list-item-label {
position: relative;
padding-left: 33px;
}
.wpcf7-radio span.wpcf7-list-item-label:before {
content: '';
background: #cecece;
width: 15px;
height:15px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
border-radius: 100%;
border: 4px solid #cecece;
}
.wpcf7 input[type=radio]:not(old):checked + span:before {
background: orange;
}
Contact Form 7 Style Checkbox
/* Make checkboxes and radio boxes align vertically instead of horizontally */
span.wpcf7-list-item {display: block;}
Contact Form 7 Style Placeholder
/* Placeholder text styles */
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: red;
font-size:30px;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
font-size:30px;
}
:-ms-input-placeholder { /* IE 10+ */
color: red;
font-size:30px;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
font-size:30px;
}
CF7 Thank You Message Styling
/* Thank you message CSS styles */
.wpcf7-response-output {
border:1px solid gray;
background-color:#ececec;
font-size:30px;
color:black;
border-radius:5px;
-webkit-border-radius: 5px;
padding: 20px !important;
}
Contact Form 7 Validation Styles
/* After form submission, change the background color of any required input field to red-ish */
.wpcf7-not-valid {
background-color:#ef8888;
}More Contact Form 7 Tutorials you may want to check out after this one:
- Contact Form 7 Multiple File Upload Functionality Quick and Easy
- Contact Form 7 Redirect Multiple Forms To Different Pages After Submission Without A Plugin
- Create A 2-Column Responsive Contact Form with Contact Form 7
- Get Value From URL Parameter To Pre-fill Contact Form 7
- Contact Form 7 PayPal integration To Accept Payments
59 thoughts on “Use Contact Form 7 CSS To Style Almost Anything in CF7”
Thank you so much Bjorn. Code works very well.
Awesome! I’m glad it worked for your Harsha, thanks for trying it out!
Hello Bjorn, Your Css code works awesome. But I would like to centre align the submit Button, can you tell me how?
Hi Karan,
I’m happy the CSS code worked for you. You can wrap the submit button in the CF7 builder with
That way you don’t need to use any CSS.
CSS for centering can be done in different ways. Which one is best depends on they way your form and theme are set up. You can try:
text-align:center
OR
margin:0 auto;
I hope that helps and thanks for stopping by.
how to make file upload into drag and drop manually without addon ?
I am having trouble getting the Custom CSS to work on my site. I am copying and pasting the CSS code, but the changes do not take effect. What could be the issue? I am using WordPress.
Hi Jay,
It could be two things. Either the selector you are using is the correct one or you are experiencing some browser caching issues.
There are some other tricks you can try to force your CSS changes to be applied:
1. If you’re using Google chrome check your site in a different browser like FireFox to see if the changes are applied.
2. If you have a caching plugin like W3 Total Cache or WP Super Cache installed, clear it’s cache and deactivate it while your making CSS edits.
3. Try installing a Cache Killer add-on to Chrome to see if that helps, here’s a tutorial for that one: https://www.youtube.com/watch?v=CegkzTkcQq0
One of those, or a combination of those should help. Let me know!
Hi. Nice code. Thank you.
Could you also say How I can adjust height of fields, but no throught font-size?
Also height of textarea field. And change style for button “submit” after mouseover.
Thank you very much.
galo
Hi Galo,
To adjust the height of an input field you use:
.wpcf7 input[type=text] {height:20px;}
To adjust a text area you can use this:
.wpcf7 textarea {
width: 300px;
height: 150px;
}
To change the styles of submit button you would use a psuedo-selector called hover.
If this is your original submit button code to make the button red:
.wpcf7 input[type=submit] {color:red;}
Then this will make it orange when it is hovered over:
.wpcf7 input[type=submit]:hover {color:red;}
I hope that helps!
Hello,
Thank you for all your great and enthusiastic support. 🙂
My question has to do with drop down boxes for Contact Form 7 where its selector background color is a challenge to find. So for example if the Contact Form 7 drop down window has the options of Sunday, Monday, Tuesday, Wednesday, Thursday, Friday , Saturday the selector to pick a specific day has its background color to = blue. This predetermined blue color background does not match my theme. Some websites have suggested the selector uses ::selection type of CSS. Since I am not well versed in CSS nor in Contact Form 7, I have run into a dead end. From what I can see Contact Form 7 is not really associated with ::selection CSS treatment when inspecting html/css from chrome.
Please let me know if such a class/id exists for Contact Form 7 enabling me to change the scroll feature background color for my forms?
Many thanks again.
MM
Your tutorials have helped me numerous time. Thank you! I have styled one of my Contact Form 7 forms as you noted. All works fine except the drop down menu select options. I specified the text size to be 18px. It changes the initial selection “—Please Select—“, but when you click to select an option within the drop down, the options’ text size remains at a smaller size. It displays correctly in Chrome (which I notice is the browser you are using), but in Safari and Firefox it does not. I expect it has something to do with Webkit/Mozilla overriding my styles. If that is the case, do you know of a work-around? Or possibly another solution?
Hi Gary,
You can probably fix the cross-issue using vendor prefixes. There is one for webkit browsers and one for mozilla browsers. Basically all you do is add a prefix to the style.
So for font-size you would do something like this:
font-size:18px;
-webkit-font-size:18px;
-moz-font-size:18px;
That should work for you. One of my fav CSS resources is Chris Coyier’s site, you can check out his post on vendor prefixes here: https://css-tricks.com/ordering-css3-properties/
hi there
how to customize recaptcha
How would I change the hover colour of the inside dropdown select menus? Most menus are “highlighted blue” colour but I want to change it to black.
I’ve tried things like:
.wpcf7-form-contorl select option:hover{
background-color: green;
color: red;
}
But it does not work.
Any help will be appreciated.
Bjorn
When you use a drop down list how do you get the drop down text to be the same size as the display version
/* Contact Form 7 Text Input Field Styles */
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=url], .wpcf7 input[type=tel], .wpcf7 input[type=number], .wpcf7 .wpcf7-select {
font-size:20px;
font-family: ‘Droid Sans’, sans-serif;
color: #CC0000;
background: #F0F0F0;
}
for an example see: https://www.ringwood-dogs.com/contact-ringwood-dogs/
Hi Decimus,
Dropdowns can be a little picky. I would use the CSS that you have there and the right below it add another rule that adjust just the font-size for dropdown:
.wpcf7 .wpcf7-select {
font-size:18px;
}
18px is just an example, you would probably test a couple different sizes to see which one is right. What will happen is all the styles in the first CSS block will be applied to the dropdown. Then just the font-size will be overwritten instantly to what you set in the second rule. That way you can set dropdown font-size independently of the others.
Hi Bjorn
I can see what you mean by picky. I’ve messed around with this one for hours. Any other tips? Have tried adding an over-rule rule but that doesn’t seem to make any difference.
Wonder if it is compounded as I am using a drop-down for the subject line?
see: https://www.ringwood-dogs.com/contact-ringwood-dogs/
/* Contact Form 7 Text Input Field Styles */
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=url], .wpcf7 input[type=tel], .wpcf7 input[type=number], .wpcf7 .wpcf7-select {
font-size:20px;
font-family: ‘Droid Sans’, sans-serif;
color: #CC0000;
background: #F0F0F0;
}
/* Contact Form 7 manually adjust size of drop down list */
.wpcf7 .wpcf7-select {
font-size:20px;
}
Hello, Bjorn.
We have a form based on Contact Form7. And we don’t know how to:
1) change select (drop-down) popup view on mobile. We want to unify it on all models. Which class should we modify?
2) add search field on select (drop-down) popup on mobile. You can see russian site https://www.carprice.ru/ for undertanding our needs. Maybe there is plugin for this optinion?
Thank you.
Hi
Bjorn
Your support for CF7 is great. I have applied your codes and all are responding correctly.
The font style and size of the Checkboxes remains default that I want to change.
Would you please help me out?
Thanks.
Hi Partha,
I don’t have a tutorial on this and it’s very difficult to explain this just a comment. In your research did you find this post (https://www.w3schools.com/howto/howto_css_custom_checkbox.asp)? It appears to do what you need.
Thanks a lot !! It works well.
Do you know how to change name of the file upload button ? and the file upload field ?
…or, better, replace the button by an image ?
Thanks again
Hi Tonio,
I’ll add the code to the blog post.
What a helpful article!
Can I also change the width of the form. We I put a boarder around the form it shows on the whole page, where the input of the form is only about 50 % of the page.
I would like to change the width and then center the form. Is that possible?
Kind regards,
Marianne
Hi Marianne,
Yes, that is possible. Can you share a link to the live form so that I check the source code?
Hi Bjorn,
thank you for sharing these CSS styles!
I tried to style the radio boxes. But the boxes do not react when I click on them. Do you have an idea what the problem could be?
All the best
Hi Matti,
It sounds like could be a CSS conflict. Have you tried adding !important to the CSS declaration? For example:
.radioButton {color: red !important;}
That will force that declaration to take priority over all others. It’s not the ideal solution, but it works and you’ll be able to see if a CSS conflict is the problem.
If that doesn’t work I would double check you have the correct selectors.
I hope that helps and thanks for commenting!
I have used a free theme. “Islemag” didn’t work this code
The CSS in this post should work in any theme with one exception. Some themes provide CSS for CF7 and then you can encounter CSS conflicts that make custom CSS code hard to apply. That may be what is happening in your case. What have you tried so far?
Thanks a lot, Bjorn. This is what I’m looking for!
You’re welcome Alredo, I’m happy to help!
Thanks a lot. It is very useful.
You’re welcome Tyrek, thanks for stopping by!
Hello, I’m Ti and I am new to WordPress. I actually published my first website over the weekend and I am looking for good honest feedback. I also have a question. How did you know what the field names were that you needed to create the CSS classes for? I understand the CSS and how it works, but I don’t understand how exactly it is being applied.
Hi Ti,
First, great work on launching your first website!
Second, from using CF7 a lot over the years I know which of the CF7 shortcodes are creating which input fields. Then I know which of those shortcodes I need to add classes to to style them. Does that make sense or did I not understand your question correctly?
Hi Bjorn,
I’m Imre from Hungary.
Amazing and very useful what have you done so far. I learned so much from your videos .
I have a problem. Maybe you can help me.
I would like to change the default checkbox in the contact form 7. Changing the size and color (such as background) of the square as well as changing the color of the checkmark is my main goal.
I search the internet, but I couldn’t find a useful css codes.
Could you help me?
Hi Imre,
I don’t have a tutorial on this and it’s very difficult to explain this just a comment. In your research did you find this post? It appears to do what you need.
Hi,
Thanks for your great tutorials, they have helped me lots. I have encountered one little issue that I can’t figure out why it is not working.
When setting the border colours for the boxes, if I copy and paste your code in, it works fine. You have it as “Red” but I want it to be #33cc66 but it just wont’t work.
So instead of the following:
border: 1px solid red;
I have put in:
border: 1px #33cc66
But it just doesn’t change anything. Do I need to put anything else in?
Also, how can I change the “Submit” button to change colour when I hover on it? I want it to have a coloured border, white inside or transparent and then coloured text.
I have managed to get the button the relevant colour for none hover but can’t get it to change for when you hover over it.
Any help would be great.
Many thanks,
Sally
Hi Sally,
This will work or you: border: 1px solid #33cc66;
If you’re interested in learning why border: 1px #33cc66 doesn’t work, keep reading.
Border is a shorthand property meaning it combines several other border properties. If any of the border properties are missing it won’t work.
Border is a condensation of border-width, border-style, border-color. So when using the border shorthand you have to construct it like this:
border: width style color;
If any of those three are missing it won’t work.
Other shorthand properties like font work the same way. But some other shorthand properties like margin and padding work differently because you can use one, two, three or four values and it still works.
I hope that helps and thanks for stopping by!
Great video – my checkboxes are now aligned vertically, but the text is dropping to a line below the box. How do I fix this?
Hi Katie,
Can you share a link? My feeling is that the width allowed for your checkboxes is less than the length of the text.
Hi,
I am Nikolina. I have a problem styling my multi file button in CF7 form. It is always gray background with black letters and I need it other way for my web site, black background and white letters.
Can you help me?
Hi Nikolina,
The “choose file” buttons are really difficult to style. I don’t have code that works all the time yet. If you check out this StackOverflow post (https://stackoverflow.com/questions/46928807/how-to-style-contact-form-7-file-input-buttons), they have code that works on their site when you “Run” the code. But when I try it on my test site the style is applied, but the button no longer works.
Thank you soooo much. I will try that on my site. Do I have any other option for multi file upload beside CF7 that i can style as I wish?
how to i make the entire form the full width of page?
Hi Luke,
If you use CSS to select .wpcf7 and make width 100% that will make the form 100% of the container. As long as the container (ie. where the form is placed on the site) is the full width of the site then the form will be full width. I hope that made sense, lol.
Dear friend.
I am trying to make the width of the form span the whole page width.
I have tried: div.wpcf7 which worked once but now doesnt work on my forms anymore.
please advise.
many thakns
Hi Luke,
If it worked once I think it should work again. It sounds like you may have a caching issue. There are some tricks you can try to force your CSS changes to be applied:
1. Try a hard refresh: Ctrl + Shift + R on your keyword for Windows or CMD + Shift + R on a Mac
2. If you’re using Google chrome check your site in a different browser like FireFox to see if the changes are applied.
3. If you have a caching plugin like W3 Total Cache or WP Super Cache installed, clear its’ cache and deactivate it while you’re making CSS edits.
4. Try installing a Cache Killer add-on to Chrome to see if that helps, here’s a tutorial for that one: https://www.youtube.com/watch?v=CegkzTkcQq0
Hello and thank you a whole lot for doing what you do. How can i change the width of a number input field? I’ve tried so many codes and nothing seems to work. I want the words ‘Number of guests’ to appear as a placeholder in the number field. All i get is a small number field with the first 3 letters ‘Num’
Hi Stephanie,
Can you share a link so I can check out your form? The width of number fields should be definable using this:
.wpcf7 input[type=number] {width:100%;}
If that doesn’t work you may have a CSS conflict causing problems.
Hi there really straigthforward tutorial but for reason the text area does not change that means that the textarea is not working but when i edit it throught the console in google chrome it changes , what could that be ???
thank you in advance
Hi George, the problem could be a CSS conflict. To test if it’s a conflict you can add !important to the end of your CSS rule to override other rules for the same selector. For example, if you wanted to force the font color to be red you can do it like this:
.selector {color:red !important;}
If that works in your CSS, then there’s a conflict with another rule. If that doesn’t work then you have the wrong selector or there is a syntax error somewhere in your rule.
I hope that helps and thanks for stopping by!
Very good job Bjorn, keep up the great work!
Thanks Dwight, I’ll do my best 🙂
Great info, Bjorn – thank you! Excellent article.
Was wondering if you could shed some light on my issue.
Created a contact form to put in footer and used CF7 shortcode to do so in 1st Footer widget – there are 3 different contact forms on website and this footer contact form is only used here.
Was getting some “small tap targets” from PageSpeed insights so thought i would expand Submit button 100% since it’s only in one footer section (first section of three). I tried expanding the Submit button using CSS:
#wpcf7-f322-o2 input.wpcf7-form-control.wpcf7-submit {
display: block;
width: 100% !important;
}
It worked. However, only on the Homepage. On all the other pages, it did not. Found out the other pages have different id: f322-o1
I can get it to work if I add CSS for both:
#wpcf7-f322-o2 input.wpcf7-form-control.wpcf7-submit {
display: block;
width: 100% !important;
}
#wpcf7-f322-o1 input.wpcf7-form-control.wpcf7-submit {
display: block;
width: 100% !important;
}
So my questions are:
1. Why are there different id numbers for same form in same section – homepage different from others.
2. I just need to widen Send button in form. Is it possible to do it editing contact form? Similar to expanding text area via pixels with “30x” for example:
[textarea* textarea-376 30x placeholder “Your Message*” ]
I did try it already but nothing happened. However, I could be doing wrong.
I’d hate to add more code
FYI / Update.
Edited CF7 form by adding class: [submit class:longsend “Send”]
Then went to Customize/Additional CSS and added:
.wpcf7-form input.longsend{
width: 100% !important;
}
It works, BUT… (lol!) Is this best method / best practices for this effort?
Still wondering why two different ID’s?
Hi Andy,
Adding a class as you did is the best method for this. It reduces the amount of CSS you need because of the changing IDs on the homepage versus other pages.
Why there are two different IDs depending on the page is a question for the developers of the theme. From a technical standpoint there is no need to do that, so the devs must have had a reason to do it. In your theme, maybe you are able to add different footer widgets to the homepage versus the rest of the site? I can’t think of a whole lot of reasons why they would do it that way.
Anyhow, you did all the right things by finding the IDs and deciding to add your own class.
I hope that helps 🙂 Let me know if you have any further questions. Thanks for stopping by!
Hi Andy,
I replied to most of this in my other comment. I just wanted to add one thing. When you want to apply the same CSS to multiple classes or IDs you can separate the selectors with a comma. For example, your code:
#wpcf7-f322-o2 input.wpcf7-form-control.wpcf7-submit {
display: block;
width: 100% !important;
}
#wpcf7-f322-o1 input.wpcf7-form-control.wpcf7-submit {
display: block;
width: 100% !important;
}
Could be reduced to:
#wpcf7-f322-o1 input.wpcf7-form-control.wpcf7-submit, #wpcf7-f322-o2 input.wpcf7-form-control.wpcf7-submit {
display: block;
width: 100% !important;
}
You can have as many comma-separated classes and IDs as you need.
Great job mate!
You save me 🙂
Keep up good work!
BR
Awesome, I’m happy I could help 🙂