Como usar Webhooks com formulários do WordPress

Deseja integrar seus formulários do WordPress com diferentes aplicativos e serviços da web?

Se você precisa de uma maneira simples de enviar dados em um aplicativo da Web diretamente do seu formulário do 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 do WordPress para que você possa enviar facilmente dados em tempo real para seus aplicativos e serviços favoritos.

Mas primeiro, se você é iniciante, vamos falar sobre o que são webhooks e por que eles são importantes. Tenha em mente que o método que usaremos hoje não precisa que você tenha nenhuma habilidade de codificação.

O que são Webhooks?

Os webhooks permitem que dois aplicativos da Web se comuniquem. Por exemplo, se alguém enviar um formulário de pedido de compra em seu site, você poderá enviar esses dados ao seu canal do Slack para atualizar sua equipe de produto de que um pedido foi feito. Você também pode fazer isso quando receber um novo lead ou assinante.

Em termos técnicos, webhooks são retornos de chamada HTTP definidos pelo usuário que são acionados por um evento em um sistema de origem e enviados ao sistema de destino.

Isso significa que quando um evento ou gatilho ocorre em seu site, mensagens automáticas 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
• Automatize tarefas e reduza o tempo de administração
• Reduza o custo de usar serviços de conector como Zapier e Hubspot para processar dados em aplicativos.

Os webhooks são incrivelmente úteis para desenvolvedores e usuários do WordPress com experiência em tecnologia.

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]

Há muitas maneiras de usar webhooks para enviar seus envios de formulários do WordPress para outros aplicativos da web.

Usaremos o WPForms para este tutorial, pois ele oferece um complemento de Webhooks que é fácil para qualquer pessoa usar, incluindo iniciantes. Não há absolutamente nenhuma codificação envolvida.

WPForms é o melhor plugin construtor de formulários para sites WordPress. E o que você precisa saber é que ele oferece vários modelos pré-fabricados e campos de formulário prontos para uso que permitem criar todos os tipos de formulários do WordPress. Isso inclui pedido de produtos, registro, agendamento de consultas, 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 muito fácil. Ele possui vários complementos e integrações que você pode usar para se conectar a aplicativos de e-mail, pagamento e marketing.

Com o Webhooks Addon, você pode conectar facilmente seu WordPress a qualquer serviço ou aplicativo. Bastam alguns cliques para ativar esta funcionalidade.

Além disso, o WPForms permite que você use regras condicionais para acionar uma ação de webhook com base na resposta do formulário do usuá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 vários aplicativos e serviços. Para este tutorial, mostraremos como se conectar ao Slack. Mas lembre-se, você também pode usar as mesmas etapas para se conectar a outros aplicativos e endpoints.

Etapa 1: criar 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 de 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. Então, para se conectar ao Slack, você precisará criar um aplicativo Slack (a ponte).

Se você é novo nisso, não se preocupe, é muito fácil e vamos orientá-lo 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 princípio
• De um manifesto de aplicativo.

Aqui, vamos criar um aplicativo Slack do zero. Parece muito trabalho, mas realmente leva apenas alguns cliques.

Em seguida, você verá o pop-up onde poderá adicionar o nome do aplicativo e escolher seu local de trabalho do Slack. Quando terminar, clique em Criar aplicativo .

Isso abre a página de 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 postar mensagens no Slack de serviços externos.

Uma vez ativado, você verá a seção URLs de Webhooks para seu espaço de trabalho na página.

Agora, você precisa criar um novo webhook para obter informações do seu formulário do WordPress. Então, clique no botão Add New Webhook to Workspace .

Em seguida, você pode ver o pop-up onde pode selecionar um canal do Slack para postar seus envios de formulário.

Após escolher um canal do Slack, clique em Permitir .

Agora, você poderá ver o novo URL do webhook do seu aplicativo Slack.

Tudo o que você precisa fazer agora é copiar o URL do Webhook. Você precisará dele alguns passos depois.

Etapa 2: instalar e ativar o WPForms

Depois de ter o URL do seu webhook, você pode adicioná-lo ao seu formulário do WordPress.

Para começar, inscreva-se para uma conta no site WPForms.

Existe uma versão gratuita do plug-in, 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% livre de riscos para que você possa experimentar o serviço antes de se comprometer.

Depois de se inscrever, você encontrará o arquivo de download do plug-in 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, consulte nosso guia sobre como instalar um plugin do WordPress.

Depois de instalar e ativar o WPForms em seu site, você precisará inserir sua chave de licença para aproveitar todos os seus recursos e complementos premium.

Antes de começar a criar seu formulário, você precisa instalar o Webhooks Addon.

Para isso, vá para WPForms » aba Addons e você encontrará vários addons que ajudam a estender a funcionalidade de seus formulários do WordPress. Aqui, clique no botão Instalar Addon para Webhooks Addon.

Agora, você está pronto para criar seu formulário de webhook no WordPress.

Etapa 3: criar 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é-criados. Esses modelos vêm pré-preenchidos com os campos necessários com base na finalidade do seu formulário. A biblioteca de modelos inclui:

• Formulário de contato simples
• Solicite um formulário de cotação
• 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 de formulário de sugestão porque criamos um aplicativo Slack para feedback do usuário na etapa anterior. Sinta-se à vontade para escolher aquele que melhor se adapta ao que você precisa.

