Cinq prestations à cocher, un tarif associé à chacune, un total qui s’affiche en direct : c’est le dispositif imaginé pour qu’un artisan électricien cesse de répondre par téléphone à des demandes de prix qu’il affiche pourtant clairement sur son site. Plutôt qu’un configurateur professionnel générant un document PDF détaillé, ce projet visait un mécanisme volontairement plus simple : afficher un total indicatif selon les prestations cochées par le visiteur, pour filtrer les demandes clairement hors budget avant même le premier contact.
La solution retenue repose sur un widget Elementor de type Formulaire, des cases à cocher associées chacune à un tarif indicatif, et un script JavaScript léger pour additionner le total à l’écran.
Lister les prestations et leurs tarifs indicatifs
Cinq prestations courantes ont été retenues pour ce configurateur : mise aux normes du tableau électrique, ajout d’une prise, installation d’un point lumineux, pose d’un interrupteur, et diagnostic électrique complet. Chaque prestation dispose d’un tarif de départ, clairement présenté comme un minimum indicatif avant visite technique, jamais comme un prix ferme et définitif.
Cette liste de prestations, choisie avec l’artisan lui-même plutôt qu’imposée par convention technique, correspond exactement aux demandes les plus fréquentes qu’il recevait par téléphone, ce qui rend le configurateur immédiatement utile pour la majorité des visiteurs du site.
Construire les cases à cocher dans le formulaire
Le widget Formulaire d’Elementor propose un champ de type case à cocher, configuré ici avec les cinq prestations comme options distinctes. Chaque option, dans son attribut de valeur, encode discrètement le tarif associé, ce qui permet au script de calcul de le récupérer facilement sans dupliquer cette information ailleurs dans la page.
document.querySelectorAll('.configurateur input[type="checkbox"]').forEach(function (cb) {
cb.addEventListener('change', function () {
let total = 0;
document.querySelectorAll('.configurateur input[type="checkbox"]:checked').forEach(function (c) {
total += parseInt(c.value.split('|')[1], 10) || 0;
});
document.querySelector('#total-configurateur').textContent = total + ' euros minimum';
});
});Afficher le total sans rechargement de page
Le total s’affiche dans un simple bloc de texte inséré via un widget HTML, mis à jour à chaque coche ou décoche par le script ci-dessus. Cette approche évite tout rechargement de page ou soumission intermédiaire du formulaire, ce qui donne une sensation d’instantanéité proche de celle d’un véritable configurateur professionnel, pour un effort de développement bien moindre.
- Une case à cocher par prestation, avec son tarif encodé discrètement.
- Un total recalculé à chaque changement, affiché sans rechargement de page.
- Un texte rappelant explicitement que ce total reste indicatif, avant visite technique.
Filtrer les demandes plutôt que vendre en ligne
La validation finale du formulaire envoie simplement les prestations cochées et le total affiché par e-mail à l’artisan, sans étape de paiement ni de génération de document. Ce choix assumé distingue ce configurateur d’un véritable outil de devis professionnel : il sert avant tout à qualifier la demande et à donner un ordre de grandeur, pas à produire un document contractuel.
Ce que ce dispositif ne couvre pas
La génération d’un document PDF détaillé, éventuellement signable électroniquement, ne fait pas partie de ce configurateur volontairement simplifié : elle interviendrait, si besoin plus tard, après la visite technique et l’établissement d’un devis réellement définitif par l’artisan lui-même.
Un conseil qui vaut pour tout configurateur de ce type : toujours afficher une fourchette basse clairement identifiée comme telle, plutôt qu’un chiffre unique qui laisse penser à un engagement contractuel. Le mot « minimum » ou « à partir de » change beaucoup la perception du visiteur.
En résumé
Des cases à cocher tarifées, un script de calcul léger et un total affiché en direct suffisent à donner à un artisan seul un outil de qualification de ses demandes en ligne, sans la lourdeur d’un configurateur professionnel générant des devis PDF. Une solution taillée pour un besoin précis, ni plus ni moins.
