Bootstrap
Bootstrap4
Registre
Html
Css
Template de registre Bootstrap 4 avec design élégant et moderne.
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page d'inscription Bootstrap 5 | AngularForAll</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--gradient-start: #667eea;
--gradient-end: #764ba2;
}
body {
background-color: #f4f7f6;
font-family: 'Inter', sans-serif;
}
.registration-container {
max-width: 800px;
margin: 50px auto;
background-color: white;
border-radius: 15px;
box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
padding: 30px;
}
.collapse-section {
margin-bottom: 20px;
border: 1px solid #e9ecef;
border-radius: 10px;
overflow: hidden;
}
.collapse-header {
background-color: #f8f9fa;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
}
.collapse-header:hover {
background-color: #e9ecef;
}
.collapse-header h5 {
margin: 0;
display: flex;
align-items: center;
}
.collapse-header i {
margin-right: 15px;
color: var(--primary-color);
}
.collapse-header .toggle-icon {
transition: transform 0.3s ease;
}
.collapse-header[aria-expanded="true"] .toggle-icon {
transform: rotate(180deg);
}
.profile-image-upload {
position: relative;
max-width: 200px;
margin: 0 auto 20px;
}
.profile-image {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
border: 4px solid #dee2e6;
}
.image-upload-overlay {
position: absolute;
bottom: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
color: white;
border-radius: 50%;
padding: 10px;
cursor: pointer;
}
.pack-selection .card {
transition: all 0.3s ease;
cursor: pointer;
}
.pack-selection .card.selected {
border: 3px solid var(--primary-color);
transform: scale(1.05);
}
@media (max-width: 768px) {
.registration-container {
margin: 20px;
padding: 15px;
}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="registration-container">
<form id="registrationForm" novalidate>
<!-- Section 1: Informations Personnelles -->
<div class="collapse-section">
<div class="collapse-header" data-toggle="collapse" data-target="#personalInfoCollapse" aria-expanded="true">
<h5>
<i class="fas fa-user"></i>
Informations Personnelles
</h5>
<i class="fas fa-chevron-down toggle-icon"></i>
</div>
<div id="personalInfoCollapse" class="collapse show">
<div class="card-body">
<div class="profile-image-upload mb-4">
<img src="https://via.placeholder.com/200" alt="Photo de profil" class="profile-image" id="profileImage">
<label for="profileUpload" class="image-upload-overlay">
<i class="fas fa-camera"></i>
<input type="file" id="profileUpload" class="d-none" accept="image/*">
</label>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Civilité</label>
<select class="form-control" required>
<option value="">Sélectionner</option>
<option>M.</option>
<option>Mme</option>
<option>Autre</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Nom</label>
<input type="text" class="form-control" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Prénom</label>
<input type="text" class="form-control" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Téléphone</label>
<input type="tel" class="form-control" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Mot de passe</label>
<input type="password" class="form-control" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Confirmation du mot de passe</label>
<input type="password" class="form-control" required>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Section 2: Informations Professionnelles -->
<div class="collapse-section">
<div class="collapse-header" data-toggle="collapse" data-target="#professionalInfoCollapse" aria-expanded="false">
<h5>
<i class="fas fa-building"></i>
Informations Professionnelles
</h5>
<i class="fas fa-chevron-down toggle-icon"></i>
</div>
<div id="professionalInfoCollapse" class="collapse">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Type d'Entreprise</label>
<select class="form-control" required>
<option value="">Sélectionner</option>
<option>Indépendant</option>
<option>SARL</option>
<option>SA</option>
<option>Association</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Nom de l'Entreprise</label>
<input type="text" class="form-control" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Secteur d'Activité</label>
<select class="form-control" required>
<option value="">Sélectionner</option>
<option>Technologies</option>
<option>Finance</option>
<option>Santé</option>
<option>Commerce</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Numéro SIRET</label>
<input type="text" class="form-control" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Code APE</label>
<input type="text" class="form-control" required>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Section 3: Sélection de Forfait -->
<div class="collapse-section">
<div class="collapse-header" data-toggle="collapse" data-target="#packSelectionCollapse" aria-expanded="false">
<h5>
<i class="fas fa-box-open"></i>
Sélection de Forfait
</h5>
<i class="fas fa-chevron-down toggle-icon"></i>
</div>
<div id="packSelectionCollapse" class="collapse">
<div class="card-body">
<div class="row pack-selection">
<div class="col-md-4">
<div class="card mb-4">
<div class="card-body text-center">
<h5 class="card-title">Starter</h5>
<p class="card-text">Idéal pour débuter</p>
<h3 class="text-primary">29€/mois</h3>
<input type="radio" name="pack" required class="d-none">
<button type="button" class="btn btn-outline-primary mt-3">Choisir</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<div class="card-body text-center">
<h5 class="card-title">Pro</h5>
<p class="card-text">Pour les professionnels</p>
<h3 class="text-primary">59€/mois</h3>
<input type="radio" name="pack" required class="d-none">
<button type="button" class="btn btn-outline-primary mt-3">Choisir</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<div class="card-body text-center">
<h5 class="card-title">Enterprise</h5>
<p class="card-text">Solution complète</p>
<h3 class="text-primary">99€/mois</h3>
<input type="radio" name="pack" required class="d-none">
<button type="button" class="btn btn-outline-primary mt-3">Choisir</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-4">
<button type="submit" class="btn btn-primary btn-lg">
<i class="fas fa-paper-plane mr-2"></i>S'inscrire
</button>
</div>
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function() {
// Gestion des en-têtes de collapse
$('.collapse-header').on('click', function() {
// Rotation de l'icône
$(this).find('.toggle-icon').toggleClass('rotated');
// Fermeture des autres sections
$('.collapse-section .collapse').not($($(this).data('target'))).removeClass('show');
$('.collapse-header').not(this).attr('aria-expanded', 'false');
});
// Sélection de pack
$('.pack-selection .card').click(function() {
$('.pack-selection .card').removeClass('selected');
$(this).addClass('selected');
$(this).find('input[type="radio"]').prop('checked', true);
});
// Upload d'avatar
$('.image-upload-overlay').click(function() {
$('#profileUpload').click();
});
$('#profileUpload').change(function(e) {
let reader = new FileReader();
reader.onload = function(event) {
$('#profileImage').attr('src', event.target.result);
}
reader.readAsDataURL(e.target.files[0]);
});
// Validation du formulaire
$('#registrationForm').on('submit', function(e) {
if (this.checkValidity() === false) {
e.preventDefault();
e.stopPropagation();
}
$(this).addClass('was-validated');
});
});
</script>
</body>
</html>