Créer un formulaire d’inscription à une newsletter est un excellent moyen de permettre aux utilisateurs de s’abonner à des mises à jour ou des informations via leur adresse e-mail. Ce formulaire doit être simple, efficace et peut être implémenté en HTML avec un peu de CSS et JavaScript pour la validation.
Étapes
- Création du formulaire HTML
- Ajout de la validation en JavaScript
- Stylisation avec CSS
1. Formulaire HTML
Voici un formulaire simple où l’utilisateur peut entrer son adresse e-mail et s’inscrire à une newsletter. Ce formulaire envoie les données par POST
à une URL de traitement (généralement un service de gestion d’e-mails ou votre propre backend).
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inscription à la Newsletter</title>
<style>
/* Styling du formulaire */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.newsletter-form {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h2 {
text-align: center;
color: #333;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
color: #555;
}
input[type="email"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.btn-submit {
width: 100%;
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn-submit:hover {
background-color: #218838;
}
.error-message {
color: red;
font-size: 14px;
margin-top: 10px;
display: none;
}
</style>
</head>
<body>
<div class="newsletter-form">
<h2>S'inscrire à la Newsletter</h2>
<form id="newsletterForm">
<div class="form-group">
<label for="email">Adresse e-mail :</label>
<input type="email" id="email" name="email" required>
</div>
<button type="submit" class="btn-submit">S'inscrire</button>
<p id="error-message" class="error-message">Veuillez entrer une adresse e-mail valide.</p>
</form>
</div>
<script>
// JavaScript pour la validation
document.getElementById('newsletterForm').addEventListener('submit', function(event) {
event.preventDefault(); // Empêche l'envoi du formulaire sans validation
const emailInput = document.getElementById('email');
const errorMessage = document.getElementById('error-message');
// Regex simple pour valider une adresse e-mail
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (emailPattern.test(emailInput.value)) {
errorMessage.style.display = 'none';
// Simulez un envoi de données avec un alert ou redirection
alert('Merci pour votre inscription à la newsletter !');
// Envoyer les données avec fetch ou AJAX vers le backend
// Exemple :
// fetch('/subscribe', {
// method: 'POST',
// body: new FormData(this),
// });
} else {
errorMessage.style.display = 'block';
}
});
</script>
</body>
</html>
2. Explication des éléments
a) Formulaire HTML
- Le formulaire contient un seul champ d’entrée pour l’adresse e-mail (
<input type="email">
). - Un bouton de soumission permet de valider l’inscription.
- L’attribut
required
dans le champ e-mail force le navigateur à vérifier que quelque chose est bien saisi dans le champ avant de soumettre le formulaire.
b) Validation en JavaScript
Le formulaire est validé en JavaScript avant d’être soumis au serveur. Le script vérifie si l’e-mail entré est conforme au format standard (via une expression régulière regex).
- Expression régulière utilisée :
/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
Cela vérifie que l’adresse e-mail est au bon format avec un nom d’utilisateur, un domaine, et une extension (.com, .fr, etc.). - Si l’e-mail est valide, un message de confirmation s’affiche et vous pouvez ensuite envoyer les données au serveur pour traitement (simulé ici par un
alert()
).
c) CSS pour le style
Le formulaire est stylisé pour être simple et professionnel :
- Flexbox est utilisé pour centrer le formulaire verticalement et horizontalement sur la page.
- Le formulaire est contenu dans un petit cadre avec une bordure ombrée.
- Le bouton de soumission est stylisé avec un effet au survol.
3. Envoyer les données au serveur
Dans un vrai scénario, une fois que l’e-mail est validé, vous voudrez probablement envoyer les données à un service d’abonnement à une newsletter ou à votre propre serveur pour stockage.
Vous pouvez utiliser une requête AJAX avec fetch()
ou AJAX jQuery pour envoyer les données sans recharger la page.
Exemple d’envoi avec fetch() :
fetch('/newsletter', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ email: emailInput.value })
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('Inscription réussie !');
} else {
alert('Une erreur est survenue.');
}
})
.catch(error => {
console.error('Erreur :', error);
});
Ici, l’email est envoyé en format JSON au serveur via une requête POST
pour le traitement.
4. Intégration avec un service d’email marketing
Si vous utilisez un service de marketing par e-mail comme Mailchimp, Sendinblue, ou Mailjet, vous pouvez connecter ce formulaire à leurs API pour inscrire automatiquement les utilisateurs.
Par exemple, avec Mailchimp, après avoir récupéré une clé API, vous pouvez envoyer les données du formulaire à l’API de Mailchimp pour gérer les abonnés à la newsletter.
Conclusion
Ce formulaire d’inscription à une newsletter est une solution simple et efficace pour recueillir des e-mails d’utilisateurs. Avec JavaScript pour la validation et CSS pour la mise en page, ce formulaire peut être personnalisé pour répondre aux besoins spécifiques de votre site web. Pour la partie backend, vous pouvez soit stocker les emails dans une base de données, soit intégrer un service d’email marketing tiers pour gérer vos abonnés.
Image by rawpixel.com on Freepik