Como Criar um Formulário de Endereço com Autocompletar no WordPress

Você quer criar um formulário de endereço com autocompletar no WordPress?

Um formulário de endereço com autocompletar é a maneira moderna de economizar o tempo dos clientes, sugerindo automaticamente o endereço deles enquanto preenchem um formulário.

Assim que um cliente começar a digitar o endereço no campo de endereço, ele mostrará as opções para selecionar e preencher o endereço a partir das localizações do Google.

Por padrão, o WordPress não vem com uma opção de endereço com autocompletar. Você precisa usar um plugin como o WPForms para criar um formulário de contato e habilitar a opção de endereço com autocompletar para o campo de endereço.

Neste artigo, mostraremos como criar um formulário de endereço com autocompletar no WordPress.

Criar Formulário de Endereço com Autocompletar no WordPress

Abaixo, você encontrará o guia passo a passo para adicionar um formulário de endereço com autocompletar ao seu site WordPress.

Passo 1. Instalar e Ativar o Plugin WPForms

A primeira coisa que você precisa fazer é instalar e ativar o plugin WPForms.

WPForms facilita para qualquer pessoa criar rapidamente e facilmente qualquer tipo de formulário para o seu site.

Se você está obtendo novos leads ou recebendo pagamentos de clientes, este plugin terá o formulário que você precisa para crescer. É por isso que ele é nossa escolha #1 quando se trata de criação de formulários no WordPress. Nós o usamos em nosso próprio site para criar qualquer tipo de formulário que precisamos, incluindo contato, login, registro e muito mais.

O primeiro passo que você precisa dar é se inscrever no WPForms e instalar o plugin em seu site. Para mais detalhes, você deve conferir nosso guia sobre como instalar um plugin WordPress.

Após a ativação, você precisa inserir uma chave de licença para usar todos os recursos do plugin WPForms.

Você pode encontrar a chave de licença em sua conta WPForms.

Clique no botão Verificar Chave e você verá uma mensagem de sucesso.

Passo 2. Instale e Ative o Addon de Geolocalização

Em seguida, você precisa visitar a página WPForms » Addons. A partir daí, você pode instalar e ativar o Geolocation Addon.

Este addon ajudará a habilitar a opção de autocompletar endereço em seu formulário de contato.

Passo 3. Habilite a Opção de Autocompletar Endereço e Adicione a Chave da API do Google Places

Você precisa visitar a página WPForms » Configurações. A partir daí, você pode ir para a aba Geolocalização no menu de navegação superior.

Na seção Provedor de Lugares, você pode selecionar Google Places API e marcar a opção de localização atual abaixo.

Em seguida, visite a Google Cloud Platform para obter a chave da API do Google Places.

Nesta página, você precisa clicar na opção Ativar API e Serviços.

Isso mostrará a lista completa de APIs e Serviços do Google. Você precisa habilitar as seguintes APIs:

• Google Places API
• Google Maps JavaScript API
• Geocoding API

Se você não encontrar uma API, pode digitar o nome na caixa de pesquisa e ela aparecerá abaixo.

Agora, vá para APIs e Serviços » Credenciais. A partir daí, você precisa clicar no link + Criar Credenciais e, em seguida, clicar na opção Chave de API.

Uma janela pop-up será aberta e você poderá ver a chave de API. Clique na opção Restringir Chave para controlar o acesso ao uso da chave de API.

Na seção Restrições de Aplicativo, você precisa selecionar Referenciadores HTTP (sites).

Na seção Restrições de API, marque a opção Restringir Chave e selecione as 3 APIs que você habilitou anteriormente.

Clique no botão Salvar para continuar.

Sua chave de API está pronta. Copie a chave de API desta página.

Agora volte para a área de administração do WordPress e cole a Chave de API na página de configurações de Geolocalização.

Clique no botão Salvar Configurações.

Etapa 4. Crie um Novo Formulário de Contato

Assim que as configurações do seu add-on de Geolocalização forem finalizadas, você precisará criar um novo formulário de contato. Você também pode usar a opção “ativar preenchimento automático de endereço” em formulários criados anteriormente.

Para criar um novo formulário, vá para WPForms » Adicionar Novo. Isso abrirá o construtor do WPForms em sua tela, e você poderá ver vários modelos de formulário integrados.

Comece inserindo um nome para seu novo formulário e clique no modelo Formulário de Contato Simples.

Isso iniciará o modelo de formulário de contato. Você poderá ver os campos no lado esquerdo e a prévia do formulário no lado direito da sua tela.

Na seção Campos Elegantes, você encontrará o campo Endereço. Simplesmente arraste e solte o campo Endereço na prévia do seu formulário no lado direito.

Agora, clique neste campo de endereço na seção de prévia do formulário, e você verá as opções de edição no lado esquerdo.

Em Opções Avançadas, você precisa marcar a opção Ativar Preenchimento Automático de Endereço.

Clique no botão Salvar no canto superior direito da sua tela e saia do construtor do WPForms.

Etapa 5. Adicione o Formulário de Preenchimento Automático de Endereço à Sua Página do WordPress

Agora que seu formulário de preenchimento automático de endereço está pronto, você pode visitar a página Páginas » Adicionar Nova na sua área de administração do WordPress.

Comece adicionando um título à sua página e clique no ícone de mais. Agora você pode pesquisar pelo bloco personalizado do WPForms e clicar nele.

No menu suspenso, selecione o formulário de preenchimento automático de endereço.

Clique no botão Publicar e visite seu site para ver o formulário de contato com campo de endereço de preenchimento automático em ação. Aqui está um exemplo de formulário que criamos onde você pode ver, enquanto digitamos o endereço, ele preenche automaticamente os endereços disponíveis.

E é só isso! Agora você aprendeu com sucesso como criar um formulário de endereço com preenchimento automático no WordPress.

Você também pode conferir nosso guia sobre como adicionar um formulário de reserva personalizado ao seu site WordPress.

Isso pode ajudar ainda mais você a criar um formulário de reserva de compromissos online e adicionar o campo de endereço de preenchimento automático para obter cadastros de usuários em tempo real.

Ou, você também pode conferir nosso guia sobre como criar um formulário de reserva para uma agência de viagens no WordPress. Este post irá ajudá-lo a criar um formulário de reserva de viagens para coletar as informações de reserva e contato de seus clientes em seu site.