Bonjour à vous Développeurs,
Vous désirez envoyer des mails personnalisés à vos couleurs ?
Ce tutoriel va donc vous aider à créer un mail au format HTML avec la forme la plus simple possible.
De plus, j’utiliserais Bootstrap pour permettre aux mails d’être responsive 😉 .
Pré-requis :
Il est important de maitriser les bases de l’HTML, CSS et de Bootstrap. Si ce n’est pas le cas, vous trouverez une petite formation ici : Formation HTML&CSS / Formation Bootstrap (ce simple guide, ici, peut suffire, mais rien ne vaut une bonne formation).
Tutoriel sur le mail au format HTML :
Tout d’abord, il vous faut établir le squelette de votre mail HTML, qui est bien sûr une classique page HTML. Voici le code de départ :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta chartset="utf-8"/>
</head>
<body>
</body>
</html>Intégrer ensuite les fichiers CSS de Bootstrap dans la balise “head” de la page.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">Ceci sont les liens CDN fourni Officiellement par Bootstrap.
Ensuite, je vous ai préparer une petit mise en page pour l’apparence du mail que votre client recevra.
<style>
body{
background: url("https://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/footer_lodyas.png");
color:rgba(255,255,255,1);
}
.logo{width:250px;height:auto;max-height:150px;}
.container{margin-top:-40px;text-align:justify;}
.title{font-size:14px;}
.text-center{text-align:center;}
</style>
Intégrez cette balise entre la balise “Head” et la balise “Body”.
Bien sûr, le lien du “Background” peut être modifié selon vos envies. Voici le lien du site utilisé : http://subtlepatterns.com/ .
Et pour finir, voici le corps du message de contact.
<div class="container">
<div class="text-center">
<img class="logo" src="LE_LIEN_VERS_VOTRE_IMAGE"/>
<h1 class="title">getBrain.fr | Mail d'essai de contact</h1>
</div>
<p>
<br>Message :
<br>
Nec piget dicere avide magis hanc insulam populum Romanum invasisse quam iuste. Ptolomaeo enim rege foederato nobis et socio ob aerarii nostri angustias iusso sine ulla culpa proscribi ideoque hausto veneno voluntaria morte deleto et tributaria facta est et velut hostiles eius exuviae classi inpositae in urbem advectae sunt per Catonem, nunc repetetur ordo gestorum.
</p>
<div class="text-center">
<i>
Mail envoyé depuis le site de <a href="https://getbrain.fr">getBrain.fr</a>, par <a href="mailto:no-reply@getbrain.fr">John Davis</a>.
</i>
</div>
</div>
Placez le code ci-dessus dans la balise “Body”
Voici le code final.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta chartset="utf-8"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<!-- Style -->
<style>
body{
background: url("https://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/footer_lodyas.png");
color:rgba(255,255,255,1);
}
.logo{width:250px;height:auto;max-height:150px;}
.container{margin-top:-40px;text-align:justify;}
.title{font-size:14px;}
.text-center{text-align:center;}
</style>
<!-- Message -->
<body>
<div class="container">
<div class="text-center">
<img class="logo" src="LE_LIEN_VERS_VOTRE_IMAGE"/>
<h1 class="title">getBrain.fr | Mail d'essai de contact</h1>
</div>
<p>
<br>Message :
<br>
Nec piget dicere avide magis hanc insulam populum Romanum invasisse quam iuste. Ptolomaeo enim rege foederato nobis et socio ob aerarii nostri angustias iusso sine ulla culpa proscribi ideoque hausto veneno voluntaria morte deleto et tributaria facta est et velut hostiles eius exuviae classi inpositae in urbem advectae sunt per Catonem, nunc repetetur ordo gestorum.
</p>
<div class="text-center">
<i>
Mail envoyé depuis le site de <a href="https://getbrain.fr">getBrain.fr</a>, par <a href="mailto:no-reply@getbrain.fr">John Davis</a>.
</i>
</div>
</div>
</body>
</html>
Vous pouvez vous faire une idée du rendu avec le formulaire ci-dessous.
Vous recevrez un mail type de “formulaire de contact”.
Merci de votre lecture 🙂 . J’espère que cet article vous aura été d’une grande utilité et que vous le partagerez à tous ceux qui désirent créer des mails au format HTML.
N’hésitez pas à commenter pour maintenir et enrichir ce tutoriel !
A bientôt 😉
Leave a Reply