Pretende controlar a forma como os utilizadores introduzem os códigos postais nos seus formulários de endereços internacionais? Uma máscara de entrada pode ajudar a normalizar a formatação dos códigos postais, restringindo os caracteres que podem ser introduzidos e em que padrão.
Este guia mostra-lhe como adicionar uma máscara de entrada especificamente para o campo do código postal no formato de endereço internacional do WPForms.
Configurar o seu formulário
Primeiro, vamos criar um novo formulário e adicionar os campos necessários. Certifique-se de que inclui o campo de formulário Endereço.
Se precisar de ajuda para criar um novo formulário, consulte esta documentação.
Depois de adicionar o campo Endereço, no menu pendente Esquema, selecione Internacional.
Adicionar a máscara de entrada
Por predefinição, o campo Código postal de um endereço internacional aceita qualquer carácter. 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 o nosso guia sobre como adicionar snippets de código.
Aqui está o código para adicionar a máscara de entrada:
Depois de adicionar o snippet, verá no Código Postal, quando o campo estiver ativo, algumas linhas que aparecem, o que sugere que a máscara de entrada está à espera que seja introduzido um formato muito específico.
Perguntas mais frequentes
P: Como posso adicionar uma máscara de entrada específica para um endereço no Reino Unido?
R: Se sabe que o seu formulário só aceitará endereços do Reino Unido, pode 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 é tudo o que precisa para configurar uma máscara de entrada para o endereço internacional Código Postal. De seguida, gostaria de criar um esquema de endereço personalizado? Consulte o nosso artigo sobre Como criar esquemas adicionais para o campo de endereço.