Formulir Pendaftaran Multi-Step menggunakan HTML, JavaScript, dan CSS [Free Download]

Form Pendaftaran Multi-Step menggunakan HTML, JavaScript, dan CSS [Free Download]

—

by

Webbiz.ID
in , ,

Berikut adalah contoh kode untuk membuat formulir pendaftaran multi-step yang elegan dan profesional menggunakan HTML, JavaScript, dan CSS.

HTML (index.html)

HTML
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Formulir Pendaftaran</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Formulir Pendaftaran</h1>
    <div class="progress-bar">
      <div class="progress"></div>
    </div>
    <form id="form-pendaftaran">
      <fieldset>
        <legend>Langkah 1: Informasi Pribadi</legend>
        <label for="nama">Nama:</label>
        <input type="text" id="nama" name="nama" required>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <button type="button" onclick="nextStep()">Selanjutnya</button>
      </fieldset>
      <fieldset>
        <legend>Langkah 2: Informasi Kontak</legend>
        <label for="alamat">Alamat:</label>
        <input type="text" id="alamat" name="alamat" required>
        <label for="telepon">Telepon:</label>
        <input type="tel" id="telepon" name="telepon" required>
        <button type="button" onclick="nextStep()">Selanjutnya</button>
      </fieldset>
      <fieldset>
        <legend>Langkah 3: Informasi Pekerjaan</legend>
        <label for="perusahaan">Perusahaan:</label>
        <input type="text" id="perusahaan" name="perusahaan" required>
        <label for="posisi">Posisi:</label>
        <input type="text" id="posisi" name="posisi" required>
        <button type="submit">Daftar</button>
      </fieldset>
    </form>
  </div>

  <script src="script.js"></script>
</body>
</html>
HTML

CSS (style.css)

CSS
 /* Gaya CSS untuk tampilan formulir */
.form-container {
max-width: 600px;
background: #fff;
border-radius: 5px;
position: relative;
overflow: hidden;
margin: 20px auto;
padding: 20px;
background-color: #F2F4F4;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  
legend {
font-weight: bold;
}
  
input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 10px;
}
  
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 10px;
}
  
.form-step {
display: none;
}
  
.form-step.active {
display: block;
}
  
label {
display: block;
margin-bottom: 5px;
}
  
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
  
button:hover {
background-color: #45a049;
}
  
button[type="submit"] {
background-color: #008CBA;
}
  
button[type="submit"]:hover {
background-color: #0077A3;
}
  
  .progress-bar {
  background-color: #f0f0f0;
  height: 10px;
  margin-bottom: 20px;
}

.progress {
  background-color: #007bff;
  height: 100%;
  width: 0;
  transition: width 0.3s ease-in-out;
}
CSS

JavaScript (scripts.js)

JavaScript
    // JavaScript untuk mengatur navigasi antar langkah
    var currentStep = 1;
    var formSteps = document.getElementsByClassName('form-step');
const progress = document.querySelector('.progress');

    function nextStep() {
      if (currentStep < formSteps.length) {
        formSteps[currentStep - 1].classList.remove('active');
        formSteps[currentStep].classList.add('active');
        currentStep++;
      }
    }

    function previousStep() {
      if (currentStep > 1) {
        formSteps[currentStep - 1].classList.remove('active');
        formSteps[currentStep - 2].classList.add('active');
        currentStep--;
      }
    }
JavaScript

Output:

Formulir Pendaftaran

Langkah 1: Informasi Pribadi

Langkah 2: Informasi Kontak

Langkah 3: Informasi Akun

Anda dapat menggunakan contoh kode di atas untuk membuat formulir pendaftaran multi-langkah yang elegan dan profesional. Kode tersebut menggunakan HTML untuk struktur formulir, CSS untuk tampilan dan layout, serta JavaScript.

Pastikan Anda menyertakan file CSS dan JavaScript yang diperlukan, yaitu “style.css” dan “script.js”. Anda juga dapat menyesuaikan tampilan formulir sesuai kebutuhan dengan mengubah kode CSS.

Download Code

Baca juga:

Semoga contoh kode ini bermanfaat bagi Anda dalam membuat formulir pendaftaran yang lebih interaktif dan menarik.

Artikel Terbaru ⭐