জাভাস্ক্রিপ্টে মাল্টি-স্টেপ ফর্ম (Multi-step Form) তৈরি করা

মাল্টি-স্টেপ ফর্ম তৈরির কোড। এটি লম্বা ফর্মকে ছোট ছোট ধাপে ভাগ করে ইউজার এক্সপেরিয়েন্স উন্নত করে।

সম্পূর্ণ উদাহরণ

<!DOCTYPE html> 
<html> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<style> 
  * { box-sizing: border-box; }
  body { background-color: #f1f1f1; }
  #regForm { 
    margin: 100px auto; font-family: Raleway; padding: 40px; 
    width: 70%; min-width: 300px; 
  }
  h1 { text-align: center; }
  input { 
    padding: 10px; width: 100%; font-size: 17px; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    border: 1px solid #aaaaaa; 
  }
  input.invalid { background-color: #ffdddd; }
  .page { display: none; }
  button { 
    background-color: #4CAF50; color: #ffffff; border: none; 
    padding: 10px 20px; font-size: 17px; font-family: Raleway; cursor: pointer; 
  }
  button:hover { opacity: 0.8; }
  #prevBtn { background-color: #bbbbbb; }
  .step { 
    height: 15px; width: 15px; margin: 0 2px; 
    background-color: #bbbbbb; border: none; border-radius: 50%; 
    display: inline-block; opacity: 0.5; 
  }
  .step.active { opacity: 1; }
  .step.finish { background-color: #4CAF50; }
</style> 
<body> 
  <form id="regForm"> 
    <h1>Register:</h1> 
    <div class="page">
      Name: <p><input placeholder="First name:" oninput="this.className = ''" name="fname"></p> 
      <p><input placeholder="Last name:" oninput="this.className = ''" name="lname"></p> 
    </div> 
    <div class="page">
      Contact Info: <p><input placeholder="E-mail:" oninput="this.className = ''" name="email"></p> 
      <p><input placeholder="Phone:" oninput="this.className = ''" name="phone"></p> 
    </div> 
    <div class="page">
      Birthday: <p><input placeholder="Date:" oninput="this.className = ''" name="dd"></p> 
      <p><input placeholder="Month:" oninput="this.className = ''" name="nn"></p> 
      <p><input placeholder="Year:" oninput="this.className = ''" name="yyyy"></p> 
    </div> 
    <div style="overflow:auto;"> 
      <div style="float:right;"> 
        <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button> 
        <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button> 
      </div> 
    </div> 
    <div style="text-align:center;margin-top:40px;"> 
      <span class="step"></span> 
      <span class="step"></span> 
      <span class="step"></span> 
    </div> 
  </form> 
  <script> 
    var currentTab = 0;
    showTab(currentTab);
    
    function showTab(stepNo) {
      var pageEle = document.getElementsByClassName("page");
      pageEle[stepNo].style.display = "block";
      if (stepNo == 0) document.getElementById("prevBtn").style.display = "none";
      else document.getElementById("prevBtn").style.display = "inline";
      if (stepNo == (pageEle.length - 1)) 
        document.getElementById("nextBtn").innerHTML = "Submit";
      else 
        document.getElementById("nextBtn").innerHTML = "Next";
      changeStepIndicator(stepNo);
    }
    
    function nextPrev(stepNo) {
      var pageEle = document.getElementsByClassName("page");
      if (stepNo == 1 && !checkForm()) return false;
      pageEle[currentTab].style.display = "none";
      currentTab = currentTab + stepNo;
      if (currentTab >= pageEle.length) {
        document.getElementById("regForm").submit();
        return false;
      }
      showTab(currentTab);
    }
    
    function checkForm() {
      var pageEle, inputEle, i, valid = true;
      pageEle = document.getElementsByClassName("page");
      inputEle = pageEle[currentTab].getElementsByTagName("input");
      for (i = 0; i < inputEle.length; i++) {
        if (inputEle[i].value == "") {
          inputEle[i].className += " invalid";
          valid = false;
        }
      }
      if (valid) document.getElementsByClassName("step")[currentTab].className += " finish";
      return valid;
    }
    
    function changeStepIndicator(stepNo) {
      var i, pageEle = document.getElementsByClassName("step");
      for (i = 0; i < pageEle.length; i++) 
        pageEle[i].className = pageEle[i].className.replace(" active", "");
      pageEle[stepNo].className += " active";
    }
  </script> 
</body> </html>

কী ফিচার

স্টেপ ইনডিকেটর (ডটস) বর্তमान প্রগ্রেস দেখায়
প্রিভিয়াস/নেক্সট নেভিগেশন
প্রতি স্টেপে ভ্যালিডেশন (খালি ফিল্ড চেক)
এরর ফিল্ড হাইলাইট (লাল ব্যাকগ্রাউন্ড)
লাস্ট স্টেপে "Submit" বাটন

মডার্ন রিয়েক্ট/ভিউ প্যাটার্ন

// React-এ useState দিয়ে স্টেপ ম্যানেজমেন্ট
const [step, setStep] = useState(0);
const steps = [<Step1 />, <Step2 />, <Step3 />];

// Formik + Yup দিয়ে ভ্যালিডেশন

  {({isSubmitting}) => (
    
      {steps[step]}
      
    
  )}

UX টিপস

প্রোগ্রেসবার/স্টেপ ইনডিকেটর বাধ্যতামূলক
প্রিভিয়াস বাটন সব জায়গায় (প্রথম স্টেপ বাদে)
অটো-সেভ বা লোকালস্টোরেজে ড্রাফ্ট সংরক্ষণ
মোবাইলে ফুল-উইডথ ইনপুট, বড় টাচ টার্গেট