Skip to content

Instantly share code, notes, and snippets.



Forked from codehandling/cf7.css
Last active Jul 15, 2020
What would you like to do?
Contact Form 7 Styles for basic CSS styling of the form. Form is responsive and has nice rounded corners. For labels and placeholders you need to edit the form in CF7
** Contact Form 7 basics
/* Form width and border */
.wpcf7 {
text-align: left;
width: 90%;
padding: 20px 25px !important;
background-color: rgba(255, 255, 255, 0.2);
background-position: center;
background-size: cover;
/* Input Field widths */
.wpcf7-textarea {
width: 100%;
border: 1px solid #e4e4e4;
border-radius: 4px;
color: #777;
.wpcf7-text {
height: 50px;
padding-left: 10px;
/* Input Field borders */
/* Input Field Text color */
.wpcf7-textarea:focus {
border-color: #8f8f8f;
/* Label Font */
.wpcf7-form p {
font-size: 16px;
font-family: "Roboto", sans-serif;
color: #000;
/* Submit button Font */
.wpcf7-submit {
width: 85%;
font-size: 15px !important;
background-color: #1d2731 !important;
border: 2px solid #fff !important;
color: #fff !important;
font-weight: bold !important;
padding: 20px;
/* Submit button Hover */
.wpcf7-submit:hover {
border-color: transparent !important;
background-color: rgba(0, 0, 0, 0.2) !important;
color: #000 !important;
/* Response messages - Error & Success */
.wpcf7-response-output {
margin-bottom: 30px !important;

This comment has been minimized.

Copy link

@ghost ghost commented Jun 6, 2017

Hi @jasperf,

I have added in
.wpcf7-text:focus, .wpcf7-textarea:focus {
border-color: #8F8F8F !important;

and the first styling option that is the same but does not include the !important option. Unfortunately my textarea boxes are still showing a blurred blue color when the area is clicked. I have changed the color to be #FF7A33.

Do you know why this may be happenning?


This comment has been minimized.

Copy link

@evilprince2009 evilprince2009 commented Jan 2, 2018

Please add a screenshot.


This comment has been minimized.

Copy link

@TopCheff TopCheff commented Mar 28, 2018

donde se coloca este css?


This comment has been minimized.

Copy link

@honeyamin honeyamin commented Mar 19, 2019

hi, may you like to add this kind too
.wpcf7 input[aria-invalid=true] {border: red 1.5px solid;}


This comment has been minimized.

Copy link
Owner Author

@jasperf jasperf commented Nov 8, 2019

Just updated the form to use indention 2 spaces and consolidated duplicate selectors. Also added value sizes or column amount for all fields and the text area

<label> Your Name (required)
    [text* your-name size:100] </label>

<label> Your Email (required)
    [email* your-email size:100] </label>

<label> Subject
    [text your-subject size:100] </label>

<label> Your Message
    [textarea your-message 100x10] </label>

[submit "Send"]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.