Last update: October 21, 2020

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:





                    closealign-justifychevron-downcaret-up