Como Lidar com Envios de Formulários do Webflow Sem um Backend Personalizado

O formulário de contato do Webflow tem uma aparência excelente por padrão, mas a plataforma só envia os dados do envio por e-mail para o proprietário do site - ela não armazena as entradas em um banco de dados, não se conecta ao seu CRM e não executa nenhuma lógica personalizada. Se você precisa de mais do que uma simples notificação por e-mail, é necessário rotear os envios do seu formulário Webflow por um serviço externo. A boa notícia é que dá para fazer isso sem escrever uma única linha de código no backend.

O que o Webflow oferece por padrão

O handler de formulários nativo do Webflow faz três coisas: envia uma notificação por e-mail ao proprietário do site, exibe uma mensagem de sucesso e registra os envios no painel do Webflow (nos planos pagos). Isso é suficiente para formulários de contato simples em sites pequenos, mas começa a falhar rapidamente quando você precisa de qualquer um dos seguintes recursos:

• Respostas automáticas para quem preencheu o formulário
• Envios encaminhados para uma caixa de entrada específica da equipe ou para um CRM
• Lógica condicional (por exemplo, rotear leads por interesse de produto)
• Filtragem de spam além do honeypot básico do Webflow
• Um registro de entrega confiável com timestamps e novas tentativas

Nenhum desses recursos está disponível nativamente. Você precisa de uma camada externa, e há três formas realistas de adicionar uma.

Integrações nativas - Zapier e Make

O Webflow tem integração direta com o Zapier e com o Make (antigo Integromat). Quando um novo envio de formulário chega, o trigger é disparado e você pode encadear qualquer ação: adicionar uma linha no Google Sheets, criar um contato no HubSpot, enviar uma mensagem no Slack, e assim por diante.

Esse é o caminho sem código que a maioria dos designers escolhe primeiro. A configuração funciona assim:

1. No Webflow, vá em Configurações do projeto > Integrações e conecte sua conta do Zapier.
2. No Zapier, crie um novo Zap com Webflow - New Form Submission como trigger.
3. Selecione o formulário específico pelo nome.
4. Adicione a etapa de ação (Gmail, Slack, Airtable, etc.).
5. Teste com um envio real e ative o Zap.

O Make é mais barato para fluxos de trabalho complexos, mas ambas as plataformas adicionam uma dependência: se o Zapier ou o Make ficar fora do ar, ou se sua conta atingir o limite, os envios falham silenciosamente ou ficam na fila.

Usando um webhook do Webflow

Um webhook do Webflow é uma rota mais direta. O Webflow dispara um HTTP POST para uma URL que você especifica toda vez que um formulário é enviado. Você controla o endpoint receptor, então pode fazer qualquer coisa com o payload.

Para configurar um:

1. Vá em Configurações do projeto > Integrações > Webhooks no Webflow.
2. Clique em Adicionar webhook e escolha o trigger Envio de formulário .
3. Cole a URL do endpoint do seu serviço receptor.
4. Salve e teste com um envio real.

O payload que o Webflow envia é um objeto JSON contendo todos os valores dos campos, o nome do formulário e metadados do site. Um payload típico tem esta aparência:

{
  "name": "Contact Form",
  "site": "my-webflow-site",
  "data": {
    "Name": "Jane Smith",
    "Email": "[email protected]",
    "Message": "Hi, I'd like a quote."
  },
  "submittedAt": "2024-11-15T10:22:00Z"
}

O problema: você precisa de algo para receber esse webhook. As opções incluem um pequeno Cloudflare Worker , um fluxo de trabalho no Pipedream ou um backend de formulários dedicado. Escrever seu próprio receptor é exatamente o problema de "backend personalizado" que este artigo tenta ajudar você a evitar. É aí que os serviços de formulário para e-mail se tornam a solução mais limpa.

Substituindo o endpoint do formulário por um serviço dedicado

