Como passo o nome e o e-mail do formulário para o Calendly ou o Cal.com?

Adicione-os à query string do link de agendamento, como ?name=Ada%20Lovelace&email=ada%40example.com. Monte a URL no seu próprio código depois que o backend de formulários responder ok e mande o navegador para lá.

Por que não mandar as pessoas direto para a página de agendamento, sem formulário?

Muitos visitantes abrem um agendador e saem sem agendar, e o agendador só registra quem agenda. Um formulário curto antes significa que a sua equipe tem todos os pedidos, com um endereço de reply-to, e pode dar sequência a quem não escolheu um horário.

Posso usar _redirect para mandar as pessoas para a minha página de agendamento?

Só para uma URL fixa em um dos domínios permitidos do formulário, e ela não pode incluir o que o visitante digitou. Para preencher o formulário de agendamento, monte a URL no script da sua página ou na sua server action.

O formulário de demonstração pode recusar Gmail e outros endereços gratuitos?

Não há lista de bloqueio nativa. A opção de domínios permitidos do campo de e-mail só aceita os domínios listados, o que serve para formulários internos. Aceite todos os endereços e marque os pedidos de e-mail gratuito no seu relay ou CRM.

Formulário de captação de leads

25 de outubro de 2026Formulário de captação de leads6 min de leitura

Monte um formulário de pedido de demonstração que agenda a reunião

Um formulário de agendar demonstração que armazena o lead e depois manda o visitante para o Cal.com ou o Calendly com nome e e-mail já preenchidos.

Preet SutharFundador, Ikiform

Envie o pedido de demonstração primeiro a um backend de formulários, para que o lead fique armazenado e a sua equipe receba o e-mail mesmo que o visitante nunca escolha um horário. Depois mande o navegador para a sua página de agendamento com name e email na query string, que o Calendly e o Cal.com usam para preencher o formulário deles. Mande equipes pequenas para outro lugar, como um tour gravado, para que a sua agenda fique com reuniões que podem fechar negócio.

O que muda num pedido de demonstração

Quem pede uma demonstração quer um horário na agenda, não uma troca de e-mails. Cada rodada de "terça serve?" é uma chance de a pessoa agendar com um concorrente. Então a missão do formulário é curta: captar o suficiente para qualificar e colocar uma agenda na frente da pessoa enquanto a aba ainda está aberta.

Três restrições definem a construção:

O lead precisa estar armazenado antes de o agendador abrir. Muitos visitantes abrem a página de agendamento e a fecham. Se o único registro deles fica no agendador, esses leads se perdem. Envie ao Ikiform primeiro e redirecione só em caso de sucesso.
O _redirect não consegue levar o que a pessoa digitou. Ele é uma URL fixa, e o Ikiform só o segue para uma URL https: em um dos seus Allowed domains. Adicionar cal.com ou calendly.com ali também deixaria passar envios vindos desses sites. Monte o link de agendamento no seu próprio código.
Nem todo pedido merece uma reunião ao vivo. Um fundador solo pedindo demonstração de um produto para equipes fica mais bem atendido com um tour e um link de cadastro. Uma pergunta de escolha fixa decide para onde o navegador vai em seguida.

A ramificação roda no seu código, depois que o Ikiform já tem o lead. A equipe recebe todos os pedidos de qualquer forma, então uma equipe pequena que deveria ter tido uma reunião continua visível.

Quatro campos, um deles para roteamento

Campo	Tipo	Por quê
`name`	text	Preenche o formulário de agendamento, para o visitante digitar uma vez só
`email`	e-mail	Preenche o formulário de agendamento e vira o reply-to do e-mail de notificação
`company`	text, obrigatório aqui	O seu vendedor pesquisa antes da reunião
`team_size`	select	Decide entre página de agendamento ou tour, e chega como um de quatro valores conhecidos

Deixe o caso de uso, o prazo e o telefone para a própria reunião. O agendador pode fazer uma pergunta própria se você precisar de contexto antes da reunião, e tanto o Calendly quanto o Cal.com também conseguem preencher perguntas personalizadas.

Envie e depois passe adiante

