Cabeçalho principal para um tutorial: envio de dados de formulários WordPress para uma API via webhooks, com um avatar de urso e um ícone de API azul sobre fundo bege.

Como Enviar Dados de Formulários WordPress para Qualquer API Com Webhooks

O WPForms tem um addon para cerca de quarenta serviços. Mailchimp, Salesforce, Stripe, Google Sheets e o resto da pilha usual estão a uma tela de configuração de distância. O sistema de reservas interno do seu cliente não está.

O addon Webhooks cobre essa lacuna. Ele pega uma submissão de formulário e a envia como uma requisição HTTP para qualquer URL que você apontar, no formato que a API receptora espera. Este tutorial detalha a configuração: obtendo os detalhes do endpoint, mapeando seus campos, adicionando autenticação e testando antes que uma submissão real dependa disso.

Crie o Seu Formulário WordPress Agora

Como Enviar Dados de Formulários WordPress para Qualquer API Com Webhooks

Um visitante submete o seu formulário. O WPForms formata as respostas como uma requisição HTTP da maneira que a sua API deseja, adiciona o seu cabeçalho de autenticação e a envia. A sua entrada ainda é salva no WordPress de qualquer maneira.

Quando um Webhook é a Ferramenta Certa

Verifique primeiro se há um addon nativo. Mailchimp, Salesforce, Google Sheets, Notion, Airtable e cerca de quarenta outros conectam-se em alguns cliques, e essas conexões são mais profundas. Zapier, Make e n8n cobrem a cauda longa de aplicativos SaaS, com um custo por tarefa e mais uma conta na cadeia.

Os webhooks são para o resto: um sistema interno proprietário, um serviço regional, o backend personalizado de um cliente, um endpoint que você mesmo escreveu. Eles também não têm limite de transferência, pelo que um formulário que recebe 4.000 submissões por mês custa o mesmo que um que recebe 40.

O Que Vai Precisar

  • WPForms Elite (o addon Webhooks está incluído neste nível de licença)
  • Um formulário no seu site
  • A documentação da API recetora

Não escreverá nenhum código. Tudo isto acontece no construtor de formulários.

Captura de ecrã do painel de controlo das definições de Webhooks com Ativar Webhooks ativo e um formulário de Envio de API (URL, POST, JSON, segredo) e campos de cabeçalho/corpo.

Passo 1: Obtenha os Detalhes da API

Ignorar este passo é a razão pela qual a maioria dos webhooks falha na primeira tentativa. A partir da documentação da API, anote:

  1. O URL do endpoint, como https://api.example.com/v1/deliveries
  2. O método de pedido, geralmente POST para criar um registo
  3. O método de autenticação, geralmente uma chave num cabeçalho como Authorization: Bearer YOUR_KEY
  4. Os nomes exatos dos parâmetros. Se a API espera customer_email e você envia email, o pedido tem sucesso e o valor desaparece.

Exemplo em execução: um cliente florista cujo sistema de expedição de entregas recebe novas encomendas nesse endpoint via POST e espera customer_name, customer_email, customer_phone, arrangement, quantity e order_total. Não existe um plugin WordPress para ele, que é exatamente quando você recorre a um webhook.

Passo 2: Instale o Addon e Ative-o

Vá a WPForms » Addons, procure por Webhooks e clique em Instalar Addon. Ele ativa-se automaticamente.

Painel WPForms: Cartão do suplemento Webhooks ativado com descrição.

Em seguida, abra o seu formulário, clique em Definições » Webhooks e ative Ativar Webhooks.

Captura de ecrã da interface do utilizador de uma página de Definições mostrando a secção Webhooks com um interruptor Ativar Webhooks e uma grande seta vermelha rabiscada numa tela branca

Clique no ícone de lápis para o renomear para algo que reconhecerá mais tarde, como “API de Expedição”.

Passo 3: Defina o URL, Método e Formato da Requisição

Em seguida, configure estas definições:

