Veuillez vous connecter à votre compte.
Si vous débutez dans le développement web et souhaitez créer un formulaire d'envoi d'e-mail avec un design moderne, vous êtes au bon endroit ! Dans cet article, nous allons vous guider pas à pas pour créer un formulaire d'envoi d'e-mail avec un design élégant en utilisant HTML et un peu de CSS et du JavaScript.
Préparation de l'environnement
Avant de commencer, assurez-vous d'avoir un éditeur de texte ou un environnement de développement web prêt à l'emploi. Vous pouvez utiliser n'importe quel éditeur de texte tel que Notepad++, Visual Studio Code ou Sublime Text.Code HTML CSS JavaScript
Double taper sur le code pour copier son contenu
<!DOCTYPE html>
<html>
<head>
<title>Exemple d'envoi d'e-mail avec effet Glassmorphic</title>
<style>
/* Styles CSS */
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
.container {
max-width: 500px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"], textarea {
width: 100%;
padding: 10px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
}
button {
padding: 10px 15px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease;
}
button:hover {
background-color: #555;
}
.error-message {
color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Formulaire d'envoi d'e-mail</h1>
<div class="form-group">
<label for="nom">Nom :</label>
<input type="text" id="nom" placeholder="Votre nom">
</div>
<div class="form-group">
<label for="adresse">Adresse :</label>
<input type="text" id="adresse" placeholder="Votre adresse">
</div>
<div class="form-group">
<label for="message">Message :</label>
<textarea id="message" rows="5" placeholder="Contenu du courrier électronique"></textarea>
</div>
<button id="sendBtn">Envoyer</button>
<div id="errorContainer" class="error-message"></div>
</div>
<script>
// Remplacez votre email
var to = "monmail@gmail.com";
var subject = "Nouveau Message";
document.getElementById('sendBtn').addEventListener('click', function() {
var nom = document.getElementById('nom').value;
var adresse = document.getElementById('adresse').value;
var message = "Nom : " + nom + "\nAdresse : " + adresse + "\n\n" + document.getElementById('message').value;
// Envoi de la requête POST à l'API CodingMailer
fetch('https://codingmailer.onrender.com/send-email', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
to: to,
subject: subject,
message: message
})
})
.then(function(response) {
if (response.ok) {
// Réinitialiser les champs du formulaire
document.getElementById('nom').value = '';
document.getElementById('adresse').value = '';
document.getElementById('message').value = '';
document.getElementById('errorContainer').textContent = ''; // Effacer le message d'erreur précédent
document.getElementById('errorContainer').textContent = 'Envoi en cours...';
} else {
response.json().then(function(data) {
var errorMessage = data && data.message ? data.message : 'Erreur lors de l\'envoi de l\'e-mail.';
document.getElementById('errorContainer').textContent = 'Erreur : ' + errorMessage;
});
}
})
.catch(function(error) {
console.log('Erreur lors de la requête :', error);
document.getElementById('errorContainer').textContent = 'Erreur lors de la requête : ' + error;
});
});
</script>
</body>
</html>
Explication du code:
Le code HTML crée la structure du formulaire avec des champs pour le nom, l'adresse et le message, ainsi qu'un bouton d'envoi et une zone d'affichage des erreurs.
Le code CSS ajoute des styles pour créer l'effet Glassmorphic et les bordures arrondies du formulaire.
Le code JavaScript ajoute la logique de gestion de l'envoi d'e-mail. Lorsque le bouton d'envoi est cliqué, il récupère les valeurs des champs, construit le message d'e-mail et envoie une requête POST à l'API CodingMailer.
Si la réponse de l'API est OK, les champs du formulaire sont réinitialisés et un message "Envoi en cours..." est affiché.
Si la réponse de l'API n'est pas OK, le message d'erreur renvoyé par l'API est affiché.
En cas d'erreur lors de la requête, un message d'erreur est affiché dans la console et dans la zone d'affichage des erreurs.