Cada versão envia o pedido, espera a resposta do Ikiform e só então monta a próxima URL. Os exemplos usam o Cal.com; para o Calendly, troque pelo link do seu evento. O Calendly documenta name e email como parâmetros de preenchimento, e o Cal.com preenche qualquer campo de agendamento pelo identificador dele, incluindo name e email.

O formulário e o script juntos. Sem JavaScript o formulário ainda envia e cai na sua página de Redirect after submit, então coloque o link de agendamento lá como plano B.

demo.html

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="POST" id="demo-form">
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name" required />

  <label for="email">Work email</label>
  <input id="email" name="email" type="email" autocomplete="email" required />

  <label for="company">Company</label>
  <input id="company" name="company" autocomplete="organization" required />

  <label for="team_size">Team size</label>
  <select id="team_size" name="team_size" required>
    <option value="1_10">1 to 10</option>
    <option value="11_50">11 to 50</option>
    <option value="51_200">51 to 200</option>
    <option value="201_plus">201 or more</option>
  </select>

  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <p role="alert" id="demo-error" hidden></p>
  <button>Pick a time</button>
</form>

<script>
  const BOOKING = "https://cal.com/acme/demo";
  const SELF_SERVE = "/tour";
  const form = document.getElementById("demo-form");
  const error = document.getElementById("demo-error");

  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const data = new FormData(form);
    form.querySelector("button").disabled = true;
    error.hidden = true;
    try {
      const response = await fetch(form.action, {
        method: "POST",
        headers: { Accept: "application/json" },
        body: data,
      });
      const result = await response.json();
      if (!result.ok) throw new Error(Object.values(result.error.fields ?? {})[0]?.[0] ?? result.error.message);
      const small = data.get("team_size") === "1_10";
      const next = new URL(small ? SELF_SERVE : BOOKING, location.href);
      next.searchParams.set("name", String(data.get("name")));
      next.searchParams.set("email", String(data.get("email")));
      location.assign(next);
    } catch (failure) {
      error.textContent = failure instanceof Error ? failure.message : "Couldn't send. Try again.";
      error.hidden = false;
      form.querySelector("button").disabled = false;
    }
  });
</script>

A server action chama redirect() com a URL de agendamento assim que o Ikiform responde ok. O Next.js aceita URLs absolutas ali, e o formulário funciona antes da hidratação porque uma server action responde a um envio de formulário simples com um 303. Mantenha redirect() fora de qualquer bloco try, já que ele lança uma exceção para fazer o seu trabalho.

app/demo/actions.ts

"use server";

import { headers } from "next/headers";
import { redirect } from "next/navigation";

const BOOKING = "https://cal.com/acme/demo";

export async function requestDemo(_previous: string, formData: FormData): Promise<string> {
  const lead = {
    name: String(formData.get("name") ?? "").trim(),
    email: String(formData.get("email") ?? "").trim(),
    company: String(formData.get("company") ?? "").trim(),
    team_size: String(formData.get("team_size") ?? ""),
    _gotcha: String(formData.get("_gotcha") ?? ""),
  };
  const origin = (await headers()).get("origin");

  const response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
      Authorization: `Bearer ${process.env.IKIFORM_SECRET_KEY}`,
      ...(origin ? { Origin: origin } : {}),
    },
    body: JSON.stringify(lead),
  });
  const result = await response.json().catch(() => null);
  if (!result?.ok) {
    const fields: Record<string, string[]> = result?.error?.fields ?? {};
    return Object.values(fields)[0]?.[0] ?? result?.error?.message ?? "Couldn't send. Try again.";
  }

  const next = new URL(lead.team_size === "1_10" ? "https://acme.example/tour" : BOOKING);
  next.searchParams.set("name", lead.name);
  next.searchParams.set("email", lead.email);
  redirect(next.toString());
}

app/demo/demo-form.tsx

"use client";

import { useActionState } from "react";
import { requestDemo } from "./actions";

