A fully customized Contact Form 7 + the code
This looks more like a Christmas tree, but the point here is that YOU CAN LITERALLY CUSTOMIZE ANYTHING YOU WANT.
Please note: I’ve added a specific Class attribute to each field. You can read more here.
Each field of this form has been styled separately, you can find its styling CSS below the form.
/*editing text*/
.wpcf7 .text {
color: white;
border-radius: 25px;
background-color: #000;
width: 25%;
}
/*editing email*/
.wpcf7 .email {
color: red;
border: none;
}
/*editing url*/
.wpcf7 .url {
color: #c60202;
border: solid 2px #c60202;
border-radius: 0px;
width: 30%;
}
/*editing tel*/
.wpcf7 .tel {
background-color: #c60202;
color: white;
width: 35%;
border-radius: 4px;
}
/*editing number*/
.wpcf7 .number {
border: solid 4px black;
font-family: arial;
font-weight: 900;
width: 40%;
}
/*editing date*/
.wpcf7 .date {
width: 45%;
}
/*editing text area*/
.wpcf7 .text_area {
background-color: #000;
border-radius: 35px;
border: solid 2px #c60202;
width: 50%;
color: white;
}
/*editing dropdown*/
.wpcf7 .dropdown {
width: 55%;
color: white;
background-color: #c60202;
}
/*editing checkbox*/
.wpcf7 .checkboxes {
width: 60%;
}
/*editing radio buttons*/
.wpcf7 .radio {
width: 65%;
}
/*editing acceptance*/
.wpcf7 .accept {
width: 70%
font-weight: 900;
}
/*editing quiz*/
.wpcf7 .quiz {
width: 75%;
background-color: black;
color: white;
}
/*editing file*/
.wpcf7 .file {
width: 80%;
color: #c60202;
}
/*editing submit*/
.wpcf7 .submit {
width: 100%;
font-weight: 900;
}
