-
-
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/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
** 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; | |
} |
hi, may you like to add this kind too
.wpcf7 input[aria-invalid=true] {border: red 1.5px solid;}
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
donde se coloca este css?