Cara Membuat Multiple Step Form

Di bawah ini kita akan membuat sebuah form dengan beberapa step atau langkah yang harus dilalui oleh penggunakanya dengan menggunakan CSS dan Javascript. Form ini biasanya digunakan website untuk melakukan pendaftaran yang memerlukan info-info data pribadi pengguna yang lebih mendetail atau bisa juga digunakan oleh website untuk penggunanya agar melengkapi persyaratan atau dokumen yang dibutuhkan untuk melakukan pendaftaran.

Multiple Step Form

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
}
  
/* Style untuk form */
#regForm {
  background-color: #A9A9A9;
  margin: 100px auto;
  font-family: Raleway;
  padding: 40px;
  width: 70%;
  min-width: 300px;
}

h1 {
  text-align: center;  
}
  
/* Style untuk field input */
input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}

/* Tandai kotak inputan yang mendapatkan kesalahan pada validasi: */
input.invalid {
  background-color: #ffdddd;
}

/* Sembunyikan seua stepnya secra default: */
.tab {
  display: none;
}

button {
  background-color: #1E90FF;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #B22222;
}

/* Buat lingkaran yang menunjukkan step dari bentuk tersebut: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #008B8B;
  border: none;  
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}

/* Tandai langkah-langkah yang sudah selesai dan valid: */
.step.finish {
  background-color: #1E90FF;
}
</style>
<body>

<form id="regForm" action="/action_page.php">
  <h1>Pendaftaran Join Member:</h1>
  <!-- Satu "tab" untuk setiap langkah di form: -->
  <div class="tab">Nama Peserta:
    <p><input placeholder="Nama Depan......" oninput="this.className = ''" name="fname"></p>
    <p><input placeholder="Nama Belakang....." oninput="this.className = ''" name="lname"></p>
  </div>
  <div class="tab">Kontak:
    <p><input placeholder="E-mail..." oninput="this.className = ''" name="email"></p>
    <p><input placeholder="Nomor Handphone" oninput="this.className = ''" name="phone"></p>
  </div>
  <div class="tab">Tanggal Lahir:
    <p><input placeholder="Tanggal" oninput="this.className = ''" name="dd"></p>
    <p><input placeholder="Bulan" oninput="this.className = ''" name="nn"></p>
    <p><input placeholder="Tahun" oninput="this.className = ''" name="yyyy"></p>
  </div>
  <div class="tab">Buat Akun Login:
    <p><input placeholder="Username..." oninput="this.className = ''" name="uname"></p>
    <p><input placeholder="Password..." oninput="this.className = ''" name="pword" type="password"></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>
  <!-- Lingkaran yang menandakan langkah dari form: -->
  <div style="text-align:center;margin-top:40px;">
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
  </div>
</form>

<script>
var currentTab = 0; // Tab saat ini diatur menjadi tab pertama (0)
showTab(currentTab); // Tampilkan tab saat ini

function showTab(n) {
  // Fungsi ini akan menampilkan tab yang ditentukan dalam bentuk ...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  //... dan perbaiki tombol Previous/Next:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Submit";
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }
  // ... dan jalankan fungsi yang akan menampilkan indikator step yang benar:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // Fungsi ini akan menentukan tab mana yang akan ditampilkan
  var x = document.getElementsByClassName("tab");
  // Keluar dari fungsi jika ada field di tab saat ini yang tidak valid:
  if (n == 1 && !validateForm()) return false;
  // Sembunyikan tab saat ini:
  x[currentTab].style.display = "none";
  // Naikkan atau turunkan tab saat ini sebesar 1:
  currentTab = currentTab + n;
  // jika telah mencapai akhir formulir ...
  if (currentTab >= x.length) {
    // ... formulir dikirimkan:
    document.getElementById("regForm").submit();
    return false;
  }
  // Jika tidak, tampilkan tab yang benar:
  showTab(currentTab);
}

function validateForm() {
  // Fungsi ini berkaitan dengan validasi field formulir
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // Sebuah loop yang memeriksa setiap field input di tab saat ini:
  for (i = 0; i < y.length; i++) {
    // jika field kosong...
    if (y[i].value == "") {
      // tambahkan class "invalid" class ke field:
      y[i].className += " invalid";
      // dan atur status saat ini ke false
      valid = false;
    }
  }
  // Jika status yang valid adalah benar, tandai langkah tersebut sebagai selesai dan valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return status valid 
}

