qummerkiflain

Hi,

I faced this issue where I needed a lot checkbox groups on a multi-step form. so this solution is for anyone who is facing this issue on a multi-step form, it will work on the simple form as well.

.elementor-field-group-specialist_area_v {
	width: 5%;
}
#form-field-specialist_area_v {
    max-height: 0.6px !important;
    min-height: unset;
    padding: 0;
    border: none;
    background: #fff;
    margin-top: -50px;
    opacity: 0;
}

Here my checkbox field name is “specialist_area” and the hidded I field I created to validate it is named “specialist_area_v”.

After adding the above the CSS, add following jQuery code beneath the form in html module.

<script>
jQuery(document).ready(function($) {
    
//Specialist area checkbox validation
  $(".elementor-field-group-specialist_area").on("change", "input[type='checkbox']", function() {
    var checkedValues = $(".elementor-field-group-specialist_area input[type='checkbox']:checked").map(function() {
      return $(this).val();
    }).get().join(", ");
    
    $("#form-field-specialist_area_v").val(checkedValues);
  });
  
});
</script>

All you have to do is add a text field under the checkbox and replace the classes and IDs in the above CSS and JS and it’ll work as a validation for the checkbox groups.