<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demandez votre devis en ligne pour vos menuiseries, 100% gratuit, rapide</title>
<link rel="shortcut icon" href="../img/logo-hello-fermetures.ico" type="image/x-icon">
<link rel="stylesheet" href="../composant/header.css">
<link rel="stylesheet" href="../composant/footer.css">
<link rel="stylesheet" href="../style/formulaire-devis.css">
<link rel="canonical" href="https://hello-fermetures.com/html/formulaire-devis.html"/>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-M4X8XTCG');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<div id="header"></div>
<main>
<div class="text-devis">
<h1>Obtenir un devis personnalisé</h1>
<p>Chez Hello Fermetures est un processus simple et <strong>gratuit</strong>. Nous mettons un point d'honneur à vous fournir une estimation précise et adaptée à vos besoins spécifiques. Que vous envisagiez l'installation de nouvelles fenêtres, un portail sur mesure, ou des stores intérieurs, notre équipe est à votre disposition pour vous accompagner à chaque étape. Commencez par nous contacter via notre <strong>formulaire ci-dessous</strong> ou par téléphone. Nous échangerons sur vos attentes et les spécificités de votre projet.</p>
</div>
<div class="formulaire">
<div class="container">
<h2>Demande de Devis</h2>
<form action="/submit" method="POST">
<label for="nom">Nom</label>
<input type="text" id="nom" name="nom" required>
<label for="prenom">Prénom</label>
<input type="text" id="prenom" name="prenom" required>
<label for="email">E-mail</label>
<input type="email" id="email" name="email" required>
<label for="telephone">Tél. portable</label>
<input type="tel" id="telephone" name="telephone" required>
<label for="ville">Ville</label>
<input type="text" id="ville" name="ville" required>
<label for="postcode">Code postal</label>
<input type="text" id="postcode" name="postcode" required pattern="\d{5}" title="Entrez un code postal valide (5 chiffres)">
<label for="adresse">Adresse</label>
<input type="text" id="adresse" name="adresse" required>
<label>Votre demande concerne quelles gammes ?</label>
<div class="checkbox-group">
<label><input type="checkbox" name="gamme" value="Fenêtres"> Fenêtres</label>
<label><input type="checkbox" name="gamme" value="Volets"> Volets</label>
<label><input type="checkbox" name="gamme" value="Porte"> Porte</label>
<label><input type="checkbox" name="gamme" value="Stores intérieurs"> Stores intérieurs</label>
<label><input type="checkbox" name="gamme" value="Stores bannes"> Stores bannes</label>
<label><input type="checkbox" name="gamme" value="Moustiquaires"> Moustiquaires</label>
<label><input type="checkbox" name="gamme" value="Porte de garage"> Porte de garage</label>
<label><input type="checkbox" name="gamme" value="Portail"> Portail</label>
<label><input type="checkbox" name="gamme" value="Clôtures"> Clôtures</label>
<label><input type="checkbox" name="gamme" value="Pergola"> Pergola</label>
<label><input type="checkbox" name="gamme" value="Domotique"> Domotique</label>
<label><input type="checkbox" name="gamme" value="Motorisation"> Motorisation</label>
<label><input type="checkbox" name="gamme" value="Véranda"> Véranda</label>
<label><input type="checkbox" name="gamme" value="Garde corps"> Garde corps</label>
<label><input type="checkbox" name="gamme" value="Vitrage"> Vitrage</label>
<label><input type="checkbox" name="gamme" value="Abris de piscine"> Abris de piscine</label>
<label><input type="checkbox" name="gamme" value="A définir"> A définir</label>
<label><input type="checkbox" name="gamme" value="Alarme"> Alarme</label>
<label><input type="checkbox" name="gamme" value="SAV"> SAV</label>
<label><input type="checkbox" name="gamme" value="Autres"> Autres</label>
<label><input type="checkbox" name="gamme" value="Marquises"> Marquises</label>
</div>
<label for="delai">Quel est le délai de votre demande ?</label>
<select id="delai" name="delai" required>
<option value="">Sélectionner</option>
<option value="Urgent">Urgent</option>
<option value="1 mois">1 mois</option>
<option value="3 mois">3 mois</option>
<option value="6 mois et plus">6 mois et plus</option>
</select>
<label for="details">À propos de votre demande</label>
<textarea id="details" name="details" rows="4" placeholder="Décrivez votre projet..."></textarea>
<p><input type="checkbox" name="consent" required> En soumettant ce formulaire, j’accepte que les informations saisies soient exploitées par Hellofermetures.</p>
<button class="envoyer" id="submit-btn" type="submit">Envoyer la demande</button>
</form>
</div>
</div>
<section class="logo-eldo">
<style media="screen and (max-width: 750px)" type="text/css">.widget-001{width:100px;height:100px;}</style><a href=https://www.eldo.com/pro/hello_fermetures><iframe src=https://www.eldo.com/widget/artisan/102610/dark frameborder="0" height="120px" width="120px" style="position: fixed;left: 20px;bottom: 50px;z-index:100 !important;opacity: 1" class="widget-001"></iframe></a>
</section>
</main>
<div id="footer"></div>
<script src="../composant/header/header-footer.js"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LS060J8JVN"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-LS060J8JVN');
</script>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-M4X8XTCG"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- Script de gestion du dropdown -->
<script>
document.addEventListener("DOMContentLoaded", function () {
const dropdown = document.querySelector(".dropdown");
const submenu = document.querySelector(".submenu");
dropdown.addEventListener("click", function (event) {
event.stopPropagation();
submenu.style.display = submenu.style.display === "block" ? "none" : "block";
});
document.addEventListener("click", function () {
submenu.style.display = "none";
});
submenu.addEventListener("click", function (event) {
event.stopPropagation();
});
});
</script>
<!-- Script de gestion du menu burger -->
<script>
document.addEventListener("DOMContentLoaded", function () {
const menuBurger = document.querySelector(".menu-burger");
const navLinks = document.querySelector(".nav-links");
const produitsLink = document.getElementById("produits-link");
const submenu = document.querySelector(".submenu");
menuBurger.addEventListener("click", function () {
navLinks.style.display = navLinks.style.display === "block" ? "none" : "block";
});
produitsLink.addEventListener("click", function (event) {
event.preventDefault();
submenu.style.display = submenu.style.display === "block" ? "none" : "block";
});
document.addEventListener("click", function (event) {
if (!produitsLink.contains(event.target) && !submenu.contains(event.target)) {
submenu.style.display = "none";
}
});
submenu.addEventListener("click", function (event) {
event.stopPropagation();
});
});
</script>
<!-- Script de validation du formulaire adapté à l’API Oplead -->
<script>
document.addEventListener("DOMContentLoaded", function () {
document.querySelector("form").addEventListener("submit", function (event) {
event.preventDefault();
const submitBtn = document.getElementById("submit-btn");
submitBtn.disabled = true; // Désactiver le bouton
submitBtn.textContent = "Envoi en cours..."; // Message de chargement
let formData = new FormData(this);
let jsonData = {
// Champs obligatoires
"token": "rT1ZV1OycYA=", // Token fourni par Oplead
"form": "DemandeDevisHelloFermetures", // Nom du formulaire
"ctc_lastname": formData.get("nom"), // Nom
"ctc_firstname": formData.get("prenom"), // Prénom
"ctc_email": formData.get("email"), // Email brut, sans modification
"ctc_mobile": formData.get("telephone"), // Téléphone portable
"ctc_address": formData.get("adresse"), // Adresse (ligne 1)
"ctc_postcode": formData.get("postcode"), // Code postal
"ctc_city": formData.get("ville"), // Ville (nouveau champ)
"ctc_country": "FR", // Pays (par défaut France)
"ctc_consent": formData.get("consent") ? "TRUE" : "FALSE", // Consentement
"prj_channel": "CNL_9555", // Canal "Site internet" (voir page 16)
// Champs optionnels
"prj_message": formData.get("details"), // Détails du projet
"prj_request": "RTY_762", // Type de demande "Devis" (par défaut, voir page 14)
};
// Gestion du délai
const delaiMapping = {
"Urgent": "DLY_731",
"1 mois": "DLY_732", // Approximation, ajustez si nécessaire
"3 mois": "DLY_733",
"6 mois et plus": "DLY_734"
};
jsonData["prj_delay"] = delaiMapping[formData.get("delai")] || "";
// Gestion des gammes (convertir en codes)
const gammeMapping = {
"Fenêtres": "RNG_1255",
"Volets": "RNG_1256",
"Porte": "RNG_1257",
"Stores intérieurs": "RNG_1258",
"Stores bannes": "RNG_1259",
"Moustiquaires": "RNG_1260",
"Porte de garage": "RNG_1261",
"Portail": "RNG_1262",
"Clôtures": "RNG_1263",
"Pergola": "RNG_1266",
"Domotique": "RNG_1265",
"Motorisation": "RNG_1267",
"Véranda": "RNG_1268",
"Garde corps": "RNG_1392",
"Vitrage": "RNG_4633",
"Abris de piscine": "RNG_4634",
"A définir": "RNG_4288", // Approximation pour "Autres"
"Alarme": "RNG_1264",
"SAV": "RNG_1975",
"Autres": "RNG_4288",
"Marquises": "RNG_6480"
};
const selectedGammes = formData.getAll("gamme").map(g => gammeMapping[g] || "RNG_4288");
jsonData["prj_range"] = selectedGammes.join(","); // Concaténer les codes
fetch("https://leadimport.oplead.com/addlead/", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(jsonData)
})
.then(response => {
if (!response.ok) {
throw new Error(`Erreur HTTP ${response.status}: ${response.statusText}`);
}
return response.json();
})
.then(data => {
console.log("Réponse de l’API :", data); // Pour déboguer
if (data.status === "OK" && parseInt(data.lead.lead_id) > 0) {
alert("Votre demande a bien été envoyée !");
document.querySelector("form").reset();
} else {
alert("La demande a été traitée mais le lead n’a pas été créé. Vérifiez les données ou contactez le support Oplead. Détails : " + (data.statusTreatment || "Erreur inconnue"));
}
})
.catch(error => {
alert("Erreur réseau ou serveur : " + error.message);
console.error("Erreur :", error);
})
.finally(() => {
submitBtn.disabled = false; // Réactiver le bouton
submitBtn.textContent = "Envoyer la demande"; // Restaurer le texte
});
});
});
</script>
</body>
</html>
