como-criar-um-formulário-de-contacto-do-wordpress-ajax-sem-page-reload

Como criar um formulário de contacto WordPress AJAX (sem recarregar a página)

Pretende impedir que uma página seja recarregada quando alguém submete um dos seus formulários em linha?

Evitar que uma página seja actualizada depois de alguém submeter um formulário contribui para uma melhor experiência do utilizador e pode mesmo ajudá-lo a obter mais contactos.

Criar um formulário de contacto WordPress AJAX

Este tutorial de formulário de contacto WordPress AJAX funcionará com qualquer um dos mais de 2.000 modelos de formulários WordPress incluídos no WPForms.

Nota: O AJAX é ativado automaticamente nas versões mais recentes do WPForms. Este tutorial explica como ativá-lo se você usou uma versão mais antiga para criar seus formulários.

1. Criar um novo formulário

Para começar, instale e active o plugin WPForms. Para obter mais detalhes, consulte este tutorial passo a passo sobre como instalar um plugin no WordPress.

Depois de instalar o plugin WPForms, aceda a WPForms " Add New para criar um novo formulário.

Selecionar um modelo da lista:

Selecionar o modelo de formulário de contacto simples

Vamos utilizar o modelo Simple Contact Form para este tutorial.

2. Personalizar o formulário

Agora é altura de criar o seu formulário. Pode personalizar facilmente os campos do formulário arrastando-os do lado esquerdo do construtor para a área de pré-visualização à direita.

Vamos adicionar um campo de carregamento de ficheiros ao nosso formulário de contacto para que os utilizadores possam incluir quaisquer documentos relevantes no seu envio.

Adicionar um campo File Upload a um formulário de contacto

Ajuste a colocação dos campos ao seu gosto, arrastando-os para cima e para baixo no seu formulário.

Também pode clicar em qualquer campo na área de pré-visualização para abrir opções adicionais. Isto permitir-lhe-á alterar as etiquetas dos campos, adicionar lógica condicional e muito mais.

Personalizar as opções de campo para um campo File Upload

Quando estiver pronto, clique no botão laranja Guardar no canto superior direito.

Guardar o formulário

Agora que criámos um formulário com um campo de carregamento de ficheiros, vamos activá-lo para AJAX.

3. Ativar os envios de formulários AJAX

Em seguida, no lado esquerdo da sua página, clique em Definições. Em seguida, selecione a secção Geral .

Aceder às definições gerais de um formulário

Na parte inferior do painel do lado direito, expanda as Opções avançadas e localize a definição Ativar envio de formulário AJAX. Certifique-se de que está activada.

Verificar se os envios de formulários AJAX estão activados

É isso mesmo! O seu formulário está agora ativado para envios AJAX.

Vamos configurar algumas outras coisas importantes com o seu formulário de contacto AJAX.

4. Configurar as notificações do formulário

A próxima coisa que você precisa fazer é configurar as notificações por email do formulário. Estas são uma excelente forma de saber quando alguém submete um dos seus formulários activados para AJAX.

Para começar, aceda a Definições " Notificações.

Aceder às definições de notificações de um formulário

A menos que desactive a funcionalidade de notificação, receberá uma notificação por correio eletrónico sempre que alguém submeter o seu formulário AJAX.

Para obter ajuda no preenchimento destas definições, consulte o nosso tutorial sobre como configurar notificações de formulários no WordPress.

Este exemplo tem um fundo cinzento, mas pode alterar a cor para outra, se quiser. Estes ajustes personalizados podem tornar as suas notificações por correio eletrónico mais profissionais e dar-lhes um toque pessoal. Consulte o nosso guia sobre como adicionar um cabeçalho personalizado ao seu modelo de e-mail.

5. Configurar as suas confirmações

As confirmações de formulário permitem-lhe tomar medidas imediatamente (e automaticamente) depois de o utilizador ter enviado informações para o seu formulário.

Mensagem de confirmação do formulário de contacto

Existem 3 tipos diferentes de confirmações no WPForms:

  1. Mensagem - Este é o tipo de confirmação padrão que aparece depois que alguém clica em enviar no seu formulário, e é personalizável. Confira nossas dicas sobre maneiras de personalizar sua mensagem de confirmação para aumentar a satisfação dos visitantes do seu site.
  2. Exibir página - Enviar automaticamente os utilizadores para qualquer página do seu site.
  3. Redirecionar - Útil se quiser levar o utilizador para um website diferente ou para um URL especializado para um desenvolvimento mais complexo.

Para obter ajuda adicional com este passo, consulte o nosso tutorial sobre como configurar confirmações de formulários.

Quando terminar de configurar as notificações e a confirmação, certifique-se de que guarda novamente o formulário.

6. Incorporar o formulário AJAX

Quando tiver terminado de configurar o seu formulário ativado para AJAX a seu gosto, vai querer adicioná-lo ao seu site.

