Skip to content

Instantly share code, notes, and snippets.

Forked from codehandling/cf7.css
Last active June 9, 2022 09:34
Show Gist options
  • Save jasperf/5e22d07fce7b98a1d498a1a698ded79f to your computer and use it in GitHub Desktop.
Save jasperf/5e22d07fce7b98a1d498a1a698ded79f to your computer and use it in GitHub Desktop.
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;
Copy link

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?

Copy link

Please add a screenshot.

Copy link

donde se coloca este css?

Copy link

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

Copy link

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