Jinsi ya Kutengeneza Client-Side Form Wizard kwa JavaScript

Client-Side Form Wizard inawawezesha watumiaji kujaza fomu ndefu hatua kwa hatua, huku data ikihifadhiwa kwenye browser kabla ya ku-submit. Hii inaboresha user experience na kupunguza errors kwenye forms kubwa.

Hatua kwa Hatua
1️⃣ Unda HTML Form Wizard
<form id="wizardForm">
<div class="step" style="display:block;">
<h3>Hatua 1: Jina</h3>
<input type="text" name="firstName" placeholder="Jina la Kwanza">
<input type="text" name="lastName" placeholder="Jina la Mwisho">
<button type="button" id="next1">Next</button>
</div>

<div class="step" style="display:none;">
<h3>Hatua 2: Mawasiliano</h3>
<input type="email" name="email" placeholder="Email">
<input type="tel" name="phone" placeholder="Simu">
<button type="button" id="prev2">Previous</button>
<button type="button" id="next2">Next</button>
</div>

<div class="step" style="display:none;">
<h3>Hatua 3: Message</h3>
<textarea name="message" placeholder="Andika ujumbe wako"></textarea>
<button type="button" id="prev3">Previous</button>
<button type="submit">Submit</button>
</div>
</form>

2️⃣ JavaScript kwa Form Wizard
const steps = document.querySelectorAll(".step");
let currentStep = 0;

function showStep(index) {
steps.forEach((step, i) => step.style.display = i === index ? "block" : "none");
}

document.getElementById("next1").addEventListener("click", () => {
currentStep = 1;
showStep(currentStep);
});

document.getElementById("prev2").addEventListener("click", () => {
currentStep = 0;
showStep(currentStep);
});

document.getElementById("next2").addEventListener("click", () => {
currentStep = 2;
showStep(currentStep);
});

document.getElementById("prev3").addEventListener("click", () => {
currentStep = 1;
showStep(currentStep);
});

// Optional: Save data to LocalStorage for auto-save
const form = document.getElementById("wizardForm");
form.addEventListener("input", (e) => {
localStorage.setItem(e.target.name, e.target.value);
});

// Load saved data
window.addEventListener("DOMContentLoaded", () => {
const inputs = form.querySelectorAll("input, textarea");
inputs.forEach(input => {
const saved = localStorage.getItem(input.name);
if (saved) input.value = saved;
});
});

// Handle submit
form.addEventListener("submit", (e) => {
e.preventDefault();
alert("Fomu imewasilishwa!");
localStorage.clear();
form.reset();
});

3️⃣ Faida za Form Wizard

Inapunguza errors kwa kugawanya form ndefu hatua kwa hatua.

Auto-save inahakikisha data haipotei kwenye refresh/browser close.

Inaboresha user experience kwenye dashboards, registration, au applications interactive.

Rahisi ku-customize na kuongeza validations kwa kila step.

🔗 Links Za Kujifunza Zaidi

🌐 Faulink Official Website: https://www.faulink.com/

📘 Jifunze Web Design & Programming (Tutorials / Mifumo): https://www.faulink.com/excel_mifumo.php

📲 Piga / WhatsApp kwa msaada wa haraka: https://wa.me/255693118509