Contact form 7 checkbox

[amitmalhotra1]

Hi,

I am looking to style contact form 7 checkboxes like clickable buttons. Here is the page I am working on. https://www.creativeamit.com/v2/start-your-project/
Here is the page which shows what I want. https://www.canny-creative.com/start-your-project/

I tried to do that by adding some css but I guess I am missing something. Can you please show me some css code to achieve this

Thanks
Amit

[Prasant]

Hello Amit,

Thanks for writing in!

I checked the website that you are working and I am unable to access the same. I am getting This site can’t be reached message. In that regards I am unable to see your current setup.

Having said that please try out following solution and let us know the outcome:

1. In Contact Form 7 editor add a Checkbox element.
2. In Class attribute box, add a class name.

3. After that add following CSS under X/Pro > Theme Options > CSS:

.add-class-here label {
    background-color: #ddd;
    padding: 10px 12px;
    width: 20%;
    border-radius: 30px;
}

.add-class-here input[type="checkbox"] {
    margin-left: 20px;
}

Replace add class here with you own class name.

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[amitmalhotra1]

Thanks Prasant,
But this is not working. I want to show the checkboxes as clickable buttons. I tried by seeing the css of that page element in developer tools but couldn’t figure that out. I don’t know why you are not able to see that page live. I have attached screenshot for both.
Image 1 - My current form with default checkboxes
Image 2 - What I want.

Let me know if you can help me.

[rad]

Hi Amit,

Unfortunately, it’s only possible with custom development since checkbox isn’t initially button. Please check this https://www.sitepoint.com/community/t/checkbox-styling-like-button/289279. It’s not a simple CSS that you could do in developer tools. I recommend contacting a developer for this kind of design.

Thanks!