O WPForms permite que você adicione seus formulários a vários lugares no seu site, incluindo suas páginas, posts de blog e widgets da barra lateral. Vamos dar uma olhada na opção de posicionamento mais comum: incorporação de página ou post.

Para começar, crie uma nova página ou publicação no WordPress ou abra uma já existente no editor.

Depois disso, adicione um novo bloco e selecione o ícone WPForms. Se não o vires imediatamente, podes procurar para o encontrar.

Adicionar um bloco WPForms a uma página

O prático widget WPForms aparecerá dentro do seu bloco. Clique no menu suspenso WPForms e escolha um dos formulários que já criou e que deseja inserir na sua página. Selecione o seu formulário AJAX.

Selecionar o seu formulário de contacto no bloco WPForms

Em seguida, clique no botão azul no canto superior direito que diz Publicar ou Atualizar, para que o formulário apareça no seu sítio Web.

Atualizar a página onde se encontra o formulário de contacto

E aí está. Agora já sabe como criar um formulário de contacto AJAX simples para WordPress sem recarregar a página, e os visitantes do seu site vão adorá-lo ainda mais por isso.

Perguntas frequentes sobre formulários AJAX

O que é um formulário AJAX?

Um formulário ativado para AJAX é um formulário rápido e dinâmico que pode submeter e executar processos de backend sem a necessidade de atualizar toda a página.

Envio de formulário AJAX

Por predefinição, uma página inteira tem de ser recarregada quando um utilizador carrega em submeter. Isto deve-se ao facto de determinados processos terem de ser executados, incluindo o armazenamento dos dados do formulário, o envio de e-mails de notificação, etc.

Mas como o WordPress e o WPForms suportam formulários AJAX, tem a opção de ativar a submissão de formulários AJAX para evitar que os seus formulários sejam actualizados depois de alguém submeter o formulário.

Porque é que o AJAX é utilizado nos formulários de contacto?

Os formulários com AJAX tornaram-se subitamente uma necessidade para sítios Web de todas as dimensões.

Eis as principais razões pelas quais a utilização de AJAX nos formulários de contacto está a tornar-se rapidamente popular:

  • A experiência do utilizador é muito melhor.
  • Tempos de carregamento extremamente rápidos e maior velocidade do sítio WordPress.
  • Mantém os modais e popups que contêm o seu formulário abertos para que possa apresentar uma ação ou mensagem de seguimento para aumentar as vendas.
  • Fornece pistas visuais e garantias de que o formulário está a ser processado.

Em seguida, crie um formulário pop-up do WordPress

Agora que pode manter os seus popups abertos depois de alguém clicar em enviar, vai querer um ótimo plugin para utilizar para apresentar uma mensagem direcionada.

Pronto para criar o seu formulário? Comece hoje mesmo com o plugin de criação de formulários mais fácil do WordPress. O WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de reembolso de 14 dias.

Se este artigo o ajudou, siga-nos no Facebook e no Twitter para mais tutoriais e guias gratuitos do WordPress.

Divulgação: O nosso conteúdo é apoiado pelos leitores. Isso significa que se você clicar em alguns de nossos links, podemos ganhar uma comissão. Veja como o WPForms é financiado, por que isso é importante e como você pode nos apoiar.

Molly Tyler

Molly é líder da equipe de conteúdo da WPForms. Ela tem escrito sobre WordPress desde 2018.Saiba mais

O melhor plug-in de criação de formulários de arrastar e soltar do WordPress

Fácil, rápido e seguro. Junte-se a mais de 6 milhões de proprietários de sites que confiam no WPForms.

Active o JavaScript no seu browser para preencher este formulário.

3 comentários em "Como criar um formulário de contacto AJAX para WordPress (sem recarregar a página)"

  1. Utilizei as instruções, mas não está a funcionar.

    quando submeto um formulário com tratamento personalizado, consigo ver 2 pedidos para /wp-admin/admin-ajax.php
    o primeiro (que é o que eu acciono) falha com Forbidden (relacionado com o nonce) e eu quero ativar uma função personalizada que faz algum processamento dos dados do formulário.
    O segundo é bem-sucedido, mas retorna a confirmação que eu quero ignorar.

    Como é que posso fazer isto? Como é que posso obter um formulário AJAX com tratamento de clientes?

    Obrigado.

    1. Oi Eli. Parece que precisa de uma solução personalizada para conseguir o que procura. Recomendamos que entre em contacto com a Seahawk, que pode trabalhar consigo nesta questão.

Adicionar um comentário

Ficamos satisfeitos por ter escolhido deixar um comentário. Tenha em atenção que todos os comentários são moderados de acordo com a nossa política de privacidade e que todas as hiperligações são nofollow. NÃO utilize palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.

Este formulário é protegido pelo Cloudflare Turnstile e aplicam-se a Política de Privacidade e os Termos de Serviço da Cloudflare.