Checkboxes not clickable

Please include a link to your Contact Form 7 form. If others here are able to understand your actual problem, they may be able and willing to offer a possible solution.

https://ocpw.org/#schedule

Basically all the checkboxes on the left side are uncheckable, that align with checkboxes on the right side. The checkboxes on the left at the very bottom work ok, and aren’t aligned with the right side, if that makes any difference.

This is could be due to a JavaScript conflict with either your current WordPress theme or one of the other plugins you are using – see Contact Form 7 Email Issues – there is a link there that covers JavaScript Conflicts.

Use Firebug or Chrome Dev Tools to examine JavaScript conflicts in detail.

Remember that a problem in one script can cause issues in another.
For example, some jQuery errors can stop jQuery processing any more script, which can make the culprit hard to find. A jQuery error in one of your plugins or your themes javascript files can stop jQuery processing before it gets to the CF7 script.

See https://www.wpexplorer.com/plugin-conflicts/ for general guidance.

its difficult to understand the real problem from the above question. May be you want to try using chrome inspect element or developer tools.

I am not sure, but it seems like your css is probably making any div to be on top of checkbox hence its visible but not clickable.

Sam
Projects implemented
https://www.jobofy.com
https://www.healthphr.com
https://www.livewebtraffic.com

@sweetsamy28 – are the links you have posted in your reply relevant to the OP’s question?

@sweetsamy28 I use the Jetpack CSS Stylesheet Editor to input custom CSS. I tried removing all other CSS and only keeping the two for this particular contact form but it was still not clickable.

div.left {
	float: left;
	clear: both;
	width: 50%;
}

span.wpcf7-list-item {
	margin-left: .5em;
	display: block;
}

Anyone have any ideas what could be causing this or a possible solution?

I have used Firebug to examine your form, here is what I strongly suspect to be the cause of the problem.

CSS CODE:

div.left {
float: left;
clear: both;
width: 50%;
}

When float left is disabled all the checkboxes become clickable. Using float: left; like this is likely to cause problems with following items – particularly if you aren’t 100% sure what you are doing.
?
Easiest way to fix might be to to prevent the use of float: left;

@davmerit – Yeah, I found that removing float:left would fix the checkboxes being clickable, but I can’t get the same formatting, 2 evenly match columns. Originally I had the two columns in a table but everything wasn’t lining up correctly and so I used div class which looks great, but doesn’t work properly.

I’m not sure what the most effective method of displaying these checkboxes in 2 columns would be

You could consider using Contact Form 7 Skins to style your Contact Form 7 Forms.

You can now use the add-on CF7 Skins Ready to make a 2 column contact form

I am having a similar issue. I’ve tried using dropdown, checkboxes or radio buttons and they work on a windows desktop, but do not show on an android phone, or on a windows 8.1 tablet. Here’s the code (using checkbox) I’m using.

<div class="contact-wrapper-small">
<div class="contact-form">
<div class="contact-wrapper">

<label>Please select a recipient <span>(required):</span> </label>
[checkbox* checkbox-694 use_label_element exclusive "Arts & Culture|[email protected]" "TA Manual|[email protected]" "MAC|[email protected]"]

<label>Your Name <span>(required):</span> </label>
[text* your-name class:name]

<label>Email <span>(required):</span> </label>
[email* your-email]

<label>Subject <span>(required):</span> </label>
 [text* your-subject]

<label>Your Message <span>(required):</span> </label>
[textarea your-message 37x]
</div>

<p>[submit "send form"]</p>
</div>
</div>

Please Help..