Você quer impedir que sua página seja atualizada quando um visitante envia um formulário? Por padrão, a página inteira é recarregada ao clicar no botão de envio do formulário. E é nesse momento que os dados inseridos no formulário são transferidos e armazenados no servidor.
Neste artigo, mostraremos como habilitar o envio Ajax em seus formulários do WordPress e evitar que a página seja recarregada.
Por que Habilitar o Envio de Formulário Ajax no WordPress
O envio de formulário Ajax é especialmente útil se você quiser incorporar um formulário em um pop-up modal. Sem o envio de formulário AJAX habilitado, a página inteira precisaria ser atualizada, levando ao fechamento da janela pop-up. Dessa forma, os usuários poderiam perder a mensagem de confirmação importante que os mantém engajados.
Com o envio de formulário AJAX habilitado, seus usuários poderiam ver a mensagem de confirmação após o envio do formulário na mesma página, sem recarregar.
Para habilitar o envio de formulários Ajax em seu site WordPress, recomendamos o WPForms, o melhor plugin de formulários para WordPress.
Passo 1: Criando um Novo Formulário
Para começar a criar seu formulário, primeiro você precisará instalar o plugin WPForms em seu site WordPress.
Não tem certeza de como fazer? Sem problemas. Você pode consultar nosso guia sobre como instalar um plugin do WordPress para resolver isso.
Assim que o plugin for instalado e ativado, vá para o seu painel WordPress e navegue até WPForms » Adicionar Novo. Você será redirecionado para uma página onde poderá selecionar um modelo para o seu formulário.
O WPForms oferece vários modelos de formulário para você escolher. Vamos selecionar o modelo Formulário de Upload de Arquivo para este tutorial. Você também pode trabalhar com o modelo Formulário de Contato Simples.
Agora você verá o construtor de formulários na sua tela. No lado esquerdo da tela, você tem as abas Adicionar Campos e Opções de Campo. Você pode usar essas abas para configurar seu formulário de contato.
Se você estiver usando o modelo de Upload de Arquivo, o campo já estará adicionado ao seu formulário. Se você quiser adicionar o campo a qualquer outro modelo, tudo o que você precisa fazer é arrastar o campo de formulário Upload de Arquivo e soltá-lo na sua posição preferida no construtor de formulários.
Assim, o WPForms facilita a adição de campos ao seu formulário com arrastar e soltar. Você também pode alterar a posição dos campos arrastando e soltando. Se você quiser remover um campo, isso também é fácil. Basta passar o cursor sobre o campo indesejado e clicar no ícone de excluir que aparecerá no canto superior direito do campo.
Na aba Opções de Campo, você pode alterar o rótulo do campo, alterar o formato do campo de nome, alterar o tamanho da fonte e ativar ou desativar rótulos e sub-rótulos. Você também tem a opção de ativar a opção de lógica condicional.
Assim que terminar de criar seu formulário com o construtor de formulários, clique no botão salvar, para que suas alterações permaneçam intactas.
Etapa 3: Habilitando o Envio de Formulário Ajax
Assim que suas alterações forem salvas, clique na aba Configurações no lado esquerdo do seu construtor de páginas. Você verá várias opções aqui. Vá para a opção Geral. Abaixo dela, você verá uma série de campos. Aqui você pode alterar o nome do seu formulário, adicionar uma descrição ao formulário, alterar o texto do botão, etc.
Se você rolar mais para baixo na tela, verá algumas caixas de seleção. Você pode selecionar a caixa de seleção que diz Habilitar envio de formulário Ajax. Conclua o processo clicando no botão Salvar no canto superior direito da sua tela.
Agora vá para a aba Notificação abaixo da aba Geral. Esta opção irá notificá-lo toda vez que alguém enviar seu formulário. Portanto, no 1º campo, insira o endereço de e-mail do administrador ou de quem for responsável por receber os e-mails. Você também pode inserir o assunto do e-mail, o nome do remetente, o endereço do destinatário e uma mensagem própria.
Depois de terminar, certifique-se de salvar as alterações. Você também pode definir uma mensagem de confirmação que os visitantes receberão após clicarem no botão de envio.
Etapa 4: Publicando seu formulário com envio Ajax
O passo final é publicar seu formulário com envio Ajax habilitado em seu site. Para isso, vá para a página onde você deseja que o formulário apareça.
Você pode começar indo em Páginas » Adicionar Nova no seu painel do WordPress. Agora adicione um título à sua página. No editor de texto da sua página, adicione um novo bloco e procure por WPForms.
Ao adicionar o bloco, você verá o mascote do WPForms com um menu suspenso para escolher o formulário que você acabou de criar.
Selecione seu formulário preferido e uma Prévia do seu formulário aparecerá em sua página.
Você também pode adicionar o formulário no Editor Clássico usando o botão ‘Adicionar Formulário’, assim:
Você pode então clicar no botão Publicar para finalmente colocar o formulário no ar.
Foi fácil, não foi?
Você pode querer rastrear o número de cliques de botão que seu formulário de contato recebe. Para fazer isso, confira nosso guia sobre rastreamento de links e cliques de botão.
Comentários Deixe uma resposta