Restringindo países dentro de campos de formulário de telefone inteligente

Gostaria de limitar os países que estão disponíveis no campo do formulário Smart Phone? Por predefinição, o campo Smart Phone mostra todos os países e tenta detetar o país do utilizador a partir do seu endereço IP.

Este guia mostrar-lhe-á como restringir o campo para mostrar apenas países específicos à sua escolha.

Configurar o formulário

Começaremos por criar o nosso formulário, adicionando os nossos campos, incluindo o campo de formulário Telefone.

Se precisar de ajuda para criar o seu formulário, consulte o nosso guia sobre como criar o seu primeiro formulário.

Depois de ter adicionado o campo do formulário Telefone, clique na lista pendente do Formato e certifique-se de que selecionou Inteligente na lista pendente.

selecione o Formato inteligente para o campo do telefone no menu pendente

Adicionar restrições de país

Para restringir os países disponíveis, terá de adicionar algum código JavaScript ao seu site. Se não tiver a certeza de como adicionar código personalizado, consulte o nosso guia sobre como adicionar snippets de código ao WordPress.

Personalização das opções de país

Para modificar os países que estão disponíveis:

  • Na linha 33: Substituir os códigos de país na linha options.onlyCountries matriz
  • Utilizar códigos de país ISO de duas letras minúsculas (por exemplo, "us" para Estados Unidos)
  • Separar vários países com vírgulas
  • Encontrar códigos de país na lista oficial de códigos ISO 3166-1 alfa-2

Por exemplo:

  • Apenas para os EUA e o Canadá: ['us', 'ca']
  • Para o Reino Unido, Irlanda e Austrália: ['gb', 'ie', 'au']
  • Para todos os países da União Europeia: ['fr', 'de', 'it', 'es', 'pt', 'nl', 'be', 'dk', 'se', 'fi']

Remoção de opções de país duplicadas

Poderá reparar que alguns países aparecem duas vezes no menu pendente - uma vez no topo, com base na deteção de IP, e outra vez na lista principal. Para remover estas duplicações, adicione este CSS ao seu sítio:

form#wpforms-form-1000 .iti__active {
    display: none;
}

Substitua 1000 pelo seu ID de formulário real. Se precisar de ajuda para encontrar a ID do formulário, consulte o nosso guia sobre como encontrar IDs de formulários e campos.

Gostaria também de se certificar de que o número de telefone introduzido no formulário é enviado através da notificação por correio eletrónico como uma ligação? Consulte o tutorial sobre como transformar os números de telefone num link nas notificações por correio eletrónico.

Ação de referência

wpforms_wp_footer_end