Tudo o que você precisa fazer é dar um nome ao seu formulário na parte superior da página. Em seguida, escolha qualquer modelo, dependendo de suas necessidades, ou escolha 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 para que você possa clicar em qualquer campo para editá-los. Ele permite que você altere os nomes dos campos, a descrição e as configurações mais avançadas.

Quando terminar de adicionar seus campos de 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 em seu formulário, você precisa navegar até a guia Configurações »Webhooks e clicar na opção Habilitar Webhooks .

Um novo webhook será criado e você poderá editar para configurar sua integração com o Slack.

Primeiro, você pode alterar o nome do webhook. Isso irá ajudá-lo a reconhecê-lo mais tarde.

Agora, lembre-se do URL do Webhook que você copiou do seu aplicativo Slack na Etapa 1? Você precisará colá-lo aqui na opção URL de solicitação . Isso permitirá que você conecte seu formulário do WordPress a outros serviços como o Slack.

Depois disso, você verá várias configurações para configurar seu webhook. Vamos discutir o que cada um faz e o que adicionar a esses campos aqui.

• Método de solicitação: permite que você escolha o tipo de conexão que deseja criar com o serviço conectado. Existem muitos tipos de métodos HTTP que você pode usar com base no tipo de conexão que deseja criar:
  • 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 no seu canal do Slack.
  • PUT : permite atualizar dados quando o webhook é executado.
  • PATCH : permite substituir dados quando o webhook é executado.
  • DELETE : permite excluir informações quando esse webhook específico é executado.
• Formato de solicitação: Esta opção mostrará ao servidor qual tipo de conteúdo você está enviando. Isso é um pouco técnico, mas basicamente existem dois tipos diferentes de formatos de solicitação disponíveis:
  • 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 nosso tutorial, não precisamos dessa opção, então vamos deixar em branco.
• Cabeçalhos de solicitação: envia valores específicos quando a solicitação é enviada ao aplicativo. Quando o webhook for executado, os campos serão gerados automaticamente. Vamos deixar este campo em branco também.
• Corpo da solicitação: para esta opção, você precisa configurar o tipo de mensagem e selecionar um campo para postar mensagens. Como os usuários estarão inserindo sugestões em formato de texto, definiremos a Chave como Texto . Em seguida, selecione o campo onde os usuários irão inserir sua mensagem.

Depois de concluir as configurações da solicitação de webhook, clique no botão Salvar .

Etapa 5: configurar notificações de formulário

Em seguida, você pode configurar notificações por e-mail para o formulário do WordPress. Isso permite que você envie e-mails automatizados para o administrador, qualquer membro da equipe e o cliente/usuário assim que enviarem o formulário.

Para configurar esses fluxos de trabalho de e-mail, vá para a guia Configurações » Notificações , marque a opção Ativar 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 de destinatários.

O WPForms também permite enviar 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 Smart Tags e selecionar Email . Com essa 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 marca inteligente {all_fields} para mostrar todos os dados de formulário inseridos pelo usuário.

Não se esqueça de salvar suas configurações no final.

Etapa 6: personalizar a mensagem de confirmação

O WPForms também permite que você exiba mensagens de confirmação no front-end do seu site depois que os usuários enviarem o formulário com sucesso.

Na guia Configurações »Confirmações , você verá as configurações de confirmação. Por padrão, o Tipo de Confirmação é definido como 'Mensagem', mas há 3 opções neste menu:

• Mensagem: adicione uma mensagem de confirmação que é exibida no frontend depois que os clientes enviam 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 correta.

Quando terminar as configurações, clique no botão Salvar .

Também devemos mencionar aqui que o WPForms permite que você se integre ao seu serviço de e-mail preferido, como Constant Contact e Mailchimp.

Você só precisa acessá-lo na guia 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ê também deseja conectar formulários on-line a um gateway de pagamento, pode aprender a fazer isso aqui: Como criar um formulário de pedido on-line

Tudo o que você precisa fazer agora é publicar seu formulário de webhook em seu site WordPress.

Etapa 7: publique o formulário de Webhooks em seu site

Para começar a enviar envios de formulários para serviços externos, você precisa publicar o formulário de webhook primeiro. Com o bloco personalizado 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. Portanto, navegue até a guia Páginas » Adicionar novo no painel de administração do WP. Na tela do editor de blocos, adicione um novo bloco e procure 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.

Então, 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 widget, como um rodapé ou barra lateral. Para fazer isso, vá até a aba Aparência » Widgets e arraste e solte o widget WPForms na barra lateral ou no menu de 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.

Assim, você pode usar WPForms para se conectar a diferentes aplicativos usando URLs de webhook. Você obtém controle total sobre os dados que deseja buscar e enviar para outros aplicativos.

Isso é tudo! 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 conectar-se 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.

Para as próximas etapas, você pode conferir estes recursos:

• Como adicionar a opção 'Salvar e continuar mais tarde' aos formulários do 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

Essas postagens ajudarão você a adicionar a funcionalidade salvar e retomar mais tarde em seus formulários do WordPress e reduzir as taxas de abandono de formulários. O último irá ajudá-lo a aumentar sua lista de e-mail marketing.