Cómo agregar una máscara de entrada al código postal internacional

¿Quieres controlar cómo los usuarios introducen códigos postales en tus formularios de direcciones internacionales? Una máscara de entrada puede ayudar a estandarizar el formato del código postal restringiendo los caracteres que se pueden introducir y el patrón.

Esta guía te mostrará cómo añadir una máscara de entrada específicamente para el campo de código postal en el formato de Dirección Internacional de WPForms.

Configuración de tu formulario

Primero, crearemos un nuevo formulario y añadiremos los campos que necesitamos. Asegúrate de incluir el campo de formulario Dirección.

Si necesitas ayuda para crear un nuevo formulario, consulta esta documentación.

Una vez que hayas añadido el campo Dirección, en el desplegable Esquema, selecciona Internacional.

Añadir la máscara de entrada

Por defecto, el campo Código Postal en una Dirección Internacional aceptará cualquier carácter. Para restringir la entrada a un formato específico, añadiremos una máscara de entrada personalizada. Si necesitas ayuda para añadir código personalizado a tu sitio, revisa nuestra guía sobre cómo añadir fragmentos de código.

Aquí tienes el código para añadir la máscara de entrada:

Una vez que añadas el fragmento, verás en el campo Código Postal, cuando el campo esté activo, unas líneas que sugieren que la máscara de entrada espera un formato muy específico.

Preguntas frecuentes

P: ¿Cómo puedo añadir una máscara de entrada específica para una dirección del Reino Unido?

R: Si sabes que tu formulario solo aceptará direcciones del Reino Unido, puedes configurar una máscara de entrada para el código postal del Reino Unido con este fragmento.

/*
  * 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 )

Y eso es todo lo que necesitas para configurar una máscara de entrada en el Código Postal de la dirección internacional. A continuación, ¿quieres crear un esquema de dirección personalizado? Consulta nuestro artículo sobre Cómo Crear Esquemas Adicionales para el Campo de Dirección.

Filtro de Referencia

wpforms_field_properties