How to style a Contact Form 7 form

Update : Check the great video tutorial from Permaslug : How to Style Contact Form 7 with No Coding

I often use Contact Form 7 for simple contact forms because it's easy to use, it doesn't load any style (actually it does but only for the warning messages) and it's free.

Basic Setup

For a simple contact form, I don't like to use labels. I much prefer to use placeholders as it looks better.

[text* your-name placeholder "Your name"]
[email* your-email placeholder "Your Email"]
[textarea* your-message placeholder "Your Message"]
[acceptance acceptance-874 optional] I agree with everything you say [/acceptance]
[submit "Send"]

By default, the form will look like that. Without any style it doesn't look great but the worse is that it's even not responsive. So we have to fix that first.

Width & font

First thing first, let's change the width for all the elements so it can be responsive.

.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=url],
.wpcf7 input[type=tel],
.wpcf7 input[type=number],
.wpcf7 input[type=submit],
.wpcf7 .wpcf7-select,
.wpcf7 textarea {
	width: 100%;
	font-family: 'Roboto';
}

Style the Input

Very basic styling. We remove the ugly default borders and replace them by a background color instead. We add some paddings and some font stuff. I have also added a transition, as it will be useful later.

.wpcf7 input {
	padding: 20px;
	margin-bottom: 6px;
	border: none;
	background-color: whitesmoke;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1.2px;
	transition: 0.3s ease background, color;
	color:black;
}

Placeholders & Focus

I won't explain in detail what they are doing, it's pretty self-explanatory, but check this page if you want to know more:
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

Note that the transition we've added previously, is useful here, as we are changing the color and background when we click in one of the input.

.wpcf7 ::placeholder {
	color: black;
}
.wpcf7 :focus {
	color: red;
	background-color: black;
}
.wpcf7 :focus::placeholder {
	color: white;
}

Click in the YOUR NAME input and change it to see the result in action:

An example about what we can do with the focus and placeholder and how they work:

.wpcf7 input {
	color: blue
}
.wpcf7 input::placeholder {
	color: red
}
.wpcf7 input::focus {
	color: green
}
.wpcf7 input::focus::placeholder {
	color: yellow
}

Textarea

I just want the Textarea to have the same style as the inputs, but with a different height and not re-sizable:

.wpcf7 input, .wpcf7 textarea {
	padding: 20px;
	margin-bottom: 6px;
	border: none;
	background-color: whitesmoke;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1.2px;
	transition: 0.3s ease background, color;
	color:black;
}
.wpcf7 textarea {
	height: 150px;
	resize: none;
}

The Submit button

It's time to take care of the Submit button. Not much to do here, except changing the colors and adding a pointer:

.wpcf7 input[type="submit"] {
	background-color: red;
	color: white;
	cursor: pointer;
}
.wpcf7 input[type="submit"]:hover {
	background-color: black;
	color: white;
}

Fixing some little things

I hate the border that shows up when we click in a button or in an input box:

So to remove it, we simply have to add a outline:0 to the pseudo-class focus:

.wpcf7 :focus {
	color: red;
	background-color: black;
	outline:0;
}

The Checkbox doesn't look great but it's much more complicated to style (there are plenty of examples online). I just change the margin:

.wpcf7 span.wpcf7-list-item {
	margin: 0 0 10px 0;
}

Warning messages

Click on the SEND button and you will see the warning messages:

The default colors or the position doesn't always look good, so we can also style them:

.wpcf7 .wpcf7-validation-errors,
.wpcf7 .wpcf7-acceptance-missing {
	border: 5px solid red;
	margin-top: -30px;
}
.wpcf7 span.wpcf7-not-valid-tip {
	background-color: black;
	color: white;
	font-size: 12px;
	padding: 5px;
}
.wpcf7 .wpcf7-mail-sent-ok {
	border: 5px solid white;
	margin-top: -30px;
}

Click on the SEND button below to try it:

The full CSS

You can now copy the full CSS and paste it in a Code Block or in a Stylesheet.
Then you just need to change the colors, the font, or some other styles.

.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=url],
.wpcf7 input[type=tel],
.wpcf7 input[type=number],
.wpcf7 input[type=submit],
.wpcf7 .wpcf7-select,
.wpcf7 textarea {
	width: 100%;
	font-family: 'Roboto';
}
.wpcf7 input,
.wpcf7 textarea {
	padding: 20px;
	margin-bottom: 6px;
	border: none;
	background-color: whitesmoke;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1.2px;
	transition: 0.3s ease background, color;
	color: black;
}
.wpcf7 ::placeholder {
	color: black;
}
.wpcf7 :focus {
	color: red;
	background-color: black;
	outline: 0;
}
.wpcf7 :focus::placeholder {
	color: white;
}
.wpcf7 textarea {
	height: 150px;
	resize: none;
}
.wpcf7 input[type="submit"] {
	background-color: red;
	color: white;
	cursor: pointer;
}
.wpcf7 input[type="submit"]:hover {
	background-color: black;
	color: white;
}
.wpcf7 span.wpcf7-list-item {
	margin: 0 0 10px 0;
}
.wpcf7 .wpcf7-validation-errors,
.wpcf7 .wpcf7-acceptance-missing {
	border: 5px solid red;
	margin-top: -30px;
}
.wpcf7 span.wpcf7-not-valid-tip {
	background-color: black;
	color: white;
	font-size: 12px;
	padding: 5px;
}
.wpcf7 .wpcf7-mail-sent-ok {
	border: 5px solid white;
	margin-top: -30px;
}

Here is another example. I used the same CSS and changed only a few lines: