{"id":43930,"date":"2023-05-26T10:51:52","date_gmt":"2023-05-26T08:51:52","guid":{"rendered":"https:\/\/vimcar.de\/boxenstopp\/?page_id=43930"},"modified":"2023-07-21T14:48:23","modified_gmt":"2023-07-21T12:48:23","slug":"darko-test-step-form-contentful","status":"publish","type":"page","link":"https:\/\/vimcar.de\/boxenstopp\/darko-test-step-form-contentful\/","title":{"rendered":"Darko test Step Form Contentful"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"43930\" class=\"elementor elementor-43930\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e1d9f7e elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"e1d9f7e\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5d819f7\" data-id=\"5d819f7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-93e9bf9 elementor-widget elementor-widget-html\" data-id=\"93e9bf9\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<section class=\"custom-form\" data-endpoint=\"https:\/\/hooks.zapier.com\/hooks\/catch\/6094284\/bntmfoj\/\" data-redirect-url=\"\/flottenmanagement\/anfrage-produktdemo-va-danke\" data-text-error=\"Bitte f\u00fcllen Sie alle Felder aus!\" data-select-error=\"Bitte w\u00e4hlen Sie eine Option!\" data-checkbox-error=\"Bitte w\u00e4hlen Sie mindestens eine Option!\" data-policy-error=\"Bitte stimmen Sie den Datenschutzrichtlinien und AGS's zu!\">\n   <div class=\"outter-progress-bar\">\n      <div class=\"progess-bar\" style=\"width: 5%;\"> <span class=\"progress-percentage-container\"><span class=\"progress-percentage\">1<\/span> %<\/span> <\/div>\n   <\/div>\n   <h2 class=\"outter-headline\">\n      <p>Vimcar Fleet live erleben - <br> Jetzt <strong>kostenlose<\/strong> Produktdemo vereinbaren!<\/p>\n   <\/h2>\n   <div class=\"form-steps-container\">\n      <div>\n         <ul class=\"steps\">\n            <li class=\"step active\" data-nav=\"0\"><\/li>\n            <li class=\"step\" data-nav=\"1\"><\/li>\n            <li class=\"step\" data-nav=\"2\"><\/li>\n            <li class=\"step\" data-nav=\"3\"><\/li>\n            <li class=\"step\" data-nav=\"4\"><\/li>\n            <li class=\"step\" data-nav=\"5\"><\/li>\n         <\/ul>\n         <div class=\"form-steps\">\n            <div class=\"custom-form-step active\" data-section=\"0\" data-multiple=\"false\" data-mandatory=\"false\">\n               <h2 class=\"headline\">\n                  <p>Wie viele <strong>Fahrzeuge<\/strong> verantworten Sie? <\/p>\n               <\/h2>\n               <div class=\"info-text-container\">\n                  <img decoding=\"async\" src=\"\/public\/images\/info-warn-icon.svg\" alt=\"info-icon\" class=\"info-icon\"> <img decoding=\"async\" src=\"\/public\/images\/info-warn-icon-error.svg\" alt=\"info-icon\" class=\"info-icon error\"> \n                  <div class=\"info-text\">\n                     <p>Ihre Daten werden sicher verschl\u00fcsselt und nicht an Dritte weitergeleitet<\/p>\n                  <\/div>\n                  <p class=\"error-info-text\"><\/p>\n               <\/div>\n               <div class=\"single-option-container\" data-type=\"radio\"> <label for=\"1-5\" class=\"radio-check\"> <input type=\"radio\" id=\"1-5\" value=\"1-5\" name=\"LF - Anfrage Product Demo - Step 01 (Vehicle Range)\" data-key=\"vehicleQuantity\"> 1-5 <\/label> <label for=\"6-10\" class=\"radio-check\"> <input type=\"radio\" id=\"6-10\" value=\"6-10\" name=\"LF - Anfrage Product Demo - Step 01 (Vehicle Range)\" data-key=\"vehicleQuantity\"> 6-10 <\/label> <label for=\"11-40\" class=\"radio-check\"> <input type=\"radio\" id=\"11-40\" value=\"11-40\" name=\"LF - Anfrage Product Demo - Step 01 (Vehicle Range)\" data-key=\"vehicleQuantity\"> 11-40 <\/label> <label for=\"mehr als 40\" class=\"radio-check\"> <input type=\"radio\" id=\"mehr als 40\" value=\"mehr als 40\" name=\"LF - Anfrage Product Demo - Step 01 (Vehicle Range)\" data-key=\"vehicleQuantity\"> mehr als 40 <\/label> <\/div>\n            <\/div>\n            <div class=\"custom-form-step\" data-section=\"1\" data-multiple=\"false\" data-mandatory=\"false\">\n               <h2 class=\"headline\">\n                  <p>In welcher <strong>Branche<\/strong> sind Sie t\u00e4tig? <\/p>\n               <\/h2>\n               <div class=\"info-text-container\">\n                  <img decoding=\"async\" src=\"\/public\/images\/info-warn-icon.svg\" alt=\"info-icon\" class=\"info-icon\"> <img decoding=\"async\" src=\"\/public\/images\/info-warn-icon-error.svg\" alt=\"info-icon\" class=\"info-icon error\"> \n                  <div class=\"info-text\">\n                     <p>Diese Frage hilft uns bei der Erstellung einer ma\u00dfgeschneiderten L\u00f6sung f\u00fcr Ihr Unternehmen.<\/p>\n                  <\/div>\n                  <p class=\"error-info-text\"><\/p>\n               <\/div>\n               <div class=\"single-option-container\" data-type=\"radio\"> <label for=\"Bau- & Handwerk\" class=\"radio-check\"> <input type=\"radio\" id=\"Bau- & Handwerk\" value=\"Bau- & Handwerk\" name=\"LF - Anfrage Product Demo - Step 02 (Industry)\" data-key=\"industry\"> Bau- & Handwerk <\/label> <label for=\"Dienstleistungsbereich\" class=\"radio-check\"> <input type=\"radio\" id=\"Dienstleistungsbereich\" value=\"Dienstleistungsbereich\" name=\"LF - Anfrage Product Demo - Step 02 (Industry)\" data-key=\"industry\"> Dienstleistungsbereich <\/label> <label for=\"Logistik und Transport\" class=\"radio-check\"> <input type=\"radio\" id=\"Logistik und Transport\" value=\"Logistik und Transport\" name=\"LF - Anfrage Product Demo - Step 02 (Industry)\" data-key=\"industry\"> Logistik und Transport <\/label> <label for=\"Gro\u00df- & EInzelhandel\" class=\"radio-check\"> <input type=\"radio\" id=\"Gro\u00df- & EInzelhandel\" value=\"Gro\u00df- & EInzelhandel\" name=\"LF - Anfrage Product Demo - Step 02 (Industry)\" data-key=\"industry\"> Gro\u00df- & EInzelhandel <\/label> <label for=\"Sonstige\" class=\"radio-check\"> <input type=\"radio\" id=\"Sonstige\" value=\"Sonstige\" name=\"LF - Anfrage Product Demo - Step 02 (Industry)\" data-key=\"industry\"> Sonstige <\/label> <\/div>\n            <\/div>\n            <div class=\"custom-form-step\" data-section=\"2\" data-multiple=\"true\" data-mandatory=\"false\">\n               <h2 class=\"headline\">\n                  <p>Welche <strong>Fuhrparkaufgaben<\/strong> sind Ihnen besonders wichtig?*<\/p>\n               <\/h2>\n               <div class=\"info-text-container\">\n                  <img decoding=\"async\" src=\"\/public\/images\/info-warn-icon.svg\" alt=\"info-icon\" class=\"info-icon\"> <img decoding=\"async\" src=\"\/public\/images\/info-warn-icon-error.svg\" alt=\"info-icon\" class=\"info-icon error\"> \n                  <div class=\"info-text\">\n                     <p>(Mehrfachauswahl m\u00f6glich)<\/p>\n                  <\/div>\n                  <p class=\"error-info-text\"><\/p>\n               <\/div>\n               <div class=\"multiple-option-container\" data-type=\"checkbox\"> <label for=\"Finanzamtkonforme Fahrtenbuchf\u00fchrung\" class=\"radio-check\"> <input type=\"checkbox\" id=\"Finanzamtkonforme Fahrtenbuchf\u00fchrung\" value=\"Finanzamtkonforme Fahrtenbuchf\u00fchrung\" name=\"LF - Anfrage Product Demo - Step 03 (Tasks)\" data-key=\"importantTasks\"> Finanzamtkonforme Fahrtenbuchf\u00fchrung <\/label> <label for=\"Fahrzeugortung, Routendokumentation & Fahrer-Identifikation\" class=\"radio-check\"> <input type=\"checkbox\" id=\"Fahrzeugortung, Routendokumentation & Fahrer-Identifikation\" value=\"Fahrzeugortung, Routendokumentation & Fahrer-Identifikation\" name=\"LF - Anfrage Product Demo - Step 03 (Tasks)\" data-key=\"importantTasks\"> Fahrzeugortung, Routendokumentation & Fahrer-Identifikation <\/label> <label for=\"Transparente Kostenanalyse & Organisation von Fahrzeugunterlagen\" class=\"radio-check\"> <input type=\"checkbox\" id=\"Transparente Kostenanalyse & Organisation von Fahrzeugunterlagen\" value=\"Transparente Kostenanalyse & Organisation von Fahrzeugunterlagen\" name=\"LF - Anfrage Product Demo - Step 03 (Tasks)\" data-key=\"importantTasks\"> Transparente Kostenanalyse & Organisation von Fahrzeugunterlagen <\/label> <label for=\"Umfassende digitale Fahrzuegverwaltung (UVV, FSK etc.)\" class=\"radio-check\"> <input type=\"checkbox\" id=\"Umfassende digitale Fahrzuegverwaltung (UVV, FSK etc.)\" value=\"Umfassende digitale Fahrzuegverwaltung (UVV, FSK etc.)\" name=\"LF - Anfrage Product Demo - Step 03 (Tasks)\" data-key=\"importantTasks\"> Umfassende digitale Fahrzuegverwaltung (UVV, FSK etc.) <\/label> <\/div>\n            <\/div>\n            <div class=\"custom-form-step\" data-section=\"3\" data-multiple=\"\" data-mandatory=\"true\">\n               <h2 class=\"headline\">\n                  <p>Vielen Dank, wir k\u00f6nnen Sie definitiv unterst\u00fctzen! <br> Bitte geben Sie Ihr <strong>Unternehmen<\/strong> an.<\/p>\n               <\/h2>\n               <div class=\"info-text-container\">\n                  <img decoding=\"async\" src=\"\/public\/images\/info-warn-icon.svg\" alt=\"info-icon\" class=\"info-icon\"> <img decoding=\"async\" src=\"\/public\/images\/info-warn-icon-error.svg\" alt=\"info-icon\" class=\"info-icon error\"> \n                  <div class=\"info-text\">\n                     <p>Ihre Daten werden sicher verschl\u00fcsselt und nicht an Dritte weitergeleitet<\/p>\n                  <\/div>\n                  <p class=\"error-info-text\"><\/p>\n               <\/div>\n               <div class=\"input-container \" data-type=\"default\"> <label for=\"Unternehmen:*\"> Unternehmen:* <input type=\"text\" id=\"Unternehmen:*\" placeholder=\"Muster GmbH\" data-key=\"company\"> <\/label> <\/div>\n            <\/div>\n            <div class=\"custom-form-step\" data-section=\"4\" data-multiple=\"\" data-mandatory=\"true\">\n               <h2 class=\"headline\">\n                  <p>Fast geschafft! <br> Bitte geben Sie Ihren <br> vollst\u00e4ndigen <strong>Namen<\/strong> an.<\/p>\n               <\/h2>\n               <div class=\"info-text-container\">\n                  <img decoding=\"async\" src=\"\/public\/images\/info-warn-icon.svg\" alt=\"info-icon\" class=\"info-icon\"> <img decoding=\"async\" src=\"\/public\/images\/info-warn-icon-error.svg\" alt=\"info-icon\" class=\"info-icon error\"> \n                  <div class=\"info-text\">\n                     <p>Ihre Daten werden sicher verschl\u00fcsselt und nicht an Dritte weitergeleitet<\/p>\n                  <\/div>\n                  <p class=\"error-info-text\"><\/p>\n               <\/div>\n               <div class=\"input-container \" data-type=\"default\"> <label for=\"Vor- und Nachname:*\"> Vor- und Nachname:* <input type=\"text\" id=\"Vor- und Nachname:*\" placeholder=\"Max Mustermann\" data-key=\"fullName\"> <\/label> <\/div>\n            <\/div>\n            <div class=\"custom-form-step\" data-section=\"5\" data-multiple=\"\" data-mandatory=\"true\">\n               <h2 class=\"headline\">\n                  <p>Geschafft! <br> Bitte geben Sie Ihre <strong>Kontaktdaten<\/strong> an.<\/p>\n               <\/h2>\n               <div class=\"info-text-container\">\n                  <img decoding=\"async\" src=\"\/public\/images\/info-warn-icon.svg\" alt=\"info-icon\" class=\"info-icon\"> <img decoding=\"async\" src=\"\/public\/images\/info-warn-icon-error.svg\" alt=\"info-icon\" class=\"info-icon error\"> \n                  <div class=\"info-text\">\n                     <p>Unsere Experten werden sich in K\u00fcrze bei Ihnen melden und mit Ihnen gemeinsam die n\u00e4chsten Schritte besprechen sowie einen individuellen Termin f\u00fcr eine kostenlose Produktdemo vereinbaren.<br>Ihre Daten werden sicher verschl\u00fcsselt und nicht an Dritte weitergeben.<br>Alle Anfragen sind kostenlos und nicht bindend.<\/p>\n                  <\/div>\n                  <p class=\"error-info-text\"><\/p>\n               <\/div>\n               <div class=\"input-container multiple-inputs\" data-type=\"default\">\n                  <label for=\"E-Mail:*\"> E-Mail:* <input type=\"email\" id=\"E-Mail:*\" placeholder=\"max@mustermann.de\" data-key=\"email\"> <\/label> \n                  <div class=\"phone-container\">\n                     <label for=\"prefix\" class=\"prefix-label\">\n                        Vorwahl* \n                        <select name=\"prefix\" id=\"prefix\" data-key=\"prefix\">\n                           <option value=\"+49 (0)\" selected=\"\">+49 (0)<\/option>\n                           <option value=\"+43 (0)\">+43 (0)<\/option>\n                           <option value=\"+41 (0)\">+41 (0)<\/option>\n                        <\/select>\n                     <\/label>\n                     <label for=\"Telefonnummer:*\"> Telefonnummer:* <input type=\"number\" id=\"Telefonnummer:*\" placeholder=\"1789862347\" data-key=\"phone\"> <\/label> \n                  <\/div>\n               <\/div>\n               <label for=\"dataPolicy\" class=\"dataPolicy-label\" data-type=\"dataPolicy\">\n                  <input type=\"checkbox\" id=\"dataPolicy\" data-key=\"dataPolicy\"> \n                  <p>Ich stimme den <a href=\"https:\/\/vimcar.de\/datenschutz\">Datenschutzrichtlinien<\/a> und <a href=\"https:\/\/vimcar.de\/agb\">AGBs<\/a> zu.<\/p>\n               <\/label>\n            <\/div>\n         <\/div>\n      <\/div>\n      <div class=\"navigation-buttons-container first-step\"> <button class=\"back-btn\">zur\u00fcck<\/button> <button class=\"continue-btn\">weiter<\/button> <\/div>\n   <\/div>\n   <div class=\"trust-icons\">\n      <picture>\n         <source media=\"(max-width: 991px)\" srcset=\"\/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=webp&w=300&q=80 300w,\/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=png&w=300&q=80 300w, \/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=webp&w=500&q=80 500w,\/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=png&w=500&q=80 500w, \/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=webp&w=800&q=80 800w,\/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=png&w=800&q=80 800w, \/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=webp&w=992&q=80 992w,\/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=png&w=992&q=80 992w, \/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=webp&w=1200&q=80 1200w,\/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=png&w=1200&q=80 1200w, \/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=webp&w=1500&q=80 1500w,\/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=png&w=1500&q=80 1500w, \/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=webp&w=2000&q=80 2000w,\/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=png&w=2000&q=80 2000w,\">\n         <source sizes=\"(min-width: 992px) 50vw, 100vw\" srcset=\"\/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=webp&w=300&q=80 300w,\/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=png&w=300&q=80 300w, \/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=webp&w=500&q=80 500w,\/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=png&w=500&q=80 500w, \/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=webp&w=800&q=80 800w,\/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=png&w=800&q=80 800w, \/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=webp&w=992&q=80 992w,\/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=png&w=992&q=80 992w, \/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=webp&w=1200&q=80 1200w,\/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=png&w=1200&q=80 1200w, \/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=webp&w=1500&q=80 1500w,\/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=png&w=1500&q=80 1500w, \/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=webp&w=2000&q=80 2000w,\/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png?fm=png&w=2000&q=80 2000w,\">\n         <img decoding=\"async\" alt=\"trust tuev c\" title=\"\" class=\"\" width=\"\" height=\"\" src=\"\/\/images.ctfassets.net\/oo81jhgsnaaf\/1jjfZTP0FTP3TeTO6jyQHt\/c95f1e568d6720bb08bb3288121cc5cf\/trust_tuev_c.png\"> \n      <\/picture>\n      <picture>\n         <source media=\"(max-width: 991px)\" srcset=\"\/\/images.ctfassets.net\/oo81jhgsnaaf\/6tUT5NteGaUz1joFjW7GxE\/fedca1132b04841f60577163eed750cd\/trustedshops.svg?fm=&w=300&q=80 300w, \/\/images.ctfassets.net\/oo81jhgsnaaf\/6tUT5NteGaUz1joFjW7GxE\/fedca1132b04841f60577163eed750cd\/trustedshops.svg?fm=&w=500&q=80 500w, \/\/images.ctfassets.net\/oo81jhgsnaaf\/6tUT5NteGaUz1joFjW7GxE\/fedca1132b04841f60577163eed750cd\/trustedshops.svg?fm=&w=800&q=80 800w, \/\/images.ctfassets.net\/oo81jhgsnaaf\/6tUT5NteGaUz1joFjW7GxE\/fedca1132b04841f60577163eed750cd\/trustedshops.svg?fm=&w=992&q=80 992w, \/\/images.ctfassets.net\/oo81jhgsnaaf\/6tUT5NteGaUz1joFjW7GxE\/fedca1132b04841f60577163eed750cd\/trustedshops.svg?fm=&w=1200&q=80 1200w, \/\/images.ctfassets.net\/oo81jhgsnaaf\/6tUT5NteGaUz1joFjW7GxE\/fedca1132b04841f60577163eed750cd\/trustedshops.svg?fm=&w=1500&q=80 1500w, \/\/images.ctfassets.net\/oo81jhgsnaaf\/6tUT5NteGaUz1joFjW7GxE\/fedca1132b04841f60577163eed750cd\/trustedshops.svg?fm=&w=2000&q=80 2000w,\">\n         <source sizes=\"(min-width: 992px) 50vw, 100vw\" srcset=\"\/\/images.ctfassets.net\/oo81jhgsnaaf\/6tUT5NteGaUz1joFjW7GxE\/fedca1132b04841f60577163eed750cd\/trustedshops.svg?fm=&w=300&q=80 300w, \/\/images.ctfassets.net\/oo81jhgsnaaf\/6tUT5NteGaUz1joFjW7GxE\/fedca1132b04841f60577163eed750cd\/trustedshops.svg?fm=&w=500&q=80 500w, \/\/images.ctfassets.net\/oo81jhgsnaaf\/6tUT5NteGaUz1joFjW7GxE\/fedca1132b04841f60577163eed750cd\/trustedshops.svg?fm=&w=800&q=80 800w, \/\/images.ctfassets.net\/oo81jhgsnaaf\/6tUT5NteGaUz1joFjW7GxE\/fedca1132b04841f60577163eed750cd\/trustedshops.svg?fm=&w=992&q=80 992w, \/\/images.ctfassets.net\/oo81jhgsnaaf\/6tUT5NteGaUz1joFjW7GxE\/fedca1132b04841f60577163eed750cd\/trustedshops.svg?fm=&w=1200&q=80 1200w, \/\/images.ctfassets.net\/oo81jhgsnaaf\/6tUT5NteGaUz1joFjW7GxE\/fedca1132b04841f60577163eed750cd\/trustedshops.svg?fm=&w=1500&q=80 1500w, \/\/images.ctfassets.net\/oo81jhgsnaaf\/6tUT5NteGaUz1joFjW7GxE\/fedca1132b04841f60577163eed750cd\/trustedshops.svg?fm=&w=2000&q=80 2000w,\">\n         <img decoding=\"async\" alt=\"e trusted logo\" title=\"\" class=\"\" width=\"\" height=\"\" src=\"\/\/images.ctfassets.net\/oo81jhgsnaaf\/6tUT5NteGaUz1joFjW7GxE\/fedca1132b04841f60577163eed750cd\/trustedshops.svg\"> \n      <\/picture>\n   <\/div>\n<\/section>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bef052b elementor-widget elementor-widget-html\" data-id=\"bef052b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style> .custom-form {\n     min-height: calc(100vh - 85px);\n     display: flex;\n     flex-direction: column;\n     align-items: center;\n}\n .custom-form .outter-progress-bar {\n     display: none;\n}\n .custom-form .progess-bar {\n     background-color: #14BCF1;\n     height: 14px;\n     display: flex;\n     justify-content: flex-end;\n     align-items: center;\n     border-radius: 0 8px 8px 0;\n}\n .custom-form .progress-percentage-container {\n     color: #FFF;\n     font-size: 8px;\n     line-height: 25px;\n     padding-right: 8px;\n}\n .custom-form .outter-headline {\n     display: none;\n}\n .custom-form .form-steps-container {\n     padding: 32px 32px 40px 32px;\n     border: 6px solid #122A3E;\n     border-radius: 20px;\n     min-height: 455px;\n     width: 90%;\n     margin-top: 65px;\n     display: flex;\n     flex-direction: column;\n     justify-content: space-between;\n}\n .custom-form .steps {\n     display: flex;\n     justify-content: center;\n     margin-bottom: 20px;\n}\n .custom-form .steps .step {\n     width: 10px;\n     height: 10px;\n     border: 1px solid #122a3e;\n     border-radius: 50%;\n}\n .custom-form .steps .step.active {\n     background-color: #28AED7;\n     border: 1px solid #28AED7;\n}\n .custom-form .steps .step:not(:last-of-type) {\n     margin-right: 9px;\n}\n .custom-form .navigation-buttons-container {\n     display: flex;\n     justify-content: space-between;\n}\n .custom-form .navigation-buttons-container button {\n     background: transparent;\n     border-radius: 10px;\n     border: 2px solid #000;\n     white-space: nowrap;\n     width: fit-content;\n     text-transform: none;\n     padding: 12px 20px;\n     text-align: center;\n     color: #000;\n     font-style: normal;\n     font-weight: 700;\n     font-size: 18px;\n     line-height: 20px;\n}\n .custom-form .navigation-buttons-container .continue-btn {\n     margin-left: auto;\n     background-color: #28AED7;\n     border: 2px solid #28AED7;\n     color: #FFF;\n}\n .custom-form .navigation-buttons-container.first-step .back-btn {\n     display: none;\n}\n .custom-form .navigation-buttons-container.first-step .continue-btn {\n     margin: 0 auto;\n     padding: 12px 55px;\n}\n .custom-form .trust-icons {\n     display: flex;\n     justify-content: center;\n     margin-top: 55px;\n}\n .custom-form .trust-icons picture:not(:last-of-type) {\n     margin-right: 34px;\n}\n .custom-form .trust-icons img {\n     height: 56px;\n}\n .custom-form-step {\n     display: none;\n     text-align: center;\n}\n .custom-form-step.active {\n     display: block;\n}\n .custom-form-step .headline {\n     font-weight: 700;\n     font-size: 30px;\n     line-height: 32px;\n     margin-bottom: 32px;\n}\n .custom-form-step .headline strong {\n     color: #28AED7;\n}\n .custom-form-step .info-text-container {\n     position: relative;\n     background-color: #e3f0ff;\n     border-radius: 6px;\n}\n .custom-form-step .info-text-container p {\n     padding: 15px;\n     font-weight: 600;\n     font-size: 10px;\n     line-height: 14px;\n}\n .custom-form-step .info-text-container .info-text {\n     display: block;\n}\n .custom-form-step .info-text-container .info-text.hidden {\n     display: none;\n}\n .custom-form-step .info-text-container .error-info-text {\n     display: none;\n}\n .custom-form-step .info-text-container .error-info-text.showing {\n     display: block;\n}\n .custom-form-step .info-text-container .info-icon {\n     display: block;\n}\n .custom-form-step .info-text-container .info-icon.error {\n     display: none;\n}\n .custom-form-step .info-text-container.with-errors {\n     background-color: rgba(255, 51, 51, 0.08);\n     color: #FF3333;\n}\n .custom-form-step .info-text-container.with-errors .info-icon {\n     display: none;\n}\n .custom-form-step .info-text-container.with-errors .info-icon.error {\n     display: block;\n}\n .custom-form-step img {\n     position: absolute;\n     left: 50%;\n     top: 0;\n     transform: translate(-50%, -50%);\n     width: 22px;\n     height: 22px;\n}\n .custom-form-step .single-option-container, .custom-form-step .multiple-option-container {\n     margin-top: 25px;\n     margin-bottom: 30px;\n}\n .custom-form-step .input-container {\n     display: flex;\n     flex-direction: column;\n     margin-top: 25px;\n     margin-bottom: 15px;\n}\n .custom-form-step .input-container.multiple-inputs {\n     margin-top: 16px;\n}\n .custom-form-step .input-container.multiple-inputs label:not(.prefix-label):first-of-type {\n     margin-bottom: 8px;\n}\n .custom-form-step .input-container.multiple-inputs input, .custom-form-step .input-container.multiple-inputs select#prefix {\n     height: 40px;\n}\n .custom-form-step .input-container input {\n     height: 50px;\n     border: 2px solid #000;\n     border-radius: 6px;\n     color: #000 !important;\n     padding: 15px;\n}\n .custom-form-step .input-container input.with-errors {\n     border: 2px solid #FF3333;\n}\n .custom-form-step .input-container input::placeholder {\n     color: #c8cbcf;\n     font-size: 18px;\n}\n .custom-form-step .input-container[data-type=\"select\"] label {\n     display: flex;\n     flex-direction: column;\n}\n .custom-form-step .input-container[data-type=\"select\"] select {\n     border: 1px solid #D8D8D8;\n     border-radius: 6px;\n     height: 40px;\n     padding: 0 45px 0 15px;\n     color: $color-cta;\n     background: url(\/boxenstopp\/wp-content\/uploads\/2023\/05\/select-arrow-blue.svg) no-repeat 95% 50%;\n     background-size: 13px;\n     appearance: none;\n}\n .custom-form-step .input-container[data-type=\"select\"] select .with-errors {\n     border: 1px solid #FF3333;\n}\n .custom-form-step .input-container[data-type=\"select\"] select:invalid {\n     color: #FF3333;\n     background-color: #FF3333;\n}\n .custom-form-step .input-container select#prefix {\n     font-size: 16px;\n     font-size: 1rem;\n     line-height: 19px;\n     line-height: 1.1875rem;\n     width: 100%;\n     color: #000;\n     font-weight: 400;\n     border: 2px solid #000;\n     padding: 15px 0 5px 15px;\n     border-radius: 5px;\n     height: 50px;\n     -webkit-appearance: none;\n     -moz-appearance: none;\n     appearance: none;\n     background: url(\/boxenstopp\/wp-content\/uploads\/2023\/05\/select-arrow.svg) no-repeat 95% 50%;\n     background-size: 13px;\n     background-color: #FFF;\n     padding: 5px 15px 5px 15px;\n}\n .custom-form-step .dataPolicy-label {\n     display: flex;\n     align-items: center;\n     margin-bottom: 30px;\n     margin-top: 22px;\n}\n .custom-form-step .dataPolicy-label #dataPolicy {\n     min-width: 12px;\n     width: 14px;\n     max-width: 14px;\n     height: 14px;\n     max-height: 14px;\n     margin-right: 8px;\n     border-radius: 2px;\n     padding: 0;\n     position: relative;\n}\n .custom-form-step .dataPolicy-label #dataPolicy::before {\n     position: absolute;\n     top: -7px;\n     left: 2px;\n     width: 10px;\n     height: 10px;\n}\n .custom-form-step .dataPolicy-label a {\n     text-decoration: none;\n     font-style: normal;\n     color: $color-cta;\n     border-bottom: none;\n}\n .custom-form-step .dataPolicy-label a::after {\n     display: none;\n}\n .custom-form-step .dataPolicy-label p {\n     font-weight: 600;\n     font-size: 13px;\n     line-height: 13px;\n     margin-bottom: 0;\n}\n .custom-form-step .phone-container {\n     display: flex;\n     flex-direction: column;\n}\n .custom-form-step .prefix-label {\n     min-width: 30%;\n     margin-bottom: 10px;\n}\n .custom-form-step label.radio-check {\n     display: flex;\n     align-items: center;\n     font-weight: 600;\n     font-size: 20px;\n     line-height: 22px;\n     text-align: left;\n     hyphens: none;\n}\n .custom-form-step label.radio-check input {\n     width: 40px;\n}\n .custom-form-step label.radio-check:not(:last-of-type) {\n     margin-bottom: 20px;\n}\n .custom-form-step label {\n     text-align: left;\n     font-size: 14px;\n     line-height: 25px;\n     font-weight: 600;\n}\n .custom-form-step input[type='radio'], .custom-form-step input[type='checkbox'] {\n     -webkit-appearance: none;\n     appearance: none;\n     background-color: #fff;\n     margin: 0;\n     margin-right: 13px;\n     font: inherit;\n     color: currentColor;\n     min-width: 40px;\n     width: 40px;\n     height: 40px;\n     border: 1.5px solid currentColor;\n     border-radius: 5px;\n     transform: translateY(-0.075em);\n}\n .custom-form-step input[type='radio']::before, .custom-form-step input[type='checkbox']::before {\n     content: \"\";\n     width: 25px;\n     height: 25px;\n     position: absolute;\n     left: 7px;\n     top: 4px;\n}\n .custom-form-step input[type='radio']:checked, .custom-form-step input[type='radio'].checked, .custom-form-step input[type='checkbox']:checked, .custom-form-step input[type='checkbox'].checked {\n     padding: 4px;\n}\n .custom-form-step input[type='radio']:checked::before, .custom-form-step input[type='radio'].checked::before, .custom-form-step input[type='checkbox']:checked::before, .custom-form-step input[type='checkbox'].checked::before {\n     content: url(\"\/boxenstopp\/wp-content\/uploads\/2023\/05\/blue-check.svg\");\n}\n .custom-form-step input[type='radio']:hover, .custom-form-step input[type='checkbox']:hover {\n     cursor: pointer;\n}\n @media screen and (min-width: 768px) {\n     .custom-form .outter-progress-bar {\n         display: block;\n         background-color: #e3f0ff;\n         height: 14px;\n         width: 100%;\n    }\n     .custom-form .outter-headline {\n         display: block;\n         margin-top: 36px;\n         text-align: center;\n    }\n     .custom-form .form-steps-container {\n         width: 475px;\n         padding: 32px 62px 40px 62px;\n    }\n     .custom-form-step .headline {\n         font-size: 20px;\n         line-height: 22px;\n    }\n     .custom-form-step .input-container input::placeholder {\n         font-size: 14px;\n    }\n     .custom-form-step .input-container select#prefix {\n         background: url(\/boxenstopp\/wp-content\/uploads\/2023\/05\/select-arrow.svg) no-repeat 87% 50%;\n    }\n     .custom-form-step .phone-container {\n         flex-direction: row;\n    }\n     .custom-form-step .prefix-label {\n         margin-bottom: 0;\n         margin-right: 13px;\n    }\n     .custom-form-step label.radio-check {\n         font-size: 16px;\n    }\n     .custom-form-step label.radio-check input {\n         width: 20px;\n    }\n     .custom-form-step input[type='radio']::before, .custom-form-step input[type='checkbox']::before {\n         width: 100%;\n         height: 100%;\n         position: relative;\n         top: -4px;\n         left: 2px;\n    }\n}\n @media screen and (min-width: 1200px) {\n     .custom-form-step input[type='radio']:checked::before, .custom-form-step input[type='radio'].checked::before, .custom-form-step input[type='checkbox']:checked::before, .custom-form-step input[type='checkbox'].checked::before {\n         padding: 0;\n    }\n     .custom-form-step input[type='radio'], .custom-form-step input[type='checkbox'] {\n         min-width: 21px;\n         width: 21px;\n         height: 21px;\n    }\n}\n ul {\n     list-style-type: none;\n     padding: 0;\n}\n <\/style>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7642279 elementor-widget elementor-widget-html\" data-id=\"7642279\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<script>\nfunction getSearchParam(name, params) {\n  if (!params) return null\n  return params.reduce((total, item) => {\n    let newItem\n\n    if (item.startsWith('?')) {\n      newItem = item.slice(1)\n    } else {\n      newItem = item\n    }\n\n    if (newItem.startsWith(name)) {\n      return newItem.split('=')[1]\n    }\n\n    return total\n  }, '')\n}\n\nconst setDataOnSessionStorage = (id, data) => {\n  if (Object.keys(data).length > 0) {\n    sessionStorage.setItem(id, JSON.stringify(data))\n  }\n}\n\nconst getMarketingData = () => {\n  let sessionSearchParams\n  if (window.location?.pathname === '\/flottenmanagement\/anfrage-produkttour') {\n    sessionSearchParams = localStorage.getItem('search_params')\n  } else {\n    sessionSearchParams = sessionStorage.getItem('search_params')\n  }\n\n  const sourceIdMapping = {\n    awin: 'awc',\n    bing: 'msclkid',\n    facebook: 'fbclid',\n    google: 'gclid',\n    taboola: 'tclick_id',\n    tiktok: 'ttclid',\n    linkedin: 'li_fat_id',\n    outbrain: 'ob_click_id',\n  }\n\n  const marketingData = {}\n\n  if (sessionSearchParams) {\n    const searchItems = sessionSearchParams.replace(\/\\?\/g, '').split('&')\n\n    marketingData.utmSource = getSearchParam('utm_source', searchItems) || 'direct'\n\n    marketingData.utmMedium = getSearchParam('utm_medium', searchItems)\n\n    marketingData.utmCampaign = getSearchParam('utm_campaign', searchItems)\n\n    marketingData.utmProduct = getSearchParam('utm_product', searchItems)\n\n    marketingData.utmTerm = getSearchParam('utm_term', searchItems)\n\n    marketingData.utmContent = getSearchParam('utm_content', searchItems)\n\n    marketingData.clickId = getSearchParam(sourceIdMapping[marketingData.utmSource], searchItems)\n\n    marketingData.campaignId = getSearchParam('campaignid', searchItems)\n\n    marketingData.adId = getSearchParam('adid', searchItems)\n  }\n\n  setDataOnSessionStorage('marketingData', marketingData)\n\n  return marketingData\n}\n\nconst defaultFormData = (marketingData) => {\n  return {\n    createdAt: new Intl.DateTimeFormat('es-ES', { dateStyle: 'short', timeStyle: 'medium' }).format(new Date()).replace(\/,\/g, ''),\n    pagePath: `${window.location.host}${window.location.pathname}`,\n    marketingUrl: window.location.href,\n    ...(marketingData.utmSource && { utmSource: marketingData.utmSource }),\n    ...(marketingData.utmMedium && { utmMedium: marketingData.utmMedium }),\n    ...(marketingData.utmCampaign && { utmCampaign: marketingData.utmCampaign }),\n    ...(marketingData.utmProduct && { utmProduct: marketingData.utmProduct }),\n    ...(marketingData.utmContent && { utmContent: marketingData.utmContent }),\n    ...(marketingData.utmTerm && { utmTerm: marketingData.utmTerm }),\n    ...(marketingData.clickId && { clickId: marketingData.clickId }),\n    ...(marketingData.campaignId && { campaignId: marketingData.campaignId }),\n    ...(marketingData.adId && { adId: marketingData.adId }),\n    deviceType: screen.width < 481 ? 'm' : screen.width > 788 ? 'c' : 't',\n  }\n}\n\nconst addUtmsToUrl = (utms) => {\n  const utmsArray = Object.entries(utms)\n  if (!utmsArray.length) return null\n  const searchParams = new URL(document.location).searchParams\n  utmsArray.forEach(([key, value]) => {\n      if (value && !searchParams.get(key)) {\n          searchParams.set(key, value)\n      }\n  })\n  window.history.replaceState({}, '', `${location.pathname}?${searchParams}`)\n}\n\nconst formStepDots = document.querySelectorAll('.custom-form .steps li.step')\nconst formSteps = document.querySelectorAll('.custom-form .custom-form-step')\nconst navOptions = document.querySelectorAll('.custom-form .steps li')\nconst formSections = document.querySelectorAll('.custom-form .form-steps .custom-form-step')\nconst btnsContainer = document.querySelector('.custom-form .navigation-buttons-container')\nconst backBtn = document.querySelector('.custom-form .navigation-buttons-container .back-btn')\nconst continueBtn = document.querySelector('.custom-form .navigation-buttons-container .continue-btn')\nconst progressBar = document.querySelector('.custom-form .progess-bar')\nconst progressQuantity = document.querySelector('.custom-form .progess-bar .progress-percentage')\nconst inputContainers = document.querySelectorAll('.custom-form .custom-form-step [data-type]')\nconst radioInputs = document.querySelectorAll('.custom-form .custom-form-step [data-type=\"radio\"] input')\nconst prefixSelect = document.querySelector('.custom-form .custom-form-step #prefix')\nconst zappierEndpoint = document.querySelector('.custom-form').dataset?.endpoint\nconst redirectUrl = document.querySelector('.custom-form').dataset?.redirectUrl\nconst selectErrorMsg = document.querySelector('.custom-form').dataset?.selectError\nconst checkboxErrorMsg = document.querySelector('.custom-form').dataset?.checkboxError\nconst defaultErrorMsg = document.querySelector('.custom-form').dataset?.textError\nconst dataPolicyErrorMsg = document.querySelector('.custom-form').dataset?.policyError\nlet inputValues = {}\nlet fieldsFilled = []\nformStepDots[0].classList.add('active')\nformSteps[0].classList.add('active')\nprogressBar.style.width = '5%'\nlet index = 0\nconst progress = (100 \/ formSections.length) * index + 1\nprogressQuantity.innerText = progress.toFixed(0)\n\nconst marketingData = getMarketingData()\n\nconst manageFirstStep = () => {\n  if (Array.from(formSections)[0].classList.contains('active')) {\n    btnsContainer.classList.add('first-step')\n  } else {\n    btnsContainer.classList.remove('first-step')\n  }\n}\n\nconst handleNavigation = (e, navClick = true) => {\n  if (navClick) {\n    index = Number(e.currentTarget.dataset.nav)\n  }\n  Array.from(navOptions).forEach((option) => {\n    if (Number(option.dataset.nav) === index) {\n      option.classList.add('active')\n    } else {\n      option.classList.remove('active')\n    }\n  })\n  Array.from(formSections).forEach((section) => {\n    if (Number(section.dataset.section) === index) {\n      section.classList.add('active')\n    } else {\n      section.classList.remove('active')\n    }\n  })\n  manageFirstStep()\n}\n\nconst checkFieldsAreFilled = (step) => {\n  const inputContainers = step.querySelectorAll('[data-type]')\n  fieldsFilled = []\n  const isMandatory = step.dataset.mandatory === \"true\"\n  Array.from(inputContainers).forEach((inputContainer) => {\n    const fieldType = inputContainer.dataset.type\n    if (fieldType === 'select') {\n      const selectFields = inputContainer.querySelectorAll('select')\n      fieldsFilled.push(Array.from(selectFields).every((el) => el.value !== ''))\n      if (isMandatory) {\n        Array.from(selectFields).forEach((el) => {\n          if (el.value === '') {\n            el.classList.add('with-errors')\n          } else {\n            el.classList.remove('with-errors')\n          }\n        })\n      }\n    } else {\n      const inputFields = inputContainer.querySelectorAll('input')\n      if (fieldType === 'checkbox' || fieldType === 'radio') {\n        fieldsFilled.push(Array.from(inputFields).some((el) => el.checked))\n      } else if (fieldType === 'dataPolicy') {\n        fieldsFilled.push(inputFields[0].checked)\n      } else {\n        fieldsFilled.push(Array.from(inputFields).every((el) => el.value !== ''))\n        if (isMandatory) {\n          Array.from(inputFields).forEach((el) => {\n            if (el.value === '') {\n              el.classList.add('with-errors')\n            } else {\n              el.classList.remove('with-errors')\n            }\n          })\n        }\n      }\n    }\n  })\n  return fieldsFilled.every((el) => el)\n}\n\nconst setErrorText = (index, element, msg = '') => {\n  const inputContainers = formSections[index].querySelectorAll('[data-type]')\n  const failingField = Array.from(fieldsFilled).findIndex((el) => !el)\n  let type\n  Array.from(inputContainers).forEach((el, idx) => {\n    if (idx === failingField) {\n      type = el?.dataset.type\n    }\n  })\n  const targetElement = formSections[index].querySelector(element)\n\n  if (msg) {\n    targetElement.innerText = msg\n  } else {\n    switch (type) {\n      case 'select':\n        return targetElement.innerText = selectErrorMsg\n      case 'checkbox':\n      case 'radio':\n        return targetElement.innerText = checkboxErrorMsg\n      case 'dataPolicy':\n        return targetElement.innerText = dataPolicyErrorMsg\n      default:\n        return targetElement.innerText = defaultErrorMsg\n    }\n  }\n}\n\nconst handleEnterKey = (input) => {\n  input.addEventListener('keyup', ({ key }) => {\n    if (key === 'Enter') {\n      const isMandatory = formSections[index].dataset.mandatory === \"true\"\n      if (checkFieldsAreFilled(formSections[index]) || !isMandatory) {\n        const continueBtn = document.querySelector('.navigation-buttons-container .continue-btn')\n        continueBtn.click()\n      } else {\n        formSections[index].querySelector('.info-text-container').classList.add('with-errors')\n        formSections[index].querySelector('.info-text-container .info-text').classList.add('hidden')\n        setErrorText(index, '.info-text-container .error-info-text')\n        formSections[index].querySelector('.info-text-container .error-info-text').classList.add('showing')\n      }\n    }\n  })\n}\ninputContainers.forEach((el) => {\n  if (el.dataset.type === 'default') {\n    el.querySelectorAll('input').forEach((input) => handleEnterKey(input))\n  }\n})\n\nradioInputs.forEach((el) => el.addEventListener('click', () => {\n  const continueBtn = document.querySelector('.navigation-buttons-container .continue-btn')\n  setTimeout(() => {\n    continueBtn.click()\n  }, 300)\n}))\n\nconst navigateWithinForm = (e, direction) => {\n  e.preventDefault()\n  let allFieldsFilled = false\n  inputValues = {}\n  const isMandatory = formSections[index].dataset.mandatory === \"true\"\n  const isLastSection = Array.from(formSections)[formSections.length - 1].classList.contains('active')\n  if (direction === 'next') {\n    const emailFields = formSections[index].querySelectorAll('input[type=\"email\"]')\n    let validEmail = true\n    const emailRegex = \/^(([^<>()[\\]\\\\.#,;:\\s@\"]+(\\.[^<>()[\\]\\\\.#,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$\/\n    if (emailFields.length) {\n      validEmail = false\n      emailFields.forEach(emailField => {\n        if (emailRegex.test(emailField.value.toLowerCase())) {\n          emailField.classList.remove('with-errors')\n          validEmail = true\n        } else {\n          validEmail = false\n        }\n      })\n    }\n    if ((checkFieldsAreFilled(formSections[index]) || !isMandatory) && validEmail) {\n      continueBtn.disabled = isLastSection\n      formSections[index].querySelector('.info-text-container').classList.remove('with-errors')\n      allFieldsFilled = true\n      formSections[index].querySelector('.info-text-container .info-text').classList.remove('hidden')\n      formSections[index].querySelector('.info-text-container .error-info-text').classList.remove('showing')\n      Array.from(inputContainers).forEach((input) => {\n        const type = input.dataset.type\n        const inputFields = input.querySelectorAll('input')\n        if (type === 'select') {\n          const selectFields = input.querySelectorAll('select')\n          Array.from(selectFields).forEach((select) => {\n            inputValues = { ...inputValues, [select.dataset.key]: select.value }\n          })\n        } else {\n          const selectedMultipleOptions = []\n          Array.from(inputFields).forEach((inputField) => {\n            const id = inputField.id\n            const value = inputField.value\n            if (type === 'checkbox') {\n              if (inputField.closest('.custom-form-step').dataset.multiple === 'true') {\n                if (inputField.checked) {\n                  selectedMultipleOptions.push(id)\n                }\n                inputValues = { ...inputValues, [inputField.dataset.key]: selectedMultipleOptions }\n              } else if (inputField.checked) {\n                inputValues = { ...inputValues, [inputField.dataset.key]: id }\n              }\n            } else if (type === 'radio') {\n              if (inputField.checked) {\n                inputValues = { ...inputValues, [inputField.dataset.key]: id }\n              }\n            } else if (type === 'dataPolicy') {\n              inputValues = { ...inputValues, [inputField.dataset.key]: inputField.checked }\n            } else {\n              inputValues = { ...inputValues, [inputField.dataset.key]: value }\n            }\n          })\n        }\n      })\n    } else {\n      continueBtn.disabled = false\n      formSections[index].querySelector('.info-text-container').classList.add('with-errors')\n      formSections[index].querySelector('.info-text-container .info-text').classList.add('hidden')\n      if (validEmail) {\n        setErrorText(index, '.info-text-container .error-info-text')\n      } else {\n        const emailInput = formSections[index].querySelector('input[type=\"email\"]')\n        emailInput.classList.add('with-errors')\n        setErrorText(index, '.info-text-container .error-info-text', 'INVALID EMAIL')\n      }\n      formSections[index].querySelector('.info-text-container .error-info-text').classList.add('showing')\n    }\n  }\n\n  if (direction === 'previous' && index > 0) {\n    index -= 1\n    const progress = (100 \/ formSections.length) * index + 1\n    progressBar.style.width = progress === 0 ? '5%' : `${progress.toFixed(0)}%`\n    progressQuantity.innerText = progress.toFixed(0)\n    handleNavigation(e, false)\n  } else if (direction === 'next' && index <= formSections.length - 2 && allFieldsFilled) {\n    index += 1\n    const progress = (100 \/ formSections.length) * index + 1\n    progressBar.style.width = progress === 0 ? '5%' : `${progress.toFixed(0)}%`\n    progressQuantity.innerText = progress.toFixed(0)\n    handleNavigation(e, false)\n  } else if (direction === 'next' && index === formSections.length - 1 && allFieldsFilled) {\n    const prefixValue = prefixSelect.value\n    addUtmsToUrl(marketingData)\n    const dataToZappier = {\n      ...inputValues,\n      phone: [prefixValue, inputValues.phone].filter(Boolean).join(' '),\n      ...(defaultFormData(marketingData)),\n    }\n    fetch(zappierEndpoint, {\n      method: 'POST',\n      body: JSON.stringify(dataToZappier),\n    }).then((res) => res.json())\n      .then(() => window.location.href = redirectUrl)\n      .catch((error) => {\n        console.error('Error in Lead', error)\n        continueBtn.disabled = false\n      })\n  }\n}\n\nbackBtn.addEventListener('click', (e) => navigateWithinForm(e, 'previous'))\ncontinueBtn.addEventListener('click', (e) => navigateWithinForm(e, 'next'))\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>1 % Vimcar Fleet live erleben &#8211; Jetzt kostenlose Produktdemo vereinbaren! Wie viele Fahrzeuge verantworten Sie? Ihre Daten werden sicher verschl\u00fcsselt und nicht an Dritte weitergeleitet 1-5 6-10 11-40 mehr als 40 In welcher Branche sind Sie t\u00e4tig? Diese Frage hilft uns bei der Erstellung einer ma\u00dfgeschneiderten L\u00f6sung f\u00fcr Ihr Unternehmen. Bau- &amp; Handwerk Dienstleistungsbereich [&hellip;]<\/p>\n","protected":false},"author":74,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Darko test Step Form Contentful - Vimcar Boxenstopp<\/title>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Darko test Step Form Contentful\" \/>\n<meta property=\"og:description\" content=\"1 % Vimcar Fleet live erleben &#8211; Jetzt kostenlose Produktdemo vereinbaren! Wie viele Fahrzeuge verantworten Sie? Ihre Daten werden sicher verschl\u00fcsselt und nicht an Dritte weitergeleitet 1-5 6-10 11-40 mehr als 40 In welcher Branche sind Sie t\u00e4tig? Diese Frage hilft uns bei der Erstellung einer ma\u00dfgeschneiderten L\u00f6sung f\u00fcr Ihr Unternehmen. Bau- &amp; Handwerk Dienstleistungsbereich [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vimcar.de\/boxenstopp\/darko-test-step-form-contentful\/\" \/>\n<meta property=\"og:site_name\" content=\"Vimcar Boxenstopp\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vimcar\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-21T12:48:23+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@goVimcar\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"4\u00a0Minuten\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Darko test Step Form Contentful - Vimcar Boxenstopp","robots":{"index":"noindex","follow":"follow"},"og_locale":"de_DE","og_type":"article","og_title":"Darko test Step Form Contentful","og_description":"1 % Vimcar Fleet live erleben &#8211; Jetzt kostenlose Produktdemo vereinbaren! Wie viele Fahrzeuge verantworten Sie? Ihre Daten werden sicher verschl\u00fcsselt und nicht an Dritte weitergeleitet 1-5 6-10 11-40 mehr als 40 In welcher Branche sind Sie t\u00e4tig? Diese Frage hilft uns bei der Erstellung einer ma\u00dfgeschneiderten L\u00f6sung f\u00fcr Ihr Unternehmen. Bau- &amp; Handwerk Dienstleistungsbereich [&hellip;]","og_url":"https:\/\/vimcar.de\/boxenstopp\/darko-test-step-form-contentful\/","og_site_name":"Vimcar Boxenstopp","article_publisher":"https:\/\/www.facebook.com\/vimcar","article_modified_time":"2023-07-21T12:48:23+00:00","twitter_card":"summary_large_image","twitter_site":"@goVimcar","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/vimcar.de\/boxenstopp\/darko-test-step-form-contentful\/","url":"https:\/\/vimcar.de\/boxenstopp\/darko-test-step-form-contentful\/","name":"Darko test Step Form Contentful - Vimcar Boxenstopp","isPartOf":{"@id":"https:\/\/vimcar.de\/boxenstopp\/#website"},"datePublished":"2023-05-26T08:51:52+00:00","dateModified":"2023-07-21T12:48:23+00:00","breadcrumb":{"@id":"https:\/\/vimcar.de\/boxenstopp\/darko-test-step-form-contentful\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vimcar.de\/boxenstopp\/darko-test-step-form-contentful\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/vimcar.de\/boxenstopp\/darko-test-step-form-contentful\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/vimcar.de\/boxenstopp\/"},{"@type":"ListItem","position":2,"name":"Darko test Step Form Contentful"}]},{"@type":"WebSite","@id":"https:\/\/vimcar.de\/boxenstopp\/#website","url":"https:\/\/vimcar.de\/boxenstopp\/","name":"Vimcar Boxenstopp","description":"- Die Lernplattform f\u00fcr Fuhrparkleiter","publisher":{"@id":"https:\/\/vimcar.de\/boxenstopp\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vimcar.de\/boxenstopp\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/vimcar.de\/boxenstopp\/#organization","name":"Vimcar Boxenstopp - Fuhrparkwissen","url":"https:\/\/vimcar.de\/boxenstopp\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/vimcar.de\/boxenstopp\/#\/schema\/logo\/image\/","url":"https:\/\/vimcar.de\/boxenstopp\/wp-content\/uploads\/2020\/10\/logo-vimcar-boxenstopp.png","contentUrl":"https:\/\/vimcar.de\/boxenstopp\/wp-content\/uploads\/2020\/10\/logo-vimcar-boxenstopp.png","width":250,"height":50,"caption":"Vimcar Boxenstopp - Fuhrparkwissen"},"image":{"@id":"https:\/\/vimcar.de\/boxenstopp\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vimcar","https:\/\/twitter.com\/goVimcar","https:\/\/www.instagram.com\/vimcar_official\/","https:\/\/de.linkedin.com\/company\/vimcar","https:\/\/www.pinterest.de\/vimcar\/","https:\/\/www.youtube.com\/channel\/UCWRajoA7OnWsAw-ezAahZPg"]}]}},"_links":{"self":[{"href":"https:\/\/vimcar.de\/boxenstopp\/wp-json\/wp\/v2\/pages\/43930"}],"collection":[{"href":"https:\/\/vimcar.de\/boxenstopp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vimcar.de\/boxenstopp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vimcar.de\/boxenstopp\/wp-json\/wp\/v2\/users\/74"}],"replies":[{"embeddable":true,"href":"https:\/\/vimcar.de\/boxenstopp\/wp-json\/wp\/v2\/comments?post=43930"}],"version-history":[{"count":0,"href":"https:\/\/vimcar.de\/boxenstopp\/wp-json\/wp\/v2\/pages\/43930\/revisions"}],"wp:attachment":[{"href":"https:\/\/vimcar.de\/boxenstopp\/wp-json\/wp\/v2\/media?parent=43930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}