feat: generate client reference number (MVA-YYYY-XXXX), save to HubSpot reference_client field, display in success message
This commit is contained in:
parent
3641da12cf
commit
64f5401112
@ -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>
|
||||||
|
|||||||
@ -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' });
|
||||||
|
|||||||
@ -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",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user