Freeform Pro required checkbox

Question

I'm trying to do a terms and service agreement checkbox in my multi-page form. I created a checkbox field, and made it required. For some reason, when I hit the submit button without checking the box, the form submits anyway. Is there something I'm doing wrong? Any help would be appreciated. This is the code:

<label for="{freeform:label:terms_conditions}" class="checkbox nomargin">
{freeform:field:terms_conditions attr:class="checked-agree"}
<i></i>I agree to the <a href="#" data-toggle="modal" data-target="#termsModal">Terms of Service</a></label>
<!-- ALERT -->
{if freeform:error:terms_conditions}
<div class="alert alert-mini alert-danger margin-top-6 margin-bottom-20">
<strong>{freeform:error:terms_conditions}</strong> &nbsp; &nbsp; <i class="fa fa-arrow-up"></i>
</div>  
{/if}
<!-- /ALERT -->                         

Answer 1

I've come across this problem too.

In order to workaround the html "feature" where unchecked checkboxes are not submitted at all (as opposed to being submitted with a falsey value), Freeform Pro outputs an extra hidden field along with each checkbox field with the value 'n'. This makes sense if you're using a (non-required) checkbox group, but not for a lone checkbox or a group where at least one choice is required.

So the solution is to output the checkbox manually instead of via {freeform:field:terms_conditions ...} - quickest way to do that is inspect the source code and find the checkbox that gets output by that tag and just paste it into your template, avoiding the extra hidden input. It's probably something simple like <input type="checkbox" id="terms_conditions" name="terms_conditions" value="y">