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!