Berikut ini adalah contoh kode untuk membuat Template Formulir Check Out Multi-step menggunakan HTML, JavaScript, dan CSS dengan Progress Bar.
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 Check Out</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="progress-bar">
<div class="progress"></div>
</div>
<form id="form-checkout">
<fieldset>
<h2>Informasi Pengiriman</h2>
<input type="text" id="nama" placeholder="Nama">
<input type="email" id="email" placeholder="Email">
<input type="text" id="alamat" placeholder="Alamat">
<button type="button" class="next">Selanjutnya</button>
</fieldset>
<fieldset>
<h2>Informasi Pembayaran</h2>
<input type="text" id="nomor-kartu" placeholder="Nomor Kartu">
<input type="text" id="tanggal-exp" placeholder="Tanggal Kadaluarsa">
<input type="text" id="cvv" placeholder="CVV">
<button type="button" class="prev">Sebelumnya</button>
<button type="button" class="next">Selanjutnya</button>
</fieldset>
<fieldset>
<h2>Konfirmasi Pesanan</h2>
<p>Apakah alamat dan informasi Pembayaran sudah Benar? </p>
<label>
<input type="checkbox" required name="business" />
Yes
</label></br></br>
<button type="button" class="prev">Sebelumnya</button>
<button type="submit">Pesan Sekarang</button>
</fieldset>
</form>
</div>
<script src="script.js"></script>
</body>
</html>CSS (style.css)
CSS
.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);
}
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;
}
.progress-bar {
width: 100%;
height: 20px;
background-color: #fff;
border-radius: 10px;
margin-bottom: 20px;
}
.progress {
height: 100%;
background-color: #4caf50;
border-radius: 10px;
width: 0%;
}
fieldset {
display: none;
}
fieldset:first-child {
display: block;
}
button {
box-shadow:inset 0px 1px 0px 0px #a6827e;
background:linear-gradient(to bottom, #7d5d3b 5%, #634b30 100%);
background-color:#7d5d3b;
border-radius:3px;
border:1px solid #54381e;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:13px;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #4d3534;
}
button.prev {
box-shadow:inset 0px 1px 0px 0px #cf866c;
background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
background-color:#d0451b;
border-radius:3px;
border:1px solid #942911;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:13px;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #854629;
}
input[type="checkbox"] {
width: 1em;
height: 1rem;
accent-color: green;
margin-bottom: 20px;
margin: 10px auto;
}JavaScript (script.js)
JavaScript
const form = document.getElementById('form-checkout');
const progress = document.querySelector('.progress');
const fieldsets = document.querySelectorAll('fieldset');
const prevButtons = document.querySelectorAll('.prev');
const nextButtons = document.querySelectorAll('.next');
let currentStep = 0;
function updateProgress() {
const progressPercentage = (currentStep / (fieldsets.length - 1)) * 100;
progress.style.width = `${progressPercentage}%`;
}
function showStep(step) {
fieldsets.forEach((fieldset, index) => {
if (index === step) {
fieldset.style.display = 'block';
} else {
fieldset.style.display = 'none';
}
});
}
function handleNext() {
if (currentStep < fieldsets.length - 1) {
currentStep++;
showStep(currentStep);
updateProgress();
}
}
function handlePrev() {
if (currentStep > 0) {
currentStep--;
showStep(currentStep);
updateProgress();
}
}
nextButtons.forEach((button) => {
button.addEventListener('click', handleNext);
});
prevButtons.forEach((button) => {
button.addEventListener('click', handlePrev);
});Output:
Anda dapat menggunakan kode di atas sebagai dasar untuk membuat formulir check out multi-langkah yang elegan dan professional menggunakan HTML, JavaScript, dan CSS dengan progress bar. Anda dapat menyesuaikan tampilan dan perilaku formulir sesuai dengan kebutuhan Anda.
Pastikan untuk menyertakan file CSS dan JavaScript yang diperlukan, yaitu style.css dan script.js, serta mengatur struktur HTML sesuai dengan kebutuhan formulir Anda.
Baca juga:
Semoga contoh kode di atas bermanfaat bagi Anda dalam membuat Template Formulir Check Out Multi-step menggunakan HTML, JavaScript, dan CSS dengan Progress Bar
Leave a Reply