Last active
April 24, 2024 11:54
-
-
Save gicolek/2bcd590c74ca6517da16b11b22632a4c to your computer and use it in GitHub Desktop.
Contact Form 7 updated CSS
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
/* this part of the code adds two columns to desktop */ | |
@media only screen and (min-width: 767px) { | |
.c-custom-contact-form-7 .c-grid { | |
display: grid; | |
gap: 5px; | |
grid-template-columns: 50% 50%; | |
} | |
} | |
/* this part of the code adds two columns to desktop */ | |
.wpcf7-form .c-custom-contact-form-7 label { | |
width: 100%; | |
display: flex; | |
padding: 10px 0; | |
flex-direction: column; | |
font-weight: bold; | |
text-transform: uppercase; | |
} | |
/* | |
this part of the code increases the width of each input, | |
textarea, adds border radius and padding | |
*/ | |
.c-custom-contact-form-7 .wpcf7-form-control { | |
padding: 10px !important; | |
border-radius: 10px; | |
width: 100%; | |
} | |
/* | |
this part of the code changes the color and background color of invalid fields, | |
and applies some minor changes | |
*/ | |
.c-custom-contact-form-7 .wpcf7-not-valid-tip { | |
color: maroon; | |
border-color: maroon; | |
font-style: italic; | |
font-weight: bold; | |
padding: 5px 0 0 10px; | |
} | |
/* this part of the code changes the submit button style */ | |
.c-custom-contact-form-7 .wpcf7-submit { | |
cursor: pointer; | |
background: none; | |
border: 1px solid black; | |
text-transform: uppercase; | |
font-weight: bold; | |
} | |
/* | |
This part of the code changes the color and background color of the bottom error note | |
Note: it applies to all forms, so if you use multiple Contact Forms on your website, | |
this will apply everywhere. | |
*/ | |
.wpcf7 form.invalid .wpcf7-response-output, | |
.wpcf7 form.unaccepted .wpcf7-response-output, | |
.wpcf7 form.payment-required .wpcf7-response-output { | |
border-color: maroon; | |
font-weight: bold; | |
color: maroon; | |
font-style: italic; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment