Formulários do Framer: quando adicionar um backend de formulários, e como

Os formulários nativos do Framer enviam cada resposta para e-mail, Google Sheets ou um webhook, com proteção contra spam embutida, então para uma caixa de entrada ou uma planilha talvez você não precise de mais nada. Adicione o Ikiform como destino de webhook quando quiser cada envio armazenado com status de spam, validado contra os seus campos, enviado por e-mail à equipe e encaminhado para vários webhooks assinados. Como o Framer envia a partir dos servidores dele, afrouxe as verificações de origem do formulário ou coloque no meio um pequeno relay que verifica a assinatura do Framer.

O que muda no Framer

O Framer é o único criador deste guia sem um limite do qual escapar. Os formulários dele podem enviar para e-mail, Google Sheets ou qualquer webhook, e o Framer tem proteção contra spam embutida que marca ou bloqueia envios suspeitos. Os webhooks dele são assinados: cada requisição traz um header Framer-Signature, um HMAC-SHA256 do corpo e do id do envio, e um Framer-Webhook-Submission-Id. O Framer tenta de novo até cinco vezes quando o seu endpoint não responde 2xx, e não segue redirecionamentos.

Então seja honesto sobre por que você adicionaria um backend de formulários. Veja o que cada lado cobre:

Se a primeira linha é tudo de que você precisa, fique com os destinos do Framer. O resto desta página é para quando não é.

O porém: o Framer envia a partir dos servidores dele

Um destino de webhook significa que os servidores do Framer enviam o post, não o navegador do visitante. Três coisas mudam do lado do Ikiform:

• Sem origem. Envios de servidor não trazem header Origin, então com Allowed domains configurado, todo envio é tratado como vindo do site errado.
• Endereços IP compartilhados. O Ikiform conta os limites de taxa por endereço IP, e todo envio vem de alguns poucos endereços do Framer em vez dos endereços dos seus visitantes.
• Sem honeypot. O Framer envia os inputs que você montou e nada mais, e o formulário dele não consegue rodar a verificação humana do Ikiform.

Você pode aceitar isso, ou resolver com um relay. Os dois caminhos estão abaixo.

Opção 1: o Ikiform como webhook

1. No Framer, dê a cada input um nome em minúsculas: name, work_email, company, team_size. O Framer usa os nomes como chaves do JSON.
2. Selecione o formulário e, ao lado de Send To, escolha Add… > Webhook. Cole o seu endpoint. Deixe o segredo vazio; o Ikiform não confere Framer-Signature.
3. Nas configurações do formulário no Ikiform, deixe Allowed domains vazio, deixe o Spam check desligado e defina Rate limit como Relaxed.
4. Publique. O Framer só envia webhooks a partir do site publicado.

https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx

O Ikiform responde 201 assim que o envio é armazenado, o que o Framer conta como entregue. Um 422 validation_failed falha do mesmo jeito nas cinco tentativas, então corrija os nomes dos inputs em vez de esperar. A pontuação de spam continua rodando em todo envio: links, frases de spam, endereços descartáveis e repetições.

Opção 2: um relay assinado

Publique um Cloudflare Worker que confere a assinatura do Framer e encaminha os envios válidos com a sua chave secreta. Aí o formulário do Ikiform pode listar o seu domínio do Framer em Allowed domains com Reject, e tudo que não for um navegador no seu site ou o seu Worker é recusado.

interface Env {
  FRAMER_SECRET: string;
  IKIFORM_SECRET_KEY: string;
}

const ENDPOINT = "https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx";
const encoder = new TextEncoder();

async function signatureFor(secret: string, body: ArrayBuffer, submissionId: string) {
  const key = await crypto.subtle.importKey(
    "raw",
    encoder.encode(secret),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["sign"],
  );
  const id = encoder.encode(submissionId);
  const message = new Uint8Array(body.byteLength + id.byteLength);
  message.set(new Uint8Array(body), 0);
  message.set(id, body.byteLength);
  const digest = new Uint8Array(await crypto.subtle.sign("HMAC", key, message));
  return `sha256=${[...digest].map((byte) => byte.toString(16).padStart(2, "0")).join("")}`;
}

function sameText(a: string, b: string) {
  const left = encoder.encode(a);
  const right = encoder.encode(b);
  return left.byteLength === right.byteLength && crypto.subtle.timingSafeEqual(left, right);
}

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    if (request.method !== "POST") return new Response(null, { status: 405 });
    const signature = request.headers.get("framer-signature") ?? "";
    const submissionId = request.headers.get("framer-webhook-submission-id") ?? "";
    const body = await request.arrayBuffer();
    if (!submissionId || !sameText(signature, await signatureFor(env.FRAMER_SECRET, body, submissionId))) {
      return new Response("Bad signature", { status: 401 });
    }

    const response = await fetch(ENDPOINT, {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Bearer ${env.IKIFORM_SECRET_KEY}`,
        "Idempotency-Key": submissionId,
      },
      body,
    });
    if (response.ok) return new Response(null, { status: 204 });
    return new Response(await response.text(), { status: response.status });
  },
};

Publique

npx wrangler secret put FRAMER_SECRET
npx wrangler secret put IKIFORM_SECRET_KEY
npx wrangler deploy

• FRAMER_SECRET é o segredo que você define no destino de webhook do Framer. O Framer exige pelo menos 32 caracteres e não o mostra de novo, então gere, guarde e cole nos dois lugares.
• IKIFORM_SECRET_KEY é uma chave de API secreta do painel do Ikiform. Nunca a coloque no Framer.
• A assinatura é sha256= mais o HMAC em hex do corpo bruto seguido do id do envio. Leia o corpo uma vez como bytes e use esses mesmos bytes na verificação e no encaminhamento.
• Idempotency-Key faz uma nova tentativa do Framer repetir a primeira resposta do Ikiform em vez de armazenar um duplicado. As chaves ficam guardadas por 24 horas.
• O Worker repassa o status do Ikiform. O Framer tenta de novo qualquer resposta que não seja 2xx, até cinco vezes, então um 429 ou 5xx ganha outra chance, enquanto um 422 falha do mesmo jeito toda vez até você corrigir os nomes dos inputs.

Depois aponte o webhook do Framer para a URL do Worker em vez do endpoint, com o segredo preenchido.

Opção 3: dispense o formulário do Framer

Um code component renderiza um formulário de verdade e envia a partir do navegador do visitante, então verificações de origem, o honeypot e os limites de taxa por visitante funcionam como em qualquer site. Você perde a edição visual de formulários do Framer para esse formulário. O guia do Framer na documentação traz o componente.

Confira se funciona no Framer

1. Publique o site do Framer e envie o formulário lá, não no preview do editor.
2. Abra Submissions no painel. O novo envio está lá com todos os campos que você enviou.
3. Confira se os nomes dos campos batem exatamente com os nomes dos inputs, sem chaves adicionadas pelo Framer.
4. Para o relay: envie uma requisição ao Worker com um Framer-Signature inventado e confirme que ele responde 401.
5. Para o relay: nos detalhes do envio, a origem está vazia e o status é recebido, não spam.
6. Confira a caixa de entrada de cada destinatário das notificações. Cada um recebe um e-mail com os campos, e Reply vai para quem enviou quando o formulário tem um campo email.
7. Se você adicionou um webhook, abra o endpoint em Webhooks. A entrega mostra succeeded com a resposta do seu servidor.

Pegadinhas

Perguntas