Em vez de usar o handler de formulários do Webflow, você pode apontar o atributo action do seu formulário para um serviço de formulários de terceiros. O serviço recebe o POST, valida os dados, filtra spam e envia os resultados por e-mail para você. Nenhum backend necessário do seu lado.

O fluxo de trabalho no Webflow é:

1. No Webflow Designer, selecione o elemento de formulário.
2. No painel Configurações do formulário , defina o campo Ação com a URL do endpoint do seu serviço de formulários (por exemplo, https://sendform.net/!your-form-id ).
3. Defina o Método como POST .
4. Certifique-se de que cada campo de entrada tem o atributo name - o Webflow define isso por padrão.
5. Publique o site e teste um envio.

Essa abordagem ignora completamente o handler de formulários do Webflow. O envio vai direto do navegador do visitante para o serviço de formulários. Você recebe o e-mail, o serviço cuida das novas tentativas e do filtro de spam, e o Webflow funciona apenas como camada de interface.

Esse mesmo padrão funciona para qualquer site estático ou sem código. Se você também hospeda no GitHub Pages ou no Cloudflare Pages, o artigo sobre como hospedar um site estático de graça com formulários de contato funcionando cobre exatamente a mesma abordagem.

Sendform vs. as alternativas

Vários serviços de formulários funcionam com o Webflow. Veja como as principais opções se comparam nos aspectos que realmente importam para um formulário de contato:

O Sendform se destaca por alguns motivos concretos que vão além do que cabe em uma tabela:

• Configuração sem fricção: Você obtém uma URL de endpoint para o formulário sem precisar criar uma conta primeiro. Cole no campo de ação do Webflow e está feito.
• Sem armazenamento de envios por padrão: O Sendform envia os dados por e-mail e não os retém em seus servidores, o que é o padrão correto para conformidade com o GDPR. Concorrentes como o Formspree armazenam todos os envios no painel deles, o que significa que os dados dos seus usuários ficam em um servidor de terceiros por tempo indefinido.
• Amigável para desenvolvedores, mas utilizável sem código: Ao contrário do Zapier, não há fluxo de trabalho para manter. Ao contrário do Netlify Forms, não está vinculado a um provedor de hospedagem específico - funciona com Webflow, GitHub Pages ou qualquer outro host.
• Plano gratuito honesto: Sem barreiras ocultas do tipo "faça upgrade para desbloquear redirecionamentos", que outros serviços usam para empurrar você para planos pagos.

Qual abordagem escolher?

A resposta certa depende do que você realmente precisa após o envio do formulário:

• Apenas notificações por e-mail: Use o Sendform. Cole a URL do endpoint no campo de ação do Webflow e pronto em dois minutos.
• E-mail + sincronização com CRM ou planilha: Use o Sendform para o envio por e-mail e, opcionalmente, adicione uma etapa no Zapier disparada pelo e-mail recebido, ou use a saída via webhook do Sendform, se disponível no seu plano.
• Automação complexa com múltiplas etapas: Um webhook do Webflow integrado ao Make ou ao Zapier faz sentido aqui, mas preveja o custo do plano pago.
• Você já usa a Netlify: O Netlify Forms funciona bem para casos simples, mas você vai atingir o limite de 100 envios/mês rapidamente em qualquer site ativo.

Para a grande maioria dos formulários de contato no Webflow - um campo de nome, e-mail e mensagem que precisa chegar de forma confiável à sua caixa de entrada - o Sendform é o caminho mais rápido e mais limpo. Sem backend, sem limites de tarefas mensais para monitorar e sem dados de envio armazenados em um painel de terceiros que você esqueceu de excluir.

Gerencie seu formulário de contato no Webflow sem escrever um backend

O Sendform oferece um endpoint de formulário pronto para uso que você cola diretamente no campo de ação do Webflow - os envios do seu formulário chegam à sua caixa de entrada instantaneamente, com filtro de spam e configurações compatíveis com o GDPR já incluídas.

Experimente o Sendform gratuitamente →