URL do Pedido. Cole o endpoint. Preste atenção ao segmento da versão, pois /v1/ e /v2/ são fáceis de confundir.

Método do Pedido. GET, POST, PUT, PATCH ou DELETE. POST cria um novo registo e cobre a maioria das configurações.

Formato do Pedido. JSON envia application/json e serve para a maioria das APIs modernas. FORM envia application/x-www-form-urlencoded, portanto, use-o apenas quando a documentação o solicitar. Em caso de dúvida, JSON.

Captura de ecrã do editor de pedidos de API: mostra URL https://api.example.com/v1/deliveries, método POST, formato JSON, com um painel de navegação esquerdo escuro.

Passo 4: Adicione os seus Cabeçalhos de Autenticação

Finalmente, adicione os seus cabeçalhos de autenticação.

Cabeçalhos do Pedido aceita pares de chave/valor. Para um token de portador, use Authorization como chave e Bearer YOUR_TOKEN como valor. Para um cabeçalho personalizado, use o nome que a documentação indicar, como X-API-Key. Adicione quantas linhas precisar.

O campo Segredo funciona ao contrário, e o WPForms preenche-o para si. Ele assina cada pedido de saída para que o servidor recetor possa confirmar que os dados vieram realmente do seu site. Use-o quando você controla o endpoint e pode verificar a assinatura; a maioria das APIs de terceiros ignora-o.

Captura de ecrã de uma interface de programador: navegação esquerda (PDF, Inquéritos e Votações, Abandono de Formulário) e painel direito mostrando Cabeçalhos de Pedido com Autorização: Bearer sk_demo_1234567890

Trate o valor do cabeçalho como a credencial que é. Qualquer pessoa com acesso ao construtor pode lê-lo, portanto, limite as chaves de API do cliente e rote-as quando alguém sair do projeto.

Crie o Seu Formulário WordPress Agora

Passo 5: Mapeie os seus Campos do Formulário

O Corpo do Pedido é onde o formulário encontra a API. Cada linha associa um nome de parâmetro que você digita a um campo de formulário que você escolhe:

  • customer_name → Nome
  • customer_email → Email
  • customer_phone → Número de Telefone
  • arrangement → Arranjo
  • quantity → Quantidade
  • order_total → Total
Página Webhooks com navegação esquerda; formulário Corpo do Pedido listando nome_cliente, email_cliente, telefone_cliente, arranjo, quantidade, total_encomenda.

Copie os nomes das chaves diretamente da documentação. A capitalização e os underscores importam, e uma incompatibilidade resulta num pedido que é bem-sucedido, mas descarta o valor.

Caixas de seleção, seleções múltiplas e campos de endereço enviam valores separados por um duplo pipe (||), por isso divida essa string no lado do servidor se a API esperar um array.

Escolha Adicionar Valor Personalizado para enviar algo que não seja um campo de formulário, como um parâmetro source estático ou uma tag inteligente para o ID da entrada.

Passo 6: Adicione Lógica Condicional (Opcional)

Ative Ativar Lógica Condicional para controlar quando o webhook é acionado. Você pode enviar apenas um tipo de arranjo para a API de despacho, ou reter pedidos que não necessitam de entrega. Para dois destinos, clique em Adicionar Novo Webhook e dê a cada um a sua própria regra.

Painel de administração: Definições de Webhooks com lógica condicional ativada; a regra verifica se o Arranjo é igual a Bouquet de Rosas, com uma opção Adicionar Novo Grupo e um botão de ação flutuante.

Passo 7: Teste Antes de Entrar no Ar

Teste em duas passagens.

Primeiro, envie para um inspetor de pedidos. Webhook.site e RequestBin geram um URL temporário que mostra exatamente o que chegou. Cole-o em URL do Pedido, salve e envie o formulário. Os seus cabeçalhos e carga útil aparecem imediatamente, o que lhe diz se os nomes das chaves estão corretos.

