Comment créer un formulaire de demande de devis pour votre site web

Un formulaire de demande de devis vous en apprend plus qu’un formulaire de contact : ce dont le client a besoin, son budget et son échéance. Vous allez en créer un en HTML pur, recevoir chaque demande sous forme d’e-mail clairement présenté et envoyer au client une réponse automatique « nous avons bien reçu votre demande ».

Il vous faut : un compte Frontmail gratuit et environ quinze minutes.

1. Connectez votre boîte mail

Dans Services d’envoi → Ajouter un service, connectez Gmail, Outlook, un serveur SMTP ou un fournisseur transactionnel, cochez Définir par défaut et cliquez sur Vérifier et enregistrer.

2. Créez le modèle de demande de devis

1. Ouvrez Modèles → Depuis la galerie et choisissez Demande de devis (catégorie Entreprise).
2. Cliquez sur Utiliser ce modèle. La demande arrive à votre adresse ; Reply-To est celle du client.

Le modèle comporte ces paramètres :

Paramètre	Type	Obligatoire	Remarques
name	string	oui
email	email	oui
phone	string	non
company	string	non
service	enum	oui	l’une des valeurs listées dans Paramètres
budget	enum	non	l’une des valeurs listées dans Paramètres
deadline	date	non	YYYY-MM-DD, exactement ce qu’envoie <input type="date">
details	text	oui	au moins 10 caractères

service et budget n’acceptent que les valeurs listées. L’exemple de code ci-dessous reprend celles du modèle anglais (Website, E-shop, Mobile app, Consulting, Other et Under $5k, $5k–20k, $20k–50k, Over $50k). Si vous créez le modèle en français, ses valeurs sont Site web, Boutique en ligne, Application mobile, Conseil, Autre et Moins de 5 000 €, 5 000 – 20 000 €, 20 000 – 50 000 €, Plus de 50 000 €. Adaptez-les à votre offre dans Paramètres : le formulaire doit envoyer exactement les valeurs qui y figurent.

3. Ajoutez une confirmation automatique

1. Modèles → Depuis la galerie → Réponse automatique : merci pour votre message → Utiliser ce modèle.
2. Dans ses Paramètres, définissez les valeurs par défaut de company_name (le nom de votre entreprise) et de response_time (par exemple sous un jour ouvré). Enregistrer.
3. Ouvrez le modèle de demande de devis → Paramètres → Envoi et choisissez le nouveau modèle comme Modèle de réponse automatique. Enregistrer.

Désormais, une seule soumission envoie deux e-mails : la demande pour vous et la confirmation pour le client. La réponse automatique ne peut être déclenchée que par votre propre formulaire : personne ne peut s’en servir pour écrire à des inconnus.

4. Autorisez votre site web

Dans Sécurité, ajoutez votre domaine sous Sites autorisés et cliquez sur Enregistrer. Protégez ensuite le formulaire contre les bots : créez un widget Cloudflare Turnstile gratuit, collez ses clés dans Sécurité → Protection contre les bots et activez le CAPTCHA pour tous les modèles.

5. Ajoutez le formulaire

Utilisez votre clé publique et l’ID du modèle affiché dans l’onglet Extraits de code :

<form id="quote">
  <label>Name <input name="name" required /></label>
  <label>Email <input name="email" type="email" required /></label>
  <label>Company <input name="company" /></label>
  <label>What do you need?
    <select name="service" required>
      <option>Website</option>
      <option>E-shop</option>
      <option>Mobile app</option>
      <option>Consulting</option>
      <option>Other</option>
    </select>
  </label>
  <label>Budget
    <select name="budget">
      <option value="">Not sure yet</option>
      <option>Under $5k</option>
      <option>$5k–20k</option>
      <option>$20k–50k</option>
      <option>Over $50k</option>
    </select>
  </label>
  <label>Deadline <input name="deadline" type="date" /></label>
  <label>Project details <textarea name="details" required minlength="10"></textarea></label>
  <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY"></div>
  <button type="submit">Request a quote</button>
  <p id="quote-status" role="status"></p>
</form>

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<script
  src="https://cdn.jsdelivr.net/npm/@frontmail/browser@0.1.0/dist/frontmail.umd.js"
  integrity="sha384-g2Rxznkz2yb/YYSdVTkXLxZFZ2Nh2+XdhPStxh0stydXFF3gYjDuyHimWIZLJDCc"
  crossorigin="anonymous"></script>
<script>
  frontmail.init({ publicKey: 'pk_…' });
  const form = document.getElementById('quote');
  const status = document.getElementById('quote-status');
  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    status.textContent = 'Sending…';
    try {
      await frontmail.sendForm(null, 'tpl_…', form);
      status.textContent = 'Thanks! Check your inbox – we’ve sent you a confirmation.';
      form.reset();
    } catch (err) {
      status.textContent = 'Sorry, that didn’t work: ' + err.message;
    } finally {
      window.turnstile?.reset();
    }
  });
</script>

Les champs facultatifs vides (budget non sélectionné, pas d’échéance) disparaissent simplement de l’e-mail.

6. Testez

Envoyez une demande de test avec votre propre adresse dans le champ Email. Vous devez recevoir la demande puis, un instant plus tard, la confirmation. Les deux apparaissent dans l’Historique, chacune avec sa propre chronologie.

Chaque e-mail consomme un crédit : une demande avec réponse automatique en coûte donc deux. Si vos crédits s’épuisent en pleine saison, les demandes patientent dans la file d’attente des e-mails retenus et partent dès que vous rechargez – aucune n’est perdue.

Étapes suivantes

• Enregistrez chaque client dans Contacts : le modèle associe déjà email, name et company ; activez la Collecte des contacts dans les Paramètres du modèle.
• Vous voulez la demande dans la langue du client ? Ajoutez une variante linguistique du modèle et envoyez le formulaire avec un champ caché fm_locale (par exemple de).