Como adicionar campos de preenchimento automático de endereço em um formulário do WordPress?

Quer saber como adicionar um formulário WordPress de preenchimento automático de endereço ao seu site? Então, este artigo é exatamente o que você precisa agora.

Se o seu formulário do WordPress tiver um campo de endereço, sugerimos que você adicione o recurso de preenchimento automático a ele. Dessa forma, fica mais fácil para seus usuários preencherem o campo de endereço e enviarem o formulário com sucesso.

É por isso que preparamos um guia detalhado sobre como criar um formulário de preenchimento automático de endereço do WordPress. Então, leia até o final.

Mas antes do tutorial, vamos discutir os benefícios do recurso de preenchimento automático de endereço e a melhor maneira de adicioná-lo ao seu formulário.

Como a opção de preenchimento automático de endereço é útil em um formulário on-line?

Você pode usar apenas um campo de endereço regular para qualquer formulário do WordPress. Então, por que adicionar a opção de preenchimento automático de endereço a ele?

Bem, aqui estão algumas maneiras significativas pelas quais a opção de preenchimento automático de endereço é útil:

• O campo de preenchimento automático de endereço sugere lugares automaticamente para seus usuários com base em suas entradas.
• Os usuários podem selecionar endereços precisos na lista de sugestões de endereços disponíveis.
• Como os usuários não precisam digitar o endereço completo, eles podem preencher o formulário com relativa rapidez.
• O recurso de preenchimento automático torna o preenchimento de formulários fácil e rápido. Isso pode ajudar a aumentar os envios de formulários bem-sucedidos e diminuir o abandono de formulários.

Portanto, é aconselhável incluir um campo de endereço de preenchimento automático em seus formulários.

No entanto, o WordPress não oferece esse recurso por padrão. Então, qual é a sua melhor alternativa?

Abordaremos a melhor maneira de adicionar um campo de preenchimento automático de endereço na próxima seção.

Melhor maneira de criar um formulário WordPress de preenchimento automático de endereço

Como o WordPress não permite adicionar o recurso de preenchimento automático de endereço por padrão, você terá que confiar em plug-ins.

O plug-in WordPress certo permitirá que você adicione o recurso ao seu formulário sem complicações. E um desses plugins é o Everest Forms.

O popular plug-in de criação de formulários de arrastar e soltar pode ser o complemento perfeito para o seu site WordPress.

Esta ferramenta poderosa faz tudo! Ele permite que você crie formulários personalizados sem tocar em uma única linha de código.

Você pode usar seus mais de 20 campos de formulário para criar formulários de contato, deixar formulários de solicitação, formulários de pedido ou qualquer outro formulário que desejar.

Além disso, oferece um campo de endereço onde você pode ativar facilmente a opção de preenchimento automático. Assim, recomendamos o plugin Everest Forms como a melhor forma de equipar seus formulários com esse recurso.

Como adicionar campos de preenchimento automático de endereço em um formulário do WordPress?

Neste tutorial, usamos o Everest Forms para demonstrar o processo de criação de um formulário WordPress de preenchimento automático de endereço.

Siga estas 7 etapas simples para adicionar a opção de preenchimento automático de endereço do Google WordPress em seu formulário.

Passo 1: Instale e Ative o Everest Forms Pro

Comece instalando e ativando o plugin Everest Forms Pro em seu site. Esta versão premium funciona em cima do plug-in gratuito Everest Forms.

Portanto, você precisará configurar as versões gratuita e premium do plug-in para que o recurso de preenchimento automático de endereços funcione.

Temos um guia separado sobre como configurar corretamente o Everest Forms Pro em seu site. Portanto, verifique se precisar de ajuda para instalar e ativar o plug-in.

Etapa 2: instalar e ativar o complemento de geolocalização

Se você configurou o Everest Forms Pro corretamente, poderá acessar todos os complementos disponíveis. Lembre-se de que os complementos aos quais você obtém acesso dependem do plano que você adquiriu.

Então, abra Everest Forms >> Add-ons em seu painel do WordPress.

