Introduction
Would you like to set up an input mask on the International Address scheme for the Postal Code field? In this tutorial, we’re going to show you how to use PHP to set an input mask to achieve this.
An input mask is a string of characters expected for a form field but in a very particular format. You can control this by setting an input mask that would only allow numbers, or only letters, or any format you like. For more information on using custom input masks in WPForms, please check out 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 snippet
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.
Related
Filter Reference: wpforms_field_properties
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 );
