feat: generate client reference number (MVA-YYYY-XXXX), save to HubSpot reference_client field, display in success message

This commit is contained in:
MVA Global Fret 2026-05-03 11:20:52 +02:00
parent 3641da12cf
commit 64f5401112
3 changed files with 34 additions and 10 deletions

View File

@ -77,7 +77,12 @@
<div class="form-success" id="formSuccess" role="alert"> <div class="form-success" id="formSuccess" role="alert">
<i class="fa-solid fa-circle-check" style="font-size: 2rem; color: var(--green); display: block; margin-bottom: 12px;"></i> <i class="fa-solid fa-circle-check" style="font-size: 2rem; color: var(--green); display: block; margin-bottom: 12px;"></i>
<strong data-i18n="contact.successTitle">Inscription envoyée !</strong><br> <strong data-i18n="contact.successTitle">Inscription envoyée !</strong><br>
<span data-i18n="contact.successMsg">Merci ! Nous avons bien reçu votre demande. Notre équipe vous contactera dans les plus brefs délais avec votre numéro de référence client.</span> <span data-i18n="contact.successMsg">Merci ! Votre inscription a bien été enregistrée.</span>
<div id="refNumberBlock" style="margin-top: 16px; padding: 14px 20px; background: var(--navy); border-radius: 8px; border: 2px solid var(--gold);">
<p style="margin:0 0 4px; font-size:0.85rem; color: var(--gold); font-weight:600;" data-i18n="contact.refLabel">VOTRE NUMÉRO DE RÉFÉRENCE CLIENT</p>
<p id="refNumberDisplay" style="margin:0; font-size:1.6rem; font-weight:700; color:#fff; letter-spacing:2px;"></p>
</div>
<p style="margin-top:12px; font-size:0.9rem; color: var(--text-light);" data-i18n="contact.successNote">Conservez ce numéro — il vous sera demandé lors de chaque envoi.</p>
</div> </div>
<form id="contactForm" novalidate> <form id="contactForm" novalidate>

View File

