Como criar um formulário AJAX para WordPress (em 4 etapas fáceis)


Deseja criar um formulário de contato AJAX no WordPress?

Os formulários de contato AJAX permitem que os usuários enviem o formulário sem recarregar uma página. Isso permite aumentar o engajamento do usuário e, ao mesmo tempo, oferecer uma melhor experiência de envio de formulário.

Isso é útil quando você executa um site de comércio eletrônico e deseja coletar feedback do usuário sem desviar a atenção do usuário.

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 efetuem login sem um carregamento adicional da página.

Neste artigo, mostraremos como criar facilmente um formulário de contato do WordPress AJAX com instruções passo a passo.

Criando um formulário de contato do Ajax no WordPress

O que é o Ajax e por que usá-lo em seus formulários?

Ajax, abreviação de Javascript assíncrono e 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ários 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.

Aplicativos da Web como o Gmail e o Facebook usam extensivamente essa técnica para manter os usuários envolvidos e fazer com que tudo funcione perfeitamente em segundo plano.

Você também pode usar o Ajax para seus formulários do WordPress. Isso salvará os usuários de recarregamentos desnecessários de páginas e os manterá envolvidos na página que estão visualizando no momento.

Dito isto, vamos dar uma olhada em como criar facilmente um formulário de contato do WordPress Ajax em 4 etapas simples.

1. Instale o plug-in WPForms

A primeira coisa que você precisa fazer é instalar e ativar o plug-in WPForms. Para mais detalhes, consulte o nosso guia passo a passo sobre como instalar um plugin do WordPress.

WPForms é o melhor plugin para criação de formulários do WordPress no mercado. Ele permite que você crie facilmente formulários com Ajax também.

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

Chave de licença WPForms

Depois de inserir a chave de licença, você poderá receber atualizações automáticas e instalar complementos.

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

2. Crie seu primeiro formulário

Vamos em frente e crie seu primeiro formulário.

Basta visitar WPForms »Adicionar novo página na área de administração do WordPress. Você será solicitado a fornecer um título para o seu formulário e selecionar um modelo como ponto de partida.

Escolha o modelo de formulário

Para fins deste tutorial, criaremos um formulário de contato. No entanto, você pode criar qualquer outro tipo de formulário necessário.

Agora, o WPForms carregará seu formulário com os campos básicos já adicionados a ele. Você pode simplesmente apontar e clicar em qualquer campo do formulário para editá-lo.

Editando campos de formulário no WPForms

Você também pode adicionar qualquer novo campo de formulário a partir da coluna da esquerda, basta clicar nele. O novo campo aparecerá na parte inferior do formulário logo acima do botão enviar.

Clique para adicionar um novo campo de formulário

Você pode arrastar e soltar facilmente os campos do formulário para movê-los para cima e para baixo no formulário.

Quando terminar de editar o formulário, você poderá passar para a próxima etapa.

3. Ative o recurso de envio de formulário Ajax

O WPForms não permite o envio de formulários Ajax por padrão. Você precisará habilitá-lo manualmente para o seu formulário.

Basta alternar para a guia Configurações no criador de formulários e marque a caixa ao lado da opção "Ativar envio de formulário AJAX".

Ativar a funcionalidade de formulário do Ajax

Marcar a caixa ativará a funcionalidade do Ajax para este formulário.

Agora vamos configurar o que acontece após o envio do formulário.

Primeiro, mude para a guia "Confirmação" em configurações. É aqui que você informa aos usuários que recebeu o envio do formulário.

Configurações de confirmação

O WPForms permite fazer isso de diferentes maneiras. Por exemplo, você pode redirecionar usuários para um 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, o redirecionamento de usuários para outra página anulará o objetivo 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 link ou dois para informar aos usuários para onde ir.

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

Alterne para a guia Notificações nas configurações do formulário e defina as configurações de e-mail de notificação.

Configurações de email de notificação de formulário

Depois de concluir, você pode salvar seu formulário e sair do construtor de formulários.

4. Adicione seu formulário ativado para Ajax no WordPress

O WPForms facilita a adição de formulários em seus posts, páginas e widgets da barra lateral do WordPress.

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

Adicionar bloco WPForms à postagem ou página do WordPress

Depois disso, você precisa selecionar o formulário que você acabou de criar nas configurações do bloco. O WPForms carregará imediatamente uma visualização ao vivo do formulário no editor de conteúdo.

Selecione seu formulário

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

Visualização do formulário de contato do Ajax

Você também pode adicionar seu formulário a um widget da barra lateral no WordPress. Para fazer isso, vá para Aparência »Widgets página e adicione o widget WPForms a uma barra lateral.

Adicione seu formulário com ajax a um widget da barra lateral

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

Esperamos que este artigo tenha ajudado você a aprender como criar um formulário de contato do WordPress Ajax para o seu site. Você também pode querer ver nosso guia sobre como criar um pop-up de formulário de contato no WordPress.

Se você gostou deste artigo, assine os tutoriais em vídeo do canal do YouTube para WordPress. Você também pode encontrar-nos em Twitter e Facebook.

A publicação Como criar um formulário AJAX do WordPress (em 4 etapas fáceis) apareceu primeiro no WPBeginner.

Publicações interessantes:

2016, O Ano de Essencialismo

14 melhores trabalhos on-line de casa – sem investimento para ganhar dinheiro

3 maneiras baratas (ou gratuitas) de se pesquisar para infecções sexualmente transmissíveis

Como o MENY pode ser ainda melhor no Facebook?

Vender e comercializar na net: não está sem, mas vai com estilo

Não há mais dinheiro para ganhar com vídeos? A mudança do YouTube e minhas dicas!

Como escrever um e-mail comercial profissional

Como participar de um evento esportivo como um adulto equilibrado

 Como fazer o marketing de afiliados: um guia para iniciantes