Skip to content

Instantly share code, notes, and snippets.

@jasperf
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 https://imwz.io/contact-form-7-css-boilerplate/
/*
** 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-text,
.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-text:focus,
.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;
}
@honeyamin
Copy link

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

@jasperf
Copy link
Author

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