@ -14,6 +14,12 @@ document.addEventListener('DOMContentLoaded', () => {
if (form) setupContactForm(form); if (form) setupContactForm(form);
}); });
function generateRefNumber() {
const year = new Date().getFullYear();
const rand = Math.floor(1000 + Math.random() * 9000); // 4 digits
return `MVA-${year}-${rand}`;
}
function setupContactForm(form) { function setupContactForm(form) {
form.addEventListener('submit', async (e) => { form.addEventListener('submit', async (e) => {
e.preventDefault(); e.preventDefault();
@ -21,12 +27,15 @@ function setupContactForm(form) {
setLoading(true); setLoading(true);
const refNumber = generateRefNumber();
const data = { const data = {
firstname: form.firstname.value.trim(), firstname: form.firstname.value.trim(),
lastname: form.lastname.value.trim(), lastname: form.lastname.value.trim(),
phone: form.phone.value.trim(), phone: form.phone.value.trim(),
email: form.email.value.trim(), email: form.email.value.trim(),
address: form.address.value.trim(), address: form.address.value.trim(),
reference_client: refNumber,
}; };
const results = await Promise.allSettled([ const results = await Promise.allSettled([
@ -40,7 +49,7 @@ function setupContactForm(form) {
setLoading(false); setLoading(false);
if (hubspotOk || formspreeOk) { if (hubspotOk || formspreeOk) {
showSuccess(); showSuccess(refNumber);
} else { } else {
showError(); showError();
} }
@ -55,6 +64,7 @@ async function submitToHubSpot(data) {
{ name: 'phone', value: data.phone }, { name: 'phone', value: data.phone },
{ name: 'email', value: data.email }, { name: 'email', value: data.email },
{ name: 'address', value: data.address }, { name: 'address', value: data.address },
{ name: 'reference_client', value: data.reference_client },
], ],
context: { context: {
pageUri: window.location.href, pageUri: window.location.href,
@ -86,7 +96,8 @@ async function submitToFormspree(data) {
prenom: data.firstname, prenom: data.firstname,
telephone: data.phone, telephone: data.phone,
email: data.email, email: data.email,
adresse_antananarivo: data.address, adresse_livraison: data.address,
reference_client: data.reference_client,
}), }),
}); });
@ -173,9 +184,11 @@ function setLoading(isLoading) {
form?.classList.toggle('form-loading', isLoading); form?.classList.toggle('form-loading', isLoading);
} }
function showSuccess() { function showSuccess(refNumber) {
const successEl = document.getElementById('formSuccess'); const successEl = document.getElementById('formSuccess');
const form = document.getElementById('contactForm'); const form = document.getElementById('contactForm');
const refDisplay = document.getElementById('refNumberDisplay');
if (refDisplay && refNumber) refDisplay.textContent = refNumber;
if (successEl) { if (successEl) {
successEl.classList.add('show'); successEl.classList.add('show');
successEl.scrollIntoView({ behavior: 'smooth', block: 'center' }); successEl.scrollIntoView({ behavior: 'smooth', block: 'center' });

View File

@ -110,8 +110,10 @@ const translations = {
placeholderAdresse: "Adresse complète...", placeholderAdresse: "Adresse complète...",
submitBtn: "S'inscrire", submitBtn: "S'inscrire",
submitLoading: "Envoi en cours...", submitLoading: "Envoi en cours...",
successTitle: "Inscription envoyée !", successTitle: "Inscription réussie !",
successMsg: "Merci ! Nous avons bien reçu votre demande. Notre équipe vous contactera dans les plus brefs délais avec votre numéro de référence client.", successMsg: "Merci ! Votre inscription a bien été enregistrée.",
refLabel: "VOTRE NUMÉRO DE RÉFÉRENCE CLIENT",
successNote: "Conservez ce numéro — il vous sera demandé lors de chaque envoi.",
errorMsg: "Une erreur est survenue. Veuillez réessayer ou nous contacter directement.", errorMsg: "Une erreur est survenue. Veuillez réessayer ou nous contacter directement.",
required: "Ce champ est obligatoire", required: "Ce champ est obligatoire",
invalidEmail: "Adresse email invalide", invalidEmail: "Adresse email invalide",
@ -314,8 +316,10 @@ const translations = {
placeholderAdresse: "Full address...", placeholderAdresse: "Full address...",
submitBtn: "Register", submitBtn: "Register",
submitLoading: "Sending...", submitLoading: "Sending...",
successTitle: "Registration Sent!", successTitle: "Registration Successful!",
successMsg: "Thank you! We have received your request. Our team will contact you shortly with your client reference number.", successMsg: "Thank you! Your registration has been recorded.",
refLabel: "YOUR CLIENT REFERENCE NUMBER",
successNote: "Keep this number — you will need it for every shipment.",
errorMsg: "An error occurred. Please try again or contact us directly.", errorMsg: "An error occurred. Please try again or contact us directly.",
required: "This field is required", required: "This field is required",
invalidEmail: "Invalid email address", invalidEmail: "Invalid email address",
@ -518,8 +522,10 @@ const translations = {
placeholderAdresse: "Adiresy feno...", placeholderAdresse: "Adiresy feno...",
submitBtn: "Hisoratra anarana", submitBtn: "Hisoratra anarana",
submitLoading: "Alefa...", submitLoading: "Alefa...",
successTitle: "Lasa ny fisoratana anarana!", successTitle: "Vita ny fisoratana anarana!",
successMsg: "Misaotra! Voaray ny fangatahanareo. Hifandray aminareo ny ekipanay amin'ny fotoana fohy indrindra miaraka amin'ny laharan'ny mpanjifa.", successMsg: "Misaotra! Voaray tsara ny fisoratana anarana.",
refLabel: "NY LAHARANAO MPANJIFA",
successNote: "Tehirizo ity laharana ity — ilaina amin'ny fandefasana tsirairay.",
errorMsg: "Nisy olana nitranga. Andramo indray na mifandraisa mivantana aminay.", errorMsg: "Nisy olana nitranga. Andramo indray na mifandraisa mivantana aminay.",
required: "Tsy maintsy fenoina ity saha ity", required: "Tsy maintsy fenoina ity saha ity",
invalidEmail: "Tsy mety ny adiresy mailaka", invalidEmail: "Tsy mety ny adiresy mailaka",