Would you like to implement an input mask for the Postal Code field in the International Address format? In this tutorial, we’ll demonstrate how to utilize PHP to set up an input mask for achieving this.
An input mask defines a specific format for the characters expected in a form field. You have the flexibility to control this format by setting up an input mask that allows only numbers, letters, or any other desired format. For further details on employing custom input masks in WPForms, please refer to this documentation.
Creating the 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 on the International Address will automatically accept any character.
The Address form field won’t accept individual input masks on a specific field contained inside the address but if you’d like to only allow certain characters in a certain format, an input mask on the field is the best solution. For some examples of that, please check out this article.
To create an input mask on the Postal Code field, you’ll need to copy and paste this snippet to your site.
If you’re not sure how or where to add snippets to your site, please check out this tutorial.
/*
* 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' ] = '999999';
$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 );
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.
And that’s all you need to set up an input mask to the international address Postal Code. Would you like to create a custom address scheme? Check out our article on How to Create Additional Schemes for the Address Field.
Reference Filter
FAQ
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 );