Menu
Créer mon premier formulaire
Devis

Modèle de formulaire : devis en plusieurs étapes

Répartir une demande de devis en deux étapes tout en validant les champs avant de continuer.

Aperçu local : les essais restent dans ce navigateur. Aucun message ni e-mail n’est envoyé.

Devis en plusieurs étapes

Le projet d’abord, les coordonnées ensuite : une demande plus facile à remplir.

1 / 2

1 / 2

Formeo
Personnaliser le modèle
Libellés et champs obligatoires

Renseignez votre identité, la finalité, la base légale, la rétention, le contact pour les droits et votre lien de confidentialité. Cet exemple ne constitue pas un avis juridique.

HTML / CSS autonome
<!doctype html>
<html lang="fr"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Formulaire de contact</title>
<style>form[data-littlereply]{max-width:640px;margin:2rem auto;padding:1.5rem;font:16px/1.6 system-ui,sans-serif;color:#202033;background:white;border:1px solid #e4e4ee;border-radius:16px;box-sizing:border-box}form[data-littlereply] label{display:block;margin-top:1rem;font-weight:600}form[data-littlereply] input,form[data-littlereply] textarea,form[data-littlereply] select{box-sizing:border-box;width:100%;padding:.75rem;font:inherit;border:1px solid #727285;border-radius:8px;background:white;color:#202033}form[data-littlereply] input[type=checkbox],form[data-littlereply] input[type=radio]{width:auto}form[data-littlereply] button{margin-top:1rem;padding:.8rem 1.1rem;font:inherit;font-weight:600;border:0;border-radius:8px;background:var(--form-accent,#4f46e5);color:white;cursor:pointer}form[data-littlereply] :focus-visible{outline:3px solid #f59e0b;outline-offset:3px}form[data-littlereply] button:disabled{opacity:.6}form[data-littlereply] [role=status]{min-height:1.6em}form[data-littlereply] fieldset{border:0;padding:0}form[data-littlereply] .privacy-notice{font-size:.875rem;color:#4b4b60}
form[data-littlereply]{--form-accent:#4f46e5;--form-ink:#ffffff}
form[data-littlereply] button{color:var(--form-ink)}form[data-littlereply] button[data-fq-back]{background:#eee;color:#202033}form[data-littlereply] [hidden]{display:none}</style></head><body>
<form action="https://formeo.me/api/submit" method="POST" data-littlereply="YOUR_ACCESS_KEY" data-locale="fr" data-success="Votre demande de devis a bien été enregistrée.">
  <input type="hidden" name="_fq_key" value="YOUR_ACCESS_KEY" />
  <input type="text" name="botcheck" tabindex="-1" autocomplete="off" style="display:none" aria-hidden="true" />

<fieldset data-fq-step="0"><legend>Étape 1 sur 2</legend>
  <label for="fq_service">Type de prestation *</label>
  <select name="service" id="fq_service" required><option value="">—</option><option>Travaux et rénovation</option><option>Création de site web</option><option>Conseil</option><option>Autre prestation</option></select>

  <label for="fq_postal_code">Code postal *</label>
  <input type="text" name="postal_code" id="fq_postal_code" required autocomplete="postal-code" pattern="^[0-9]{5}$" />
  <small>Code postal français à cinq chiffres.</small>

  <label for="fq_message">Votre projet *</label>
  <textarea name="message" id="fq_message" required maxlength="5000" rows="5"></textarea>
</fieldset>
<fieldset data-fq-step="1"><legend>Étape 2 sur 2</legend>
  <label for="fq_name">Votre nom *</label>
  <input type="text" name="name" id="fq_name" required autocomplete="name" />

  <label for="fq_email">Votre adresse e-mail *</label>
  <input type="email" name="email" id="fq_email" required autocomplete="email" />

  <label for="fq_phone">Téléphone (facultatif)</label>
  <input type="tel" name="phone" id="fq_phone" autocomplete="tel" pattern="^\+?(?:[ \(\)\.\-]*[0-9]){7,15}[ \(\)\.\-]*$" maxlength="25" />
  <small>Exemple : 06 12 34 56 78 ou +33 6 12 34 56 78.</small>
</fieldset>

  <button type="submit">Envoyer ma demande de devis</button>
  <p role="status" aria-live="polite"></p>
</form>
<!-- Erreurs AJAX accessibles et reprises sans doublon -->
<script src="https://formeo.me/client/v1.js" data-api="https://formeo.me" defer></script>
</body></html>

Remplacez YOUR_ACCESS_KEY par la clé publique de votre propre formulaire. Le code inclut ses styles ; le script client ajoute les états AJAX. Le POST HTML fonctionne aussi sans JavaScript.

Installer ce modèle

  1. Le bouton Continuer valide l’étape en cours avant de changer d’écran.
  2. Le bouton Retour permet de corriger le projet sans perdre les coordonnées.
  3. Sans JavaScript, le code HTML affiche les deux groupes de champs sur une seule page.
  4. Créez votre formulaire depuis « Utiliser ce modèle ». Ses champs et vos personnalisations seront repris.
  5. Vérifiez le destinataire, publiez le formulaire puis remplacez la clé dans le code copié.
  6. Envoyez un test identifié et consultez le message stocké puis sa livraison.

Questions fréquentes

Les données sont-elles envoyées à chaque étape ?

Non. Une seule demande est envoyée lorsque toutes les étapes sont validées.

Les champs sont-ils validés sur le serveur ?

Oui, la configuration publiée est également contrôlée par le backend.