MeDo

Générateur de Formulaire de Contact IA.

Décrivez les champs dont vous avez besoin, le ton souhaité et les règles de validation importantes — MeDo transforme votre prompt en un composant de formulaire de contact complet et accessible en quelques secondes.

Formulaire de Contact
Formulaire de Contact

Chaque site web a besoin d'un excellent formulaire de contact

Un formulaire de contact est souvent le dernier composant avec lequel un visiteur interagit avant de devenir un lead — pourtant, la plupart sont une réflexion après coup. Une mauvaise conception des champs, l'absence de validation et des états d'erreur déroutants créent des frictions qui tuent les conversions au moment précis de l'intention. Un formulaire de contact bien conçu signale le professionnalisme, réduit l'abandon et permet aux bonnes personnes de vous contacter facilement.

6 modèles

Modèles de Formulaire de Contact que vous pouvez générer

Chaque modèle est un vrai prompt, pas une capture d'écran. Copiez-le dans n'importe quel éditeur IA, ou exécutez-le dans MeDo pour récupérer du code React + Tailwind.

BasicInquiry

Name, Email, Message Form

Three fields and nothing else. The right default when you have no routing logic yet — every field you add past this point has to justify itself against a measurable drop in completions.

Create a three-field contact form — full name, email, message — inside a bordered card. Every input gets a visible label tied by htmlFor, and validates on blur rather than on every keystroke: name non-empty, email checked against a permissive pattern, message at least twenty characters with a live counter. Render each error in a span referenced by aria-describedby and set aria-invalid on the failing input. On submit, disable the button, swap its label for a spinner with role="status", then replace the card with a confirmation that names the reply window. On failure keep every typed value, show a retry banner and move focus to it. Add a honeypot field and a minimum time-to-submit check instead of a CAPTCHA.

Tester dans MeDo
QualifyingStudio

Project Type and Budget Form

Adds the two questions that decide whether you reply today or next week. Worth the extra friction for service businesses, wasteful for anything self-serve.

Create an agency inquiry form in a light card: full name, work email, a project type select (Brand Identity, Web Design, Motion, Other), a budget radio group (Under $5k, $5k-$20k, $20k+) wrapped in a fieldset with a legend, and a message textarea. Mark the select and the radio group required but validate on submit, not on mount, so the form never opens already covered in red. Collect the failures into an error summary above the card with in-page links to each field, set aria-invalid and aria-describedby on the offenders, and move focus to the summary heading. Show a pending state on the button, a success panel replacing the card, and a failure banner that preserves every answer.

Tester dans MeDo
BranchingSwitchboard

Sales or Support Split Form

One URL, two queues. Stops enterprise leads from landing in the bug tracker without asking you to maintain two contact pages that drift apart.

Create a contact form that opens with a two-option segmented control — Sales inquiry or Support request — built from radio inputs in a fieldset, and swaps the fields beneath it. Sales shows company, team size and budget; Support shows account email, affected feature and a severity select. Announce the swap through an aria-live="polite" region and move focus to the first field of the new branch. Validate only the visible branch, keep the hidden branch out of the submitted payload, and wire every error to its input with aria-describedby and aria-invalid. On submit show a pending button, then a success message naming the queue the request went to. Rate-limit repeat submissions from the same session and include a hidden honeypot.

Tester dans MeDo
High trustChambers

Confidential Consultation Form

For regulated practices, where the reassurance copy next to the submit button does more work than the field layout does. Say what happens to the data before you ask for it.

Create a consultation request form for a law or financial practice: full name, email, phone with a format hint in the label rather than as placeholder-only text, a matter type select for routing, a preferred contact method radio group, and a details textarea with a note that this form is not privileged communication. Put a one-line confidentiality statement directly above the submit button, not in the footer. Validate on blur, expose errors through aria-describedby, and set aria-invalid on failures. Submit button reads Request a confidential consultation, goes to a disabled pending state, then a success panel stating the response window and an alternative phone number. On failure show the error inline and never clear the textarea.

Tester dans MeDo
Two columnLedger

Contact Details Beside the Form

Form on the right, address, hours and direct email on the left. Cuts the volume of people who fill in a form to ask a question the sidebar already answered.

