Skip to content

Instantly share code, notes, and snippets.

@codehandling
Last active October 21, 2022 21:54
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save codehandling/0483efbc2e76890a3e6a9ae6737792bb to your computer and use it in GitHub Desktop.
Save codehandling/0483efbc2e76890a3e6a9ae6737792bb to your computer and use it in GitHub Desktop.
Contact Form 7 Styles
/***********basic************/
/*Form width*/
.wpcf7 {
text-align: left;
width: 40%;
}
/*Input Field widths*/
.wpcf7-text, .wpcf7-textarea {
width: 100%;
border: 1px solid #e4e4e4;
background: #f7f7f7;
}
.wpcf7-text:focus, .wpcf7-textarea:focus {
border-color: #129FEA;
}
/*Label Font*/
.wpcf7-form p {
font-size: 14px;
font-family: 'Roboto', sans-serif;
}
/*Submit button Font*/
.wpcf7-submit {
width: 100%;
font-size: 15px !important;
background: #4a97c2 !important;
color: #fff !important;
}
/*Submit button Hover*/
.wpcf7-submit:hover {
background: #3b86b0 !important;
}
/*Response messages - Error & Success*/
.wpcf7-response-output {
margin-bottom: 30px !important;
}
/***********borders************/
/*Form border*/
.wpcf7 {
border: 1px solid #B7B7B7;
padding: 20px 25px !important;
padding-bottom: 0px !important;
}
/*Input Field borders*/
.wpcf7-text:focus, .wpcf7-textarea:focus {
border-color: #8F8F8F !important;
}
/*Submit button Background*/
.wpcf7-submit {
background: #7E7E7E !important;
color: #fff !important;
}
/*Submit button Hover*/
.wpcf7-submit:hover {
background: #5F5F5F !important;
}
/***********colors************/
/*Submit button background & border*/
.wpcf7-submit {
background-color: transparent !important;
border: 2px solid #5A5050 !important;
color: #5A5050 !important;
font-weight: bold !important;
}
/*Submit button Hover styles*/
.wpcf7-submit:hover {
background-color: transparent !important;
border-color: #4CAF50 !important;
color: #4CAF50 !important;
}
/*Label Text color*/
.wpcf7-form p {
color: #9E9E9E;
}
/*Input Field Text color*/
.wpcf7-text, .wpcf7-textarea {
color: #777;
}
/****background-images********/
/*Form background*/
.wpcf7 {
background-image: url(http://i.imgur.com/iAFPf0G.jpg);
background-color: rgba(255, 255, 255, 0.2);
background-position: center;
background-size: cover;
}
/*Label Text color*/
.wpcf7-form p {
color: #FFFFFF;
}
/*Submit button background & border*/
.wpcf7-submit {
border: 2px solid #FFFFFF !important;
color: #FFFFFF !important;
}
/*Submit button Hover styles*/
.wpcf7-submit:hover {
border-color: transparent !important;
background-color: rgba(0, 0, 0, 0.2) !important;
color: #FFFFFF !important;
}
/*Input Field border*/
.wpcf7-text:focus, .wpcf7-textarea:focus {
border-color: #5A3D3D !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment