0

I have a contact form 7 form and in that I have an acceptance checkbox for terms and condition and I want to make that checkbox required and add some class when checkbox is not checked and prevent form from submission.So I tried using preventDefault().

<script>
$(".wpcf7-form).submit(function(event){
if($("#checkbox1").hasClass("check") == false){
  event.preventDefault();
  $("#checkbox1).addClass("error");
} else {
  $("#checkbox1).removeClass("error");
});
</script>

Now addclass line is working and for some reason preventDefault() is not working it is submitting my form everytime regardless of checkbox state.I want to make that checkobx required but I dont want to use acceptance's optional field as I dont want to disable my submit button. Any help will be helpful and thanks in advance.

3
  • Have you looked into using the Acceptance checkbox CF7 offers that is meant specifically for what you are trying here? contactform7.com/acceptance-checkbox
    – kraftner
    Aug 10, 2022 at 8:09
  • @kraftner, I already tried all the parameters if i use [acceptance id: acceptancecheckbox1 class:form-control-input acceptance_as_validation: on ][/acceptance] then submit button is getting disabled but if i use optional with acceptance _as_validation then form is getting submitted regardless of checkbox state .
    – RDX023
    Aug 18, 2022 at 7:21
  • 1
    @kraftner, my bad acceptance_as_validation is a additional settings. Yeah it worked I check acceptance_as_validation multiple times trying to figure out the solution but didn't see it was additional settings. Well thanks
    – RDX023
    Aug 18, 2022 at 7:49

2 Answers 2

1

If anyone still trying figure out the solution there is a additional settings which works like normal contact form 7 validation for other field just use acceptance_as_validation: on.

0

You can disable your submit button when your condition is met. That should do the job.

$('.wpcf7-form').submit(function(event) {
    var submitButton = $(this).find('input[type="submit"]');
    if ( $('#checkbox1').hasClass('check') == false ) {
        $('#checkbox1').addClass('error');
        submitButton.disabled = true;
    }
    else {
        $('#checkbox1').removeClass('error');
        submitButton.disabled = false;
    }
});
1
  • I don't want to disable submit button just if acceptance is not check don't submit the form just show error that accept terms and conditions or something.
    – RDX023
    Aug 18, 2022 at 7:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.