Deseja controlar como os usuários inserem códigos postais em seus formulários de endereços internacionais? Uma máscara de entrada pode ajudar a padronizar a formatação do código postal, restringindo os caracteres que podem ser inseridos e em que padrão.
Este guia mostrará como adicionar uma máscara de entrada especificamente para o campo de código postal no formato de endereço internacional do WPForms.
Configuração de seu formulário
Primeiro, criaremos um novo formulário e adicionaremos os campos necessários. Não se esqueça de incluir o campo de formulário Address.
Se precisar de ajuda para criar um novo formulário, consulte esta documentação.
Depois de adicionar o campo Address (Endereço ), no menu suspenso Scheme (Esquema ), selecione International (Internacional).
Adição da máscara de entrada
Por padrão, o campo Código postal em um endereço internacional aceitará qualquer caractere. Para restringir a entrada a um formato específico, adicionaremos uma máscara de entrada personalizada. Se precisar de ajuda para adicionar código personalizado ao seu site, consulte nosso guia sobre como adicionar trechos de código.
Aqui está o código para adicionar a máscara de entrada:
Depois de adicionar o snippet, você verá no Código postal, quando o campo estiver ativo, algumas linhas que aparecem, o que sugere que a máscara de entrada está esperando um formato muito específico para ser inserido.
Perguntas frequentes
P: Como posso adicionar uma máscara de entrada específica para um endereço no Reino Unido?
R: Se você souber que seu formulário aceitará apenas endereços do Reino Unido, poderá configurar uma máscara de entrada para o código postal do Reino Unido com este 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 )
E isso é tudo o que você precisa para configurar uma máscara de entrada para o endereço internacional Postal Code. Em seguida, você gostaria de criar um esquema de endereço personalizado? Confira nosso artigo sobre Como criar esquemas adicionais para o campo de endereço.