« Combien coûterait approximativement la réfection de ma terrasse ? » Une question que reçoit régulièrement, par téléphone, un artisan spécialisé en revêtements extérieurs, avant même le premier rendez-vous sur place. Plutôt que de répondre au cas par cas, il souhaitait qu’un premier chiffrage indicatif apparaisse directement sur son site, à partir de quelques informations simples saisies par le visiteur.
Le widget Formulaire d’Elementor Pro permet ce calcul en direct grâce à un peu de JavaScript personnalisé, sans dépendre d’une base de données externe ni d’un service de devis en ligne payant : tout se joue dans le navigateur, avant même l’envoi du formulaire par e-mail.
Structurer les champs du formulaire
Le formulaire comprend trois champs numériques visibles : la longueur en mètres, la largeur en mètres, et un champ de sélection pour le type de revêtement souhaité (dalle béton, bois composite, pierre naturelle), chacun associé dans le code à un tarif au mètre carré différent. Un quatrième champ, de type texte caché, reçoit le résultat du calcul juste avant l’envoi, pour que ce montant indicatif apparaisse dans l’e-mail de notification reçu par l’artisan.
Il est essentiel de préciser clairement, dans un texte au-dessus du formulaire, que ce montant reste une estimation grossière avant visite technique, pour éviter tout malentendu avec un client qui prendrait ce chiffre pour un devis ferme et définitif.
Le calcul côté navigateur
Le calcul repose sur un petit script JavaScript ajouté via l’action personnalisée du widget Formulaire, déclenché à chaque changement de valeur dans les champs concernés. La surface se calcule en multipliant longueur par largeur, puis ce résultat est multiplié par le tarif correspondant au revêtement choisi, avant d’être affiché à l’écran et copié dans le champ caché.
document.addEventListener('input', function (e) {
if (!e.target.closest('.elementor-form')) return;
const longueur = parseFloat(document.querySelector('[name="form_fields[longueur]"]').value) || 0;
const largeur = parseFloat(document.querySelector('[name="form_fields[largeur]"]').value) || 0;
const tarifs = { beton: 45, composite: 68, pierre: 92 };
const type = document.querySelector('[name="form_fields[revetement]"]').value;
const total = longueur * largeur * (tarifs[type] || 0);
document.querySelector('#estimation-visible').textContent = total.toFixed(0) + ' euros environ';
document.querySelector('[name="form_fields[estimation]"]').value = total.toFixed(0);
});Envoyer le résultat par e-mail à l’artisan
Le champ caché contenant l’estimation s’ajoute simplement aux autres champs dans le modèle d’e-mail configuré au niveau de l’action « Envoi d’e-mail » du formulaire, avec sa propre balise de fusion. L’artisan reçoit ainsi directement dans sa boîte de réception le montant calculé, en plus des coordonnées du demandeur, sans avoir à ressaisir quoi que ce soit avant de rappeler le client.
- Trois champs numériques et un menu déroulant, rien de plus côté saisie.
- Un script déclenché à chaque saisie, sans bouton de calcul séparé à cliquer.
- Un champ caché qui transporte le résultat jusqu’à l’e-mail final.
Fiabiliser le calcul face aux erreurs de saisie
Il faut prévoir le cas d’une saisie vide ou d’un texte non numérique dans les champs de dimensions, pour éviter qu’un résultat erroné du type « NaN » ne s’affiche à l’écran ou ne parte dans l’e-mail final. La fonction parseFloat associée à une valeur de repli à zéro, comme dans l’exemple ci-dessus, couvre déjà l’essentiel de ces cas limites courants.
Ce que ce dispositif ne couvre pas
La signature électronique du devis final, une fois le rendez-vous effectué et le chiffrage définitif établi, sort totalement du cadre de ce formulaire indicatif : elle relève d’un outil de signature dédié, distinct de ce premier contact chiffré en ligne. Ce formulaire ne remplace jamais la visite technique, il la précède simplement en filtrant les demandes clairement hors budget.
Toujours arrondir le résultat affiché à la dizaine d’euros la plus proche plutôt que d’afficher un chiffre à la décimale près : un montant trop précis donne l’illusion trompeuse d’un devis ferme, ce qui est exactement l’inverse de l’effet recherché ici.
En résumé
Un calcul simple en JavaScript, un champ caché et une action d’envoi d’e-mail bien configurée suffisent à donner à un visiteur un premier ordre de grandeur avant même le premier contact téléphonique. Pas besoin de base de données externe ni de service de devis en ligne payant pour ce niveau de précision, largement suffisant en amont d’une visite technique.
