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">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--dark-color: #2c3e50;
--light-color: #ecf0f1;
}
* {
font-family: 'Inter', sans-serif;
}
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 30px 0;
}
.registration-wrapper {
background: white;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
overflow: hidden;
max-width: 1000px;
width: 100%;
}
.registration-content {
display: flex;
height: 100%;
}
.registration-sidebar {
background: linear-gradient(45deg, #3498db, #2ecc71);
color: white;
padding: 40px 30px;
width: 35%;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.registration-form {
width: 65%;
padding: 40px;
overflow-y: auto;
max-height: 800px;
}
.profile-avatar {
position: relative;
width: 150px;
height: 150px;
margin: 0 auto 20px;
}
.profile-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 5px solid rgba(255,255,255,0.2);
}
.avatar-upload {
position: absolute;
bottom: 0;
right: 0;
background: rgba(0,0,0,0.5);
color: white;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.form-step {
display: none;
}
.form-step.active {
display: block;
}
.step-indicator {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}
.step-indicator .step {
flex: 1;
text-align: center;
padding: 10px;
background-color: #e9ecef;
color: #6c757d;
position: relative;
}
.step-indicator .step.active {
background-color: var(--primary-color);
color: white;
}
.step-indicator .step:not(:last-child)::after {
content: '';
position: absolute;
top: 50%;
right: -20px;
width: 20px;
height: 2px;
background-color: #e9ecef;
}
.pack-selection .card {
transition: all 0.3s ease;
cursor: pointer;
}
.pack-selection .card.selected {
border: 3px solid var(--primary-color);
transform: scale(1.05);
}
.btn-navigation {
border-radius: 50px;
padding: 10px 20px;
}
@media (max-width: 992px) {
.registration-wrapper {
flex-direction: column;
}
.registration-sidebar,
.registration-form {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="registration-wrapper">
<div class="registration-sidebar">
<div class="profile-avatar">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Avatar">
<div class="avatar-upload">
<i class="fas fa-camera"></i>
<input type="file" class="d-none" id="avatarUpload">
</div>
</div>
<h3>Création de Compte</h3>
<p>Rejoignez notre plateforme professionnelle et développez votre réseau</p>
</div>
<div class="registration-form">
<div class="step-indicator">
<div class="step active" data-step="1">Infos Perso</div>
<div class="step" data-step="2">Infos Pro</div>
<div class="step" data-step="3">Forfait</div>
</div>
<form id="registrationForm" novalidate>
<!-- ÉTAPE 1: Informations Personnelles -->
<div class="form-step active" id="step1">
<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</label>
<input type="password" class="form-control" required>
</div>
</div>
</div>
<div class="text-right">
<button type="button" class="btn btn-primary btn-navigation next-step">
Suivant <i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
<!-- ÉTAPE 2: Informations Professionnelles -->
<div class="form-step" id="step2">
<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 class="d-flex justify-content-between">
<button type="button" class="btn btn-secondary btn-navigation prev-step">
<i class="fas fa-arrow-left mr-2"></i>Précédent
</button>
<button type="button" class="btn btn-primary btn-navigation next-step">
Suivant <i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
<!-- ÉTAPE 3: Sélection de Forfait -->
<div class="form-step" id="step3">
<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 class="d-flex justify-content-between">
<button type="button" class="btn btn-secondary btn-navigation prev-step">
<i class="fas fa-arrow-left mr-2"></i>Précédent
</button>
<button type="submit" class="btn btn-success btn-lg">
Finaliser l'inscription <i class="fas fa-check ml-2"></i>
</button>
</div>
</div>
</form>
</div>
</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 étapes du formulaire
$('.next-step').click(function() {
let currentStep = $(this).closest('.form-step');
let nextStep = currentStep.next('.form-step');
let stepIndicator = $('.step-indicator .step');
// Validation de l'étape courante
let form = $('#registrationForm')[0];
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
form.classList.add('was-validated');
return;
}
// Mise à jour des indicateurs d'étape
currentStep.removeClass('active');
nextStep.addClass('active');
stepIndicator.eq(currentStep.index()).removeClass('active');
stepIndicator.eq(nextStep.index()).addClass('active');
});
// Gestion du retour à l'étape précédente
$('.prev-step').click(function() {
let currentStep = $(this).closest('.form-step');
let prevStep = currentStep.prev('.form-step');
let stepIndicator = $('.step-indicator .step');
currentStep.removeClass('active');
prevStep.addClass('active');
stepIndicator.eq(currentStep.index()).removeClass('active');
stepIndicator.eq(prevStep.index()).addClass('active');
});
// 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
$('.avatar-upload').click(function() {
$('#avatarUpload').click();
});
$('#avatarUpload').change(function(e) {
let reader = new FileReader();
reader.onload = function(event) {
$('.profile-avatar img').attr('src', event.target.result);
}
reader.readAsDataURL(e.target.files[0]);
});
});
</script>
</body>
</html>