Role para baixo para encontrar o complemento de geolocalização e clique em Instalar complemento . Para concluir a instalação, pressione o botão Ativar depois.

Isso configurará o complemento para você usar em seus formulários do WordPress.

Etapa 3: obtenha a chave de API no console do Google

A terceira etapa é obter a chave de API do Console do Google. Isso ajudará você a conectar o plug-in Everest Forms ao Google Console.

Primeiro, visite o Painel do Console do Google. Você deve estar conectado através de sua Conta do Google para acessar este painel.

Em seguida, selecione seu projeto na parte superior do painel.

Se você ainda não tem um projeto, pode criar um clicando em Novo Projeto . Em seguida, dê um nome ao seu projeto e pressione Criar .

Depois de escolher o projeto, você chegará à página APIs e serviços do projeto.

Suponha que você não seja redirecionado automaticamente para esta página. Nesse caso, você pode abri-lo anualmente no Menu de navegação no canto superior esquerdo.

Pressione o menu e abra APIs & Services >> Enabled APIs & Services .

Aqui, clique em +ATIVAR APIS E SERVIÇOS .

Na biblioteca da API, procure a API Places e ative -a.

Observação: para ativar a API com êxito, você deve ter uma conta de cobrança. Portanto, ative o faturamento para o Console do Google Cloud antes de prosseguir.

Depois de habilitar a API, navegue até APIs & Services >> Credentials . Agora, clique em +Create Credentials e selecione API Key .

Isso gera uma nova chave de API para você. Mas antes de copiar a chave de API, você deve adicionar algumas restrições a ela. Para isso, clique em Editar Chave .

Primeiro, você deve definir uma restrição de aplicativo . Isso permite limitar quais sites, endereços IP ou aplicativos podem usar a chave de API. No nosso caso, vamos escolher Websites .

Em seguida, adicione o site onde a chave API será válida e pressione Concluído . Você pode adicionar vários sites, se precisar.

Depois disso, você deve definir as Restrições da API escolhendo o botão de opção Restringir chave . Isso permite que sua chave saiba quais APIs ativadas ela pode chamar.

Como só precisamos da Places API, vamos escolher isso no menu suspenso. Você pode habilitar e adicionar mais APIs como a API Maps JavaScript de acordo com os requisitos.

Por fim, aperte o botão Salvar .

Tudo o que você precisa fazer agora é copiar a chave para uso posterior. Mantenha-o seguro, pois você precisará dele para a próxima etapa.

Etapa 4: adicionar chave de API às configurações de geolocalização

De volta ao painel do WordPress, vá para Everest Forms >> Configurações >> Geolocalização .

Cole a chave de API que você copiou no campo Chave de API do Google Places . Depois, pressione o botão Salvar alterações .

Isso conclui a conexão entre a API do Google Places e o Everest Forms.

Há mais uma opção, Current Location , nas configurações de geolocalização . Quando você ativa essa opção, seus formulários detectam e preenchem automaticamente a localização atual do usuário no campo Endereço .

É totalmente opcional, portanto, ativá-lo ou não depende de seus requisitos.

Etapa 5: criar um novo formulário com campo de endereço

Você conectou com sucesso o Everest Forms à API do Google Places. No entanto, você ainda precisa do formulário onde o recurso de preenchimento automático de endereço é aplicável.

Para isso, você deve criar um novo formulário WordPress com o campo Endereço .

A questão é: que tipo de formulário você faz? Bem, depende inteiramente de você!

A melhor coisa sobre o Everest Forms é que ele permite criar qualquer tipo de formulário que você precise. Formulários de contato, formulários de pesquisa, formulários de solicitação de emprego, formulários de reserva e assim por diante.

Portanto, vá para Everest Forms >> Adicionar novo arquivo .

O Everest Forms oferece vários modelos pré-construídos para vários formulários. Assim, você pode personalizar um deles se estiver com pouco tempo.

Mas criar um formulário do zero é igualmente fácil! Basta arrastar e soltar os campos obrigatórios e personalizá-los.

