Prevent Under-Age Date-Picker Form Submissions in WPForms

Some code I found and improved for preventing under-age submissions via date-picker fields in WPForms.

First you are going to need the exact Form ID of the specific form you want to age-gate.

This can be found in the URL of the form editor when you are working on it.

Next you are going to need the Field ID of the date-picker field you want to base this age upon.

That’s the number “(ID #7)” shown below.

Now for ease of use I’ve included everything you should need to copy and paste into your “funcitons.php” file:

/**
 * Use conditional logic with a date field to show or hide other form fields (David Stockdale).
 * Based upon: https://wpforms.com/developers/how-to-use-conditional-logic-with-a-date-picker/
 */
add_action( 'wp_head', function () { ?>
	<style>
		/* CSS hide this field on page load */
		#wpforms-form-<YOUR FORM ID HERE> .age-restriction {
			display:none;
		}
		/* CSS show this field if date conditional logic is true */
		#wpforms-form-<YOUR FORM ID HERE> .age-restriction.show-field {
			display:block;
		}
		
		/* CSS show this field on page load */
		#wpforms-form-<YOUR FORM ID HERE> .good-age {
			display:block;
		}
		
		/* CSS hide this field if date conditional logic is true */
		#wpforms-form-<YOUR FORM ID HERE> .good-age.hide-field {
			display:none!important;
		}
	</style>
<?php } );

/**
 * Runs Age Restription Check On WP Footer Forms (David Stockdale).
 */
add_action( 'wpforms_wp_footer_end', 'wpf_dev_age_restriction_check', 99 );
/**
 * Checks the age applicant and adds/removes classes for styling to hide/show certain fields (David Stockdale).
 * Only works currently in form <YOUR FORM ID HERE> based on date of birth (field ID <YOUR FIELD ID HERE>).
 * Adds "hide-field" class to ".good-age" class if under 17.
 * Adds "show-field" class to ".age-restriction" class if under 17.
 * Removes "hide-field" class from ".good-age" class if 17 or over.
 * Removes "show-field" class from ".age-restriction" class if 17 or over.
 * Based upon: https://wpforms.com/developers/how-to-use-conditional-logic-with-a-date-picker/
 */
function wpf_dev_age_restriction_check() {
	?>
	<script>
		jQuery(function($) {
			// Only fire this script when the field ID <YOUR FIELD ID HERE> for form ID <YOUR FORM ID HERE> is changed
			document.querySelector( "#wpforms-<YOUR FORM ID HERE>-field_<YOUR FIELD ID HERE>-container" ).onchange = function() { 
				
				// Get year selected from Date Of Birth field for 
				// form ID <YOUR FORM ID HERE> and 
				// field ID <YOUR FIELD ID HERE>
				var date = $( "input#wpforms-<YOUR FORM ID HERE>-field_<YOUR FIELD ID HERE>" ).val();
				
				var oneDate = date.split("/").reverse().join("/").replace('/', '-').replace('/', '-');

				var dob = new Date(oneDate); 
				var today = new Date();

				// Calculate age properly
				var age = today.getFullYear() - dob.getFullYear();
				var m = today.getMonth() - dob.getMonth();
				if (m < 0 || (m === 0 && today.getDate() < dob.getDate())) {
					age--;
				}
				
				
				if (age < 17) {
					// Age < 17
					// Hide Age Restriction Message
					// Show All Inputs Requiring Good Age
					$( ".good-age" ).addClass( "hide-field" );
					$( ".age-restriction" ).addClass( "show-field" );
				} else {
					// Age => 17
					// Show Age Restriction Message
					// Hide All Inputs Requiring Good Age
					$(".age-restriction").removeClass("show-field");
					$(".good-age").removeClass("hide-field");
				}
			}
		});
	</script>
	<?php
}

Then simply add the CSS class “age-restriction” to a seperator explaining that the user is under age to prevent confusion.

And add the CSS class “good-age” to all the fields after your date-picker in order to prevent them being filled by the user.

This works best if some of the age-gated fields are also set as “Required” as that will prevent the form being submitted entirely.

Although now that I think about it, a particularly determined user might try filling out the later fields first before inputting their date of birth…

But that’s a problem for another time.

Like & comment if this saved you some Googling!