How to Add Zip Code Field Validation on Your Forms

Introduction

Would you like to add zip code field validation to your WPForms? By default, when using the Address field, there is only a place to enter a zip code along with the address. However, in this tutorial, we’re going to show you how you can create a field that will search your serviceable zip codes and fail on submitting the form if the zip code isn’t in your preferred service area.

Creating the form

We’re going to begin by creating a new form and adding all of our required fields.

We’ll add a Single Line Text form field that will have an input mask that will stand as our Zip Code field. This will allow for when the form is submitted, the snippet will take the value entered in this field and compare it to a list of zip codes that is in our service area. If it fails, the user will see a message stating we don’t service that area at this time.

If you need help in creating forms, please checkout this useful guide.

Using the input mask

Because we want our Single Line Text form field to appear as a standard zip code field would, we’re going to add an input mask to this field. To achieve this, click the field and navigate to the Advanced tab. Inside the Input Mask field, enter 99999. This means that this particular field will only accept 5 numerical digits.

For more information on input masks in WPForms, please review this tutorial for more examples.

Adding the snippet

Now it’s time to add our snippet. If you need any assistance on how and where to add snippets, please review this documentation.

/**
* Add zip code field validation.
*
* @link https://wpforms.com/developers/how-to-add-zip-code-field-validation-on-your-forms/
*/

function wpf_dev_validate_zip_code( $fields, $entry, $form_data ) {

	// Optional, you can limit to specific forms. Below, we restrict output to
	// form #3382.

	if ( absint( $form_data[ 'id' ] ) !== 3382 ) {
		return $fields;
	}

	// Get the value of the zip code field the user entered
	// Field ID for zip code field is '6'
	$zip_code = $fields[6][ 'value' ];

	// Zip code array, each zip code separated by a comma
	$zip_code_list = array(
	'85224',
	'85225',
	'85226',
	'85233',
	'85234',
	'85244',
	'85246',
	'85248',
	'85249',
	'85286',
	'85295',
	'85296',
	'85297',
	'85298',
	'85299'
	);

	if (!in_array($zip_code, $zip_code_list)) {

		// Check the field ID 75 and show an error message at the top of the form and under the specific field
		wpforms()->process->errors[ $form_data[ 'id' ] ]['6'] = esc_html__( 'We apologize for the inconvenience, but we currently do not service your area. Please check back in the future.', 'plugin-domain' );
	}
	
}
add_action( 'wpforms_process', 'wpf_dev_validate_zip_code', 10, 3 );

Let’s break down this snippet to explain each part. The first section of the snippet is looking to see if the form ID that the snippet is looking at, matches the form ID we’ve specified in the snippet. For this example, this snippet will only run on form ID 3382.

The next line of the snippet is looking for the field ID 6 and grabbing the value that was entered on the form. Once it has this value, it’s going to compare that value entered with the list of zip codes we’ve entered in the $zip_code_list array. You’ll need to update the form ID, field ID and update the zip codes that are displayed in this array to match your own zip codes.

Once you’ve made your adjustments to the snippet, you’ll now notice the form won’t process the form submission if the zip code entered isn’t found in the $zip_code_list array list.

And that’s all you need to successfully add zip code field validation to a Single Line Text field. Would you like to also limit the countries that display when using the Address field and autocomplete? Take a look at our tutorial on How to Restrict Address Autocomplete to a Specific Country.

Related

Action Reference: wpforms_process