Want to control how users enter postal codes in your international address forms? An input mask can help standardize postal code formatting by restricting what characters can be entered and in what pattern.
This guide will show you how to add an input mask specifically for the postal code field in WPForms’ International Address format.
Setting Up Your Form
First, we’ll create a new form and add the fields we need. Be sure to include the Address form field.
If you need any assistance in creating a new form, please check out this documentation.
Once you’ve added the Address field, from the Scheme dropdown, select International.
Adding the input mask
By default, the Postal Code field in an International Address will accept any character. To restrict input to a specific format, we’ll add a custom input mask. If you need help adding custom code to your site, please review our guide on adding code snippets.
Here’s the code to add the input mask:
Once you add the snippet, you’ll see in the Postal Code when the field is active some lines that appear which suggests the input mask is expecting a very specific format to be entered.
Frequently Asked Questions
Q: How can I add a specific input mask for a UK address?
A: If you know that your form will only be accepting UK addresses, you can set up an input mask for the UK postal code with this snippet.
/*
* Custom input mask for the address field's international scheme.
*
* @link https://wpforms.com/developers/how-to-add-an-input-mask-to-the-international-postal-code
*/
function wpf_dev_address_field_properties( $properties, $field, $form_data ) {
if($field[ 'scheme' ] === 'international') {
$properties[ 'inputs' ][ 'postal' ][ 'class' ][] = 'wpforms-masked-input';
$properties[ 'inputs' ][ 'postal' ][ 'data' ][ 'inputmask-mask' ] = 'A[A]9[9][A] 9AA';
$properties[ 'inputs' ][ 'postal' ][ 'data' ][ 'inputmask-greedy' ] = 'false';
$properties[ 'inputs' ][ 'postal' ][ 'data' ][ 'rule-empty-blanks' ] = true;
}
return $properties;
}
add_action( 'wpforms_field_properties_address', 'wpf_dev_address_field_properties', 10, 3 )
And that’s all you need to set up an input mask to the international address Postal Code. Next, would you like to create a custom address scheme? Check out our article on How to Create Additional Schemes for the Address Field.