# Créer un formulaire de capture de leads qui vous parvient vite > Un formulaire de capture de leads sur votre propre site, qui vous écrit avec le lead en adresse de réponse, alerte le chat de l'équipe et alimente votre CRM, pour répondre tant que le lead est encore là. Publié le 2026-10-25 · https://ikiform.com/fr/guides/lead-capture Placez sur votre propre page un court formulaire qui envoie le nom, l'e-mail professionnel et une question de qualification à un backend de formulaires. Activez les e-mails de notification pour que chaque lead arrive dans votre boîte avec **Reply** pointant vers lui, et envoyez un webhook signé vers le chat de votre équipe et votre CRM. Mesurez ensuite les minutes entre l'envoi et la première réponse, car ce chiffre fait gagner plus d'affaires que le design du formulaire. Un formulaire de leads est un formulaire de contact avec une mission : lancer une conversation commerciale. Les gens qui le remplissent vous comparent à quelqu'un d'autre, souvent dans un autre onglet. L'équipe qui répond en premier, avec une réponse utile d'une vraie personne, obtient généralement le rendez-vous. Ce guide construit le formulaire sur votre propre site, vous fait parvenir chaque lead en quelques secondes et laisse le CRM facultatif. ## Le trajet d'un lead Le formulaire envoie à Ikiform. Ikiform vérifie que l'envoi n'est pas du spam, le stocke, puis fait trois choses à la fois : il écrit à votre équipe avec le lead comme adresse de réponse, envoie un webhook signé et affiche le lead dans le tableau de bord. C'est par le webhook que le lead atteint le chat de l'équipe et votre CRM. Schéma : Comment un lead va de votre formulaire à la personne qui lui répond 1. Un visiteur remplit le formulaire de leads de votre site, qui envoie à votre endpoint Ikiform. 2. Ikiform vérifie le honeypot, le score de spam et la limite de débit, puis stocke le lead. 3. Quelques secondes plus tard, chaque destinataire des notifications reçoit un e-mail, et appuyer sur Répondre écrit au lead. 4. Le lead apparaît dans le tableau de bord, où vous pouvez le rechercher, le filtrer et l'exporter. 5. Ikiform envoie un webhook submission.created signé. 6. Un relais ou un outil d'automatisation publie le lead dans le chat de l'équipe et crée le contact dans votre CRM. L'e-mail est le chemin le plus rapide, sans configuration. Le webhook ajoute les endroits que votre équipe surveille déjà. ## Quatre façons de capter des leads Chaque configuration courante a son point fort. Choisissez selon l'endroit où vous voulez que vivent les leads et qui maintient le formulaire. | Approche | Points forts | Compromis | | --- | --- | --- | | Le formulaire de votre CRM, comme les formulaires HubSpot ou les web forms de Pipedrive | Les leads arrivent dans le CRM comme contacts, sans colle. Suivi et lead scoring vivent dans un seul produit. | Le formulaire est intégré avec le script et le style du CRM. Changer de CRM oblige à refaire chaque formulaire. Certaines fonctionnalités dépendent de l'offre. | | Formulaire intégré d'un form builder, comme [Typeform](https://ikiform.com/alternatives/typeform) ou [Tally](https://ikiform.com/alternatives/tally) | Des formulaires multi-étapes soignés avec logique, sans code. | Un embed qui ressemble au créateur, sauf si vous payez pour le restyler. Les webhooks et les limites de réponses dépendent de l'offre. | | Votre propre route API et votre base de données | Toute la logique que vous voulez, comme un lead scoring avant de stocker quoi que ce soit. | Vous construisez le filtrage du spam, les limites de débit, les alertes e-mail, les nouvelles tentatives et l'export, et vous gardez un serveur en marche pour un seul formulaire. | | Backend de formulaires, comme Ikiform | Votre propre HTML sur n'importe quel site. Filtrage du spam, alertes e-mail avec adresse de réponse, webhooks signés et export CSV, sans serveur. | Pas de lead scoring, pas de fiches CRM et pas d'e-mail au lead. Ceux-là viennent de votre CRM ou de votre outil d'e-mailing, via webhook. | Si tout votre processus commercial tourne dans un seul CRM et que son formulaire vous convient, utilisez-le. Un backend de formulaires convient quand le formulaire doit ressembler à votre site, quand vous pourriez changer de CRM, ou quand vous voulez que le même formulaire atteigne l'e-mail, le chat et un CRM sans devoir choisir. ## Demander moins, qualifier une fois Chaque champ ajouté coûte des soumissions. La plupart des formulaires de leads ont besoin de quatre choses : à qui répondre, où la personne travaille, ce qu'elle veut, et de la place pour expliquer. Une question à choix fixe sert à qualifier, car elle arrive sous la forme d'une valeur parmi quelques valeurs connues, sur laquelle votre routage peut compter. Essayez ci-dessous : l'outil exécute le validateur d'Ikiform dans votre navigateur et montre ce qui serait stocké, ou le `422` que vous recevriez. Formulaire : Talk to sales - **Nom** (`name`, text, obligatoire) - **E-mail professionnel** (`email`, email, obligatoire) - **Entreprise** (`company`, text) - **Comment pouvons-nous vous aider ?** (`interest`, select, obligatoire) - **Quelque chose à nous dire ?** (`message`, textarea) Collez cette définition dans l'onglet **Fields** du formulaire et Ikiform l'applique côté serveur. Le [modèle de formulaire de contact](https://ikiform.com/forms/contact-form) en propose une version plus légère, avec un sujet au lieu d'un intérêt. | Champ | Pourquoi | À garder en tête | | --- | --- | --- | | `name` | Une réponse qui commence par son nom | Gardez l'id `name`. Un lien dans un champ de nom est un fort signal de spam | | `email` | À qui écrit **Reply** | Gardez l'id `email`. Le libellé **E-mail professionnel** incite à en utiliser un, sans l'imposer | | `company` | Le rechercher avant de répondre | Facultatif. L'exiger coûte les soumissions des freelances | | `interest` | Routage et priorité | Un `select` stocke une valeur listée ou refuse l'envoi : les automatisations peuvent donc s'y brancher | | `message` | Du contexte pour la première réponse | Facultatif. Une zone de rédaction obligatoire est le champ devant lequel les gens abandonnent | Les numéros de téléphone, la taille de l'équipe et le budget ont leur place dans les formulaires où ils changent ce que vous faites ensuite. Le [modèle de demande de devis](https://ikiform.com/forms/quote-request) est la version complète, avec service, budget et délai en choix fixes. Si un commercial appelle chaque lead, demandez un téléphone. Si vous routez selon la taille de l'équipe, demandez-la sous forme de `select`. Sinon, gardez-les pour la première réponse. ## Le formulaire Choisissez votre stack. Chaque version affiche le message du serveur sous le champ concerné et garde ce que le visiteur a tapé, car perdre un message à moitié écrit à cause d'une faute de frappe, c'est ainsi que les leads abandonnent. L'état de succès indique qui répond et quand, pour que personne ne se demande si ça a marché. **HTML** Le formulaire envoie de façon classique et redirige vers votre page de remerciement : il fonctionne donc avant le chargement de tout script. Chaque champ a un emplacement vide pour son erreur. `contact-sales.html`: ```html
``` Le script garde le visiteur sur la page. Il affiche l'erreur de chaque champ renvoyée par le serveur sous ce champ, et remplace le formulaire par une ligne qui indique qui répond et quand. `lead-form.js`: ```js const form = document.getElementById("lead-form"); function showErrors(fields) { form.querySelectorAll("[data-error-for]").forEach((slot) => { const message = fields[slot.dataset.errorFor]?.[0]; slot.textContent = message ?? ""; slot.hidden = !message; }); } form.addEventListener("submit", async (event) => { event.preventDefault(); const button = form.querySelector("button"); button.disabled = true; button.textContent = "Sending"; try { const response = await fetch(form.action, { method: "POST", headers: { Accept: "application/json" }, body: new FormData(form), }); const result = await response.json(); if (result.ok) { const thanks = document.createElement("p"); thanks.setAttribute("role", "status"); thanks.textContent = `Thanks, ${form.elements.name.value.trim().split(" ")[0]}. A person on our team will reply to ${form.elements.email.value} within one working day.`; form.replaceWith(thanks); return; } showErrors(result.error.fields ?? {}); if (!result.error.fields) alert(result.error.message); } catch { alert("Something went wrong. Email sales@example.com and we'll pick it up."); } button.disabled = false; button.textContent = "Talk to sales"; }); ``` **Next.js** La server action transmet le lead avec votre clé secrète et renvoie la première erreur de chaque champ, ainsi que les valeurs tapées par le visiteur : rien n'est perdu sur un `422`. `app/contact-sales/actions.ts`: ```ts "use server"; import { headers } from "next/headers"; export interface LeadState { sent: boolean; firstName?: string; errors: Record; values: Record; } const KEYS = ["name", "email", "company", "interest", "message", "page", "_gotcha"] as const; export async function sendLead(_previous: LeadState, formData: FormData): Promise { const values = Object.fromEntries(KEYS.map((key) => [key, String(formData.get(key) ?? "").trim()])); 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(values), }); const result = await response.json().catch(() => null); if (result?.ok) return { sent: true, firstName: values.name.split(" ")[0], errors: {}, values: {} }; const fields: Record = result?.error?.fields ?? {}; const errors = Object.fromEntries(Object.entries(fields).map(([key, messages]) => [key, messages[0] ?? ""])); if (!Object.keys(errors).length) errors.form = result?.error?.message ?? "Something went wrong. Email sales@example.com and we'll pick it up."; return { sent: false, errors, values }; } ``` `app/contact-sales/lead-form.tsx`: ```tsx "use client"; import { useActionState } from "react"; import { type LeadState, sendLead } from "./actions"; const initial: LeadState = { sent: false, errors: {}, values: {} }; export function LeadForm() { const [state, action, pending] = useActionState(sendLead, initial); const { errors, values } = state; if (state.sent) { return

Thanks, {state.firstName}. A person on our team will reply within one working day.

; } return (
{errors.name ?

{errors.name}

: null} {errors.email ?

{errors.email}

: null} {result?.error && !isInputError(result.error) &&

{result.error.message}

}
)} ``` Pour aller plus loin avec Astro, lisez [Créer un formulaire de leads qualifiant avec Astro](https://ikiform.com/fr/guides/lead-capture/astro.md). **TanStack Start** La server function lit le `FormData` dans `.validator()`, le transmet et renvoie soit le prénom, soit une liste d'erreurs par champ que la route affiche sous chaque input. `src/routes/contact-sales.tsx`: ```tsx import { createFileRoute } from "@tanstack/react-router"; import { createServerFn, useServerFn } from "@tanstack/react-start"; import { getRequestHeader } from "@tanstack/react-start/server"; import { type FormEvent, useState } from "react"; type Result = { ok: true; firstName: string } | { ok: false; errors: Record }; const sendLead = createServerFn({ method: "POST" }) .validator((data: unknown) => { if (!(data instanceof FormData)) throw new Error("Expected form data"); const read = (key: string) => String(data.get(key) ?? "").trim(); return { name: read("name"), email: read("email"), company: read("company"), interest: read("interest"), message: read("message"), page: read("page"), _gotcha: read("_gotcha"), }; }) .handler(async ({ data }): Promise => { const origin = getRequestHeader("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(data), }); const result = await response.json(); if (result.ok) return { ok: true, firstName: data.name.split(" ")[0] ?? "" }; const fields: Record = result.error.fields ?? { form: [result.error.message] }; return { ok: false, errors: Object.fromEntries(Object.entries(fields).map(([key, list]) => [key, list[0] ?? ""])) }; }); export const Route = createFileRoute("/contact-sales")({ component: ContactSales }); function ContactSales() { const send = useServerFn(sendLead); const [result, setResult] = useState(null); const [pending, setPending] = useState(false); const errors = result && !result.ok ? result.errors : {}; async function onSubmit(event: FormEvent) { event.preventDefault(); setPending(true); try { setResult(await send({ data: new FormData(event.currentTarget) })); } catch { setResult({ ok: false, errors: { form: "Something went wrong. Email sales@example.com and we'll pick it up." } }); } finally { setPending(false); } } if (result?.ok) { return

Thanks, {result.firstName}. A person on our team will reply within one working day.

; } return (
{errors.name ?

{errors.name}

: null} {errors.email ?

{errors.email}

: null} {#if errors.form}

{errors.form}

{/if}
{/if} ``` Pour aller plus loin avec SvelteKit, lisez [Créer un formulaire de leads qualifiant avec SvelteKit](https://ikiform.com/fr/guides/lead-capture/sveltekit.md). **Nuxt** Une route serveur garde la clé hors du client et renvoie les erreurs de champ d'Ikiform dans le `data` de l'erreur. Définissez `NUXT_IKIFORM_SECRET_KEY` dans l'environnement. `server/api/lead.post.ts`: ```ts export default defineEventHandler(async (event) => { const body = await readBody>(event); const config = useRuntimeConfig(event); const origin = getRequestHeader(event, "origin"); const keys = ["name", "email", "company", "interest", "message", "page", "_gotcha"]; const values = Object.fromEntries(keys.map((key) => [key, String(body[key] ?? "").trim()])); const response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", { method: "POST", headers: { Accept: "application/json", "Content-Type": "application/json", Authorization: `Bearer ${config.ikiformSecretKey}`, ...(origin ? { Origin: origin } : {}), }, body: JSON.stringify(values), }); const result = await response.json(); if (!result.ok) { throw createError({ status: response.status, message: result.error.message, data: { fields: result.error.fields ?? {} }, }); } return { firstName: values.name?.split(" ")[0] }; }); ``` `nuxt.config.ts`: ```ts export default defineNuxtConfig({ runtimeConfig: { ikiformSecretKey: "", }, }); ``` `app/components/LeadForm.vue`: ```vue