export function DemoForm() {
  const [error, action, pending] = useActionState(requestDemo, "");

  return (
    <form action={action}>
      <label htmlFor="name">Name</label>
      <input id="name" name="name" autoComplete="name" required />
      <label htmlFor="email">Work email</label>
      <input id="email" name="email" type="email" autoComplete="email" required />
      <label htmlFor="company">Company</label>
      <input id="company" name="company" autoComplete="organization" required />
      <label htmlFor="team_size">Team size</label>
      <select id="team_size" name="team_size" required>
        <option value="1_10">1 to 10</option>
        <option value="11_50">11 to 50</option>
        <option value="51_200">51 to 200</option>
        <option value="201_plus">201 or more</option>
      </select>
      <input name="_gotcha" type="text" tabIndex={-1} autoComplete="off" hidden />
      {error ? <p role="alert">{error}</p> : null}
      <button disabled={pending}>{pending ? "Finding times" : "Pick a time"}</button>
    </form>
  );
}

A form action devolve fail() com a primeira mensagem nos erros e chama redirect(303, url, { external: true }) no sucesso; o SvelteKit 3 recusa um redirecionamento para outro site sem essa opção. Declare IKIFORM_SECRET_KEY em src/env.ts com defineEnvVars para que $app/env/private consiga lê-la. Combine com qualquer formulário em +page.svelte que envie para a action padrão; sem JavaScript o próprio navegador segue o 303.

src/routes/demo/+page.server.ts

import { fail, redirect } from "@sveltejs/kit";
import { IKIFORM_SECRET_KEY } from "$app/env/private";
import type { Actions } from "./$types";

