¿Desea controlar la forma en que los usuarios introducen los códigos postales en sus formularios de direcciones internacionales? Una máscara de entrada puede ayudar a estandarizar el formato de los códigos postales restringiendo los caracteres que se pueden introducir y en qué patrón.
Esta guía le mostrará cómo agregar 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 del formulario
En primer lugar, crearemos un nuevo formulario y añadiremos los campos que necesitamos. Asegúrese de incluir el campo de formulario Dirección.
Si necesita ayuda para crear un nuevo formulario, consulte esta documentación.
Una vez que haya añadido el campo Dirección, en el menú desplegable Esquema, seleccione Internacional.
Añadir la máscara de entrada
Por defecto, el campo Código postal de una dirección internacional acepta 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, consulta nuestra guía sobre cómo añadir fragmentos de código.
Aquí está el código para añadir la máscara de entrada:
Una vez que añada el fragmento, verá que en Código postal, cuando el campo está activo, aparecen unas líneas que sugieren que la máscara de entrada espera que se introduzca 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 sabe que su formulario sólo aceptará direcciones del Reino Unido, puede 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 necesita para configurar una máscara de entrada a la dirección internacional Código postal. A continuación, ¿desea crear un esquema de dirección personalizado? Consulte nuestro artículo sobre Cómo crear esquemas adicionales para el campo de dirección.