Formulaire
Contact
Bootstrap 5
Responsive
Html
Css
Validation
Snippet
Form
Mobile First
Composant
Email
Formulaire de contact Bootstrap 5 responsive avec champs nom, email, sujet et message. Validation HTML5 native, design soigné et parfaitement adapté mobile.
<!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>Snippet Form Contact Bootstrap5 2026 05050003 | AngularForAll</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card shadow-lg border-0 rounded-4">
<div class="card-body p-5">
<h3 class="text-center mb-4 fw-bold">Contactez-nous</h3>
<form>
<div class="row g-3">
<div class="col-md-6">
<label for="nom" class="form-label">Nom</label>
<input type="text" class="form-control" id="nom" placeholder="Votre nom" required>
</div>
<div class="col-md-6">
<label for="prenom" class="form-label">Prénom</label>
<input type="text" class="form-control" id="prenom" placeholder="Votre prénom" required>
</div>
<div class="col-md-6">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="exemple@email.com" required>
</div>
<div class="col-md-6">
<label for="telephone" class="form-label">Téléphone</label>
<input type="tel" class="form-control" id="telephone" placeholder="+33 6 12 34 56 78">
</div>
<div class="col-12">
<label for="sujet" class="form-label">Sujet</label>
<select class="form-select" id="sujet">
<option selected disabled>Choisissez un sujet...</option>
<option value="1">Demande d'information</option>
<option value="2">Support technique</option>
<option value="3">Devis</option>
<option value="4">Autre</option>
</select>
</div>
<div class="col-12">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" rows="5" placeholder="Votre message..." required></textarea>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="rgpd" required>
<label class="form-check-label" for="rgpd">
J'accepte la politique de confidentialité
</label>
</div>
</div>
<div class="col-12 text-center mt-4">
<button type="submit" class="btn btn-primary btn-lg px-5">Envoyer le message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Télécharger le fichier source