Create a two-column contact section: on the left, an office address, opening hours, a direct email and phone as real mailto and tel links; on the right, a card form with name, email, subject select and message. Stack the columns on mobile with the form first. Labels are always visible, errors validate on blur and attach via aria-describedby with aria-invalid on the input, and the submit button moves through idle, pending with a role="status" spinner, and success states. On failure show a banner above the form, focus it, and keep all values. Add a honeypot input hidden from assistive technology and a timestamp check to drop bot submissions.

Tester dans MeDo
Multi stepEnquire

Three-Step Contact Wizard

Splits a long inquiry into three short screens with a step indicator. Only pays off past about eight fields — below that the wizard adds clicks and removes context.

Create a three-step contact wizard: step one collects name and email, step two collects project type, budget and timeline, step three shows a message textarea and a read-only review of the earlier answers. Render a step indicator with aria-current="step" on the active item. Validate the current step before allowing Next, focus the first invalid field, and expose errors with aria-describedby and aria-invalid. Keep all answers in state so Back never loses data. The final submit shows a pending state, then a success screen replacing the wizard, and on failure returns to step three with a retry banner and every answer intact. Include a honeypot field.

Tester dans MeDo

Comment personnaliser votre Formulaire de Contact

Ne demandez que ce que vous utiliserez vraiment

Chaque champ supplémentaire réduit les taux de complétion. Auditez votre formulaire : si vous ne pouvez pas décrire comment chaque champ influence votre réponse à la soumission, supprimez-le. Nom, e-mail et une question qualificative suffisent souvent pour démarrer une conversation.

Rédigez des erreurs de validation qui guident, pas qui grondent

Remplacez des messages comme « E-mail invalide » par « Veuillez saisir une adresse e-mail valide, ex. vous@exemple.fr ». Un texte d'erreur spécifique et actionnable réduit la friction de re-soumission et instaure la confiance avec les visiteurs qui font de vraies erreurs.

Concevez votre état de succès aussi soigneusement que le formulaire lui-même

La confirmation post-envoi est une opportunité manquée sur la plupart des sites. Utilisez-la pour définir des attentes (« Nous répondons dans un jour ouvrable »), proposer une alternative (« Ou réservez un appel directement ») ou renforcer la voix de votre marque — pas seulement un générique « Merci ».

Utilisez des champs conditionnels pour garder le formulaire court

Affichez des questions supplémentaires seulement lorsqu'elles sont pertinentes pour les réponses précédentes — par exemple, révéler un champ budget seulement après qu'un visiteur sélectionne « Nouveau projet ». La logique conditionnelle réduit la longueur perçue et concentre chaque visiteur exactement sur les entrées qui comptent pour sa situation.

Qui utilise le composant Formulaire de Contact

Agence créative ou freelance

Les formulaires de contact d'agence incluent généralement un sélecteur de type de projet, une fourchette de budget et un champ de délai en plus du nom et de l'e-mail — donnant au studio suffisamment de contexte pour qualifier et prioriser les leads entrants avant la première réponse.

SaaS ou produit tech

Les formulaires de contact de produits se divisent souvent entre « Demande commerciale » et « Demande de support » dès le départ, puis affichent des champs pertinents par chemin — gardant les leads enterprise séparés des rapports de bugs sans nécessiter deux pages séparées.

Services professionnels (droit, finance, santé)

Les formulaires de contact à haute confiance dans les industries réglementées soulignent les garanties de confidentialité, incluent un menu déroulant de type d'affaire pour le routage et remplacent les boutons d'envoi génériques par des textes comme « Demander une consultation confidentielle ».

Événement ou conférence

Les formulaires de demande d'événement posent des questions sur le type de participation, la taille de l'entreprise pour les niveaux de sponsoring et les sujets de session préférés — servant à la fois d'outil de capture de leads et de segmentation d'audience avant même que l'événement commence.

Modèles de Formulaire de Contact pour différents sites web

Le même composant formulaire de contact, adapté au type de site sur lequel il est publié.

01 / 06

Agency and Studio Contact Forms

Project type, budget band and timeline earn their place here because they decide reply order, not because they look thorough. The one field to cut first is company website — you can find it from the email domain in less time than the visitor spends typing it.

Styles et variantes de Formulaire de Contact

Choisissez la variante qui correspond au reste de la page, puis générez-la.

01 / 06

Card Form With Visible Labels

A bordered card, one column, labels above every input. The most boring option and the one that tests best, because a label above the field survives autofill, zoom and translation without collapsing into the value.

Formulaire de Contact en React, Next.js, Vue et Svelte

