Como Adicionar uma Máscara de Entrada ao Código Postal Internacional

Quer controlar como os usuários inserem códigos postais em seus formulários de endereço internacionais? Uma máscara de entrada pode ajudar a padronizar a formatação do código postal, restringindo quais caracteres podem ser inseridos e em qual 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.

Configurando Seu Formulário

Primeiro, criaremos um novo formulário e adicionaremos os campos de que precisamos. Certifique-se de incluir 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 suspenso Esquema, selecione Internacional.

Adicionando a 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, revise 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 trecho, você verá no Código Postal, quando o campo estiver ativo, algumas linhas que aparecem sugerindo que a máscara de entrada espera um formato muito específico a ser inserido.

Perguntas Frequentes

P: Como posso adicionar uma máscara de entrada específica para um endereço do Reino Unido?

R: Se você sabe que seu formulário aceitará apenas endereços do Reino Unido, pode configurar uma máscara de entrada para o código postal do Reino Unido com este trecho.

/*
  * 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 você precisa para configurar uma máscara de entrada no Código Postal do endereço internacional. 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.

Filtro de Referência

wpforms_propriedades_campo