Bootstrap 5
Checkout
Payment
Formulaire
Multi Etapes
Commerce
Formulaire checkout multi-étapes Bootstrap 5 avec validation progressive, résumé panier dynamique et indicateurs visuels de progression.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Snippets Step Payement Boostrap5 202605060030 | AngularForAll</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<style>
.checkout-progress {
background: #f8f9fa;
border-radius: 10px;
padding: 1.5rem;
}
.checkout-step {
display: flex;
align-items: center;
padding: 1rem;
border-radius: 10px;
margin-bottom: 0.5rem;
transition: all 0.3s ease;
}
.checkout-step.active {
background: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.checkout-step.completed {
background: #d4edda;
}
.checkout-number {
width: 35px;
height: 35px;
background: #6c757d;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin-right: 1rem;
}
.checkout-step.active .checkout-number {
background: #fd7e14;
}
.checkout-step.completed .checkout-number {
background: #28a745;
}
.checkout-info {
flex: 1;
}
.checkout-title {
font-weight: 600;
margin-bottom: 0;
}
.checkout-subtitle {
font-size: 0.8rem;
color: #6c757d;
}
.checkout-arrow {
color: #6c757d;
font-size: 1.2rem;
}
.checkout-total {
background: #212529;
color: white;
padding: 1rem;
border-radius: 10px;
margin-top: 1rem;
}
</style>
</head>
<body>
<div class="container py-5">
<div class="row">
<div class="col-lg-8">
<div class="card shadow-lg mb-4">
<div class="card-body">
<h4 class="mb-4">Adresse de livraison</h4>
<form>
<div class="row">
<div class="col-md-6 mb-3">
<label class="form-label">Prénom</label>
<input type="text" class="form-control" value="Jean">
</div>
<div class="col-md-6 mb-3">
<label class="form-label">Nom</label>
<input type="text" class="form-control" value="Dupont">
</div>
</div>
<div class="mb-3">
<label class="form-label">Adresse</label>
<input type="text" class="form-control" placeholder="123 rue de la Paix">
</div>
<div class="row mb-3">
<div class="col-md-4">
<label class="form-label">Code postal</label>
<input type="text" class="form-control">
</div>
<div class="col-md-4">
<label class="form-label">Ville</label>
<input type="text" class="form-control">
</div>
<div class="col-md-4">
<label class="form-label">Pays</label>
<select class="form-select">
<option>France</option>
<option>Belgique</option>
<option>Suisse</option>
</select>
</div>
</div>
<button class="btn btn-success btn-lg w-100">
<i class="bi bi-lock-fill me-2"></i>Continuer vers le paiement
</button>
</form>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="checkout-progress">
<div class="checkout-step completed">
<div class="checkout-number">
<i class="bi bi-check"></i>
</div>
<div class="checkout-info">
<h6 class="checkout-title">Panier</h6>
<p class="checkout-subtitle">2 articles</p>
</div>
<i class="bi bi-chevron-right checkout-arrow me-3"></i>
</div>
<div class="checkout-step active">
<div class="checkout-number">2</div>
<div class="checkout-info">
<h6 class="checkout-title">Livraison</h6>
<p class="checkout-subtitle">Adresse et mode de livraison</p>
</div>
<i class="bi bi-chevron-right checkout-arrow me-3"></i>
</div>
<div class="checkout-step">
<div class="checkout-number">3</div>
<div class="checkout-info">
<h6 class="checkout-title">Paiement</h6>
<p class="checkout-subtitle">Moyen de paiement</p>
</div>
</div>
<div class="checkout-total">
<div class="d-flex justify-content-between mb-2">
<span>Sous-total</span>
<span>89,99 €</span>
</div>
<div class="d-flex justify-content-between mb-2">
<span>Livraison</span>
<span>Gratuit</span>
</div>
<hr class="my-2">
<div class="d-flex justify-content-between fw-bold">
<span>Total</span>
<span>89,99 €</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Télécharger le fichier source