Support ForumCan't style Contact Form 7 checkboxes – Support Forum

Can't style Contact Form 7 checkboxes

cbazoe — Tue, 24 Jun 2014 19:04:15 +0000

I’m trying to make my checkboxes display as a block and one underneath another sort of like a list. Instead they look all squished together like so:

zoestudios.ca/questionnaire

(scroll down to the Content/Special Features section to find the checkboxes)

I’ve looked through the contact form 7 plugin styles.css and the js_composer_front.css from the theme itself and whenever I go to refresh the page and use Inspect Element to check out if the codes been changed, it says none of my code has been added and no changes have been made.

How would I style the checkboxes to more of a list format? And where’s the correct stylesheet located to do so?

Reply To: Can't style Contact Form 7 checkboxes

IshYoBoy — Wed, 25 Jun 2014 09:30:06 +0000

Hey,

the default styling for Contact Form 7 plugin is stored in the “_content.scss” file but we don’t recommend to change it.

In your case please use this short snippet and paste it to your “Theme Options -> General options -> Custom CSS” field. It will make the trick ;)

.wpcf7-checkbox .wpcf7-list-item {
	display: block;
}

.wpcf7-checkbox .wpcf7-list-item {

display: block;

}

Please let us know if it’s ok
Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Can't style Contact Form 7 checkboxes

cbazoe — Mon, 07 Jul 2014 17:13:54 +0000

Unfortunately it didn’t work :(

Reply To: Can't style Contact Form 7 checkboxes

cbazoe — Mon, 07 Jul 2014 17:21:11 +0000

I’ve got the jist of it, but now the labels are sitting underneath the checkboxes themselves.

Reply To: Can't style Contact Form 7 checkboxes

cbazoe — Mon, 07 Jul 2014 17:34:51 +0000

Ah nevermind, seems like I fixed it. I used a combination of these 2 codes and got it working:

.wpcf7-list-item input[type="checkbox"] {
display: block;
top: 16px;
left: -15px;
padding: 10px;
padding-bottom: 4px;
}

span.wpcf7-list-item {
display: block;
border: none;
box-shadow: none;
padding: 10px;
list-style: none;
float: left;
}

.wpcf7-list-item input[type="checkbox"] {

display: block;

top: 16px;

left: -15px;

padding: 10px;

padding-bottom: 4px;

}

span.wpcf7-list-item {

display: block;

border: none;

box-shadow: none;

padding: 10px;

list-style: none;

float: left;

}

I was originally trying to go through certain css files instead of using the Custom CSS box like you suggested so thank you for the help and the right direction :)

Reply To: Can't style Contact Form 7 checkboxes

IshYoBoy — Tue, 08 Jul 2014 06:55:50 +0000

Hey,

Yes, the best way is either through “Custom CSS” field or via “child-theme.css” of the starter child-theme we have provided along with the theme. In this way all changes will remain untouched even after you update the parent theme.

Glad you solved it!

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market