Depois, mude para o endpoint real, envie novamente e confirme que o registo aterrou. Verifique também WPForms » Entradas.

Se estiver preso, vá a WPForms » Ferramentas » Logs, ative Ativar Logs e verifique Provedores e Erros em Tipos de Log. Envie novamente e o log mostrará a resposta da API. Desative o registo depois, pois essas entradas podem conter dados que você não quer que fiquem no servidor.

Definições de Registo do WPForms na administração do WordPress com o interruptor Ativar Registos e o botão Guardar Definições.

Erros Comuns de Webhook

  • 401 ou 403. Autenticação: chave errada, chave expirada, prefixo Bearer em falta, ou nome de cabeçalho errado.
  • 404. O URL: erro de digitação, segmento de versão em falta, ou uma barra final que a API rejeita.
  • 400 ou 422. A API recebeu o pedido e rejeitou o conteúdo, geralmente um parâmetro obrigatório em falta ou uma data não analisável.
  • 200 mas nada aparece. Incompatibilidade do nome da chave: a API aceitou o pedido e ignorou os campos que não reconheceu.
  • Nada dispara. Verifique a lógica condicional: em formulários de várias páginas, o webhook é executado uma vez, após o envio final.

FAQs Sobre Envio de Dados de Formulários WordPress para uma API

Qual plano do WPForms inclui o addon Webhooks?

Elite. Esse nível também cobre Salesforce, Authorize.Net, ActiveCampaign e Airtable, que é por isso que é onde as agências que fazem trabalho de integração personalizado geralmente aterram.

Preciso saber programar para usar webhooks?

Não. Tudo acontece no construtor do WPForms. Você só precisa de ler a documentação da API o suficiente para encontrar o seu URL, método de autenticação e nomes de parâmetros.

Qual é a diferença entre webhooks e os addons Zapier ou Make?

Zapier e Make situam-se entre o seu formulário e o destino, proporcionando fluxos de trabalho de múltiplos passos e um grande catálogo de conexões por um custo por tarefa. Um webhook vai diretamente para o ponto final, funciona com qualquer API e não mede as submissões.

Um formulário pode enviar dados para mais de uma API?

Sim. Clique em Adicionar Novo Webhook e configure a segunda conexão com o seu próprio URL, cabeçalhos e mapeamento. Cada um pode ter a sua própria lógica condicional.

Como envio uma chave de API com os dados do meu formulário?

Adicione-a em Cabeçalhos de Requisição como um par chave/valor. A maioria das APIs quer Autorização e Bearer SUA_CHAVE, embora algumas usem um nome personalizado como X-API-Key.

O que acontece se a API estiver inativa quando alguém submete o meu formulário?

A submissão ainda é concluída e a sua entrada e notificações são processadas, pois o webhook é uma solicitação separada. Apenas o webhook falha, portanto adicione monitoramento no lado do receptor para qualquer coisa crítica para o negócio.

Em seguida, Encaminhe as suas Submissões para o Lugar Certo Automaticamente

Com a ligação API a funcionar, a próxima etapa é o encaminhamento em torno dela, para que os pedidos de orçamento, as perguntas de suporte e as inscrições na newsletter vão cada um para um local diferente por conta própria. Como Encaminhar Submissões de Formulários para Diferentes Listas e Ferramentas com Base nas Respostas tem o guia.

Crie o Seu Formulário WordPress Agora

Pronto para construir 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.

Divulgação: O nosso conteúdo é suportado pelo leitor. Isto significa que se clicar em alguns dos nossos links, poderemos ganhar uma comissão. Veja como o WPForms é financiado, porque é importante e como pode apoiar-nos.

Kacie Cooper

Kacie escreve para o blog e supervisiona o boletim semanal no WPForms, e também tem um ponto fraco para criar modelos de formulários divertidos. Ela escreve em blogs sobre WordPress e sobre o assunto desde 2016. Saber Mais

O Melhor Plugin Construtor de Formulários Drag and Drop para WordPress

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