Make Contact form 7 Add custom required checkbox

Question

I want to use custom styled checkbox and checkmark with Contact form 7 plugin, but "required" html attribute doesn't seem to work with this plugin.

My code looks like this at the moment:

<input class="form__checkbox-input" type="checkbox" name="privaatsuspoliitika" id="the-terms" required>

Is it possible to make it required without using acceptance checkbox/default checkbox? I don't want plugin to generate checkbox html for me since it also adds span and label tags (it makes my custom checkbox not work) and I don't think there is an option to just add input with type of checkbox :/.

dipmala dipmala · Accepted Answer · 2018-09-17T09:51:47

You need to add your javascript code in function file using following code.

function mycustom_wp_footer() {
  ?>
  <script type="text/javascript">
    var wpcf7Elm = document.querySelector( '.wpcf7' );

    wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
        if(!jQuery(".form__checkbox-input").is(":checked")) 
        {
           // Add your logic here
        }
    }, false );
</script>
<?php
}

Hope it will help you.

Make Contact form 7 Add custom required checkbox

1 Answers