Menu
Créer mon premier formulaire
Devis

Modèle de formulaire de demande de devis HTML

Recueillir les informations utiles à une estimation, sans demander d’adresse complète ni de documents.

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

Demande de devis

Prestation, code postal et projet pour qualifier une demande locale.

1 / 1
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. Nous reviendrons vers vous pour préciser votre projet.">
  <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" />

  <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>

  <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">Décrivez votre projet *</label>
  <textarea name="message" id="fq_message" required maxlength="5000" rows="5"></textarea>

  <button type="submit">Demander un 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. Adaptez les prestations à votre activité avant de publier.
  2. Le formulaire transmet une demande : il ne calcule pas de tarif et ne crée pas de contrat.
  3. Le téléphone reste facultatif pour limiter la collecte.
  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

Est-ce un devis contractuel ?

Non. Il s’agit d’une demande d’informations destinée à préparer un devis.

Puis-je changer les prestations ?

Oui, modifiez les options dans l’éditeur du formulaire et republiez la configuration.