c2e3b1e0d5
HubSpot double opt-in is now enabled at the account level. After submitting the form, contacts must click the confirmation link in their email to be added to the marketing list. The success message now explicitly tells the user to check their inbox and click the confirmation link, instead of just saying 'inscription enregistrée'. - title: 'Vérifiez votre boîte mail !' (FR), 'Check your inbox!' (EN), 'Jereo ny boaty mailaka!' (MG) - main msg: focus on confirmation step - icon: enveloppe-circle-check (gold) instead of generic green check - note: nuance that the reference number is for tracking parcels - emailSent: kept as is (informative footer) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
315 lines
18 KiB
HTML
315 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Contact & Inscription — MVA Global Fret</title>
|
|
<meta name="description" content="Inscrivez-vous chez MVA Global Fret pour envoyer vos colis de Paris à Antananarivo. Recevez votre numéro de référence client et l'adresse de dépôt à Paris.">
|
|
<link rel="icon" type="image/png" href="PNG MVA GLOBAL FRET.png">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<a href="#main" class="skip-link">Aller au contenu principal</a>
|
|
|
|
<header class="header" id="header">
|
|
<div class="container header-inner">
|
|
<a href="accueil.html" class="logo"><img src="PNG MVA GLOBAL FRET.png" alt="MVA Global Fret"></a>
|
|
<nav class="nav" aria-label="Navigation principale">
|
|
<a href="accueil.html" data-i18n="nav.home">Accueil</a>
|
|
<a href="about.html" data-i18n="nav.about">Qui sommes-nous</a>
|
|
<a href="tarifs.html" data-i18n="nav.pricing">Tarifs</a>
|
|
<a href="service-commande.html" data-i18n="nav.serviceCommande">Service Commande</a>
|
|
<a href="guide-envoi.html" data-i18n="nav.guide">Guide d'envoi</a>
|
|
<a href="contact.html" data-i18n="nav.contact">Contact</a>
|
|
<a href="application.html" data-i18n="nav.app">Prochainement</a>
|
|
</nav>
|
|
<div class="header-right">
|
|
<div class="lang-switcher" role="group" aria-label="Choisir la langue">
|
|
<button data-lang="fr" class="active">FR</button>
|
|
<button data-lang="en">EN</button>
|
|
<button data-lang="mg">MG</button>
|
|
</div>
|
|
<button class="menu-toggle" id="menuToggle" aria-label="Ouvrir le menu"><span></span><span></span><span></span></button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="mobile-nav" id="mobileNav">
|
|
<a href="accueil.html" data-i18n="nav.home">Accueil</a>
|
|
<a href="about.html" data-i18n="nav.about">Qui sommes-nous</a>
|
|
<a href="tarifs.html" data-i18n="nav.pricing">Tarifs</a>
|
|
<a href="guide-envoi.html" data-i18n="nav.guide">Guide d'envoi</a>
|
|
<a href="contact.html" data-i18n="nav.contact">Contact</a>
|
|
<a href="application.html" data-i18n="nav.app">Prochainement</a>
|
|
<div class="lang-switcher" style="margin-top:16px">
|
|
<button data-lang="fr" class="active">FR</button>
|
|
<button data-lang="en">EN</button>
|
|
<button data-lang="mg">MG</button>
|
|
</div>
|
|
</nav>
|
|
<div class="overlay" id="overlay"></div>
|
|
|
|
<main id="main">
|
|
|
|
<!-- HERO -->
|
|
<section class="hero hero-sub" style="background-image: url('https://images.unsplash.com/photo-1423666639041-f56000c27a9a?w=1600&q=80');">
|
|
<div class="hero-content animate-on-scroll">
|
|
<h1 data-i18n="contact.heroTitle">Contactez-Nous</h1>
|
|
<p data-i18n="contact.heroSubtitle">Inscrivez-vous et commencez à envoyer vos colis dès aujourd'hui</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CONTACT SECTION -->
|
|
<section class="section" aria-labelledby="form-title">
|
|
<div class="container">
|
|
<div class="contact-grid">
|
|
|
|
<!-- FORMULAIRE -->
|
|
<div class="animate-on-scroll">
|
|
<h2 id="form-title" data-i18n="contact.formTitle">Formulaire d'inscription</h2>
|
|
<div class="gold-line" style="margin: 16px 0 24px;"></div>
|
|
<p style="color: var(--text-light); margin-bottom: 32px;" data-i18n="contact.formSubtitle">Remplissez ce formulaire pour recevoir votre numéro de référence client et l'adresse de dépôt à Paris.</p>
|
|
|
|
<div class="form-success" id="formSuccess" role="alert">
|
|
<i class="fa-solid fa-envelope-circle-check" style="font-size: 2rem; color: var(--gold); display: block; margin-bottom: 12px;"></i>
|
|
<strong data-i18n="contact.successTitle">Vérifiez votre boîte mail !</strong><br>
|
|
<span data-i18n="contact.successMsg">Pour finaliser votre inscription, cliquez sur le lien de confirmation que nous venons de vous envoyer par email.</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 précieusement — il vous sera utile pour suivre vos colis.</p>
|
|
<p style="margin-top:8px; font-size:0.85rem; color: var(--text-light);" data-i18n="contact.emailSent">📧 Email envoyé — pensez aussi à vérifier vos spams.</p>
|
|
</div>
|
|
|
|
<!-- DÉJÀ INSCRIT -->
|
|
<div class="form-success" id="alreadyRegistered" role="alert" style="border-color: var(--gold); background: rgba(197,165,90,0.08);">
|
|
<i class="fa-solid fa-circle-info" style="font-size: 2rem; color: var(--gold); display: block; margin-bottom: 12px;"></i>
|
|
<strong data-i18n="contact.alreadyTitle">Vous êtes déjà client !</strong><br>
|
|
<span data-i18n="contact.alreadyMsg">Votre adresse email est déjà enregistrée dans notre système.</span>
|
|
<div id="existingRefBlock" 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.alreadyRefLabel">VOTRE NUMÉRO DE RÉFÉRENCE EXISTANT</p>
|
|
<p id="existingRefDisplay" 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.alreadyContact">Pour toute question, contactez-nous directement.</p>
|
|
</div>
|
|
|
|
<form id="contactForm" novalidate>
|
|
<div class="grid-2" style="gap: 16px;">
|
|
<div class="form-group">
|
|
<label for="lastname" data-i18n="contact.labelNom">Nom</label>
|
|
<input type="text" id="lastname" name="lastname" autocomplete="family-name" required
|
|
data-i18n-placeholder="contact.placeholderNom" placeholder="Votre nom de famille">
|
|
<div class="form-error" id="error-lastname"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="firstname" data-i18n="contact.labelPrenom">Prénom</label>
|
|
<input type="text" id="firstname" name="firstname" autocomplete="given-name" required
|
|
data-i18n-placeholder="contact.placeholderPrenom" placeholder="Votre prénom">
|
|
<div class="form-error" id="error-firstname"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="phone" data-i18n="contact.labelTel">Numéro de téléphone</label>
|
|
<input type="tel" id="phone" name="phone" autocomplete="tel" required
|
|
data-i18n-placeholder="contact.placeholderTel" placeholder="+261 38 00 000 00">
|
|
<div class="form-error" id="error-phone"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="email" data-i18n="contact.labelEmail">Adresse email</label>
|
|
<input type="email" id="email" name="email" autocomplete="email" required
|
|
data-i18n-placeholder="contact.placeholderEmail" placeholder="votre@email.com">
|
|
<div class="form-error" id="error-email"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="address" data-i18n="contact.labelAdresse">Adresse de livraison</label>
|
|
<textarea id="address" name="address" required
|
|
data-i18n-placeholder="contact.placeholderAdresse" placeholder="Adresse complète..."></textarea>
|
|
<div class="form-error" id="error-address"></div>
|
|
</div>
|
|
|
|
<!-- Case CGV -->
|
|
<div class="form-group" style="margin-bottom: 20px;">
|
|
<label style="display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-weight:400; color:var(--text-light); font-size:0.9rem;">
|
|
<input type="checkbox" id="cgv" name="cgv" required
|
|
style="width:18px; height:18px; margin-top:2px; flex-shrink:0; accent-color:var(--gold); cursor:pointer;">
|
|
<span data-i18n-html="contact.cgvLabel">J'ai lu et j'accepte les <a href="cgv.html" target="_blank" style="color:var(--gold); font-weight:600; text-decoration:underline;">Conditions Générales de Vente</a> de MVA Global Fret.</span>
|
|
</label>
|
|
<div class="form-error" id="error-cgv"></div>
|
|
</div>
|
|
|
|
<div id="formErrorGlobal" style="display:none; color: var(--red); margin-bottom: 16px; font-size: 0.9rem;"></div>
|
|
|
|
<button type="submit" class="btn btn-primary" id="submitBtn" style="width: 100%; justify-content: center;">
|
|
<i class="fa-solid fa-paper-plane"></i>
|
|
<span id="submitText" data-i18n="contact.submitBtn">S'inscrire</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- COORDONNÉES -->
|
|
<div class="animate-on-scroll delay-2">
|
|
<h2 data-i18n="contact.infoTitle">Nos Coordonnées</h2>
|
|
<div class="gold-line" style="margin: 16px 0 24px;"></div>
|
|
|
|
<div class="contact-info-card">
|
|
<div style="text-align:center; margin-bottom: 24px;">
|
|
<div style="display:inline-flex; align-items:center; gap:8px; background: rgba(197,165,90,0.15); color: var(--gold); padding: 8px 16px; border-radius: 50px; font-size: 0.85rem; font-weight: 600;">
|
|
<i class="fa-solid fa-circle" style="font-size: 8px; animation: pulse 2s infinite;"></i>
|
|
<span data-i18n="contact.infoAvailable">Disponible tous les jours</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-info-item">
|
|
<i class="fa-solid fa-phone" aria-hidden="true"></i>
|
|
<div>
|
|
<span class="label" data-i18n="contact.phoneMG">Numéro Madagascar</span>
|
|
<a href="tel:+261384973751">+261 38 49 737 51</a>
|
|
</div>
|
|
</div>
|
|
<div class="contact-info-item">
|
|
<i class="fa-solid fa-phone" aria-hidden="true"></i>
|
|
<div>
|
|
<span class="label" data-i18n="contact.phoneFR">Numéro France</span>
|
|
<a href="tel:+33780970825">+33 7 80 97 08 25</a>
|
|
</div>
|
|
</div>
|
|
<div class="contact-info-item">
|
|
<i class="fa-solid fa-envelope" aria-hidden="true"></i>
|
|
<div>
|
|
<span class="label" data-i18n="contact.email">Email</span>
|
|
<a href="mailto:mvaglobalfret@gmail.com">mvaglobalfret@gmail.com</a>
|
|
</div>
|
|
</div>
|
|
<div class="contact-info-item">
|
|
<i class="fa-solid fa-location-dot" aria-hidden="true"></i>
|
|
<div>
|
|
<span class="label" data-i18n="contact.address">Adresse</span>
|
|
<span data-i18n="contact.addressValue">Antananarivo 101, Madagascar</span>
|
|
</div>
|
|
</div>
|
|
<div class="contact-info-item">
|
|
<i class="fa-brands fa-facebook" aria-hidden="true"></i>
|
|
<div>
|
|
<span class="label" data-i18n="contact.facebook">Facebook</span>
|
|
<a href="https://www.facebook.com/profile.php?id=61573448820736" target="_blank" rel="noopener noreferrer">MVA Global Fret</a>
|
|
</div>
|
|
</div>
|
|
<div class="contact-info-item">
|
|
<i class="fa-brands fa-facebook-messenger" aria-hidden="true"></i>
|
|
<div>
|
|
<span class="label" data-i18n="contact.messenger">Messenger</span>
|
|
<a href="https://m.me/61573448820736" target="_blank" rel="noopener noreferrer" data-i18n="contact.messengerAction">Discuter sur Messenger</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Info tarifs rapide — bloc centré pleine largeur -->
|
|
<div class="price-reminder animate-on-scroll">
|
|
<h4>
|
|
<i class="fa-solid fa-tag" style="color: var(--gold);"></i> <span data-i18n="contact.priceReminder">Rappel tarifaire</span>
|
|
</h4>
|
|
<ul>
|
|
<li><i class="fa-solid fa-check"></i><span data-i18n="contact.priceDetail1">70 000 Ar / kg</span></li>
|
|
<li><i class="fa-solid fa-check"></i><span data-i18n="contact.priceDetail2">Paiement à la réception</span></li>
|
|
<li><i class="fa-solid fa-check"></i><span data-i18n="contact.priceDetail3">2 envois / semaine</span></li>
|
|
<li><i class="fa-solid fa-check"></i><span data-i18n="contact.priceDetail4">Livraison en 2 semaines à compter du dépôt à Paris</span></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- CARTE -->
|
|
<div class="map-section animate-on-scroll">
|
|
<div class="section-header">
|
|
<h2 data-i18n="contact.mapTitle">Notre Localisation</h2>
|
|
<div class="gold-line"></div>
|
|
<p data-i18n="contact.mapSubtitle">Notre siège au cœur d'Antananarivo</p>
|
|
</div>
|
|
<div class="map-card">
|
|
<div class="map-card-header">
|
|
<div class="map-card-icon"><i class="fa-solid fa-location-dot"></i></div>
|
|
<div class="map-card-info">
|
|
<strong>MVA Global Fret</strong>
|
|
<span data-i18n="contact.addressValue">Antananarivo 101, Madagascar</span>
|
|
</div>
|
|
<a href="https://www.google.com/maps/place/Antananarivo,+Madagascar" target="_blank" rel="noopener noreferrer" class="map-card-cta" aria-label="Ouvrir dans Google Maps">
|
|
<i class="fa-solid fa-arrow-up-right-from-square"></i>
|
|
</a>
|
|
</div>
|
|
<iframe
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d119722.82983154597!2d47.46117785!3d-18.91368105!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x21f07e967738b369%3A0x3fac7a9b7c8ac!2sAntananarivo%2C%20Madagascar!5e0!3m2!1sfr!2sfr!4v1700000000000!5m2!1sfr!2sfr"
|
|
width="100%" height="420" style="border:0; display:block;" allowfullscreen="" loading="lazy"
|
|
referrerpolicy="no-referrer-when-downgrade"
|
|
title="Carte Antananarivo Madagascar — MVA Global Fret">
|
|
</iframe>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer class="footer" role="contentinfo">
|
|
<div class="container">
|
|
<div class="footer-grid">
|
|
<div class="footer-brand">
|
|
<a href="accueil.html" class="logo"><img src="PNG MVA GLOBAL FRET.png" alt="MVA Global Fret"></a>
|
|
<p data-i18n="footer.desc">Votre partenaire de confiance pour le fret aérien entre l'Europe et Madagascar.</p>
|
|
<div class="social-links">
|
|
<a href="https://www.facebook.com/profile.php?id=61573448820736" target="_blank" rel="noopener noreferrer" aria-label="Facebook"><i class="fa-brands fa-facebook-f"></i></a>
|
|
<a href="https://m.me/61573448820736" target="_blank" rel="noopener noreferrer" aria-label="Messenger"><i class="fa-brands fa-facebook-messenger"></i></a>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 data-i18n="footer.linksTitle">Liens Rapides</h4>
|
|
<ul class="footer-links">
|
|
<li><a href="accueil.html" data-i18n="nav.home">Accueil</a></li>
|
|
<li><a href="about.html" data-i18n="nav.about">Qui sommes-nous</a></li>
|
|
<li><a href="tarifs.html" data-i18n="nav.pricing">Tarifs</a></li>
|
|
<li><a href="service-commande.html" data-i18n="nav.serviceCommande">Service Commande</a></li>
|
|
<li><a href="guide-envoi.html" data-i18n="nav.guide">Guide d'envoi</a></li>
|
|
<li><a href="contact.html" data-i18n="nav.contact">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 data-i18n="footer.contactTitle">Contact</h4>
|
|
<div class="footer-contact-item"><i class="fa-solid fa-phone"></i><a href="tel:+261384973751">+261 38 49 737 51</a></div>
|
|
<div class="footer-contact-item"><i class="fa-solid fa-phone"></i><a href="tel:+33780970825">+33 7 80 97 08 25</a></div>
|
|
<div class="footer-contact-item"><i class="fa-solid fa-envelope"></i><a href="mailto:mvaglobalfret@gmail.com">mvaglobalfret@gmail.com</a></div>
|
|
<div class="footer-contact-item"><i class="fa-solid fa-location-dot"></i><span>Antananarivo 101, Madagascar</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<div class="container">
|
|
<p data-i18n="footer.copyright">© 2026 MVA Global Fret. Tous droits réservés.</p>
|
|
<p style="margin-top:4px;"><a href="cgv.html" style="color:rgba(255,255,255,0.45); font-size:0.8rem;" data-i18n="footer.cgv">Conditions Générales de Vente</a></p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
|
|
<script src="js/translations.js"></script>
|
|
<script src="js/main.js"></script>
|
|
<script src="js/form-handler.js"></script>
|
|
|
|
<style>
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.3; }
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|