Contact form7 is the most popular contact form plugin in WordPress. It is popular for it’s functionality and also for it’s user-friendly options.
You can use your custom design easily but if you want to use a custom design for the checkbox field it’s a little bit complicated. From this post, you can to do this easily. See below the code for custom design checkbox field.
Code:
.wpcf7-checkbox span.wpcf7-list-item-label{
position: relative;
padding-left: 20px;
cursor:pointer;
}
.wpcf7-checkbox span.wpcf7-list-item-label:before {
content: “”;
background: #fff;
width: 17px;
height: 17px;
position: absolute;
left: -17px;
top: 50%;
transform: translateY(-50%);
border: 2px solid #cecece;
}
.wpcf7 input[type=checkbox]:not(old):checked + span:before {
background: #fff;
}
.wpcf7 input[type=checkbox]:not(old):checked + span:before {
background: #d4136d;
border: 2px solid #d4136d;
}
.wpcf7-checkbox span.wpcf7-list-item-label:after {
content: “”;
position: absolute;
left: -11px;
top: 0px;
width: 6px;
height: 11px;
border: solid #fff;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.checkbox-item label:hover span.wpcf7-list-item-label:before{
border: 2px solid #d4136d;
}
Replace .checkbox-item from your any custom class and just change the color, height, width, border color, background color, position, and design checkbox field.
Enjoy!
Leave A Comment