Como enviar um formulário sem atualização de página no WordPress

envie um formulário sem atualização de página


Deseja 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 enviar formulário. E é aí que os dados inseridos no formulário são transferidos e armazenados no servidor.

Neste artigo, mostraremos como ativar o envio do Ajax nos formulários do WordPress e impedir que a página seja recarregada.

Por que ativar o envio de formulários Ajax no WordPress

O envio do formulário Ajax é especialmente útil se você deseja incorporar um formulário em um pop-up modal. Sem o envio do formulário AJAX ativado, a página inteira precisaria ser atualizada, levando ao fechamento da janela pop-up. Dessa forma, os usuários podem perder a importante mensagem de confirmação que os mantém envolvidos.

Com o envio do formulário AJAX ativado, seus usuários poderão ver a mensagem de confirmação após o envio do formulário na mesma página sem recarregar.

envios de formulário ajax

Para ativar o envio do formulário ajax em seu site WordPress, recomendamos WPForms, o melhor plugin de formulário para WordPress.

Etapa 1: Criando um novo formulário

Para começar a criar seu formulário, primeiro você precisa instalar o plugin WPForms no seu site WordPress.

Não sabe como? Sem problemas. Você pode acessar o nosso guia sobre como instalar um plugin do WordPress para resolver tudo isso.

Depois que o plug-in estiver instalado e ativado, acesse o painel do WordPress e navegue até WPForms »Adicionar novo. Agora você será redirecionado para uma página onde você pode selecionar um modelo para o seu formulário.

O WPForms oferece 7 modelos de formulário diferentes para você escolher. Vamos selecionar o Formulário de contato simples opção para este tutorial e adicione um campo de upload de arquivo ao formulário.

Configuração de formulário WPForms

Agora você verá o construtor de formulários na sua tela. No lado esquerdo da tela, você tem o Adicionar campos e a Opções de campo aba. Você pode usar essas guias para configurar seu formulário de contato.

excluir um campo dos wpforms

O WPForms facilita a adição de campos ao seu formulário com o recurso de arrastar e soltar. Você também pode alterar a posição dos campos arrastando e soltando. Se você deseja remover um campo, isso também é fácil. Basta passar o cursor sobre o campo indesejado e clicar no excluir ícone que aparecerá no canto superior direito do campo.

Debaixo de Opções de campo Na guia, 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 uma opção para ativar o lógica condicional opção.

Quando terminar de criar seu formulário com o construtor de formulários, clique no Salve  para que suas alterações permaneçam intactas.

Agora que criamos um formulário de contato simples, vamos adicionar o recurso de upload de arquivos a ele.

Para adicionar um recurso de upload de arquivo, tudo o que você precisa fazer é clicar no campo Upload de arquivo no painel esquerdo. Como alternativa, você pode arrastar o campo de formulário Upload de arquivo e soltá-lo em sua posição preferida no construtor de formulários.

formulário de upload de arquivo

Etapa 3: Habilitando o envio do formulário Ajax

Depois que suas alterações forem salvas, clique no ícone Definições guia no lado esquerdo do seu construtor de páginas. Você verá várias opções aqui. Vou ao Geral opção. Abaixo disso, você verá vários campos. Aqui você pode alterar o nome do seu formulário, adicionar uma descrição do formulário, alterar o texto do botão etc..

Se você rolar mais abaixo na tela, verá algumas caixas de seleção. Você pode marcar a caixa de seleção que diz Ativar envio de formulário Ajax. Conclua o processo clicando no botão Salve  botão no canto superior direito da tela.

ativar o envio do formulário ajax

Agora vá para o Notificação guia abaixo do Geral aba. Esta opção o notificará sempre que alguém enviar seu formulário. Portanto, no 1º campo, digite o endereço de e-mail do administrador ou de quem está encarregado de receber os e-mails. Você também pode inserir o assunto do email, o nome do remetente, o endereço do destinatário e uma mensagem sua..

Depois de concluído, salve as alterações. Você também pode definir uma mensagem de confirmação que os visitantes receberão depois que clicarem no botão Enviar.

configurações de confirmação do formulário de upload de arquivo

Etapa 4: Publicando seu formulário com o envio do Ajax

A etapa final é publicar o formulário ativado para envio do Ajax em seu site. Para isso, vá para a página em que deseja que o formulário apareça.

Você pode começar indo para Páginas »Adicionar novo no seu painel do WordPress. Agora adicione um título à sua página. No editor de texto da sua página, clique no botão Adicionar formulário opção. Uma nova janela aparecerá na sua tela.

formulário de incorporação de wpforms

Clique na seta suspensa e selecione o formulário que acabou de ser criado. Agora clique no Adicionar formulário botão. Você verá o código de incorporação sendo refletido no editor de texto da sua página. Você pode verificar a aparência do formulário clicando no botão Pré-visualização botão no lado direito da tela.

Você pode clicar no Publicar para finalmente liberar o formulário.

Isso foi fácil, não foi??

Agora, você pode acompanhar o número de cliques no botão que seu formulário de contato recebe. Para fazer isso, confira nosso guia em rastreamento de links e cliques de botão.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map