Gostaria de enviar dados dos seus formulários do WordPress para um aplicativo ou plug-in de terceiros? Com o complemento WPForms Webhooks, você pode conectar seus formulários a um serviço secundário.
Este tutorial mostrará a você como instalar e usar o complemento Webhooks com o WPForms.
Requisitos:
- Você precisará de um nível de licença Elite para acessar o complemento Webhooks
- Certifique-se de que você instalou a versão mais recente do WPForms para atender à versão mínima exigida para o complemento Webhooks
O que são webhooks?
Um webhook permite que você envie automaticamente informações do seu formulário para algum outro serviço ou ferramenta fora do seu site WordPress. Isso é especialmente útil se você precisar de uma integração, mas ainda não houver um complemento disponível para isso.
A maneira mais fácil para iniciantes de configurar um webhook é por meio do nosso complemento Zapier. O Zapier é excelente para todos os níveis de usuário porque usa uma configuração no estilo de assistente, que o orienta em todas as etapas necessárias para conectar seus formulários a um serviço separado.
Outra opção é a nossa integração com o Uncanny Automator. Esse recurso permite que você faça conexões entre aplicativos e serviços compatíveis.
Para usuários mais avançados, o complemento Webhooks oferece recursos semelhantes sem nenhum serviço de conector. No entanto, como contrapartida, o processo de configuração é mais técnico.
Instalando o complemento Webhooks
Antes de começar, primeiro você precisa ter certeza de que o WPForms está instalado e ativado no seu site WordPress.
Depois que o WPForms estiver instalado e sua licença for verificada, você poderá instalar e ativar rapidamente o complemento Webhooks.
Configuração de um webhook
Quando o processo de instalação estiver concluído, você estará pronto para configurar o webhook. Para começar, você precisará criar um novo formulário ou editar um já existente.
Depois de abrir o construtor de formulários, você pode ativar os webhooks em Settings " Webhooks. Aqui, ative a opção Ativar webhooks.
Isso abrirá mais configurações que podem ser definidas, inclusive o nome do webhook.
Por padrão, os novos webhooks não terão nome. Se você quiser editar ou adicionar um nome ao webhook, clique no ícone de lápis.
Além disso, se quiser adicionar mais webhooks, você pode clicar no botão Add New Webhook e preencher as configurações para cada conexão adicional.
Abaixo do nome do webhook, você verá todas as configurações disponíveis para essa conexão. A seguir, descrevemos o que cada uma delas faz.
URL de solicitação
A URL de solicitação será usada para conectar o WPForms a um aplicativo secundário. Normalmente, você pode obter esse URL da API do serviço ou da ferramenta depois de configurar uma conexão básica.
Método de solicitação
O Request Method permite que você selecione o método HTTP que deseja usar quando a solicitação do webhook for executada.
Há vários métodos diferentes para escolher, com base no tipo de conexão que você deseja criar:
- GET: O método GET obterá informações de um formulário enviado e enviará os detalhes para um aplicativo conectado.
- POST: O método POST pegará as informações enviadas pelo WPForms e as enviará para um serviço secundário.
- PUT: O método PUT permite que você atualize os dados quando o webhook é executado.
- PATCH: O método PATCH permite que você substitua os dados quando o webhook é executado.
- DELETE: o método DELETE permite que você exclua informações quando esse webhook específico for executado.
Formato da solicitação
O Request Format comunicará ao seu servidor que tipo de dados está sendo enviado pelo webhook. Isso também definirá o valor do cabeçalho Content-Type para seus dados.
Há dois tipos diferentes de formato de solicitação disponíveis:
- JSON: O método JSON formatará seus dados em um formato
application/jsone definirá o tipo de conteúdo comocharset=utf-8. - FORMULÁRIO: O método FORM formatará seus dados em um formato
application/x-www-form-urlencodede definirá o tipo de conteúdo comocharset=utf-8.
Observação: Normalmente, os dados são enviados no formato JSON, pois isso facilitará as alterações no lado do servidor (incluindo validação, formatação e alterações de sanitização)
Secreto
A chave secreta gerará um hash (ou ID exclusivo) para cada solicitação concluída. Isso funciona como uma assinatura para verificar a origem de sua solicitação HTTP e sempre será fornecido no cabeçalho da solicitação.
Observação: na maioria dos casos, se você estiver integrando seus formulários a um serviço de terceiros, não precisará preencher a configuração Secret. A configuração Secret destina-se a desenvolvedores que se integram com suas próprias APIs como forma de verificar a origem de uma solicitação.
Cabeçalhos de solicitação
Os cabeçalhos de solicitação permitem que você defina a(s) chave(s) e o(s) valor(es) do cabeçalho HTTP a serem enviados com a solicitação do webhook.
Observação: essa configuração é especialmente útil se você estiver tentando passar uma chave de API no cabeçalho HTTP para solicitações autenticadas. Você pode preencher sua própria chave de API usando o campo oculto do WPForms .
Corpo da solicitação
Semelhante aos Cabeçalhos da solicitação, a configuração Corpo da solicitação permite que você defina a(s) chave(s) e o(s) valor(es) que serão enviados no corpo da solicitação do webhook.
Observação: para separar vários valores em campos como Endereço, Menu suspenso, Caixas de seleção etc., o WPForms usa duas barras verticais (assim: ||).
Exemplo: Usando webhooks para conectar o WPForms ao Slack
Observação: para uma integração mais amigável com o Slack, recomendamos usar nosso complemento dedicado do Slack, que oferece configuração mais fácil e mais recursos. Consulte o nosso guia do complemento do Slack para obter mais detalhes.
Como exemplo, vamos orientá-lo sobre como conectar o WPForms à sua conta do Slack usando um webhook.
Observação: este exemplo mostra como enviar um único campo de formulário para o Slack. Se você quiser enviar vários campos para o Slack, consulte nossa documentação para desenvolvedores para obter mais detalhes.
Como criar seu aplicativo Slack
Primeiro, você precisará navegar até a página da API do Slack. Em seguida, clique no botão Criar um aplicativo.
Isso abrirá uma sobreposição na qual você precisará selecionar como deseja configurar o aplicativo. Escolha a opção Do zero.
Em seguida, você poderá nomear seu aplicativo e selecionar para qual workspace deseja enviar os dados do formulário. No nosso exemplo, chamaremos o aplicativo de Contact Sullie. Clique no botão Create App para continuar.
Isso o levará a uma página com algumas informações básicas sobre seu aplicativo. Role para baixo até as configurações de Adicionar recursos e funcionalidades e ative a opção Incoming Webhooks.
Depois de ativar a configuração Incoming Webhooks, alterne a opção Activate Incoming Webhooks para On. Isso abrirá mais detalhes na parte inferior da página.
Abaixo da seção Webhook URLs for Your Workspace, clique no botão Add New Webhook to Workspace.
Isso o redirecionará para outra sobreposição, na qual você precisará selecionar um canal do Slack para enviar suas mensagens. Escolha um canal no menu suspenso e clique em Permitir.
Isso o levará de volta à página anterior. Você verá um novo URL na seção Webhook URLs for Your Workspace. Vá em frente e copie esse URL, pois você o usará na próxima etapa.
Não se esqueça de manter essa guia ou janela do navegador aberta, pois você precisará das informações dessa área mais tarde.
Como adicionar seu webhook do Slack a um formulário
Em seguida, você precisará abrir o formulário em que usará o webhook. Caso ainda não o tenha feito, certifique-se de configurar o complemento Webhooks no WPForms.
Depois de ativar os webhooks para seu formulário, cole a URL que você copiou do Slack no campo Request URL (URL de solicitação ) para conectar seu formulário à API do Slack.
Em seguida, defina o restante das configurações do webhook. Apresentamos abaixo todas as nossas configurações para este exemplo:
- Método de solicitação: Como queremos enviar dados de nossos formulários para o Slack, definiremos o método de solicitação como a opção POST.
- Formato da solicitação: Definiremos o formato da solicitação como JSON padrão.
- Secret: para o nosso exemplo, deixaremos o campo Secret em branco e permitiremos que ele seja gerado automaticamente quando o webhook for executado. Se você for um desenvolvedor e quiser inserir seu próprio valor de segredo, poderá fazê-lo aqui.
- Request Headers (Cabeçalhos da solicitação): Não temos nenhum valor específico que precisamos enviar com nossa solicitação, portanto, deixaremos a configuração Request Headers em branco. Quando o webhook for executado, o segredo gerado automaticamente será colocado aqui.
- Corpo da solicitação:
- Key (Chave): Insira texto no campo Request Body parameter key (chave do parâmetro Request Body), pois o formulário enviará informações em texto simples. Se não inserir texto como valor desse campo, provavelmente ocorrerá um erro em sua conexão.
- Selecionar campo: A configuração Select Field (Selecionar campo) será o nome do campo cujos dados você gostaria de enviar. No nosso exemplo, enviaremos os dados do campo Comentário ou Mensagem para o Slack.
Lembre-se de salvar suas alterações antes de sair do construtor de formulários. Também recomendamos testar o formulário para garantir que o webhook esteja funcionando corretamente depois de configurado.
Adição de lógica condicional (opcional)
A lógica condicional permite que você escolha se uma ação será executada ou não com base nas escolhas do usuário no formulário.
Como exemplo, mostraremos como você pode usar a lógica condicional para enviar uma mensagem ao Slack se um usuário enviar uma entrada ao nosso formulário de contato com uma mensagem que contenha a palavra "Ajuda".
Para configurar isso, você precisará garantir que seu formulário tenha um campo Single Line Text ou Paragraph Text. Para o nosso exemplo, adicionaremos um campo de texto de parágrafo.
Em seguida, você precisará ajustar o rótulo do campo de entrada de mensagem. Em nosso exemplo, adicionaremos o rótulo Comentário ou Mensagem.
Em seguida, você precisará configurar sua lógica condicional. Na parte inferior das configurações do webhook do Slack, ative a opção Enable Conditional Logic (Ativar lógica condicional ) para revelar os menus suspensos para criar sua regra.
Em seguida, adicione a regra para sua lógica condicional. Para o nosso exemplo, definiremos os menus suspensos para ler: Send this webhook if Comment or Message contains help( Enviar este webhook se o comentário ou a mensagem contiver ajuda).
Observação: Precisa de ajuda para configurar sua regra de lógica condicional? Nosso tutorial para iniciantes sobre o uso da lógica condicional no WPForms tem todos os detalhes.
Como sempre, lembre-se de salvar seu formulário antes de deixar o construtor.
Perguntas frequentes
Essas são algumas das principais perguntas que recebemos relacionadas ao complemento Webhooks.
Como posso usar as Smart Tags no cabeçalho e no corpo da solicitação?
As Smart Tags podem ser usadas para inserir dinamicamente informações no cabeçalho e no corpo da solicitação de seu formulário.
Para usar as Smart Tags, selecione Add Custom Value (Adicionar valor personalizado ) no menu suspenso Request Headers (Cabeçalhos de solicitação) das configurações do webhook e, em seguida, adicione a Smart Tag como a chave do parâmetro. Você pode repetir a mesma etapa para a configuração Request Body.
Para obter uma lista completa das Smart Tags que podem ser usadas, não deixe de conferir todas as Smart Tags disponíveis no WPForms.
É isso aí! Agora você sabe como configurar o complemento Webhooks para o WPForms.
Em seguida, você está procurando uma maneira de transferir facilmente seus WPForms de um site para outro? Confira nosso tutorial sobre como importar e exportar seus formulários.