Você quer integrar seus formulários WordPress com diferentes aplicativos e serviços web?
Se você precisa de uma maneira simples de enviar dados de um aplicativo web diretamente do seu formulário WordPress, os webhooks são a solução perfeita. Com um formulário de webhook, você não precisa da ajuda de um conector de terceiros como o Zapier.
Neste post, mostraremos como usar webhooks em seus formulários WordPress para que você possa enviar facilmente dados em tempo real para seus aplicativos e serviços favoritos.
Mas primeiro, se você é um iniciante, cobriremos o que são webhooks e por que eles são importantes. Tenha em mente que o método que usaremos hoje não exige que você tenha nenhuma habilidade de codificação.
O que são Webhooks?
Webhooks permitem que dois aplicativos web se comuniquem entre si. Por exemplo, se alguém envia um formulário de pedido de compra em seu site, você pode enviar esses dados para o seu canal do Slack para informar sua equipe de produto que um pedido foi feito. Você pode fazer isso quando receber um novo lead ou assinante também.
Em termos técnicos, webhooks são callbacks HTTP definidos pelo usuário que são acionados por um evento em um sistema de origem e enviados para o sistema de destino.
Isso significa que, quando um evento ou gatilho ocorre em seu site, mensagens automatizadas são enviadas para um serviço conectado. Um gatilho pode ser qualquer coisa, como comentários de blog, registros de usuários de compra de produtos e envios de formulários.
Se você está se perguntando por que deve usar webhooks, aqui estão alguns benefícios:
- Transferir informações entre dois serviços/aplicativos automaticamente
- Automatizar tarefas e reduzir o tempo administrativo
- Reduzir o custo de uso de serviços conectores como Zapier e Hubspot para processar dados em aplicativos.
Webhooks são incrivelmente úteis para desenvolvedores e usuários WordPress com conhecimento técnico.
Com isso, vamos começar nosso guia passo a passo sobre como criar um formulário de webhook no WordPress.
Criando um Formulário de Webhook no WordPress [Método Fácil]
Existem muitas maneiras de usar webhooks para enviar seus envios de formulários WordPress para outros aplicativos web.
Usaremos o WPForms para este tutorial, pois ele oferece um Addon de Webhooks que é fácil de usar para qualquer pessoa, incluindo iniciantes. Não há absolutamente nenhum código envolvido.
WPForms é o melhor plugin construtor de formulários para sites WordPress. E o que você precisa saber é que ele oferece toneladas de modelos pré-fabricados e campos de formulário prontos para uso que permitem criar todos os tipos de formulários WordPress. Isso inclui pedidos de produtos, registros, agendamentos, formulários de contato simples e muito mais.
O WPForms vem com um construtor de formulários de arrastar e soltar que torna a personalização de formulários uma tarefa fácil. Ele possui muitos addons e integrações que você pode usar para se conectar a aplicativos de e-mail, pagamento e marketing.
Com seu Addon de Webhooks, você pode facilmente conectar seu WordPress a qualquer serviço ou aplicativo. Tudo o que é preciso são alguns cliques para habilitar essa funcionalidade.
Além disso, o WPForms permite que você use regras condicionais para acionar uma ação de webhook com base na resposta do usuário ao formulário. Portanto, somente se o valor de um campo for atendido, o webhook será executado. Isso lhe dá mais controle sobre quais dados você deseja enviar e para qual aplicativo.
Você pode se conectar a toneladas de aplicativos e serviços. Para este tutorial, mostraremos como se conectar ao Slack. Mas lembre-se, você pode usar os mesmos passos para se conectar a outros aplicativos e endpoints também.
Passo 1: Crie um Novo Aplicativo Slack
Ao conectar seu formulário de webhook ao Slack, você pode enviar automaticamente mensagens e informações do seu site para seus canais do Slack. Você pode atualizar os membros da sua equipe ou departamentos quando uma pessoa envia um formulário, abandona um formulário e muito mais.
Agora, para enviar dados do WordPress para outro serviço usando webhooks, você precisará criar uma ponte entre os dois aplicativos. Portanto, para se conectar ao Slack, você precisará criar um aplicativo Slack (a ponte).
Se você é novo nisso, não se preocupe, é bem fácil e nós o guiaremos passo a passo. Primeiro, você precisará abrir a página da API do Slack e clicar no botão Criar um aplicativo.
Na próxima janela pop-up, você pode escolher como deseja criar um aplicativo com o Slack. Existem duas opções:
- Do zero
- Do manifesto de um aplicativo.
Aqui, vamos criar um aplicativo Slack do zero. Parece muito trabalho, mas na verdade leva apenas alguns cliques.
Em seguida, você verá o pop-up onde pode adicionar o nome do aplicativo e escolher seu local de trabalho no Slack. Quando terminar, clique em Criar App.
Isso abre a página Informações básicas. Aqui, você precisa clicar na opção Webhooks de Entrada.
Na próxima tela, ative as configurações Ativar Webhooks de Entrada. Isso permite que você poste mensagens no Slack de serviços externos.
Uma vez ativado, você verá a seção URLs de Webhook para Seu Local de Trabalho na página.
Agora, você precisa criar um novo webhook para obter informações do seu formulário WordPress. Portanto, clique no botão Adicionar Novo Webhook ao Local de Trabalho.
Em seguida, você pode ver o pop-up onde pode selecionar um canal do Slack para postar os envios do seu formulário.
Após escolher um canal do Slack, clique em Permitir.
Agora, você poderá ver a nova URL do webhook para seu aplicativo Slack.
Tudo o que você precisa fazer agora é copiar a URL do Webhook. Você precisará dela em algumas etapas posteriores.
Etapa 2: Instalar e Ativar WPForms
Assim que tiver sua URL de webhook, você pode adicioná-la ao seu formulário WordPress.
Para começar, inscreva-se para uma conta no site do WPForms.
Existe uma versão gratuita do plugin, mas você precisará da versão premium para acessar recursos avançados de formulário como webhooks. O WPForms vem com uma garantia de devolução do dinheiro 100% sem riscos, para que você possa experimentar o serviço antes de se comprometer.
Após se inscrever, você encontrará o arquivo de download do plugin e a chave de licença na guia Downloads.
Agora, vá para o seu painel do WordPress e instale o plugin. Se você quiser mais detalhes, pode conferir nosso guia sobre como instalar um plugin do WordPress.
Assim que você instalar e ativar o WPForms em seu site, você precisará inserir sua chave de licença para aproveitar todos os seus recursos premium e addons.
Antes de começar a criar seu formulário, você precisa instalar o Addon Webhooks.
Para isso, vá para a aba WPForms » Addons e você encontrará dezenas de addons que ajudam a estender a funcionalidade dos seus formulários WordPress. Aqui, clique no botão Instalar Addon para o Addon Webhooks.
Agora, você está pronto para criar seu formulário de webhook no WordPress.
Passo 3: Crie um Formulário de Webhook
Para criar um novo formulário, vá para a página WPForms » Adicionar Novo, onde você verá uma lista de modelos pré-fabricados. Esses modelos vêm pré-preenchidos com os campos que você precisará com base no propósito do seu formulário. A biblioteca de modelos inclui:
- Formulário de Contato Simples
- Formulário de Solicitação de Orçamento
- Formulário de Doação
- Formulário de Cobrança/Pedido
- Formulário de Pesquisa
- Formulário de Sugestão
...e mais! Para este tutorial, escolheremos o modelo Formulário de Sugestão porque criamos um aplicativo Slack para feedback do usuário na etapa anterior. Sinta-se à vontade para escolher um que melhor se adapte às suas necessidades.
Tudo o que você precisa fazer é dar um nome ao seu formulário no topo da página. Em seguida, escolha qualquer modelo dependendo das suas necessidades ou você pode escolher o modelo em branco para começar do zero.
Depois de selecionar um modelo, você verá o construtor de formulários de arrastar e soltar na próxima janela.
Se você quiser adicionar mais campos, basta arrastar e soltar novos campos do menu esquerdo na visualização do formulário.
O WPForms oferece muitas opções de personalização, então você pode clicar em qualquer campo para editá-los. Ele permite que você altere os nomes dos campos, a descrição e configurações mais avançadas.
Assim que terminar de adicionar os campos do seu formulário, clique no botão Salvar.
Na próxima etapa, aprenderemos como configurar webhooks para este formulário e conectar seu aplicativo Slack.
Etapa 4: Configurar um Webhook para o Slack
Para que os webhooks funcionem no seu formulário, você precisa navegar até a guia Configurações » Webhooks e clicar na opção Ativar Webhooks.
Um novo webhook será criado, que você poderá editar para configurar sua integração com o Slack.
Primeiro, você pode alterar o nome do webhook. Isso ajudará você a reconhecê-lo mais tarde.
Agora, lembre-se da URL do Webhook que você copiou do seu aplicativo Slack na Etapa 1? Você precisará colá-la aqui na opção URL da Solicitação. Isso permitirá que você conecte seu formulário WordPress com outros serviços como o Slack.
Depois disso, você verá várias configurações para configurar seu webhook. Discutiremos o que cada um faz e o que adicionar a esses campos aqui.
- Request Method: It lets you choose what type of connection you want to create with your connected service. There are many types of HTTP methods that you can use based on what type of connection you’re looking to create:
- GET: Isso obterá dados do formulário enviado e enviará os detalhes para um aplicativo conectado.
- POST: Isso enviará os dados para um serviço secundário. Usaremos a solicitação HTTP POST, pois precisamos postar dados do seu formulário para o seu canal do Slack.
- PUT: Isso permite que você atualize dados quando seu webhook for executado.
- PATCH: Isso permite que você substitua dados quando seu webhook for executado.
- DELETE: Isso permite que você exclua informações quando este webhook específico for executado.
- Request Format: This option will show the server which type of content you are sending over. This is a bit technical but basically, there are two different request format types available:
- JSON: Formata seus dados em um formato application/json e definirá o tipo de conteúdo como charset=utf-8.
- FORM: Formata seus dados em um formato application/x-www-form-urlencoded e definirá o tipo de conteúdo como charset=utf-8.
- Segredo: Se você é um desenvolvedor e deseja integrar sua própria API para autenticação, pode usar uma chave secreta. Mas para o nosso tutorial, não precisamos dessa opção, então a deixaremos em branco.
- Cabeçalhos de Requisição: Isso envia valores específicos quando a requisição é enviada para o aplicativo. Quando o webhook for executado, os campos serão gerados automaticamente. Deixaremos este campo em branco também.
- Corpo da Requisição: Para esta opção, você precisa configurar o tipo de mensagem e selecionar um campo para postar as mensagens. Como os usuários inserirão sugestões em formato de texto, definiremos a Chave como Text. Em seguida, selecione o campo onde os usuários inserirão sua mensagem.
Após terminar as configurações da requisição do webhook, clique no botão Salvar.
Passo 5: Configurar Notificações do Formulário
Em seguida, você pode configurar notificações por e-mail para o formulário do WordPress. Isso permite enviar e-mails automatizados para o administrador, qualquer membro da equipe e o cliente/usuário assim que eles enviarem o formulário.
Para configurar esses fluxos de trabalho de e-mail, vá para a aba Configurações » Notificações, marque a opção Habilitar Notificações para ver as configurações padrão.
Aqui, você pode personalizar as configurações de notificação e adicionar endereços de e-mail dos destinatários.
O WPForms também permite que você envie notificações automáticas por e-mail para os usuários do formulário. Para configurar isso, clique no botão Adicionar Nova Notificação no canto superior direito da página.
Em seguida, você precisa usar a opção Mostrar Tags Inteligentes e selecionar Email. Com esta tag, o WPForms detectará automaticamente o endereço de e-mail inserido pelo usuário no formulário.
Na seção Mensagem de E-mail, você pode adicionar sua mensagem personalizada e usar a tag inteligente {all_fields} para mostrar todos os dados do formulário que o usuário inseriu.
Não se esqueça de salvar suas configurações no final.
Etapa 6: Personalizar Mensagem de Confirmação
O WPForms também permite exibir mensagens de confirmação no front-end do seu site após os usuários enviarem o formulário com sucesso.
Na aba Configurações » Confirmações, você verá as configurações de confirmação. Por padrão, o Tipo de Confirmação está definido como 'Mensagem', mas existem 3 opções neste menu:
- Mensagem: Adicione uma mensagem de confirmação que é exibida no front-end após os clientes enviarem seu pedido.
- Mostrar Página: Redirecione seus usuários para qualquer página do seu site.
- Ir para URL (Redirecionar): Envie os usuários para um URL específico.
Para saber mais sobre isso, você pode conferir nosso guia sobre como configurar notificações e confirmações de formulário da maneira certa.
Quando terminar com as configurações, clique no botão Salvar.
Também devemos mencionar aqui que o WPForms permite a integração com seu serviço de e-mail preferido, como Constant Contact e Mailchimp.
Você simplesmente precisa acessar isso na aba Marketing e seguir as instruções na tela para conectar sua conta de e-mail. Na maioria dos casos, você precisará fornecer uma chave de API que pode ser gerada com o provedor de e-mail.
Se você quiser conectar formulários online a um gateway de pagamento também, você pode aprender a fazer isso aqui: Como Criar um Formulário de Pedido Online
Tudo o que você precisa fazer agora é publicar seu formulário webhook em seu site WordPress.
Etapa 7: Publicar Formulário Webhook em Seu Site
Para começar a enviar envios de formulário para serviços externos, você precisa publicar o formulário webhook primeiro. Com o bloco personalizado do WPForms, você pode adicionar seus formulários a qualquer página ou postagem em seu site WordPress.
Para este tutorial, adicionaremos o formulário a uma nova página em nosso site. Navegue até a aba Páginas » Adicionar Nova em seu painel de administração do WP. Na tela do editor de blocos, adicione um novo bloco e pesquise por ‘WPForms’.
Ao adicionar o bloco WPForms à sua página, você verá um menu suspenso que permite selecionar o formulário de webhook que você acabou de criar.
Em seguida, você pode publicar sua página em seu site.
Se você estiver usando o editor clássico do WordPress, poderá adicionar o formulário usando o botão Adicionar Formulário no editor.
Você pode até inserir seu formulário de webhook em uma área pronta para widgets, como um rodapé ou barra lateral. Para fazer isso, vá para a aba Aparência » Widgets e arraste e solte o widget WPForms na barra lateral ou no menu do rodapé à direita.
Em seguida, você pode selecionar o formulário que criou no menu suspenso e salvar suas alterações.
Agora seu formulário de webhooks está publicado em seu site. Quando os usuários preencherem e enviarem o formulário, você receberá notificações do Slack do seu site.
Dessa forma, você pode usar o WPForms para se conectar a diferentes aplicativos usando URLs de webhook. Você tem controle total sobre os dados que deseja buscar e enviar para outros aplicativos.
É isso! Esperamos que este post tenha ajudado você a aprender como usar Webhooks em seus formulários do WordPress. Com o WPForms, você pode criar um formulário de webhook e se conectar a um serviço de terceiros com facilidade.
Você também pode usá-lo para criar outros formulários profissionais do WordPress, como formulários de pedido, formulários de reserva, formulários de registro e muito mais. Você também pode querer aprender como usar o WPForms para salvar dados de formulário em seu banco de dados do WordPress.
Para seus próximos passos, você pode conferir estes recursos:
- Como Adicionar Opção 'Salvar e Continuar Depois' a Formulários WordPress
- Como Reduzir o Abandono de Formulários e Aumentar as Conversões
- Melhores Ferramentas de Captura de E-mail e Construtores de Formulários para WordPress
Estas postagens ajudarão você a adicionar a funcionalidade de salvar e retomar mais tarde em seus formulários do WordPress e a reduzir as taxas de abandono de formulários. A última ajudará você a expandir sua lista de marketing por e-mail.
Comentários Deixe uma Resposta