We all love free resources! Contact Form 7 is powerful WordPress Free plugin to Create Contact Forms. You may be looking for ways to Quickly Add a new look to a Contact Form 7 Contact Form. Here you can choose a design from below and copy paste it’s HTML and CSS code without any Payment.
If you want to build a custom Contact Form 7 Design for your WordPress website from us at a reasonable cost, you can send your requirement to hello@ajitsing.in
Send Enquiry
Download CSS & HTML
.wpcf7-form label, .wpcf7-form p
{
color: #a7a7a7;
font-family: sans-serif;
}
.wpcf7-form p:has(.wpcf7-text)
{
}
span.wpcf7-form-control-wrap:has(.wpcf7-text),
span.wpcf7-form-control-wrap:has(.wpcf7-textarea)
{
margin-top: 10px;
display: block;
}
.wpcf7-form-control-wrap input.wpcf7-text,
.wpcf7-form-control-wrap input.wpcf7-date,
.wpcf7-form-control-wrap input.wpcf7-file,
.wpcf7-form-control-wrap textarea.wpcf7-textarea,
.wpcf7-form-control-wrap select.wpcf7-select,
.wpcf7-form-control-wrap div.select-arrow
{
color: #a7a7a7;
border-radius: 2px;
border: 1px solid #a7a7a7;
}
.wpcf7-form-control-wrap input.wpcf7-file
{
outline: 0;
border: 0;
}
.wpcf7-form-control-wrap input.wpcf7-text:focus,
.wpcf7-form-control-wrap input.wpcf7-date:focus,
.wpcf7-form-control-wrap input.wpcf7-file:focus,
.wpcf7-form-control-wrap textarea.wpcf7-textarea:focus,
.wpcf7-form-control-wrap select.wpcf7-select:focus,
.wpcf7-form-control-wrap div.select-arrow:focus
{
color: #1a3045;
outline: none;
border: 2px solid #1a3045 !important;
}
input.wpcf7-submit
{
background-color: #66ac5c !important;
border-radius: 2px !important;
transform: translateY(15px);
transition-duration: 0.4s;
display: inline-block;
width: 100% !important;
font-size: 1em !important;
}
input.wpcf7-submit:hover, input.wpcf7-submit:focus
{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
transform: translateY(10px);
}
.wpcf7-form
{
border-radius: 5px;
padding: 25px;
box-shadow: 0 2px 10px 0 #d3d3d31c, 0 2px 10px 0 #d3d3d3a6;
background: #faf9fa;
}
.wpcf7-form > p:nth-of-type(1)
{
color: #a7a7a7;
font-size: 1.5em;
font-family: Arial, Helvetica, sans-serif;
padding: 10px 0 20px 0;
font-weight: lighter;
}
span.wpcf7-not-valid-tip
{
font-size: 0.75em;
}
Download CSS & HTML
Talk with our sales team
[date date-625] [checkbox checkbox-549 use_label_element “option 1” “option 2” “option 3”] [acceptance acceptance-656 optional] Yes, I agree to conditions and terms of this form. [file file-13] [select menu-35] [submit “Submit”].wpcf7-form label, .wpcf7-form p
{
color: #1a3045;
font-family: sans-serif;
}
.wpcf7-form p:has(.wpcf7-text)
{
width: 45%;
display: inline-block;
}
span.wpcf7-form-control-wrap:has(.wpcf7-text),
span.wpcf7-form-control-wrap:has(.wpcf7-textarea)
{
margin-top: 10px;
display: block;
}
.wpcf7-form-control-wrap input.wpcf7-text,
.wpcf7-form-control-wrap input.wpcf7-date,
.wpcf7-form-control-wrap input.wpcf7-file,
.wpcf7-form-control-wrap textarea.wpcf7-textarea,
.wpcf7-form-control-wrap select.wpcf7-select,
.wpcf7-form-control-wrap div.select-arrow
{
color: #c7c4c5;
border-radius: 5px;
border: 1px solid #c7c4c5;
}
.wpcf7-form-control-wrap input.wpcf7-file
{
outline: 0;
border: 0;
}
.wpcf7-form-control-wrap input.wpcf7-text:focus,
.wpcf7-form-control-wrap input.wpcf7-date:focus,
.wpcf7-form-control-wrap input.wpcf7-file:focus,
.wpcf7-form-control-wrap textarea.wpcf7-textarea:focus,
.wpcf7-form-control-wrap select.wpcf7-select:focus,
.wpcf7-form-control-wrap div.select-arrow:focus
{
color: #1a3045;
outline: none;
border: 2px solid #1a3045 !important;
}
input.wpcf7-submit
{
background-color: #5bce93 !important;
border-radius: 8px !important;
transform: translateY(15px);
transition-duration: 0.4s;
}
input.wpcf7-submit:hover, input.wpcf7-submit:focus
{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
transform: translateY(10px);
}
.wpcf7-form
{
border-radius: 5px;
padding: 25px;
box-shadow: 0 5px 10px 0 #d3d3d31c, 0 5px 10px 0 #d3d3d3a6;
}
.wpcf7-form > p:nth-of-type(1)
{
color: #1a3045;
font-size: 1.5em;
font-family: sans-serif;
padding: 10px 0 20px 0;
}
span.wpcf7-not-valid-tip
{
font-size: 0.75em;
}
Download CSS & HTML
Talk with our sales team
<label> [text* your-name autocomplete:name placeholder “Your name”] </label>
<label> [email* your-email autocomplete:email placeholder “Your Email Address”] </label>
<label> [text* your-subject placeholder “Subject”] </label>
<label> [textarea your-message placeholder “Type your message here…”] </label>
[date date-625] [checkbox checkbox-549 use_label_element “option 1” “option 2” “option 3”] [acceptance acceptance-656 optional] Yes, I agree to conditions and terms of this form. [file file-13] [select menu-35] [submit “Submit”].wpcf7-form label, .wpcf7-form p
{
font-weight: bold;
color: black;
}
.wpcf7-form-control-wrap input.wpcf7-text,
.wpcf7-form-control-wrap input.wpcf7-date,
.wpcf7-form-control-wrap input.wpcf7-file,
.wpcf7-form-control-wrap textarea.wpcf7-textarea,
.wpcf7-form-control-wrap select.wpcf7-select,
.wpcf7-form-control-wrap div.select-arrow
{
color: #c7c4c5;
border-top: none;
border-left: none;
border-right: none;
border-radius: 0;
border-bottom: 1px solid #c7c4c5;
}
.wpcf7-form-control-wrap input.wpcf7-file
{
outline: 0;
border: 0;
}
.wpcf7-form-control-wrap input.wpcf7-text:focus,
.wpcf7-form-control-wrap input.wpcf7-date:focus,
.wpcf7-form-control-wrap input.wpcf7-file:focus,
.wpcf7-form-control-wrap textarea.wpcf7-textarea:focus,
.wpcf7-form-control-wrap select.wpcf7-select:focus,
.wpcf7-form-control-wrap div.select-arrow:focus
{
outline: none;
border-top: none !important;
border-right: none !important;
border-left: none !important;
border-bottom: 2px solid darkgray !important;
}
input.wpcf7-submit
{
background-color: #5bce93 !important;
border-radius: 8px !important;
transform: translateY(15px);
transition-duration: 0.4s;
}
input.wpcf7-submit:hover, input.wpcf7-submit:focus
{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
transform: translateY(10px);
}
.wpcf7-form
{
border: 3px solid #5bce93;
padding: 25px;
}
.wpcf7-form > p:nth-of-type(1)
{
color: #1a3045;
font-size: 1.5em;
font-family: sans-serif;
padding: 10px 0 20px 0;
}
span.wpcf7-not-valid-tip
{
font-size: 0.75em;
}
More Designs Coming..
Read About – How to Add Custom CSS Style to Contact Form 7 Form