Como Criar um Formulário AJAX no WordPress (em 4 Passos Fáceis)

Você já perdeu leads porque seu formulário de contato era lento e complicado? Essa é uma história que ouvimos com muita frequência. Também vivenciamos em primeira mão o quão frustrantes os formulários tradicionais do WordPress podem ser – tanto para nós quanto para nossos leitores.

Formulários AJAX resolveram esse problema e podem fazer o mesmo por você.

Esses formulários modernos enviam dados instantaneamente sem recarregar a página. Eles criam uma experiência mais fluida que ajuda a manter os visitantes engajados.

Aplicamos esses formulários muitas e muitas vezes em sites de nossos clientes e parceiros, e os resultados falam por si.

Neste guia, compartilharemos nosso processo comprovado de 4 etapas para construir um formulário AJAX no WordPress. Usaremos um plugin amigável para iniciantes que simplifica os aspectos técnicos para que você possa acompanhar facilmente. 🙌

O que é AJAX e Por que Usá-lo em Seus Formulários?

AJAX, abreviação de Asynchronous JavaScript and XML, é uma técnica de programação JavaScript que permite aos desenvolvedores transferir dados sem recarregar uma página.

É mais comumente usado em formulários da web, permitindo que os usuários enviem dados de formulário sem recarregar uma página. Isso torna o envio de formulários fácil e rápido, o que melhora a experiência geral do usuário.

Além disso, aplicativos web como Gmail e Facebook usam extensivamente essa técnica para manter os usuários engajados enquanto fazem tudo funcionar perfeitamente em segundo plano.

Você pode usar AJAX para formulários em seu site WordPress. Isso poupará os usuários de recargas de página desnecessárias e os manterá engajados na página que estão visualizando no momento.

Isso é útil quando você administra uma loja online e deseja coletar feedback do usuário sem desviar a atenção dele.

Você também pode usar a mesma funcionalidade AJAX para outros formulários personalizados em seu site. Por exemplo, um formulário de login de usuário personalizado permitirá que os usuários façam login sem um carregamento adicional de página.

Dito isso, mostraremos como criar facilmente um formulário de contato AJAX no WordPress em 4 passos simples.

Vamos começar.

Etapa 1: Instale o Plugin WPForms

A primeira coisa que você precisa fazer é instalar e ativar um construtor de formulários.

Para este tutorial, usaremos o plugin WPForms. É o melhor construtor de formulários de contato WordPress do mercado, e ele permite que você crie facilmente formulários com tecnologia Ajax também.

Na WPBeginner, usamos o WPForms para exibir nosso formulário de contato, realizar pesquisas anuais com leitores e gerenciar solicitações de serviço de migração, entre outras coisas.

Tem sido uma ótima experiência, e você pode ver nossa análise completa do WPForms para mais insights sobre este plugin!

Então, vamos instalar e ativar o WPForms. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin WordPress.

📝 Observação: Para criar um formulário AJAX, você precisará da versão Pro do plugin. Mas existe uma versão gratuita do WPForms que você pode conferir se quiser explorar seu construtor de arrastar e soltar e os recursos básicos de formulário antes de fazer o upgrade.

Após a ativação, você precisa visitar a página WPForms » Configurações para inserir sua chave de licença.

Após inserir a chave de licença, você poderá receber atualizações automáticas e instalar add-ons.

Agora você está pronto para criar belos formulários AJAX no WordPress.

Passo 2: Crie Seu Primeiro Formulário

Vamos criar seu primeiro formulário WordPress.

Simplesmente visite a página WPForms » Adicionar Novo na área de administração do WordPress.

Na próxima tela, você pode primeiro nomear seu novo formulário. Por exemplo, aqui, nomeamos nosso formulário como ‘Formulário de Contato’.

Depois disso, você escolherá como construirá seus formulários.

Com o WPForms, você pode construir seus formulários do zero, usar o construtor de formulários com IA, ou escolher entre mais de 2.000 modelos pré-fabricados.

Por exemplo, digamos que você queira usar o WPForms AI. Então, tudo o que você precisa fazer é fornecer um prompt simples, e ele gerará o formulário para você na área de visualização.

Para este tutorial, no entanto, estaremos criando um formulário de contato. Passe o mouse sobre a caixa ‘Formulário de Contato Simples’ e clique em ‘Usar Modelo’.

Observe que você pode criar qualquer outro tipo de formulário que precisar; o processo é praticamente o mesmo.

O WPForms agora carregará seu formulário com campos básicos já adicionados a ele.

A partir daqui, você pode simplesmente clicar em qualquer campo do formulário para editá-lo.

