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 WordPress e impedir 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ário ajax em seu site WordPress, recomendamos WPForms, o melhor plugin de formulário para WordPress.
Passo 1: Criando um Novo Formulário
Para começar a criar seu formulário, você primeiro precisará instalar o plugin WPForms em seu site WordPress.
Não tem certeza de como? Sem problemas. Você pode pular para o nosso guia sobre como instalar um plugin WordPress para resolver tudo 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 habilitado para envio Ajax 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?
Agora 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