Schritt 1 von ${steps.length}

`; var buttonRow = document.createElement("div"); buttonRow.style.display = "flex"; buttonRow.style.justifyContent = "space-between"; buttonRow.style.gap = "12px"; buttonRow.style.marginTop = "20px"; buttonRow.id = "ss-button-row"; var backBtn = document.createElement("button"); backBtn.type = "button"; backBtn.id = "ss-back-btn"; backBtn.textContent = "Zurück"; backBtn.style.padding = "12px 20px"; backBtn.style.border = "1px solid #ccc"; backBtn.style.borderRadius = "8px"; backBtn.style.background = "#fff"; backBtn.style.cursor = "pointer"; var nextBtn = document.createElement("button"); nextBtn.type = "button"; nextBtn.id = "ss-next-btn"; nextBtn.textContent = "Weiter"; nextBtn.style.padding = "12px 20px"; nextBtn.style.border = "0"; nextBtn.style.borderRadius = "8px"; nextBtn.style.background = "#2e7d32"; nextBtn.style.color = "#fff"; nextBtn.style.cursor = "pointer"; buttonRow.appendChild(backBtn); buttonRow.appendChild(nextBtn); // UI einsetzen: oben ins Formular var container = form.querySelector(".form_container") || form; container.parentNode.insertBefore(nav, container); submitWrap.parentNode.insertBefore(buttonRow, submitWrap); function showStep(index) { currentStep = index; // Alle Tag-Felder ausblenden dayFields.forEach(function(el) { el.style.display = "none"; }); // aktuellen Step anzeigen steps[currentStep].forEach(function(el) { el.style.display = ""; }); // Email immer nur im ersten Schritt if (emailGroup) { emailGroup.style.display = currentStep === 0 ? "" : "none"; } // Submit nur im letzten Schritt submitWrap.style.display = currentStep === steps.length - 1 ? "" : "none"; // Buttons backBtn.style.visibility = currentStep === 0 ? "hidden" : "visible"; nextBtn.style.display = currentStep === steps.length - 1 ? "none" : ""; // Progress var pct = ((currentStep + 1) / steps.length) * 100; var bar = document.getElementById("ss-progress-bar"); var label = document.getElementById("ss-step-label"); if (bar) bar.style.width = pct + "%"; if (label) label.textContent = "Schritt " + (currentStep + 1) + " von " + steps.length; } function validateStep(index) { var valid = true; var firstInvalid = null; var fieldsToCheck = steps[index].slice(); if (index === 0 && emailGroup) fieldsToCheck.unshift(emailGroup); fieldsToCheck.forEach(function(group) { var input = group.querySelector("input"); if (!input) return; // Nur required-Felder prüfen var isRequired = input.classList.contains("required") || input.hasAttribute("aria-required") && input.getAttribute("aria-required") === "true"; if (!isRequired) return; if (!input.value) { valid = false; if (!firstInvalid) firstInvalid = input; } }); if (!valid && firstInvalid) firstInvalid.focus(); return valid; } backBtn.addEventListener("click", function() { if (currentStep > 0) showStep(currentStep - 1); }); nextBtn.addEventListener("click", function() { if (!validateStep(currentStep)) return; if (currentStep < steps.length - 1) showStep(currentStep + 1); }); showStep(0); return true; } var tries = 0; var t = setInterval(function () { tries++; if (initMultiStep() || tries >= 40) clearInterval(t); }, 250); })();

Popular pillows

Get 10% off