React, Next.js, Vue 3, SvelteKit, Astro ou HTML simple — le même formulaire de contact, six façons de l'intégrer.

01 / 06

React Contact Form

Keep the form uncontrolled and read values from FormData on submit — controlled state on every field re-renders the whole form on each keystroke for no benefit. Hold only errors and status in state.

src/components/ContactForm.tsx

export function ContactForm() {
  const [status, setStatus] = useState('idle')

  async function onSubmit(e) {
    e.preventDefault()
    setStatus('pending')
    const data = new FormData(e.currentTarget)
    const res = await send(data)
    setStatus(res.ok ? 'success' : 'error')
  }

  return <form onSubmit={onSubmit} noValidate>{/* fields */}</form>
}

Comment ajouter votre Formulaire de Contact à un projet

Quatre étapes, du choix d'un modèle de formulaire de contact à sa mise en production.

01~30s

Pick a Contact Form Template

Match the template to how you triage replies — three fields if every message goes to one inbox, the branching form if sales and support are different queues.

02~10s

Copy the Prompt

Paste it into MeDo, Lovable, Bolt, v0 or Cursor. Replace the placeholder select options with your real ones first, since the option list is what determines the routing you have to build behind it.

03~2min

Generate and Refine

You get React + Tailwind with a live preview. Follow up in plain English — "validate on blur, not on change", "add an error summary above the card", "keep the values on a failed submit".

04~2min

Wire Up the Submit Handler

Point the action at a serverless function, Resend, Formspree or your own API. Test the failure path before shipping: a form that silently drops a message is worse than no form at all.

Questions fréquentes à propos de Formulaire de Contact

Qu'est-ce qu'un générateur de formulaire de contact IA ?

Un générateur de formulaire de contact IA prend une description en langage naturel des champs, règles de validation et design souhaités et produit un composant de formulaire complet et stylisé avec du code fonctionnel. MeDo génère le composant entier — mise en page, étiquettes, états d'erreur, état de succès et attributs d'accessibilité — pour que vous puissiez l'intégrer directement dans votre projet.

Comment créer un formulaire de contact avec l'IA ?

Ouvrez MeDo et décrivez votre formulaire en français : listez les champs nécessaires, les exigences de validation, le style visuel et tout comportement spécial comme des champs conditionnels ou un message de succès personnalisé. MeDo génère le composant immédiatement. Vous pouvez l'affiner avec des prompts de suivi — changer un type de champ, ajuster la validation ou redessiner la mise en page — jusqu'à ce qu'il soit exactement comme vous le souhaitez.

Quel est le meilleur outil IA pour créer des formulaires de contact ?

MeDo est spécialement conçu pour générer des composants UI individuels à partir de prompts, y compris les formulaires de contact. Contrairement aux outils de chat IA généraux, MeDo comprend l'accessibilité des formulaires (labels ARIA, navigation au clavier, gestion du focus), les patterns de validation et la structure des composants — ainsi le résultat est prêt pour la production, pas seulement du code plausible.

L'IA peut-elle générer un formulaire de contact avec validation ?

Oui. Lorsque vous incluez des exigences de validation dans votre prompt — par exemple, « champs obligatoires », « format d'e-mail valide » ou « minimum 20 caractères dans le champ message » — MeDo génère la logique de validation en ligne aux côtés du composant. Vous pouvez également demander des bibliothèques de validation spécifiques ou la validation de contraintes HTML5 native selon votre stack.

Comment ajouter un formulaire de contact à mon site sans plugin ?

Générez le composant de formulaire avec MeDo, puis connectez le gestionnaire de soumission à n'importe quel endpoint HTTP — une fonction serverless, un service de traitement de formulaires comme Resend ou Formspree, ou votre propre API backend. Comme MeDo produit du code de composant propre sans dépendances de bibliothèque de formulaire externe, vous gardez le contrôle total sur la logique de soumission et le routage des données.

Quels champs un formulaire de contact doit-il inclure ?

Au minimum, un formulaire de contact a besoin d'un champ nom, d'un champ adresse e-mail et d'un textarea de message. Au-delà, n'ajoutez que les champs qui changent la façon dont vous répondez : un sélecteur de sujet ou de type de projet pour le routage, un champ téléphone si vous proposez des appels, ou une fourchette de budget pour les entreprises de services. Chaque champ obligatoire supplémentaire augmente l'abandon, gardez le défaut court et utilisez la logique conditionnelle pour étendre si nécessaire.