Resumo de IA
Deseja impedir que uma página seja recarregada quando alguém envia um dos seus formulários online?
Impedir que uma página seja atualizada depois de alguém enviar um formulário melhora a experiência do utilizador e pode até ajudar a obter mais contactos.
Neste Artigo
Criar um Formulário de Contacto AJAX para WordPress
Este tutorial de formulário de contacto AJAX para WordPress funcionará com qualquer um dos mais de 2.100 modelos de formulário WordPress incluídos com o WPForms.
Nota: O AJAX está ativado automaticamente nas versões mais recentes do WPForms. Este tutorial explica como ativá-lo se utilizou uma versão mais antiga para criar os seus formulários.
1. Criar um Novo Formulário
Para começar, instale e ative o plugin WPForms. Para mais detalhes, consulte este tutorial passo a passo sobre como instalar um plugin no WordPress.
Depois de instalar o plugin WPForms, vá a WPForms » Adicionar Novo para criar um novo formulário.
Selecione um modelo da lista:
Usaremos o modelo Formulário de Contacto Simples para este tutorial.
2. Personalizar o Seu Formulário
Agora é hora de construir 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.
Adicionaremos um campo de Carregamento de Ficheiro ao nosso formulário de contacto para que os utilizadores possam incluir quaisquer documentos relevantes com o seu envio.
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 os rótulos dos campos, adicionar lógica condicional e muito mais.
Quando estiver pronto, clique no botão laranja Guardar no canto superior direito.
Agora que criámos um formulário com um campo de Carregamento de Ficheiro, vamos ativá-lo para AJAX.
3. Ativar Envio de Formulários AJAX
Em seguida, no lado esquerdo da sua página, clique em Definições. Depois selecione a secção Geral .
Na parte inferior do painel direito, expanda as opções Avançadas e localize a definição Ativar submissão de formulário AJAX. Certifique-se de que está ativada.
É tudo! O seu formulário está agora ativado para envios AJAX.
Vamos configurar mais algumas coisas importantes com o seu formulário de contacto AJAX.
4. Configurar as Notificações do Seu Formulário
A próxima coisa que precisará de fazer é configurar as notificações por e-mail do seu formulário. Estas são uma excelente forma de saber quando alguém envia um dos seus formulários ativados para AJAX.
Para começar, vá a Definições » Notificações.
A menos que desative a funcionalidade de notificação, receberá uma notificação por e-mail sempre que alguém enviar o seu formulário AJAX.
Para obter ajuda a preencher estas definições, consulte o nosso tutorial sobre como configurar notificações de formulário no WordPress.
Este exemplo tem um fundo cinzento, mas pode alterar a cor para outra coisa, se desejar. Estes ajustes personalizados podem tornar as suas notificações por e-mail 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 agir imediatamente (e automaticamente) após o seu utilizador ter submetido informações no seu formulário.
Existem 3 tipos diferentes de confirmações no WPForms:
- Mensagem — Este é o tipo de confirmação padrão que aparece depois que alguém envia o formulário e é personalizável. Veja as nossas dicas sobre como personalizar a sua mensagem de confirmação para aumentar a satisfação dos visitantes do seu site.
- Página de Exibição — Envie automaticamente os utilizadores para qualquer página do seu site.
- Redirecionamento — Útil se quiser levar o utilizador para um site diferente ou um URL especializado para um desenvolvimento mais complexo.
Para obter ajuda extra com este passo, consulte o nosso tutorial sobre como configurar confirmações de formulário.
Depois de terminar de configurar as suas notificações e confirmação, certifique-se de que guarda o seu formulário novamente.
6. Incorporar o Seu Formulário AJAX
Depois de terminar de configurar o seu formulário com AJAX ao seu gosto, vai querer adicioná-lo ao seu site.
O WPForms permite-lhe adicionar os seus formulários a vários locais no seu site, incluindo as suas páginas, publicações de blogue e widgets de barra lateral. Vamos dar uma vista de olhos à opção de colocação mais comum: incorporação em página ou publicação.
Para começar, crie uma nova página ou publicação no WordPress, ou abra uma existente no editor.
Depois disso, adicione um novo bloco e selecione o ícone WPForms. Se não o vir imediatamente, pode pesquisar para o encontrar.
O prático widget WPForms aparecerá dentro do seu bloco. Clique na lista pendente do WPForms e escolha qual dos formulários que já criou pretende inserir na sua página. Selecione o seu formulário AJAX.
Em seguida, clique no botão azul no canto superior direito que diz Publicar ou Atualizar, para que o seu formulário apareça no seu site.
E aqui está. Agora sabe como criar um formulário de contacto AJAX simples no WordPress sem recarregar a página, e os visitantes do seu site vão gostar ainda mais de si por isso.
Perguntas Frequentes Sobre Formulários AJAX
O que é um Formulário AJAX?
Um formulário com AJAX ativado é um formulário rápido e dinâmico que pode submeter e executar processos de backend sem a necessidade de atualizar a página inteira.
Por defeito, uma página inteira precisa de ser recarregada quando um utilizador clica em submeter. Isto acontece porque certos processos precisam de ser executados, incluindo o armazenamento dos dados do formulário, o envio de e-mails de notificação e muito mais.
Mas como o WordPress e o WPForms suportam formulários AJAX, tem a opção de ativar submissões de formulários AJAX para evitar que os seus formulários sejam atualizados depois de alguém submeter o formulário.
Porquê usar AJAX em Formulários de Contacto?
Os formulários com AJAX ativado tornaram-se subitamente um item obrigatório para sites de todos os tamanhos.
Aqui estão as principais razões pelas quais o AJAX se está a tornar rapidamente popular para usar em formulários de contacto:
- Proporciona uma experiência de utilizador muito melhor.
- Tempos de carregamento extremamente rápidos e aumento da velocidade do site WordPress.
- Mantém os modais e pop-ups que contêm o seu formulário abertos para que possa exibir uma ação ou mensagem de acompanhamento para aumentar as vendas.
- Fornece pistas visuais e garantia de que o formulário está a processar.
Em seguida, Crie um Formulário Pop-up no WordPress
Agora que pode manter os seus pop-ups abertos depois de alguém submeter, vai querer um ótimo plugin para exibir uma mensagem direcionada.
- Certifique-se de ler o nosso artigo sobre os melhores plugins de pop-up para WordPress.
- Veja 2 formas diferentes de criar um formulário pop-up no WordPress.
- E, finalmente, aprenda como criar um pop-up com um código de cupão usando o WPForms.
Pronto para criar o seu formulário? Comece hoje com o plugin construtor de formulários WordPress mais fácil. O WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.
Se este artigo o ajudou, por favor siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.
Obrigado
Usei as instruções, mas não está a funcionar.
quando submeto um formulário com tratamento personalizado, vejo 2 pedidos para /wp-admin/admin-ajax.php
o primeiro (que é na verdade o que eu aciono) falha com Forbidden (relacionado com nonce) e eu quero na verdade acionar uma função personalizada que faz algum processamento nos dados do formulário.
O segundo tem sucesso, mas retorna a confirmação que eu quero ignorar.
Como posso fazer isto? Como posso conseguir um formulário AJAX com tratamento personalizado?
Obrigado.
Olá Eli. Parece que precisaria de uma solução personalizada para conseguir o que procura. Recomendamos que fale com a Seahawk, que pode trabalhar consigo nisto.