Bootstrap 5
Registration
Signup
Formulaire
Progress
Responsive
Formulaire inscription multi-étapes Bootstrap 5 avec indicateur progression horizontale, validation progressive et collecte données séquentielle.
<!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 Registre 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>
.progress-steps-form {
position: relative;
display: flex;
justify-content: space-between;
margin-bottom: 3rem;
}
.progress-steps-form::before {
content: '';
position: absolute;
top: 20px;
left: 15%;
right: 15%;
height: 2px;
background: #dee2e6;
z-index: 0;
}
.step-item {
position: relative;
z-index: 1;
text-align: center;
flex: 1;
}
.step-circle {
width: 40px;
height: 40px;
border-radius: 50%;
background: white;
border: 2px solid #dee2e6;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 10px;
font-weight: bold;
transition: all 0.3s ease;
}
.step-item.active .step-circle {
background: #0d6efd;
border-color: #0d6efd;
color: white;
}
.step-item.completed .step-circle {
background: #198754;
border-color: #198754;
color: white;
}
.step-label {
font-size: 0.875rem;
color: #6c757d;
margin-top: 5px;
}
.step-item.active .step-label {
color: #0d6efd;
font-weight: 600;
}
.step-item.completed .step-label {
color: #198754;
}
</style>
</head>
<body>
<div class="container py-5">
<div class="card shadow-lg">
<div class="card-header bg-primary text-white">
<h4 class="mb-0"><i class="bi bi-file-earmark-text me-2"></i>Formulaire d'inscription</h4>
</div>
<div class="card-body">
<!-- Progress Steps Form -->
<div class="progress-steps-form">
<div class="step-item completed">
<div class="step-circle">
<i class="bi bi-check-lg"></i>
</div>
<div class="step-label">Informations personnelles</div>
</div>
<div class="step-item active">
<div class="step-circle">2</div>
<div class="step-label">Adresse</div>
</div>
<div class="step-item">
<div class="step-circle">3</div>
<div class="step-label">Documents</div>
</div>
<div class="step-item">
<div class="step-circle">4</div>
<div class="step-label">Validation</div>
</div>
</div>
<!-- Formulaire -->
<form>
<div class="mb-3">
<label class="form-label">Adresse</label>
<input type="text" class="form-control" placeholder="123 rue Example">
</div>
<div class="row mb-3">
<div class="col-md-6">
<label class="form-label">Ville</label>
<input type="text" class="form-control" placeholder="Paris">
</div>
<div class="col-md-6">
<label class="form-label">Code postal</label>
<input type="text" class="form-control" placeholder="75001">
</div>
</div>
<div class="d-flex justify-content-between">
<button type="button" class="btn btn-outline-secondary">
<i class="bi bi-arrow-left me-2"></i>Précédent
</button>
<button type="button" class="btn btn-primary">
Suivant<i class="bi bi-arrow-right ms-2"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>Télécharger le fichier source