Como adicionar uma máscara de entrada ao código postal internacional

Quer controlar como os utilizadores introduzem códigos postais nos seus formulários de morada internacionais? Uma máscara de entrada pode ajudar a padronizar a formatação do código postal, restringindo os caracteres que podem ser introduzidos e o respetivo padrão.

Este guia mostrar-lhe-á como adicionar uma máscara de entrada especificamente para o campo do código postal no formato de Morada Internacional do WPForms.

Configurar o Seu Formulário

Primeiro, criaremos um novo formulário e adicionaremos os campos de que necessitamos. Certifique-se de incluir o campo de formulário Morada.

Se precisar de alguma assistência na criação de um novo formulário, consulte esta documentação.

Depois de adicionar o campo Morada, no menu suspenso Esquema, selecione Internacional.

Adicionar a máscara de entrada

Por defeito, o campo Código Postal numa Morada 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, reveja o 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, verá no Código Postal, quando o campo estiver ativo, algumas linhas que aparecem e sugerem que a máscara de entrada espera um formato muito específico a ser introduzido.

Perguntas Frequentes

P: Como posso adicionar uma máscara de entrada específica para uma morada do Reino Unido?

R: Se souber que o seu formulário só aceitará moradas 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 precisa para configurar uma máscara de entrada no Código Postal da morada internacional. Em seguida, gostaria de criar um esquema de morada personalizado? Consulte o nosso artigo sobre Como Criar Esquemas Adicionais para o Campo de Morada.

Filtro de Referência

wpforms_field_properties