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: 'Roboto', 'Segoe UI', Arial, sans-serif;
}
.registration-container {
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;
margin-top: 50px;
}
.section-header {
background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
color: white;
padding: 15px;
border-radius: 10px;
margin-bottom: 20px;
display: flex;
align-items: center;
}
.section-header i {
margin-right: 15px;
font-size: 1.5rem;
}
.form-group label {
font-weight: 600;
color: #495057;
}
.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:hover {
transform: scale(1.05);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.pack-selection .card.selected {
border: 3px solid var(--primary-color);
}
.pack-image {
height: 200px;
object-fit: cover;
}
@media (max-width: 768px) {
.registration-container {
padding: 15px;
margin-top: 20px;
}
}
/* Accessibilité */
.form-control:focus {
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
border-color: var(--primary-color);
}
/* Validation des formulaires */
.was-validated .form-control:invalid,
.form-control.is-invalid {
border-color: #dc3545;
padding-right: calc(1.5em + .75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(.375em + .1875rem) center;
background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-8 registration-container">
<form novalidate>
<!-- Section 1: Informations Utilisateur -->
<div class="section-header">
<i class="fas fa-user"></i>
<h4 class="mb-0">Informations Personnelles</h4>
</div>
<div class="row">
<div class="col-12">
<div class="profile-image-upload">
<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>
<div class="col-md-4">
<div class="form-group">
<label for="civilite">Civilité</label>
<select class="form-control" id="civilite" required>
<option value="">Sélectionner</option>
<option value="M">M.</option>
<option value="Mme">Mme</option>
<option value="Autre">Autre</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="nom">Nom</label>
<input type="text" class="form-control" id="nom" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="prenom">Prénom</label>
<input type="text" class="form-control" id="prenom" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="telephone">Téléphone</label>
<input type="tel" class="form-control" id="telephone" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="motDePasse">Mot de Passe</label>
<input type="password" class="form-control" id="motDePasse" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="confirmMotDePasse">Confirmer Mot de Passe</label>
<input type="password" class="form-control" id="confirmMotDePasse" required>
</div>
</div>
</div>
<!-- Section 2: Informations Entreprise -->
<div class="section-header mt-4">
<i class="fas fa-building"></i>
<h4 class="mb-0">Informations Entreprise</h4>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="typePersonne">Type de Personne</label>
<select class="form-control" id="typePersonne" required>
<option value="">Sélectionner</option>
<option value="independant">Indépendant</option>
<option value="entreprise">Entreprise</option>
<option value="association">Association</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="nomEntreprise">Nom de l'Entreprise</label>
<input type="text" class="form-control" id="nomEntreprise" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="secteurActivite">Secteur d'Activité</label>
<select class="form-control" id="secteurActivite" required>
<option value="">Sélectionner</option>
<option value="tech">Technologies</option>
<option value="finance">Finance</option>
<option value="sante">Santé</option>
<option value="commerce">Commerce</option>
</select>
</div>
</div>
</div>
<!-- Section 3: Sélection de Pack -->
<div class="section-header mt-4">
<i class="fas fa-box-open"></i>
<h4 class="mb-0">Sélection de Pack</h4>
</div>
<div class="row pack-selection">
<div class="col-md-4">
<div class="card mb-4">
<img src="https://via.placeholder.com/300x200?text=Pack+Starter" class="card-img-top pack-image" alt="Pack Starter">
<div class="card-body">
<h5 class="card-title">Pack Starter</h5>
<p class="card-text">Idéal pour les petites structures</p>
<input type="radio" name="pack" id="packStarter" class="d-none" required>
<label for="packStarter" class="btn btn-outline-primary btn-block">Choisir</label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<img src="https://via.placeholder.com/300x200?text=Pack+Pro" class="card-img-top pack-image" alt="Pack Pro">
<div class="card-body">
<h5 class="card-title">Pack Pro</h5>
<p class="card-text">Pour les entreprises en croissance</p>
<input type="radio" name="pack" id="packPro" class="d-none" required>
<label for="packPro" class="btn btn-outline-primary btn-block">Choisir</label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<img src="https://via.placeholder.com/300x200?text=Pack+Enterprise" class="card-img-top pack-image" alt="Pack Enterprise">
<div class="card-body">
<h5 class="card-title">Pack Enterprise</h5>
<p class="card-text">Solutions complètes pour grandes entreprises</p>
<input type="radio" name="pack" id="packEnterprise" class="d-none" required>
<label for="packEnterprise" class="btn btn-outline-primary btn-block">Choisir</label>
</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>
</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>
// Gestion de la prévisualisation de l'image de profil
document.getElementById('profileUpload').addEventListener('change', function(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function(e) {
document.getElementById('profileImage').src = e.target.result;
}
reader.readAsDataURL(file);
});
// Validation des formulaires
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
// Sélection des packs
document.querySelectorAll('.pack-selection .card').forEach(card => {
card.addEventListener('click', function() {
document.querySelectorAll('.pack-selection .card').forEach(c => c.classList.remove('selected'));
this.classList.add('selected');
this.querySelector('input[type="radio"]').checked = true;
});
});
</script>
</body>
</html>