export const actions = {
  default: async ({ request, fetch, url }) => {
    const data = await request.formData();
    const lead = Object.fromEntries(
      ["name", "email", "company", "team_size", "_gotcha"].map((key) => [key, String(data.get(key) ?? "").trim()]),
    );

    const response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Bearer ${IKIFORM_SECRET_KEY}`,
        Origin: request.headers.get("origin") ?? url.origin,
      },
      body: JSON.stringify(lead),
    });
    const result = await response.json();
    if (!result.ok) {
      const fields: Record<string, string[]> = result.error.fields ?? {};
      return fail(response.status, { lead, message: Object.values(fields)[0]?.[0] ?? result.error.message });
    }

    const next = new URL(lead.team_size === "1_10" ? "https://acme.example/tour" : "https://cal.com/acme/demo");
    next.searchParams.set("name", lead.name);
    next.searchParams.set("email", lead.email);
    redirect(303, next.toString(), { external: true });
  },
} satisfies Actions;

Numa single-page app o navegador envia direto ao Ikiform e segue em frente com location.assign. Use Allowed domains para proteger o formulário, nunca uma chave secreta.

src/DemoForm.tsx

import { type FormEvent, useState } from "react";

const ENDPOINT = "https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx";
const BOOKING = "https://cal.com/acme/demo";

export function DemoForm() {
  const [error, setError] = useState("");
  const [pending, setPending] = useState(false);

  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    setPending(true);
    setError("");
    try {
      const response = await fetch(ENDPOINT, { method: "POST", headers: { Accept: "application/json" }, body: data });
      const result = await response.json();
      if (!result.ok) {
        const fields: Record<string, string[]> = result.error.fields ?? {};
        setError(Object.values(fields)[0]?.[0] ?? result.error.message);
        setPending(false);
        return;
      }
      const next = new URL(data.get("team_size") === "1_10" ? "/tour" : BOOKING, window.location.href);
      next.searchParams.set("name", String(data.get("name")));
      next.searchParams.set("email", String(data.get("email")));
      window.location.assign(next);
    } catch {
      setError("Couldn't reach the server. Try again.");
      setPending(false);
    }
  }

  return (
    <form action={ENDPOINT} method="post" onSubmit={onSubmit}>
      <label htmlFor="name">Name</label>
      <input id="name" name="name" autoComplete="name" required />
      <label htmlFor="email">Work email</label>
      <input id="email" name="email" type="email" autoComplete="email" required />
      <label htmlFor="company">Company</label>
      <input id="company" name="company" autoComplete="organization" required />
      <label htmlFor="team_size">Team size</label>
      <select id="team_size" name="team_size" required>
        <option value="1_10">1 to 10</option>
        <option value="11_50">11 to 50</option>
        <option value="51_200">51 to 200</option>
        <option value="201_plus">201 or more</option>
      </select>
      <input name="_gotcha" type="text" tabIndex={-1} autoComplete="off" hidden />
      {error ? <p role="alert">{error}</p> : null}
      <button disabled={pending}>{pending ? "Finding times" : "Pick a time"}</button>
    </form>
  );
}

As versões no servidor enviam com uma chave secreta, então o Ikiform pula Allowed domains e a verificação humana. Todo envio passa a vir do IP do seu servidor, e o limite Standard de 5 por minuto por visitante conta todos os seus visitantes juntos. Escolha o limite de taxa Relaxed ou Custom para um formulário que você envia por um servidor, e mantenha IKIFORM_SECRET_KEY em variáveis de ambiente só do servidor. As versões no servidor repassam o header Origin do visitante, porque um fetch feito no servidor não envia nenhum e o Ikiform detecta por ele os testes gratuitos de localhost.

E-mail de trabalho, sem bloquear o Gmail

O Ikiform não tem uma configuração que recuse provedores de e-mail gratuitos. A opção allowed_domains do campo de e-mail é uma allowlist: útil para um formulário interno restrito ao domínio da sua própria empresa, errada para um formulário público de demonstração. Tudo bem, porque bloquear o Gmail também bloqueia fundadores, consultores e compradores que preenchem formulários pelo celular.

Em vez disso, marque esses pedidos onde a sua equipe os vê. Esta função roda no relay que publica cada pedido no chat ou no seu CRM, e dá uma pista ao vendedor antes da reunião:

lib/demo-tag.ts

const FREE_MAIL = new Set(["gmail.com", "googlemail.com", "outlook.com", "hotmail.com", "yahoo.com", "icloud.com", "proton.me"]);

export function demoTag(fields: Record<string, unknown>) {
  const domain = String(fields.email ?? "").split("@")[1]?.toLowerCase() ?? "";
  const size = String(fields.team_size ?? "");
  if (FREE_MAIL.has(domain)) return "personal address, check the company";
  if (size === "51_200" || size === "201_plus") return "priority";
  return "standard";
}

Chame-a com event.data.fields depois do verifyWebhook e então adicione a tag à mensagem do chat ou a uma propriedade do CRM. Leads no HubSpot ou no Pipedrive mostra um relay completo.

Confira se funciona

Adicione o domínio do seu site e localhost em Allowed domains.
Envie com o tamanho de equipe 51 to 200. A página de agendamento abre com seu nome e e-mail preenchidos.
Feche a página de agendamento sem escolher um horário. O pedido continua em Submissions, e o e-mail de notificação está na sua caixa de entrada.
Envie de novo com 1 to 10 e confira se você cai no tour.
Envie com um e-mail inválido. O erro aparece no formulário, e a página de agendamento não abre.
Agende uma reunião de teste e confira se a confirmação do agendador chega ao endereço que você digitou.

Pegadinhas

Dois registros por demonstração agendada. O Ikiform guarda o pedido; o agendador guarda a reunião. Associe os dois pelo e-mail no seu CRM, não pelo nome.
Nenhuma confirmação do Ikiform. O Ikiform não envia e-mail para quem preenche o formulário. A confirmação e o convite de calendário do próprio agendador cobrem as reuniões agendadas. Para pedidos que nunca agendam, responda pelo e-mail de notificação no mesmo dia.
Query strings ficam visíveis. Nome e e-mail na URL de agendamento aparecem no histórico do navegador e nas análises do agendador. Não passe mais nada por ali.
Embeds. Se, em vez disso, você incorporar o agendador na sua própria página /book, o Cal.com só repassa os parâmetros de query da sua página quando forwardQueryParams está ligado. O Calendly documenta o preenchimento em embeds pelo objeto prefill do embed em JavaScript, então use isso em vez de um iframe simples.
A verificação de spam. Com Spam check definido como Ikiform, as versões no navegador precisam chamar challenge() de @ikiform/sdk antes de enviar, ou recebem 403 challenge_required. As versões no servidor pulam a verificação.

Perguntas

Travou em algum passo ou quer um guia para o seu caso? Envie um e-mail para hello@ikiform.com.