Multistep Bootstrap modal form
– 3 steps with a visual stepper and progress lines
– Built-in Bootstrap validation (Next is blocked until current step is valid)
– “Back / Next / Submit” controls with a review step
– Submit spinner and a demo async handler to replace with your AJAX
Want me to tailor the fields (e.g., phone, OTP, address) or wire it to Laravel/WordPress AJAX?
um zu sehen
Right now your modal is opened by this button:
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#multiStepModal">
Launch Demo
</button>Replace that with your markup and just add the Bootstrap attributes (`data-bs-toggle`, `data-bs-target`):
<div class="default_btn text-right" data-bs-toggle="modal" data-bs-target="#multiStepModal">
<i class="fa-solid fa-pen"></i>
<a href="#">um zu sehen</a>
</div>🔹 Notes:
– You don’t need JS for this—Bootstrap handles the click automatically.
– If you prefer to keep the “ clickable only, move the attributes to it instead:
<div class="default_btn text-right">
<i class="fa-solid fa-pen"></i>
<a href="#" data-bs-toggle="modal" data-bs-target="#multiStepModal">um zu sehen</a>
</div>Either way, clicking it will open your `#multiStepModal`.
👉 Do you want the whole “ clickable, or just the “ text?
Here’s a minimal script you can drop under your modal code:
<script>
document.addEventListener("DOMContentLoaded", function () {
const steps = document.querySelectorAll(".step");
let current = 0;
function showStep(index) {
steps.forEach((s, i) => s.classList.toggle("active", i === index));
}
// attach to all .nextandsubmit buttons
document.querySelectorAll(".nextandsubmit").forEach(btn => {
btn.addEventListener("click", function () {
if (current < steps.length - 1) {
current++;
showStep(current);
} else {
// last step → submit form
document.getElementById("msForm").submit();
}
});
});
// initial
showStep(current);
});
</script>And your button(s) look like this in each step:
<button type="button" class="btn btn-primary nextandsubmit">Next</button>On the last step, the same button will act as **Submit** (since the script detects it’s the last one).
👉 Do you also want a **Back** button or only forward navigation?
### Example HTML (notice: no `active` anymore)
<div class="step" data-step="0">
<!-- Step 1 content -->
</div>
<div class="step" data-step="1">
<!-- Step 2 content -->
</div>
<div class="step" data-step="2">
<!-- Step 3 content -->
</div>### Updated JS
<script>
document.addEventListener("DOMContentLoaded", function () {
const steps = document.querySelectorAll(".step");
let current = 0;
function showStep(index) {
steps.forEach((s, i) => s.classList.toggle("active", i === index));
}
// attach click to all .nextandsubmit buttons
document.querySelectorAll(".nextandsubmit").forEach(btn => {
btn.addEventListener("click", function () {
if (current < steps.length - 1) {
current++;
showStep(current);
} else {
// last step → submit form
document.getElementById("msForm").submit();
}
});
});
// show only first step on load
showStep(current);
});
</script>👉 Now, no `.active` is in the HTML — JS applies it only when the modal loads.
Do you also want me to reset back to **step 0 each time the modal reopens**?