Construiremos um formulário de contato simples com um campo de endereço do zero para este guia.

Então, clique em Iniciar do zero . Em seguida, insira o título do formulário e clique em Continuar .

Isso leva você ao construtor de formulários. Como você pode ver, todos os campos do formulário estão agrupados à esquerda. Você pode arrastá-los e soltá-los nas linhas do formulário à direita.

Portanto, adicione todos os campos necessários ao formulário, como Name , Email , Subject , Message e, o mais importante, Address .

Quando o formulário de preenchimento automático de endereço do WordPress estiver concluído, pressione o botão Salvar na parte superior para salvar seu novo formulário.

Etapa 6: ativar o preenchimento automático de endereço para o campo de endereço

Com cada campo, você obtém muitas opções de personalização. Da mesma forma, você obtém várias opções para o campo Endereço , sendo uma delas o recurso de preenchimento automático de endereço.

Embora estejamos nos concentrando no campo Endereço aqui, certifique-se de personalizar os outros campos também.

Clique no campo que deseja editar; suas opções de personalização serão abertas à esquerda.

A partir daqui, você pode alterar o campo Label , Description , Field Visibility , etc. Você também pode habilitar Required , Enable Tooltip , Hide Label e adicionar Classes CSS .

Além disso, você também poderá definir a lógica condicional para os campos individuais.

Mas vamos voltar ao nosso campo de destaque aqui. À medida que você clica no campo Endereço , as Opções de campo exibem opções semelhantes às discutidas acima.

No entanto, as Opções avançadas incluem alguns recursos selecionados para o campo Endereço .

Por exemplo, você pode alterar o espaço reservado e o valor padrão para Linha de endereço 1 , Linha de endereço 2 , País etc. Além disso, você pode escolher quais países deseja disponibilizar aos usuários na Lista de países padrão .

Mais importante ainda, você pode ativar o recurso de preenchimento automático de endereço apenas marcando a caixa de seleção.

Clique no botão Salvar e seu campo Endereço sugerirá automaticamente lugares para os usuários que preencherem o formulário.

Etapa 7: exibir o formulário de preenchimento automático de endereço do WordPress em seu site

Parabéns! Você está na etapa final deste tutorial!

Como o formulário de preenchimento automático de endereço do WordPress está pronto, você deve adicioná-lo ao front-end do seu site.

O Everest Forms permite que você faça isso em algumas etapas simples.

Comece abrindo a página ou post onde você deseja adicionar o formulário do WordPress.

Quando estiver no editor do Gutenberg, selecione o botão de inserção de bloco ( + ).

Pesquise o bloco Everest Forms e adicione-o à página/postagem clicando nele.

Em seguida, escolha o formulário com o campo de preenchimento automático de endereço no menu suspenso. Isso adiciona automaticamente o formulário à página/postagem.

Por fim, clique no botão Atualizar na parte superior.

Você também pode adicionar o formulário a uma página/postagem totalmente nova. Basta seguir os mesmos passos e pressionar o botão Publicar no final. E pronto!

O formulário de preenchimento automático de endereço do WordPress agora está acessível a partir do front-end para seus usuários.

Empacotando

Como você pode ver até agora, criar um formulário de preenchimento automático de endereço do Google para WordPress é super fácil. Especialmente quando você tem o plugin Everest Forms em mãos.

Este plug-in incrível permite que você conecte seus formulários ao Google Console rapidamente. Assim, seus usuários podem preencher facilmente o campo Endereço usando o recurso de preenchimento automático.

Mas você sabia? O Everest Forms tem muito mais a oferecer.

Você pode usá-lo para personalizar modelos de e-mail, agendar envios de formulários, preencher automaticamente campos de formulários e muito mais.

Leia tudo sobre este plugin em nosso blog. Confira nosso canal no YouTube para tutoriais em vídeo fáceis se você for um aprendiz visual.

Além disso, siga no Twitter e no Facebook para atualizações sobre postagens semanais.