![Formulir Pendaftaran Multi-Step menggunakan HTML, JavaScript, dan CSS [Free Download]](https://webbiz.id/wp-content/uploads/2024/01/Formulir-Pendaftaran-Multi-Step-menggunakan-HTML-JavaScript-dan-CSS-Free-Download.jpg)
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>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;
}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--;
}
}Output:
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.
Baca juga:
Semoga contoh kode ini bermanfaat bagi Anda dalam membuat formulir pendaftaran yang lebih interaktif dan menarik.
Leave a Reply