If you have a WordPress site, you are familiar with the contact form 7 plugin. This plugin automatically creates a form design but sometimes you need to change the design if you want to match with your website’s design to bring consistency across the site.
So, first thing first, we need to detect the contact form 7’s form class to design the form. The class is .wpcf7 ,use it before any form tag or attribute to change the design. I’m giving you some css snippet so it will be easy for you to work with it.
div.wpcf7 {
background-color: #F6F9F8;
padding: 56px 30px 56px 56px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
font-family:lora, sans-serif;
font-style:italic;
font-size:14px;
background-color: transparent;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, .1);
border-radius: 0;
display: block;
padding: 0;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus {
box-shadow: none;
outline: none;
border-bottom:1px solid #0013CA;
}
.wpcf7 label{
margin-bottom:30px;
opacity:.50;
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
color:#fff;
background-color: #0013CA;
border: 2px solid #0013CA;
border-radius: 30px;
padding: 11px 24px;
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="button"]:hover{
background-color: #fff;
color: #0013CA;
}
The above code will completely change the contact form. Below is the result of the above code.
Isn’t it cool? I think its a great design with minimal css. You can also change the css values to get another creative layout. Let me know how it is.