Restrição de países em campos de formulários para smartphones

Você gostaria de limitar quais países estão disponíveis no campo de formulário Smart Phone? Por padrão, o campo Smart Phone mostra todos os países e tenta detectar o país do usuário a partir de seu endereço IP.

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

Configuração do formulário

Começaremos criando nosso formulário, adicionando nossos campos, inclusive o campo de formulário Phone.

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

Depois de adicionar o campo de formulário Phone, clique no menu suspenso Format (Formato) e certifique-se de que selecionou Smart (Inteligente ) no menu suspenso.

selecione o formato inteligente para o campo telefone no menu suspenso

Adição de restrições de país

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

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

Para modificar quais países estão disponíveis:

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

Por exemplo:

  • Somente para os EUA e 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

Você pode notar que alguns países aparecem duas vezes no menu suspenso: uma vez na parte superior, com base na detecção de IP, e outra vez na lista principal. Para remover essas duplicatas, adicione este CSS ao seu site:

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

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

Gostaria de garantir também que o número de telefone digitado no formulário seja enviado por meio da notificação por e-mail como um link? Confira o tutorial sobre como transformar números de telefone em um link nas notificações por e-mail.

Ação de referência

wpforms_wp_footer_end