/* — 1. BRANDING & COLORS — */
:root {
–gp-green: #3BCD5E;
–gp-dark: #00334C;
–gp-error: #D32F2F;
}
/* — 2. MAIN CONTAINER — */
.gp-wrapper {
font-family: ‘Segoe UI’, Helvetica, Arial, sans-serif;
background-color: #ffffff;
color: var(–gp-dark);
max-width: 800px;
margin: 0 auto;
padding: 40px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #e1e1e1;
}
/* — 3. INPUT FIELDS (THE FIX) — */
/* We use !important to override your WordPress theme */
.gp-wrapper input[type= »text »],
.gp-wrapper input[type= »email »],
.gp-wrapper input[type= »number »],
.gp-wrapper input[type= »tel »],
.gp-wrapper select {
width: 100% !important;
padding: 15px !important;
font-size: 16px !important;
line-height: normal !important;
/* VISIBLE ROUNDED RECTANGLE STYLE */
background-color: #F3F4F6 !important; /* Light Gray Background */
border: 1px solid #9CA3AF !important; /* Dark Gray Border */
border-radius: 8px !important; /* Rounded Corners */
box-sizing: border-box !important;
margin-bottom: 20px !important;
color: #000000 !important; /* Black Text */
box-shadow: none !important;
height: auto !important; /* Fix for some themes collapsing height */
}
/* Focus State (When you click inside) */
.gp-wrapper input:focus,
.gp-wrapper select:focus {
background-color: #FFFFFF !important;
border-color: var(–gp-green) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(59, 205, 94, 0.2) !important;
}
/* — 4. FILE UPLOAD (MATCHING STYLE) — */
.gp-file-input {
width: 100% !important;
padding: 12px !important;
background-color: #F3F4F6 !important;
border: 1px solid #9CA3AF !important;
border-radius: 8px !important;
cursor: pointer;
color: #000000 !important;
margin-bottom: 20px !important;
box-sizing: border-box !important;
}
.gp-file-input:hover {
background-color: #e8f5e9 !important;
border-color: var(–gp-green) !important;
}
/* — 5. TEXT LABELS — */
.gp-wrapper label {
display: block;
font-weight: 700 !important;
margin-bottom: 8px;
font-size: 15px;
color: var(–gp-dark);
}
.gp-section-title {
font-size: 18px;
font-weight: 800;
color: var(–gp-green);
text-transform: uppercase;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
margin-top: 40px;
margin-bottom: 25px;
}
.gp-row { display: flex; gap: 20px; flex-wrap: wrap; }
.gp-col { flex: 1; min-width: 250px; }
/* — 6. CONDITIONAL BOXES — */
#gp-offer-box {
display: none;
background-color: #F0FCF4;
padding: 25px;
border-radius: 8px;
border: 2px solid var(–gp-green);
margin-bottom: 20px;
}
#gp-min-alert {
display: none;
color: #B71C1C;
background-color: #FFEBEE;
padding: 15px;
border-radius: 6px;
font-weight: 600;
font-size: 14px;
margin-top: -5px;
margin-bottom: 20px;
border: 1px solid #ef9a9a;
}
/* — 7. BUTTON — */
.gp-btn {
width: 100%;
background-color: var(–gp-green) !important;
color: white !important;
font-size: 18px !important;
font-weight: 700 !important;
padding: 16px !important;
border: none !important;
border-radius: 8px !important;
cursor: pointer;
text-transform: uppercase;
margin-top: 10px;
transition: background 0.3s;
}
.gp-btn:hover { background-color: #2eb650 !important; }
.gp-btn:disabled { background-color: #cccccc !important; cursor: not-allowed; }
/* — 8. MESSAGES — */
.gp-msg {
display: none;
padding: 20px;
margin-top: 20px;
border-radius: 6px;
text-align: center;
line-height: 1.5;
font-size: 15px;
}
.gp-success { background: #E8F5E9; color: #1B5E20; border: 1px solid #C8E6C9; }
.gp-error { background: #FFEBEE; color: #B71C1C; border: 1px solid #FFCDD2; }
.gp-email-link { color: inherit; font-weight: bold; text-decoration: underline; }
/* Mobile Responsive */
@media (max-width: 600px) {
.gp-wrapper { padding: 20px; border: none; box-shadow: none; }
.gp-row { flex-direction: column; gap: 0; }
.gp-col { min-width: 100%; }
}
— Choisir —
ALLIANTZ
ECOSTAL
SONEPAR
// — CONFIGURATION —
const SCRIPT_URL = « https://script.google.com/macros/s/AKfycbyr6nSZFiSuilndEbfxxvV0ZuKLvcww7f1hLmLNi2ufLSQqCU-cFA3OQMLdRnW32Z9XdA/exec »;
// — ELEMENTS —
const form = document.getElementById(‘gp-form’);
const amountInput = document.getElementById(‘orderAmount’);
const offerBox = document.getElementById(‘gp-offer-box’);
const minAlert = document.getElementById(‘gp-min-alert’);
const offerSelect = document.getElementById(‘offerChoice’);
const submitBtn = document.getElementById(‘submitBtn’);
// — LOGIC TIERS —
const tiers = [
{ min: 5000, max: 9999, options: [« 2 SmartGuard S0 Offert », « 1 SmartGuard T0 Offert »] },
{ min: 10000, max: 14999, options: [« 5 SmartGuard S0 Offert », « 3 SmartGuard T0 Offert »] },
{ min: 15000, max: 19999, options: [« 7 SmartGuard S0 Offert », « 5 SmartGuard T0 Offert »] },
{ min: 20000, max: 24999, options: [« 10 SmartGuard S0 Offert », « 7 SmartGuard T0 Offert »] },
{ min: 25000, max: 29999, options: [« 12 SmartGuard S0 Offert », « 9 SmartGuard T0 Offert »] },
{ min: 30000, max: 34999, options: [« 15 SmartGuard S0 Offert », « 11 SmartGuard T0 Offert »] },
{ min: 35000, max: 39999, options: [« 17 SmartGuard S0 Offert », « 13 SmartGuard T0 Offert »] },
{ min: 40000, max: Infinity, options: [« 20 SmartGuard S0 Offert », « 15 SmartGuard T0 Offert »] }
];
amountInput.addEventListener(‘input’, function() {
const val = parseFloat(this.value);
offerSelect.innerHTML = ‘– Sélectionnez –‘;
// Reset Logic
offerBox.style.display = ‘none’;
minAlert.style.display = ‘none’;
offerSelect.required = false;
if (!isNaN(val)) {
if (val > 0 && val val >= t.min && val {
let el = document.createElement(‘option’);
el.value = opt; el.innerText = opt; offerSelect.appendChild(el);
});
offerBox.style.display = ‘block’;
offerSelect.required = true;
}
}
}
});
// — FILE READER HELPER —
const readFile = (file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve({
name: file.name,
mime: file.type,
data: reader.result
});
reader.onerror = reject;
reader.readAsDataURL(file);
});
};
// — SUBMISSION HANDLER —
form.addEventListener(‘submit’, async (e) => {
e.preventDefault();
submitBtn.disabled = true; submitBtn.innerText = « Envoi en cours (Patientez)… »;
document.getElementById(‘msgError’).style.display = ‘none’;
try {
// Check File Sizes (Client Side)
const kbisFile = document.getElementById(‘kbis’).files[0];
const proofFile = document.getElementById(‘proof’).files[0];
if (kbisFile && kbisFile.size > 5 * 1024 * 1024) throw new Error(« KBIS trop volumineux (Max 5Mo) »);
if (proofFile && proofFile.size > 10 * 1024 * 1024) throw new Error(« Preuve d’achat trop volumineuse (Max 10Mo) »);
// Collect Data
let formData = {
firstName: document.getElementById(‘firstName’).value,
lastName: document.getElementById(‘lastName’).value,
email: document.getElementById(’email’).value,
company: document.getElementById(‘company’).value,
siret: document.getElementById(‘siret’).value,
distributor: document.getElementById(‘distributor’).value,
orderAmount: document.getElementById(‘orderAmount’).value,
offerChoice: document.getElementById(‘offerChoice’).value,
shipAddress: document.getElementById(‘shipAddress’).value + » » + document.getElementById(‘shipSupp’).value,
shipCity: document.getElementById(‘shipCity’).value,
shipZip: document.getElementById(‘shipZip’).value,
shipCountry: document.getElementById(‘shipCountry’).value,
contactName: document.getElementById(‘contactName’).value,
contactPhone: document.getElementById(‘contactPhone’).value
};
// Process Files (Base64)
if (kbisFile) {
const kbisData = await readFile(kbisFile);
formData.kbisName = kbisData.name;
formData.kbisMime = kbisData.mime;
formData.kbisFile = kbisData.data;
}
if (proofFile) {
const proofData = await readFile(proofFile);
formData.proofName = proofData.name;
formData.proofMime = proofData.mime;
formData.proofFile = proofData.data;
}
// Send to Google Apps Script
await fetch(SCRIPT_URL, {
method: ‘POST’,
body: JSON.stringify(formData)
});
// Success Action
form.reset();
offerBox.style.display = ‘none’;
minAlert.style.display = ‘none’;
document.getElementById(‘msgSuccess’).style.display = ‘block’;
submitBtn.style.display = ‘none’;
} catch (err) {
console.error(err);
document.getElementById(‘msgError’).innerText = « Erreur: » + err.message;
document.getElementById(‘msgError’).style.display = ‘block’;
submitBtn.disabled = false; submitBtn.innerText = « Valider ma demande »;
}
});
Formulaire de Demande
1. Informations Personnelles
2. Informations Entreprise
3. Détails de la Commande
La valeur de commande minimale requise pour cette offre est de 5000 €
— Sélectionnez votre cadeau —
4. Livraison
Contact Réception
Nous avons bien reçu votre demande.
Notre équipe va l’étudier et reviendra vers vous rapidement.
En cas de besoin, n’hésitez pas à nous contacter à :
fanny.hanrion@greenpower-technologie.com
Notre équipe va l’étudier et reviendra vers vous rapidement.
En cas de besoin, n’hésitez pas à nous contacter à :
fanny.hanrion@greenpower-technologie.com
Erreur lors de l’envoi. Vérifiez la taille des fichiers.