{"id":22846,"date":"2025-04-06T20:06:19","date_gmt":"2025-04-06T20:06:19","guid":{"rendered":"https:\/\/site.voltaxcharging.com\/?page_id=22846"},"modified":"2025-08-25T12:33:43","modified_gmt":"2025-08-25T12:33:43","slug":"become-a-partner","status":"publish","type":"page","link":"https:\/\/site.voltaxcharging.com\/fr\/become-a-partner\/","title":{"rendered":"Devenir partenaire"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t
  • \n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\tRejoignez Volta X Pro<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    Devenez acteur de la r\u00e9volution de la recharge des v\u00e9hicules \u00e9lectrique<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t
    • \n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\tCocr\u00e9ons l\u2019avenir de la mobilit\u00e9 durable<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t

      Volta X est un mouvement vers une mobilit\u00e9 plus propre, plus intelligente et plus durable.\nEn devenant partenaire, vous ne rejoignez pas simplement un r\u00e9seau, vous contribuez activement \u00e0 construire l\u2019avenir du transport.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

      \n\t\t\t\t\t
      \n\t\t
      \n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t
        \n\t\t\t\t\t\t\t
      • \n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\tVolta X <\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t

        Mettez-vous au c\u0153ur de la r\u00e9volution<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
        \n\t\t
        \n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t
        \n \n\n
        \n
        \n
        \n <\/i>\n <\/div>\n <\/div>\n
        \n

        \n Renforcez votre visibilit\u00e9 <\/h3>\n \t\t \t

        Offrez la recharge \u00e9lectrique sur votre site et devenez la r\u00e9f\u00e9rence pour une client\u00e8le moderne et engag\u00e9e.<\/p>\n <\/div>\n \n \n <\/div>\n <\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

        \n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t
        \n \n\n
        \n
        \n
        \n <\/i>\n <\/div>\n <\/div>\n
        \n

        \n Exploitez le potentiel de votre espace <\/h3>\n \t\t \t

        Transformez votre parking en source de profit gr\u00e2ce \u00e0 un d\u00e9ploiement simple et intelligent de bornes de recharge \u00e9lectrique.<\/p>\n <\/div>\n \n \n <\/div>\n <\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

        \n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t
        \n \n\n
        \n
        \n
        \n <\/i>\n <\/div>\n <\/div>\n
        \n

        \n Impact \u00e9co-responsable <\/h3>\n \t\t \t

        Soutenez une mobilit\u00e9 responsable et soyez acteur d\u2019un monde plus durable.<\/p>\n <\/div>\n \n \n <\/div>\n <\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

        \n\t\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t
        \n\t
        \n\t
        \n\t\t<\/span>\n\t<\/div>\n\t
        \n\t\t
        \n\t\t\t
        \n\t\t\t\t\t
        \n\t\t<\/i>\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t
        \n\t\t\t
        \n\t<\/div>\n\t\t<\/div>\n\t\t
        \n\t\t\t\t\t\t\t

        \n\t\tD\u00e9ploiement des bornes\t\t<\/h4>\n\t\t\t\t\t

        \n\t\tLa station de bornes est install\u00e9e, \net financ\u00e9e par Volta X, \nsur les emplacements de parking \nmis \u00e0 disposition par le Partenaire \nh\u00e9bergeur.\t<\/p>\n\t\t\t<\/div>\n\t<\/div>\n<\/div>\n

        \n\t
        \n\t\t<\/span>\n\t<\/div>\n\t
        \n\t\t
        \n\t\t\t
        \n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t
        \n\t\t\t
        \n\t<\/div>\n\t\t<\/div>\n\t\t
        \n\t\t\t\t\t\t\t

        \n\t\tGestion des acc\u00e8s\t\t<\/h4>\n\t\t\t\t\t

        \n\t\tLes bornes sont accessibles \nau public depuis notre application \nmobile Volta X.\n\t<\/p>\n\t\t\t<\/div>\n\t<\/div>\n<\/div>\n

        \n\t
        \n\t\t<\/span>\n\t<\/div>\n\t
        \n\t\t
        \n\t\t\t
        \n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t
        \n\t\t\t
        \n\t<\/div>\n\t\t<\/div>\n\t\t
        \n\t\t\t\t\t\t\t

        \n\t\tRaccordement de la station de \nbornes\t\t<\/h4>\n\t\t\t\t\t

        \n\t\tLe raccordement de la station se fait sur le r\u00e9seau priv\u00e9 du Partenaire.\t<\/p>\n\t\t\t<\/div>\n\t<\/div>\n<\/div>\n

        \n\t
        \n\t\t<\/span>\n\t<\/div>\n\t
        \n\t\t
        \n\t\t\t
        \n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t
        \n\t\t\t
        \n\t<\/div>\n\t\t<\/div>\n\t\t
        \n\t\t\t\t\t\t\t

        \n\t\tTarification, facturation et paiements\t\t<\/h4>\n\t\t\t\t\t

        \n\t\tVolta X assure la gestion des comptes utilisateurs, la facturation p\u00e9riodique, et la mon\u00e9tique des recharges. Une redevance est vers\u00e9e au Partenaire h\u00e9bergeur en fonction de la fr\u00e9quentation des bornes d\u00e9ploy\u00e9es sur son parking.\t<\/p>\n\t\t\t<\/div>\n\t<\/div>\n<\/div>\n

        \n\t
        \n\t\t<\/span>\n\t<\/div>\n\t
        \n\t\t
        \n\t\t\t
        \n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t
        \n\t\t\t
        \n\t<\/div>\n\t\t<\/div>\n\t\t
        \n\t\t\t\t\t\t\t

        \n\t\tR\u00e9f\u00e9rencement des bornes\t\t<\/h4>\n\t\t\t\t\t

        \n\t\tLes bornes sont g\u00e9o-localis\u00e9es sur les cartes de notre r\u00e9seau \u00e0 acc\u00e8s public et sur celle de nos \npartenaires disponible sur l\u2019application Volta X et sur le site internet www.voltax.ma\t<\/p>\n\t\t\t<\/div>\n\t<\/div>\n<\/div>\n

        \n\t
        \n\t\t<\/span>\n\t<\/div>\n\t
        \n\t\t
        \n\t\t\t
        \n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t
        \n\t\t\t
        \n\t<\/div>\n\t\t<\/div>\n\t\t
        \n\t\t\t\t\t\t\t

        \n\t\tAssistance\t\t<\/h4>\n\t\t\t\t\t

        \n\t\tPour tout besoin d\u2019assistance, contactez-nous sur +212 (0) 531 074 822 ou via e-mail contact@voltax.ma\t<\/p>\n\t\t\t<\/div>\n\t<\/div>\n<\/div>\n

        \n\t
        \n\t\t<\/span>\n\t<\/div>\n\t
        \n\t\t
        \n\t\t\t
        \n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t
        \n\t\t\t
        \n\t<\/div>\n\t\t<\/div>\n\t\t
        \n\t\t\t\t\t\t\t

        \n\t\tMaintenance\t\t<\/h4>\n\t\t\t\t\t

        \n\t\tNos \u00e9quipes assurent la maintenance pr\u00e9ventive et curative des bornes afin de maximiser leur diponibilit\u00e9.\n\t<\/p>\n\t\t\t<\/div>\n\t<\/div>\n<\/div>\n

        \n\t
        \n\t\t<\/span>\n\t<\/div>\n\t
        \n\t\t
        \n\t\t\t
        \n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t
        \n\t\t\t
        \n\t<\/div>\n\t\t<\/div>\n\t\t
        \n\t\t\t\t\t\t\t

        \n\t\tSupervision et pilotage\t\t<\/h4>\n\t\t\t\t\t

        \n\t\tNos \u00e9quipes assurent la supervision en temps-r\u00e9el du bon fonctionnement des bornes.Notre pilotage intelligent des bornes permet d'optimiser les temps de charges. Le partenaire dispose d\u2019un compte virtuel, mis \u00e0 jour et accessible instantan\u00e9ment via le logiciel Eveon.\t<\/p>\n\t\t\t<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

        \n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Become a Partner - Volta X Charging<\/title>\r\n <!-- Tailwind CSS -->\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <!-- Google Fonts: Montserrat -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \/* Custom Tailwind theme extension *\/\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n voltax: {\r\n gold: '#E5B223',\r\n dark: '#1a1a1a',\r\n }\r\n },\r\n fontFamily: {\r\n sans: ['Montserrat', 'sans-serif'],\r\n }\r\n }\r\n }\r\n }\r\n\r\n \/* Base styles *\/\r\n\r\n.text-gray-600 {\r\n\r\n font-family: montserrat;\r\n}\r\n .sm\\:text-4xl {\r\n font-size: 2.25rem;\r\n line-height: 2.5rem;\r\n font-family: 'Montserrat';\r\n }\r\n\r\n \/* Form step animations *\/\r\n .form-step {\r\n display: none !important ;\r\n animation: fadeIn 0.5s ease-in-out !important ;\r\n }\r\n .form-step.active {\r\n display: block !important ;\r\n }\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n \/* --- MINIMALIST INPUT STYLES --- *\/\r\n .form-input-line {\r\n background-color: transparent;\r\n border: none;\r\n border-bottom: 2px solid #e5e7eb; \/* gray-200 *\/\r\n border-radius: 0;\r\n padding: 0.75rem 0.25rem;\r\n transition: border-color 0.3s ease;\r\n }\r\n .form-input-line:focus {\r\n outline: none;\r\n border-bottom-color: #E5B223; \/* voltax-gold *\/\r\n }\r\n .form-input-line::placeholder {\r\n color: #9ca3af; \/* gray-400 *\/\r\n }\r\n \r\n \/* Visually hide labels but keep for accessibility *\/\r\n .sr-only {\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n padding: 0;\r\n margin: -1px;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n white-space: nowrap;\r\n border-width: 0;\r\n }\r\n \r\n \/* Custom spinner class *\/\r\n .vtx-partner-spinner {\r\n border: 3px solid rgba(0, 0, 0, 0.1);\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n border-left-color: #1a1a1a;\r\n animation: spin 1s ease infinite;\r\n }\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n \r\n \/* Custom styles for minimalist radio buttons *\/\r\n .vtx-partner-radio-card {\r\n border: 2px solid #e5e7eb;\r\n transition: all 0.3s ease;\r\n }\r\n .vtx-partner-radio-card.is-selected {\r\n border-color: #E5B223;\r\n background-color: rgba(229, 178, 35, 0.05);\r\n color: #1a1a1a;\r\n transform: scale(1.02);\r\n }\r\n \r\n \/* Custom button class *\/\r\n .vtx-partner-btn-primary {\r\n background-color: #E5B223 !important ;\r\n color: #1a1a1a !important ;\r\n transition: all 0.3s ease !important ;\r\n box-shadow: 0 4px 15px rgba(229, 178, 35, 0.2) !important ;\r\n border-radius: 9999px !important ; \/* Pill shape *\/\r\n }\r\n .vtx-partner-btn-primary:hover {\r\n transform: translateY(-2px) !important ;\r\n box-shadow: 0 6px 20px rgba(229, 178, 35, 0.3) !important ;\r\n }\r\n\r\n .vtx-partner-btn-secondary {\r\n background-color: #e5e7eb !important ; \/* gray-200 *\/\r\n color: #374151 !important ; \/* gray-700 *\/\r\n transition: all 0.3s ease !important ;\r\n border-radius: 9999px !important ;\r\n }\r\n .vtx-partner-btn-secondary:hover {\r\n background-color: #d1d5db !important ; \/* gray-300 *\/\r\n transform: translateY(-2px) !important ;\r\n }\r\n\r\n .vtx-partner-parking-img {\r\n height: 4rem !important ; \/* h-16 *\/\r\n margin-bottom: 0.75rem !important ; \/* mb-3 *\/\r\n object-fit: contain !important ;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"min-h-screen p-4 flex items-center justify-center\">\r\n <div class=\"w-full max-w-4xl p-4 sm:p-8 md:p-12 relative\">\r\n \r\n <div id=\"message-modal\" class=\"fixed inset-0 bg-gray-800 bg-opacity-75 flex-col items-center justify-center z-20 rounded-lg backdrop-blur-sm\" style=\"display: none;\">\r\n <div class=\"bg-white border border-gray-200 p-8 rounded-lg shadow-xl text-center max-w-sm mx-auto\">\r\n <h2 id=\"message-title\" class=\"text-2xl font-bold mb-4\"><\/h2>\r\n <p id=\"message-text\" class=\"text-gray-600\"><\/p>\r\n <button id=\"close-modal-btn\" class=\"mt-6 vtx-partner-btn-primary font-bold py-2 px-8 rounded-full\">\r\n Close\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <h1 class=\"text-3xl sm:text-4xl font-extrabold text-center text-voltax-dark mb-4\">Become a <span class=\"text-voltax-gold\">Volta X<\/span> Partner<\/h1>\r\n <p class=\"text-center text-gray-600 mb-10 px-4\">Join the electric revolution. Let's build the future together.<\/p>\r\n \r\n <div class=\"mb-10\">\r\n <div class=\"flex justify-between items-center mb-2\">\r\n <span id=\"step-indicator\" class=\"text-sm font-medium text-gray-500\">Step 1 of 4<\/span>\r\n <span id=\"progress-text\" class=\"text-sm font-bold text-voltax-gold\">0% Complete<\/span>\r\n <\/div>\r\n <div class=\"w-full bg-gray-200 rounded-full h-2\">\r\n <div id=\"progress-bar\" class=\"h-2 rounded-full transition-all duration-500\" style=\"width: 0%; background-color: #E5B223;\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <form id=\"partner-form\" action=\"https:\/\/formspree.io\/f\/meokadwp\" method=\"POST\" enctype=\"multipart\/form-data\" novalidate>\r\n <!-- Step 1: Your Details -->\r\n <div id=\"step-1\" class=\"form-step active\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-8\">\r\n <div>\r\n <label for=\"name\" class=\"sr-only\">Name<\/label>\r\n <input type=\"text\" id=\"name\" name=\"name\" class=\"form-input-line w-full\" placeholder=\"Full Name *\" required>\r\n <p class=\"text-red-500 text-sm mt-1 error-message\" style=\"display: none;\"><\/p>\r\n <\/div>\r\n <div>\r\n <label for=\"companyName\" class=\"sr-only\">Company Name<\/label>\r\n <input type=\"text\" id=\"companyName\" name=\"companyName\" class=\"form-input-line w-full\" placeholder=\"Company Name *\" required>\r\n <p class=\"text-red-500 text-sm mt-1 error-message\" style=\"display: none;\"><\/p>\r\n <\/div>\r\n <div>\r\n <label for=\"email\" class=\"sr-only\">Email Address<\/label>\r\n <input type=\"email\" id=\"email\" name=\"email\" class=\"form-input-line w-full\" placeholder=\"Email Address *\" required>\r\n <p class=\"text-red-500 text-sm mt-1 error-message\" style=\"display: none;\"><\/p>\r\n <\/div>\r\n <div>\r\n <label for=\"phone\" class=\"sr-only\">Phone Number<\/label>\r\n <input type=\"tel\" id=\"phone\" name=\"phone\" class=\"form-input-line w-full\" placeholder=\"Phone Number *\" required>\r\n <p class=\"text-red-500 text-sm mt-1 error-message\" style=\"display: none;\"><\/p>\r\n <\/div>\r\n <div>\r\n <label for=\"country\" class=\"sr-only\">Country<\/label>\r\n <select id=\"country\" name=\"country\" class=\"form-input-line w-full\" required>\r\n <option class=\"text-gray-500\" value=\"\" disabled>Country *<\/option>\r\n <option value=\"Morocco\" selected>Morocco<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label for=\"city-morocco\" class=\"sr-only\">City<\/label>\r\n <div id=\"city-morocco-container\">\r\n <select id=\"city-morocco\" name=\"city-morocco\" class=\"form-input-line w-full\">\r\n <option value=\"Agadir\">Agadir<\/option>\r\n <option value=\"Al Hoceima\">Al Hoceima<\/option>\r\n <option value=\"Asilah\">Asilah<\/option>\r\n <option value=\"Azrou\">Azrou<\/option>\r\n <option value=\"Beni Mellal\">Beni Mellal<\/option>\r\n <option value=\"Boujdour\">Boujdour<\/option>\r\n <option value=\"Casablanca\">Casablanca<\/option>\r\n <option value=\"Chefchaouen\">Chefchaouen<\/option>\r\n <option value=\"Dakhla\">Dakhla<\/option>\r\n <option value=\"El Jadida\">El Jadida<\/option>\r\n <option value=\"Errachidia\">Errachidia<\/option>\r\n <option value=\"Essaouira\">Essaouira<\/option>\r\n <option value=\"Fes\">Fes<\/option>\r\n <option value=\"Guelmim\">Guelmim<\/option>\r\n <option value=\"Ifrane\">Ifrane<\/option>\r\n <option value=\"Kenitra\">Kenitra<\/option>\r\n <option value=\"Khenifra\">Khenifra<\/option>\r\n <option value=\"Khouribga\">Khouribga<\/option>\r\n <option value=\"Ksar El Kebir\">Ksar El Kebir<\/option>\r\n <option value=\"Laayoune\">Laayoune<\/option>\r\n <option value=\"Larache\">Larache<\/option>\r\n <option value=\"Marrakesh\">Marrakesh<\/option>\r\n <option value=\"Meknes\">Meknes<\/option>\r\n <option value=\"Mohammedia\">Mohammedia<\/option>\r\n <option value=\"Nador\">Nador<\/option>\r\n <option value=\"Ouarzazate\">Ouarzazate<\/option>\r\n <option value=\"Oujda\">Oujda<\/option>\r\n <option value=\"Rabat\">Rabat<\/option>\r\n <option value=\"Safi\">Safi<\/option>\r\n <option value=\"Sale\">Sale<\/option>\r\n <option value=\"Sefrou\">Sefrou<\/option>\r\n <option value=\"Settat\">Settat<\/option>\r\n <option value=\"Sidi Ifni\">Sidi Ifni<\/option>\r\n <option value=\"Tangier\" selected>Tangier<\/option>\r\n <option value=\"Tan-Tan\">Tan-Tan<\/option>\r\n <option value=\"Taza\">Taza<\/option>\r\n <option value=\"Tetouan\">Tetouan<\/option>\r\n <option value=\"Tiznit\">Tiznit<\/option>\r\n <\/select>\r\n <\/div>\r\n <div id=\"city-other-container\" style=\"display: none;\">\r\n <input type=\"text\" id=\"city-other\" name=\"city-other\" placeholder=\"City *\" class=\"form-input-line w-full\">\r\n <p class=\"text-red-500 text-sm mt-1 error-message\" style=\"display: none;\"><\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"step-2\" class=\"form-step\">\r\n <h2 class=\"text-xl font-bold mb-6 text-voltax-dark text-center\">Do you have a parking space? <span class=\"text-voltax-gold\">*<\/span><\/h2>\r\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-4\" id=\"parking-type-options\"><\/div>\r\n <p class=\"text-red-500 text-sm mt-4 text-center error-message\" style=\"display: none;\"><\/p>\r\n <\/div>\r\n\r\n <div id=\"step-3\" class=\"form-step\">\r\n <h2 class=\"text-xl font-bold mb-6 text-voltax-dark\">What is your Parking capacity? <span class=\"text-voltax-gold\">*<\/span><\/h2>\r\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-3 mb-8\" id=\"parking-capacity-options\"><\/div>\r\n <p class=\"text-red-500 text-sm mb-4 error-message\" style=\"display: none;\"><\/p>\r\n \r\n <h2 class=\"text-xl font-bold mb-4 text-voltax-dark\">Pictures of your Parking Space <span class=\"text-voltax-gold\">*<\/span><\/h2>\r\n <div class=\"border-2 border-dashed border-gray-300 rounded-lg p-6 text-center bg-gray-50 hover:bg-gray-100 transition cursor-pointer\">\r\n <label for=\"parkingPictures\" class=\"cursor-pointer\">\r\n <div class=\"flex flex-col items-center text-gray-500\">\r\n <svg class=\"text-voltax-gold mb-2\" viewbox=\"0 0 1024 1024\" focusable=\"false\" width=\"40px\" height=\"40px\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0 0 60.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z\"><\/path><\/svg>\r\n <p class=\"font-semibold text-voltax-dark\">Click or drag files to upload<\/p>\r\n <p class=\"text-sm text-gray-500\">Up to 5 files<\/p>\r\n <\/div>\r\n <input id=\"parkingPictures\" type=\"file\" name=\"parkingPictures\" multiple class=\"hidden\">\r\n <\/label>\r\n <\/div>\r\n <p class=\"text-red-500 text-sm mt-2 error-message\" style=\"display: none;\"><\/p>\r\n <div id=\"image-previews\" class=\"mt-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4\"><\/div>\r\n <\/div>\r\n \r\n <div id=\"step-4\" class=\"form-step\">\r\n <div class=\"space-y-8\">\r\n <div>\r\n <label for=\"howHeard\" class=\"sr-only\">How did you hear about us?<\/label>\r\n <select id=\"howHeard\" name=\"howHeard\" class=\"form-input-line w-full\">\r\n <option value=\"\" disabled selected>How did you hear about us? (optional)<\/option>\r\n <option>Search engines<\/option><option>Internet ads<\/option><option>Social media<\/option><option>Event<\/option><option>Referral<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label for=\"introduction\" class=\"sr-only\">Introduce yourself<\/label>\r\n <textarea id=\"introduction\" name=\"introduction\" rows=\"2\" placeholder=\"Introduce yourself (optional)\" class=\"form-input-line w-full\"><\/textarea>\r\n <p id=\"char-count\" class=\"text-right text-xs text-gray-400 mt-1\">0 \/ 300<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mt-12 flex flex-col sm:flex-row justify-between items-center gap-4\">\r\n <button type=\"button\" id=\"prev-btn\" class=\"w-full sm:w-auto vtx-partner-btn-secondary font-bold py-3 px-8 rounded-full\" style=\"display: none;\">Previous<\/button>\r\n <div id=\"spacer\" class=\"sm:ml-auto\"><\/div>\r\n <button type=\"button\" id=\"next-btn\" class=\"w-full sm:w-auto vtx-partner-btn-primary font-bold py-3 px-8 rounded-full sm:ml-auto\">Next<\/button>\r\n <button type=\"submit\" id=\"submit-btn\" class=\"w-full sm:w-auto vtx-partner-btn-primary font-bold py-3 px-8 rounded-full flex items-center justify-center\" style=\"display: none;\">\r\n <span class=\"vtx-partner-btn-text\">Submit<\/span>\r\n <span class=\"vtx-partner-spinner ml-2\" style=\"display: none;\"><\/span>\r\n <\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n let currentStep = 1;\r\n const totalSteps = 4;\r\n const uploadedFiles = [];\r\n\r\n const form = document.getElementById('partner-form');\r\n const steps = document.querySelectorAll('.form-step');\r\n const prevBtn = document.getElementById('prev-btn');\r\n const nextBtn = document.getElementById('next-btn');\r\n const submitBtn = document.getElementById('submit-btn');\r\n const progressBar = document.getElementById('progress-bar');\r\n const progressText = document.getElementById('progress-text');\r\n const stepIndicator = document.getElementById('step-indicator');\r\n const spacer = document.getElementById('spacer');\r\n \r\n const parkingTypes = [ \r\n { value: 'Private Parking Space', img: 'https:\/\/site.voltaxcharging.com\/wp-content\/uploads\/2025\/06\/private-parking-@4x.png' }, \r\n { value: 'Public Underground Parking', img: 'https:\/\/site.voltaxcharging.com\/wp-content\/uploads\/2025\/05\/d2.png' }, \r\n { value: 'Public At-grade parking', img: 'https:\/\/site.voltaxcharging.com\/wp-content\/uploads\/2025\/05\/parking.png' }\r\n ];\r\n const parkingCapacities = ['1-10 cars', '10-50 cars', '50-100 cars', '+100 cars'];\r\n\r\n const parkingTypeContainer = document.getElementById('parking-type-options');\r\n parkingTypes.forEach(type => {\r\n const label = document.createElement('label');\r\n label.className = 'vtx-partner-radio-card flex flex-col items-center justify-center p-4 text-center font-semibold text-gray-600 rounded-lg cursor-pointer';\r\n label.innerHTML = `\r\n <input type=\"radio\" name=\"parkingType\" value=\"${type.value}\" class=\"sr-only\" required>\r\n <img decoding=\"async\" src=\"${type.img}\" \r\n onerror=\"this.onerror=null; this.src='https:\/\/placehold.co\/150x100\/e5e7eb\/4b5563?text=Icon';\" \r\n alt=\"${type.value}\" class=\"vtx-partner-parking-img\">\r\n <span class=\"text-sm\">${type.value}<\/span>\r\n `;\r\n parkingTypeContainer.appendChild(label);\r\n });\r\n \r\n const parkingCapacityContainer = document.getElementById('parking-capacity-options');\r\n parkingCapacities.forEach(capacity => {\r\n const label = document.createElement('label');\r\n label.className = 'vtx-partner-radio-card p-4 text-center font-semibold text-gray-600 rounded-lg cursor-pointer';\r\n label.innerHTML = `<input type=\"radio\" name=\"parkingCapacity\" value=\"${capacity}\" class=\"sr-only\" required>${capacity}`;\r\n parkingCapacityContainer.appendChild(label);\r\n });\r\n \r\n function updateUI() {\r\n steps.forEach((step, i) => step.classList.toggle('active', i + 1 === currentStep));\r\n const progress = currentStep > 1 ? ((currentStep - 1) \/ (totalSteps - 1)) * 100 : 0;\r\n progressBar.style.width = `${progress}%`;\r\n progressText.textContent = `${Math.round(progress)}% Complete`;\r\n stepIndicator.textContent = `Step ${currentStep} of ${totalSteps}`;\r\n prevBtn.style.display = currentStep > 1 ? 'inline-block' : 'none';\r\n spacer.style.display = currentStep === 1 ? 'block' : 'none';\r\n nextBtn.style.display = currentStep < totalSteps ? 'inline-block' : 'none';\r\n submitBtn.style.display = currentStep === totalSteps ? 'inline-block' : 'none';\r\n\r\n if (currentStep > 1 && currentStep < totalSteps) {\r\n nextBtn.classList.remove('sm:ml-auto');\r\n prevBtn.classList.remove('w-full');\r\n nextBtn.classList.remove('w-full');\r\n } else if (currentStep === 1) {\r\n nextBtn.classList.add('sm:ml-auto');\r\n }\r\n \r\n if(currentStep === totalSteps) {\r\n submitBtn.classList.remove('w-full');\r\n prevBtn.classList.remove('w-full');\r\n }\r\n\r\n document.querySelectorAll('input[type=\"radio\"]').forEach(radio => {\r\n const label = radio.closest('.vtx-partner-radio-card');\r\n if(label) {\r\n label.classList.toggle('is-selected', radio.checked);\r\n }\r\n });\r\n }\r\n\r\n function validateStep() {\r\n let isValid = true;\r\n const currentStepEl = document.getElementById(`step-${currentStep}`);\r\n currentStepEl.querySelectorAll('.error-message').forEach(el => { el.style.display = 'none'; el.textContent = ''; });\r\n currentStepEl.querySelectorAll('.border-red-500').forEach(el => el.classList.remove('border-red-500'));\r\n \r\n const inputs = currentStepEl.querySelectorAll('input[required], select[required]');\r\n for (const input of inputs) {\r\n let errorMsg = '';\r\n const isRadio = input.type === 'radio';\r\n const parent = input.closest('div');\r\n let errorEl = parent ? parent.querySelector('.error-message') : null;\r\n\r\n if (isRadio) {\r\n if (!document.querySelector(`input[name=\"${input.name}\"]:checked`)) {\r\n const radioContainer = input.closest('.form-step');\r\n errorEl = radioContainer.querySelector('.error-message');\r\n if (errorEl && !errorEl.textContent) {\r\n errorEl.textContent = `Please make a selection.`;\r\n errorEl.style.display = 'block';\r\n isValid = false;\r\n }\r\n }\r\n } else if (input.type === 'file') {\r\n if(uploadedFiles.length === 0 && currentStepEl.contains(input)) {\r\n const fileContainer = input.closest('.form-step');\r\n errorEl = fileContainer.querySelector('.error-message');\r\n if(errorEl) {\r\n errorEl.textContent = 'Please upload at least one picture.';\r\n errorEl.style.display = 'block';\r\n isValid = false;\r\n }\r\n }\r\n } else if (!input.value.trim()) {\r\n errorMsg = `This field is required.`;\r\n } else if (input.type === 'email' && !\/^\\S+@\\S+\\.\\S+$\/.test(input.value)) {\r\n errorMsg = 'Please enter a valid email address.';\r\n }\r\n\r\n if (errorMsg && errorEl) {\r\n errorEl.textContent = errorMsg;\r\n errorEl.style.display = 'block';\r\n input.classList.add('border-red-500');\r\n isValid = false;\r\n }\r\n }\r\n return isValid;\r\n }\r\n \r\n nextBtn.addEventListener('click', () => { \r\n if (validateStep()) { \r\n const parkingType = document.querySelector('input[name=\"parkingType\"]:checked'); \r\n if (currentStep === 2 && parkingType && parkingType.value === 'Private Parking Space') {\r\n currentStep = 4;\r\n } else {\r\n currentStep++;\r\n }\r\n updateUI(); \r\n } \r\n });\r\n\r\n prevBtn.addEventListener('click', () => { \r\n const parkingType = document.querySelector('input[name=\"parkingType\"]:checked'); \r\n if (currentStep === 4 && parkingType && parkingType.value === 'Private Parking Space') {\r\n currentStep = 2;\r\n } else {\r\n currentStep--;\r\n }\r\n updateUI(); \r\n });\r\n\r\n form.addEventListener('submit', function(e) { \r\n e.preventDefault(); \r\n if (!validateStep()) return; \r\n const submitBtnText = submitBtn.querySelector('.vtx-partner-btn-text'); \r\n const spinner = submitBtn.querySelector('.vtx-partner-spinner'); \r\n submitBtn.disabled = true; \r\n submitBtnText.style.display = 'none'; \r\n spinner.style.display = 'inline-block'; \r\n const formData = new FormData(form); \r\n uploadedFiles.forEach((file, index) => formData.append(`parkingPicture_${index + 1}`, file)); \r\n formData.delete('parkingPictures'); \r\n fetch(e.target.action, { method: 'POST', body: formData, headers: { 'Accept': 'application\/json' } })\r\n .then(res => res.ok ? showModal('Success!', 'Your form has been submitted.', true) : res.json().then(data => showModal('Error!', data.errors ? data.errors.map(err => err.message).join(\", \") : \"Oops! There was a problem.\", false)))\r\n .catch(() => showModal('Error!', 'An unexpected error occurred.', false))\r\n .finally(() => { \r\n submitBtn.disabled = false; \r\n submitBtnText.style.display = 'inline-block'; \r\n spinner.style.display = 'none'; \r\n }); \r\n });\r\n \r\n function showModal(title, text, isSuccess) { \r\n document.getElementById('message-title').textContent = title; \r\n document.getElementById('message-text').textContent = text; \r\n document.getElementById('message-title').className = `text-2xl font-bold mb-4 ${isSuccess ? 'text-voltax-gold' : 'text-red-500'}`; \r\n document.getElementById('message-modal').style.display = 'flex'; \r\n }\r\n \r\n document.getElementById('close-modal-btn').addEventListener('click', () => { \r\n document.getElementById('message-modal').style.display = 'none'; \r\n if (document.getElementById('message-title').textContent === 'Success!') { \r\n form.reset(); \r\n uploadedFiles.length = 0; \r\n document.getElementById('image-previews').innerHTML = ''; \r\n currentStep = 1; \r\n updateUI(); \r\n } \r\n });\r\n \r\n document.getElementById('country').addEventListener('change', (e) => { \r\n const isMorocco = e.target.value === 'Morocco'; \r\n document.getElementById('city-morocco-container').style.display = isMorocco ? 'block' : 'none'; \r\n document.getElementById('city-other-container').style.display = isMorocco ? 'none' : 'block'; \r\n });\r\n \r\n document.getElementById('introduction').addEventListener('input', (e) => document.getElementById('char-count').textContent = `${e.target.value.length} \/ 300`);\r\n \r\n form.addEventListener('change', e => { \r\n if(e.target.type === 'radio') {\r\n updateUI();\r\n }\r\n });\r\n \r\n const fileInput = document.getElementById('parkingPictures'); \r\n const previewsContainer = document.getElementById('image-previews');\r\n fileInput.addEventListener('change', (e) => { \r\n const files = Array.from(e.target.files); \r\n if (uploadedFiles.length + files.length > 5) { \r\n alert('You can only upload a maximum of 5 files.'); \r\n return; \r\n } \r\n uploadedFiles.push(...files); \r\n previewsContainer.innerHTML = ''; \r\n uploadedFiles.forEach(file => { \r\n const img = document.createElement('img'); \r\n img.src = URL.createObjectURL(file); \r\n img.className = 'w-full h-24 object-cover rounded-lg border-2 border-gray-300'; \r\n previewsContainer.appendChild(img); \r\n }); \r\n });\r\n \r\n updateUI();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"e-con-with-custom-width elementor-element elementor-element-1667f87d e-flex e-con-boxed sc_layouts_column_icons_position_left e-con e-parent\" data-id=\"1667f87d\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div data-animation-type=\"block\" class=\"elementor-element elementor-element-9a29a8f elementor-widget__width-initial elementor-widget-tablet__width-inherit animation_type_block sc_fly_static elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"9a29a8f\" data-element_type=\"widget\" data-settings=\"{"_animation":"slideInUp"}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Be part of the future <\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div data-animation-type=\"block\" class=\"elementor-element elementor-element-4b537330 elementor-widget__width-initial elementor-widget-tablet__width-inherit animation_type_block sc_fly_static elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"4b537330\" data-element_type=\"widget\" data-settings=\"{"_animation":"slideInUp"}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Be part of the future of transportation by partnering with Volta X. Together, we can build a robust charging network that supports EV drivers and promotes sustainable practices.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Join Volta X Pro Become a Partner in the EV Charging Revolution Let\u2019s shape together the future of sustainable mobility Volta X is a movement toward cleaner, smarter, and more…<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-22846","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/site.voltaxcharging.com\/fr\/wp-json\/wp\/v2\/pages\/22846","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/site.voltaxcharging.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/site.voltaxcharging.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/site.voltaxcharging.com\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/site.voltaxcharging.com\/fr\/wp-json\/wp\/v2\/comments?post=22846"}],"version-history":[{"count":208,"href":"https:\/\/site.voltaxcharging.com\/fr\/wp-json\/wp\/v2\/pages\/22846\/revisions"}],"predecessor-version":[{"id":24647,"href":"https:\/\/site.voltaxcharging.com\/fr\/wp-json\/wp\/v2\/pages\/22846\/revisions\/24647"}],"wp:attachment":[{"href":"https:\/\/site.voltaxcharging.com\/fr\/wp-json\/wp\/v2\/media?parent=22846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}