Você também pode adicionar qualquer novo campo do formulário da coluna esquerda simplesmente clicando nele.

O novo campo aparecerá na parte inferior do seu formulário, logo acima do botão Enviar.

Você pode então arrastar e soltar os campos do formulário para reorganizar sua ordem.

Depois de terminar de personalizar o formulário, você pode passar para a próxima etapa.

Passo 3: Ative o Recurso de Envio de Formulário AJAX

O WPForms não habilita a submissão de formulários via AJAX por padrão, então você precisará habilitá-la manualmente para o seu formulário.

Para fazer isso, simplesmente mude para a aba ‘Configurações’ no construtor de formulários.

Na aba de configurações ‘Geral’, prossiga e clique no alternador ao lado da opção ‘Habilitar submissão de formulários AJAX’.

Agora vamos configurar o que acontece após a submissão do formulário.

Primeiro, você pode alternar para a aba ‘Confirmação’ nas configurações. É aqui que você informa aos seus usuários que recebeu o envio do formulário deles.

O WPForms permite que você faça isso de diferentes maneiras. Por exemplo, você pode redirecionar usuários para uma URL, mostrar a eles uma página específica ou simplesmente exibir uma mensagem na tela.

Como habilitamos a funcionalidade AJAX para o formulário, redirecionar usuários para outra página anularia o propósito de criar um formulário AJAX.

Você precisa selecionar a opção de mensagem e editar a mensagem de confirmação. Sinta-se à vontade para usar a barra de ferramentas de formatação no editor ou adicionar um ou dois links para dizer aos usuários para onde ir em seguida.

Depois disso, você pode configurar como deseja ser notificado sobre o envio de um formulário.

Alterne para a aba ‘Notificações’ nas configurações do formulário e configure as configurações de e-mail de notificação.

Assim que terminar, você pode salvar seu formulário e sair do construtor de formulários.

Passo 4: Adicione Seu Formulário Habilitado para AJAX no WordPress

O WPForms torna super fácil adicionar formulários ao seu site WordPress, seja em uma postagem, página ou widgets de barra lateral.

Simplesmente edite a postagem ou página onde você deseja adicionar o formulário e insira o bloco WPForms em sua área de conteúdo.

Depois disso, você precisa selecionar o formulário que acabou de criar nas configurações do bloco.

O WPForms carregará imediatamente uma prévia ao vivo do formulário no editor de conteúdo.

Agora você pode salvar ou publicar seu conteúdo e, em seguida, visitar seu site WordPress para testar a funcionalidade AJAX do formulário.

Aqui está uma rápida olhada no exemplo de formulário AJAX do WordPress de nosso site de demonstração:

Você também pode adicionar seu formulário a um widget de barra lateral no WordPress.

Para fazer isso, vá para a página Aparência » Widgets e adicione o bloco de widget WPForms a uma barra lateral.

Selecione o formulário que você criou anteriormente e clique no botão 'Atualizar' para salvar as configurações do widget. Agora você pode visitar seu site para ver seu formulário com tecnologia AJAX em ação.

Dica Bônus: Exporte Entradas de Formulário para CSV ou Excel 📄

Assim que seu formulário AJAX estiver funcionando, você pode querer manter um registro de todas as submissões. Especialmente se você estiver coletando leads, consultas de clientes ou informações de registro.

A maneira mais fácil de fazer isso é exportando-o como um arquivo CSV ou Excel.

Isso facilita a organização e análise de respostas em ferramentas de planilha como Google Sheets ou Microsoft Excel. Também é útil para compartilhar relatórios com sua equipe ou fazer backup dos dados do formulário fora do WordPress.

Se você estiver usando WPForms, exportar entradas de formulário é fácil. Basta ir para WPForms » Entradas, selecionar seu formulário, escolher as opções de exportação e baixar seus dados como um arquivo CSV ou Excel.

Quer configurar isso? Siga nosso guia completo sobre como exportar entradas de formulário do WordPress para CSV e Excel.

Recursos Bônus: Mais Guias de Formulários WordPress

Esperamos que este artigo tenha ajudado você a aprender como criar um formulário de contato AJAX do WordPress para o seu site. Em seguida, você também pode querer ver nossos artigos sobre:

• Como Criar um Popup de Formulário de Contato no WordPress
• Como Usar Formulários de Contato para Aumentar sua Lista de E-mails
• Como Criar Formulários de Contato com Múltiplos Destinatários
• Como Criar um Formulário de Contato Seguro no WordPress
• Como Bloquear Spam de Formulários de Contato no WordPress
• Como Rastrear e Reduzir o Abandono de Formulários
• O Guia Definitivo para Usar Formulários no WordPress

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.