I was recently working on a WordPress form that uses the Contact Form 7 plug-in to build out the form. The client reached out and wanted a new checkbox that, when checked, would make certain fields display and mark them as required. When not checked, they wouldn’t be required or display to be filled in. Here’s the solution I came up with.
First, I added the new checkbox field.
[checkbox other-supplier class:other-supplier id:other-supplier
“Check this box if you do NOT need the hidden fields.”]
Note: This doesn’t add id=”other-supplier” to the checkbox itself. Rather, it adds it to the parent , instead.
All of the fields in the Contact 7 edit form were wrapped in
tags, so I added a class (hidden-item) to each one I wanted hidden, by default. Here’s an example of one that is hidden, but I wanted required, if the above box was checked:
[text* primary_name id:primary_name]
I then created a Javascript file in the js/ folder of my child theme named hideRegFields.js, added it to be displayed in my header.php of the theme, and then added the following content:
/*! jQuery script to hide certain form fields */
jQuery(document).ready(function($) {
//Hide the field initially
$(“.hidden-item”).hide();//Show the text field only when the third option is chosen – this doesn’t
$(“#other-supplier span input[type=’checkbox’]”).change(function() {
if ($(this).attr(‘checked’) == “checked”) {
$(‘.hidden-item’).each(function(){
$(this).show(‘fast’);
});
}
else {
$(‘.hidden-item’).each(function(){
$(this).hide(‘fast’);
});
}
});
});
This checks the value of the checkbox I added. If it’s checked, it turns on the display of each of my hidden
tags in the code so they can be entered. Otherwise, it hides them (by default).
This worked fine, but all of the hidden fields were being checked for data, even though it was hidden on the page itself. This is because Contact Form 7 processes the results server-side, so I could just remove the `aria-required=”true”` attributes.
To fix this, I added the following to my functions.php within my theme:
// custom registration validation
function alter_wpcf7_posted_data( $data ) {
// see if the checkbox was left empty
if (empty($_POST[‘other-supplier’])) {
// set default values so our validator works
$_POST[‘primary_name’] = “N/A”;
// and so on for each field required that is hidden
}
return $data;
}
add_filter(“wpcf7_posted_data”, “alter_wpcf7_posted_data”);
Once I did all of this, the validation worked correctly. It, in effect, is checking if the checkbox was checked. If it wasn’t, we simply update the $_POST array with dummy data so the validator doesn’t see it as empty and allows the form to process. If the checkbox is checked, normal validation kicks in.
I hope this helps someone else down-the-road!
See the following for bits and pieces of this solution:
Contact Form 7 Checkboxes
http://stackoverflow.com/a/23470581
This is how to show/hide fields with jQuery