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 ou exigia o recarregamento da página inteira? Essa é uma história que ouvimos com muita frequência.

Também vimos em primeira mão o quão frustrantes os formulários tradicionais do WordPress podem ser – tanto para os proprietários dos sites quanto para seus visitantes. Formulários AJAX resolvem esse problema e podem fazer o mesmo pelo seu.

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.

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

Neste guia, compartilharemos um processo simples de 4 etapas para criar um formulário AJAX no WordPress. Usaremos um plugin amigável para iniciantes que simplifica o trabalho técnico 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 que permite que páginas da web enviem e recebam dados sem recarregar.

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

Aplicações web como Gmail e Facebook também usam essa técnica extensivamente para manter os usuários engajados enquanto tarefas em segundo plano são executadas sem problemas.

Você pode usar AJAX para formulários em seu site WordPress para evitar recarregamentos desnecessários da página e manter os usuários engajados na página que estão visualizando no momento.

Isso é especialmente útil se você administra uma loja online e deseja coletar feedback dos usuários sem interromper a experiência de compra.

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 pode permitir que os usuários façam login sem um carregamento de página adicional.

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

Vamos começar.

Etapa 1: Instale o Plugin WPForms

O primeiro passo é instalar e ativar um plugin construtor de formulários.

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

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.

Para começar, você pode querer criar uma conta WPForms. No site WPForms, clique no botão 'Obter WPForms Agora', escolha um plano e complete o processo de checkout.

Com isso feito, você terá seu próprio painel de conta WPForms, onde poderá baixar seu arquivo zip do WPForms Pro e copiar sua chave de licença.

Em seguida, vamos instalar e ativar o plugin WPForms.

Na sua área de administração do WordPress, você pode ir para Plugins » Adicionar Novo Plugin.

Em seguida, você pode usar a barra de pesquisa para encontrar rapidamente o plugin.

Quando o vir, clique em ‘Instalar Agora’ e depois novamente em ‘Ativar’.

Para mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.

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

Uma vez verificado, você poderá receber atualizações automáticas e instalar add-ons. Agora você está pronto para começar a criar formulários AJAX no WordPress.

Passo 2: Crie Seu Primeiro Formulário

Agora 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, ‘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, se você quiser usar o WPForms AI, basta inserir um prompt simples e ele gerará o formulário para você na área de visualização.

Para este tutorial, porém, nós estaremos criando um formulário de contato usando um modelo pré-fabricado.

Vamos passar o mouse sobre a caixa ‘Formulário de Contato Simples’ e clicar em ‘Usar Modelo’. Observe que você pode criar qualquer outro tipo de formulário que precisar; o processo é o mesmo.

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

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

Você também pode adicionar novos campos ao formulário da coluna esquerda clicando neles.

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.

Assim que 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

Dependendo das suas configurações, o WPForms pode não ter a submissão de formulário AJAX habilitada por padrão, então vamos verificar isso agora.

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 depois que alguém envia o 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.

Embora você possa redirecionar os usuários para uma nova página, isso requer o carregamento de uma página. Para obter o máximo benefício do AJAX, recomendamos simplesmente exibir uma ‘Mensagem’ para que o usuário permaneça na mesma página.

Você precisa selecionar a opção de mensagem e editar a mensagem de confirmação. Você pode usar a barra de ferramentas de formatação ou adicionar links para orientar os usuários sobre o que fazer a seguir.

Em seguida, configure como você gostaria de ser notificado sobre novas submissões de 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.

Quando 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 facilita a adição de formulários ao seu site WordPress, seja em uma postagem, página ou widget 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 no menu dropdown dentro do bloco WPForms.

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 suas entradas 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 o WPForms, exportar as entradas do formulário é simples: vá para WPForms » Entradas, selecione seu formulário, escolha suas opções de exportação e baixe os 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.

FAQ: Formulários AJAX no WordPress

Antes de terminarmos, aqui estão algumas perguntas comuns que surgem quando as pessoas começam a usar formulários AJAX no WordPress.

Como uso o AJAX para envio de formulários?

A maneira mais fácil é usar um plugin de formulário que já suporte AJAX, como o WPForms. Você apenas ativa a opção AJAX nas configurações do formulário e o plugin cuida de tudo para você.

Se você estiver criando um formulário personalizado, precisará usar JavaScript e os ganchos AJAX do WordPress. Mas para a maioria dos sites, um plugin é muito mais simples e confiável.

Onde encontro a configuração AJAX no WPForms?

No WPForms, a opção AJAX fica dentro das configurações do formulário. Após abrir seu formulário no construtor, vá em Configurações » Geral, e procure pela caixa de seleção Habilitar envio de formulário AJAX. Assim que estiver ativada, o formulário será enviado sem recarregar a página.

Quais são as desvantagens do AJAX?

O AJAX depende do JavaScript, portanto, pode entrar em conflito com plugins de cache agressivos que minificam ou adiam scripts. Se o seu formulário ‘gira’ mas não envia, tente limpar seu cache ou verificar as configurações do seu plugin de otimização.

Ele também pode causar problemas com construtores de página ou temas antigos se não for configurado corretamente. É por isso que é importante testar seus formulários após habilitar o AJAX.

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.