function fixStepIndicator(n) {
  // Fungsi ini menghapus class "aktif" dari semua langkah ...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... dan menambahkan class "aktif" pada langkah saat ini:
  x[n].className += " active";
}
</script>

</body>
</html>

Formulir Wizard – Multiple Step Form

Langkah 1) Tambahkan HTML:
Contoh

<form id="regForm" action="/action_page.php">
  <h1>Register:</h1>
  <!-- Satu "tab" untuk setiap langkah di form: -->
  <div class="tab">Nama Peserta:
    <p><input placeholder="Nama Depan......" oninput="this.className = ''" name="fname"></p>
    <p><input placeholder="Nama Belakang....." oninput="this.className = ''" name="lname"></p>
  </div>
  <div class="tab">Kontak:
    <p><input placeholder="E-mail..." oninput="this.className = ''" name="email"></p>
    <p><input placeholder="Phone..." oninput="this.className = ''" name="phone"></p>
  </div>
  <div class="tab">Tanggal Lahir:
    <p><input placeholder="Tanggal" oninput="this.className = ''" name="dd"></p>
    <p><input placeholder="Bulan" oninput="this.className = ''" name="nn"></p>
    <p><input placeholder="Tahun" oninput="this.className = ''" name="yyyy"></p>
  </div>
  <div class="tab">Buat Akun Login:
    <p><input placeholder="Username..." oninput="this.className = ''" name="uname"></p>
    <p><input placeholder="Password..." oninput="this.className = ''" name="pword" type="password"></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>
  <!-- Lingkaran yang menandakan langkah dari form: -->
  <div style="text-align:center;margin-top:40px;">
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
  </div>
</form>

Langkah 2) Tambahkan CSS:
Style pada elemen formulir:
Contoh

/* Style untuk form */
#regForm {
  background-color: #ffffff;
  margin: 100px auto;
  font-family: Raleway;
  padding: 40px;
  width: 70%;
  min-width: 300px;
}

h1 {
  text-align: center;  
}
  
/* Style untuk field input */
input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}

/* Tandai kotak inputan yang mendapatkan kesalahan pada validasi: */
input.invalid {
  background-color: #ffdddd;
}

/* Sembunyikan seua stepnya secra default: */
.tab {
  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;
}

/* Buat lingkaran yang menunjukkan step dari bentuk tersebut: */
.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;
}

/* Tandai langkah-langkah yang sudah selesai dan valid: */
.step.finish {
  background-color: #4CAF50;
}

Langkah 3) Tambahkan JavaScript:
Contoh

var currentTab = 0; // Tab saat ini diatur menjadi tab pertama (0)
showTab(currentTab); // Tampilkan tab saat ini

function showTab(n) {
  // Fungsi ini akan menampilkan tab yang ditentukan dalam bentuk ...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  //... dan perbaiki tombol Previous/Next:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Submit";
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }
  // ... dan jalankan fungsi yang akan menampilkan indikator step yang benar:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // Fungsi ini akan menentukan tab mana yang akan ditampilkan
  var x = document.getElementsByClassName("tab");
  // Keluar dari fungsi jika ada field di tab saat ini yang tidak valid:
  if (n == 1 && !validateForm()) return false;
  // Sembunyikan tab saat ini:
  x[currentTab].style.display = "none";
  // Naikkan atau turunkan tab saat ini sebesar 1:
  currentTab = currentTab + n;
  // jika telah mencapai akhir formulir ...
  if (currentTab >= x.length) {
    // ... formulir dikirimkan:
    document.getElementById("regForm").submit();
    return false;
  }
  // Jika tidak, tampilkan tab yang benar:
  showTab(currentTab);
}

function validateForm() {
  // Fungsi ini berkaitan dengan validasi field formulir
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // Sebuah loop yang memeriksa setiap field input di tab saat ini:
  for (i = 0; i < y.length; i++) {
    // jika field kosong...
    if (y[i].value == "") {
      // tambahkan class "invalid" class ke field:
      y[i].className += " invalid";
      // dan atur status saat ini ke false
      valid = false;
    }
  }
  // Jika status yang valid adalah benar, tandai langkah tersebut sebagai selesai dan valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return status valid 
}

function fixStepIndicator(n) {
  // Fungsi ini menghapus class "aktif" dari semua langkah ...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... dan menambahkan class "aktif" pada langkah saat ini:
  x[n].className += " active";
}

form How To

Cara Membuat Multiple Step Form

Multiple Step Form

Formulir Wizard – Multiple Step Form

Cara Membuat Toggle Password Visibility

Cara Membuat Autocomplete

You may also like