Skip to Navigation
L’HTML est un langage de script côté client et, de ce fait, il ne peut pas envoyer d’emails. Naturellement, il est également impossible d’envoyer des emails directement depuis un formulaire HTML.
Cependant, vous pouvez utiliser un formulaire HTML pour collecter des données et les envoyer à un script ou service côté serveur. Le script côté serveur traitera alors les données et enverra un email.
Dans ce tutoriel, nous passerons en revue toutes les étapes nécessaires pour écrire des scripts de formulaire HTML et côté serveur, valider les emails et les envoyer de manière sécurisée.
Pourquoi est-il impossible d’envoyer des emails directement depuis un formulaire HTML ?
Si vous êtes conscient des vulnérabilités de sécurité des langages côté client, n’hésitez pas à passer cette section et à commencer à lire comment créer un formulaire HTML.
En tant que langage de script côté client, le code HTML est affiché sur l’appareil de l’utilisateur final et interprété par les navigateurs.
Si un formulaire HTML devait envoyer des emails directement sans aucun cryptage côté serveur, il révélerait les adresses email et d’autres données du formulaire à quiconque consulterait le code source de la page. Ces informations pourraient être exploitées par des acteurs malveillants, posant d’importants problèmes de sécurité.
D’autres raisons de l’incapacité de l’HTML à envoyer des emails incluent :
- Logique d’envoi d’email inexistante. L’HTML, en soi, ne peut pas envoyer d’emails via des appels API ou en se connectant au serveur SMTP. Un script côté serveur est absolument nécessaire pour ce processus ;
- Abus de ressources. L’HTML ne dispose pas non plus de limitation de débit, ce qui complique le contrôle du nombre d’emails envoyés dans un court laps de temps. En cas d’abus, cela peut facilement épuiser les ressources fournies par le serveur d’hébergement ou les services de messagerie.
Existe-t-il un code HTML pour envoyer un email à partir de la soumission d’un formulaire ?
La seule option pour envoyer un email directement depuis un formulaire HTML est le lien mailto:. Et bien que cela semble être une solution miracle, cette approche est également problématique.
Les liens mailto: peuvent être définis comme une action de formulaire, mais ils n’envoient pas d’emails eux-mêmes. Au lieu de cela, ils déclenchent un logiciel de messagerie (comme la messagerie par défaut sur votre ordinateur, par exemple Microsoft Outlook ou Apple Mail). Cela peut perturber l’engagement sur le site web et l’expérience utilisateur.
Vous voyez, tous les visiteurs de sites web n’utilisent pas un programme de messagerie par défaut. Certains d’entre eux utilisent le webmail. En cliquant sur le lien mailto:, ils pourraient être obligés de télécharger un logiciel qu’ils n’ont aucune intention d’utiliser. Et forcer les utilisateurs à basculer entre le site web et les applications de messagerie n’est pas la chose la plus conviviale que vous puissiez faire; d’autant plus que cela n’arrive que si le navigateur prend en charge cette fonctionnalité et ouvre une messagerie.
De plus, mailto: est assez limité en fonctionnalités. Il ne vous permet pas d’ajouter des pièces jointes ou d’avoir un contrôle sur le formatage de l’email.
Vous pouvez ajouter un objet d’email ou le corps afin que ceux-ci soient pré-remplis dans la fenêtre de la messagerie qui s’ouvre. Cependant, cela peut facilement rendre l’URL trop longue. Si le navigateur a des limitations sur la longueur des URL, mailto: peut être mal géré ou affiché incorrectement.
Voici un exemple simple de mailto: au cas où vous voudriez quand même essayer :
<a href="mailto:masteryoda@starwars.com">J'adore Star Wars</a>Et voici à quoi cela ressemblerait avec Cc, Cci, objet et corps de l’email :
<a href="mailto:masteryoda@starwars.com? cc=skywalker@starwars.com& bcc=leia@starwars.com& subject=Que%20la%20Force%20soit%20avec%20vous&body=Que%20la%20Force%20soit%20avec%20nous%20tous%3A%0D%0A%0D%0ASalutations%2C%0D%0AUn%20Client%20Heureux">J'adore Star Wars</a> Peut-on envoyer un email en utilisant un formulaire HTML avec JavaScript ?
Non, ce n’est pas possible. JavaScript est un script côté client; envoyer des emails depuis celui-ci révélerait les mêmes vulnérabilités que HTML.
Cependant, vous pouvez utiliser JavaScript pour valider les champs du formulaire, tels que l’adresse email. Ensuite, envoyez la soumission du formulaire via un langage côté serveur. L’option la plus courante est PHP. Nous allons décomposer ci-dessous comment utiliser cette combinaison.
Comment créer un formulaire HTML
Avant de construire un script d’envoi d’email, nous devrions d’abord créer un simple formulaire de contact HTML. Pour simplifier nos exemples, nous n’utiliserons aucun style CSS. Oui, notre formulaire ressemblera à un croquis d’enfant, mais nous n’essayons pas d’être des Picassos du code ici.
Le code d’un formulaire HTML simple ressemblera à quelque chose comme ceci :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Formulaire de Contact</title>
</head>
<body>
<h2>Contactez-nous</h2>
<label for="name">Nom :</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Adresse Email :</label>
<input type="email" id="email" name="email" required>
<br>
<label for="message">Message :</label>
<textarea id="message" name="message" required></textarea>
<br>
<button type="submit">Envoyer</button>
</form>
</body>
</html>Et voici ce que les utilisateurs verront :
Comment envoyer un email en utilisant un formulaire HTML avec PHP
Pour envoyer des emails depuis un formulaire HTML en utilisant PHP, nous devons également valider les entrées du formulaire. Ceci est nécessaire pour éviter les adresses invalides telles que maitreyoda@starwars ou masteryoda.starwars.com.
Pour la validation, vous avez deux options – la validation intégrée de HTML5 et validate.js de JavaScript.
Validation et envoi d’emails en utilisant HTML5 et PHP
HTML5 est la dernière version HTML. Il valide les entrées de formulaire en utilisant des attributs tels que required, pattern, type, etc. Il peut donc être utilisé pour effectuer des validations côté client.
Le code suivant est un exemple de formulaire HTML avec validation HTML5 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Formulaire de Contact</title>
</head>
<body>
<form action="send_email.php" method="post">
<label for="firstName">Prénom :</label>
<input type="text" id="firstName" name="firstName" required>
<br>
<label for="email">Adresse Email :</label>
<input type="email" id="email" name="email" required>
<br>
<label for="message">Message :</label>
<textarea id="message" name="message" required></textarea>
<br>
<input type="submit" value="Envoyer">
</form>
</body>
</html>Dans ce script, la méthode du formulaire est définie avec POST, ce qui signifie qu’il doit envoyer une requête POST au serveur. L’attribut required rend les champs tels que le nom, l’adresse email et le message de l’email obligatoires. Si l’un de ces champs est vide et que vous cliquez sur Envoyer, vous verrez un message indiquant Veuillez remplir ce champ.
input type="email" vérifie si l’adresse email saisie est dans un format valide, tandis que form action="send_email.php" pointe vers le script PHP qui traitera la requête et enverra un email.
Il est maintenant temps d’ajouter une validation côté serveur. Le code ci-dessous vérifie si les champs nom, email et message sont vides. Si le champ email n’est pas vide, il vérifie si l’adresse fournie est valide ou non. Le tableau $errors contiendra les messages d’erreur correspondant à tous les champs d’entrée invalides ou manquants.
<?php
$errors = [];
if (!empty($_POST)) {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
if (empty($name)) {
$errors[] = 'Le nom est vide';
}
if (empty($email)) {
$errors[] = 'L\'email est vide';
} else if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$errors[] = 'L\'email est invalide';
}
if (empty($message)) {
$errors[] = 'Le message est vide';
}
}À ce stade, nous pouvons commencer à écrire un script d’envoi d’email en PHP.
Note : PHP utilise la fonction mail() pour envoyer des emails. Elle utilise le serveur de messagerie local configuré sur le serveur sur lequel PHP s’exécute. Nous ne recommandons pas son utilisation car ce n’est pas une méthode sécurisée d’envoi d’emails. PHPMailer est une option beaucoup plus sûre et fiable, et nous en discuterons plus en détail dans la section suivante.
Créez un nouveau fichier PHP avec le nom spécifié dans le code HTML. Dans ce cas, ce sera send_email.php. Le script récupérera les données du formulaire telles que le nom, l’email et le message si la requête est POST. Ensuite, il validera les champs du formulaire.
Si tout est correct, le script enverra un email à une adresse de destinataire spécifiée. Si la requête n’est pas POST, une erreur 403 forbidden sera affichée.
<?php
$errors = [];
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Obtenir les données POST
$name = isset($_POST['name']) ? strip_tags(trim($_POST['name'])) : '';
$email = isset($_POST['email']) ? trim($_POST['email']) : '';
$message = isset($_POST['message']) ? strip_tags(trim($_POST['message'])) : '';
// Valider les champs du formulaire
if (empty($name)) {
$errors[] = 'Le nom est vide';
}
if (empty($email)) {
$errors[] = 'L\'email est vide';
} else if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$errors[] = 'L\'email est invalide';
}
if (empty($message)) {
$errors[] = 'Le message est vide';
}
// Si pas d'erreurs, envoyer l'email
if (empty($errors)) {
// Adresse email du destinataire (remplacez par la vôtre)
$recipient = "destinataire@exemple.com";
// En-têtes supplémentaires
$headers = "De : $name <$email>";
// Envoyer l'email
if (mail($recipient, $message, $headers)) {
echo "Email envoyé avec succès !";
} else {
echo "Échec de l'envoi de l'email. Veuillez réessayer plus tard.";
}
} else {
// Afficher les erreurs
echo "Le formulaire contient les erreurs suivantes :<br>";
foreach ($errors as $error) {
echo "- $error<br>";
}
}
} else {
// Pas une requête POST, afficher une erreur 403 forbidden
header("HTTP/1.1 403 Forbidden");
echo "Vous n'êtes pas autorisé à accéder à cette page.";
}
?>Consultez cet article de blog ou regardez cette vidéo pour en savoir plus sur l’envoi d’emails avec PHP.
Vous pouvez utiliser un formulaire de contact PHP pour créer une page web de contact dans WordPress ou Drupal. Cependant, si vous n’êtes pas disposé à coder un peu, de nombreux plugins de création de formulaires sont disponibles.
Envoi d’emails depuis un formulaire web HTML en utilisant PHPMailer
PHPMailer est une alternative sécurisée à la fonction mail de PHP car il envoie des emails via un serveur SMTP et respecte les normes de sécurité modernes. Vous pouvez l’installer via Composer en utilisant la ligne de code suivante :
composer require phpmailer/phpmailerNous aurons également besoin d’un serveur SMTP pour acheminer nos emails. Pour cet exemple, nous utiliserons l’Email API/SMTP de Mailtrap – une infrastructure d’email avec des taux de délivrabilité élevés. Elle dispose de services Email API et SMTP pour une configuration rapide et facile.
Pour accéder aux identifiants SMTP, allez sur https://mailtrap.io/fr/ et créez un compte.
Naviguez vers Sending Domains (Domaines d’envoi) et ajoutez votre domaine d’envoi. Ensuite, vérifiez-le en utilisant les instructions de la vidéo ci-dessous.
Une fois que tout est configuré, allez à l’onglet API and SMTP (API et SMTP) et choisissez le flux d’envoi Transactionnel (Transactional) ou Envoi en Masse (Bulk Stream) que vous souhaitez utiliser, puis SMTP ou API.
Notez les identifiants SMTP et retournez à la construction du code PHPMailer.
Voici à quoi ressemblera le script PHPMailer pour la page HTML ci-dessus :
<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
require 'vendor/autoload.php';
$errors = [];
$errorMessage = ' ';
$successMessage = ' ';
echo 'sending ...';
if (!empty($_POST))
{
$name = $_POST['firstName'];
$email = $_POST['email'];
$message = $_POST['message'];
if (empty($name)) {
$errors[] = 'Le nom est vide';
}
if (empty($email)) {
$errors[] = 'L\'email est vide';
} else if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$errors[] = 'L\'email est invalide';
}
if (empty($message)) {
$errors[] = 'Le message est vide';
}
if (!empty($errors)) {
$allErrors = join ('<br/>', $errors);
$errorMessage = "<p style='color: red; '>{$allErrors}</p>";
} else {
$fromEmail = 'votreadresse@exemple.com';
$emailSubject = 'Nouveau message depuis votre formulaire de contact';
// Créer une nouvelle instance de PHPMailer
$mail = new PHPMailer(exceptions: true);
try {
// Configurer l'instance PHPMailer
$mail->isSMTP();
$mail->Host = 'live.smtp.mailtrap.io';
$mail->SMTPAuth = true;
$mail->Username = 'api';
$mail->Password = 'votre_mot_de_passe_smtp';
$mail->SMTPSecure = 'tls';
$mail->Port = 587;
// Définir l'expéditeur, le destinataire, l'objet et le corps du message
$mail->setFrom($email);
$mail->addAddress($email);
$mail->setFrom($fromEmail);
$mail->Subject = $emailSubject;
$mail->isHTML( isHtml: true);
$mail->Body = "<p>Nom : {$name}</p><p>Email : {$email}</p><p>Message : {$message}</p>";
// Envoyer le message
$mail->send () ;
$successMessage = "<p style='color: green; '>Merci de nous avoir contactés :)</p>";
} catch (Exception $e) {
$errorMessage = "<p style='color: red; '>Oups, quelque chose s'est mal passé. Veuillez réessayer plus tard.</p>";
echo $errorMessage;
}
}
}
?>N’oubliez pas de remplacer les placeholders par les variables réelles.
Si vous souhaitez approfondir les particularités de PHPMailer, lisez notre article de blog dédié.
Lorsque vous envoyez vos premiers emails avec Email Sending, suivez leurs performances avec des analyses exploitables. Vérifiez les statistiques des taux d’ouverture, de clics et de rebond pour garder le contrôle de votre infrastructure.
Validation et envoi d’emails en utilisant du code JavaScript et PHP
Nous devrons installer validate.js pour valider les entrées du formulaire d’email HTML avec JavaScript. Cela peut être fait en ajoutant la bibliothèque depuis un CDN.
<script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script> Le script de validation ressemblera à ceci :
<script>
const constraints = {
name: {
presence: { allowEmpty: false }
},
email: {
presence: { allowEmpty: false },
email: true
},
message: {
presence: { allowEmpty: false }
}
};
const form = document.getElementById('contact-form');
form.addEventListener('submit', function (event) {
const formValues = {
name: form.elements.name.value,
email: form.elements.email.value,
message: form.elements.message.value
};
const errors = validate(formValues, constraints);
if (errors) {
event.preventDefault();
const errorMessage = Object
.values(errors)
.map(function (fieldValues) { return fieldValues.join(', ')})
.join("\n");
alert(errorMessage);
}
}, false);
</script>Le code ci-dessus définit l’objet constraints avec des règles pour la validation des champs du formulaire. Les champs nom, email et message ne peuvent pas être vides, et le champ email doit être rempli avec une entrée valide.
La constante form se voit attribuer l’élément de formulaire HTML avec l’ID contact-form en utilisant document.getElementById.
Une fonction est déclenchée lorsque le formulaire est soumis. Elle extrait les données des champs et les stocke dans l’objet formValues. Ensuite, elle valide formValues en utilisant la fonction validate(). S’il y a des erreurs de validation, elle empêche la soumission du formulaire en utilisant event.preventDefault().
Les messages d’erreur sont ensuite combinés en une seule chaîne errorMessage et affichés à l’aide de la fonction alert().
La validation backend sera la même que dans notre exemple précédent.
Ci-dessous, vous pouvez voir un exemple de code complet contenant la validation PHP et JavaScript, ainsi que le formulaire d’email au format HTML lui-même.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Soumission du formulaire de contact</title>
</head>
<body>
<form method="post" id="contact-form">
<h2>Contactez-nous</h2>
<?php
$errorMessage = ''; // Définir $errorMessage
echo(!empty($errorMessage) ? $errorMessage : '');
?>
<p>
<label>Prénom :</label>
<input name="name" type="text"/>
</p>
<p>
<label>Adresse Email :</label>
<input style="cursor: pointer;" name="email" type="text"/>
</p>
<p>
<label>Message :</label>
<textarea name="message"></textarea>
</p>
<p>
<input type="submit" value="Envoyer"/>
</p>
</form>
<script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
<script>
const constraints = {
name: {
presence: { allowEmpty: false }
},
email: {
presence: { allowEmpty: false },
email: true
},
message: {
presence: { allowEmpty: false }
}
};
const form = document.getElementById('contact-form');
form.addEventListener('submit', function(event) {
const formValues = {
name: form.elements.name.value,
email: form.elements.email.value,
message: form.elements.message.value
};
const errors = validate(formValues, constraints);
if (errors) {
event.preventDefault();
const errorMessage = Object.values(errors)
.map(function(fieldValues) {
return fieldValues.join(', ');
})
.join("\n");
alert(errorMessage);
}
}, false);
</script>
</body>
</html>Envoi d’emails depuis un formulaire HTML avec PHPMailer
Remplaçons à nouveau PHP par PHPMailer, mais cette fois nous ajouterons également reCAPTCHA.
Allez sur la page Google reCAPTCHA et choisissez sa version. À moins que vous ne souhaitiez réécrire tout le code et déclencher reCAPTCHA manuellement depuis le front-end, nous vous recommandons d’utiliser le Challenge (v2). Vous pouvez le gérer en back-end et l’envoyer avec le formulaire.
Google propose deux types de reCAPTCHA v2 :
- Case à cocher « Je ne suis pas un robot » qui valide les requêtes avec la case à cocher « Je ne suis pas un robot » ;
- Badge reCAPTCHA invisible qui valide les requêtes en arrière-plan.
Nous opterons pour le badge invisible. Une fois que vous aurez cliqué sur le bouton Soumettre, vous verrez votre Clé de site et votre Clé secrète. Notez-les toutes les deux, car vous devrez insérer leurs valeurs dans le code ci-dessous :
<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
require 'vendor/autoload.php';
$errors = [];
$errorMessage = '';
$successMessage = '';
$siteKey = 'VOTRE_CLE_DE_SITE_RECAPTCHA_ICI';
$secret = 'VOTRE_CLE_SECRETE_RECAPTCHA_ICI';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$name = sanitizeInput ($_POST['name']);
$email = sanitizeInput ($_POST['email']);
$message = sanitizeInput ($_POST ['message']);
$recaptchaResponse = sanitizeInput ($_POST['g-recaptcha-response']);
$recaptchaUrl = "https://www.google.com/recaptcha/api/siteverify?secret={$secret]&response={$recaptchaResponse]";
$verify = json_decode(file_get_contents($recaptchaUrl));
if (!$verify->success) {
$errors [ ] = 'La vérification reCAPTCHA a échoué';
}
if (empty ($name)) {
$errors [ ] = 'Le nom est vide';
}
if (empty ($email)) {
$errors [ ] = 'L\'email est vide';
} else if (!filter_var($email, filter: FILTER_VALIDATE_EMAIL)) {
$errors [ ] = 'L\'email est invalide';
}
if (empty ($message)) {
$errors [ ] = 'Le message est vide';
}
if (!empty ($errors)) {
$allErrors = join ( separator: '<br/>', $errors);
$errorMessage = "<p style='color: red; '>{$allErrors}</p>";
} else {
$toEmail = 'monadresse@exemple.com';
$emailSubject = 'Nouveau message depuis votre formulaire de contact';
// Créez une nouvelle instance PHPMailer
$mail = new PHPMailer (exceptions: true);
try {
// Configurez l'instance PHPMailer
$mail->isSMTP();
$mail->Host = 'live.smtp.mailtrap.io';
$mail->SMTPAuth = true;
$mail->Username = 'api';
$mail->Password = 'your_smtp_password';
$mail->SMTPSecure = 'tls';
$mail->Port = 587;
// Définissez l'expéditeur, le destinataire, l'objet et le corps du message.
$mail->setFrom($email);
$mail->addAddress($toEmail);
$mail->Subject = $emailSubject;
$mail->isHTML( isHtml: true);
$mail->Body = "<p>Nom : {$name]</p><p>Email : {$email]</p><p>Message : {$message]</p>;
// Send the message
$mail->send () ;
$successMessage = "<p style='color: green; '>Merci de nous avoir contactés :)</p>";
} catch (Exception $e) {
$errorMessage = "<p style='color: red; '>Oups, quelque chose s'est mal passé. Veuillez réessayer plus tard.</p>";
}
}
}
function sanitizeInput($input) {
$input = trim($input);
$input = stripslashes($input);
$input = htmlspecialchars($input, ENT_QUOTES, 'UTF-8');
return $input;
}
?>
<html>
<body>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<form action="/" method="post" id="contact-form">
<h2>Contactez-nous</h2>
<?php echo (!empty($errorMessage) ? $errorMessage : ''); ?>
<?php echo (!empty($successMessage) ? $successMessage : ''); ?>
<p>
<label>Prénom :</label>
<input name="name" type="text" required />
</p>
<p>
<label>Adresse Email :</label>
<input style="..." name="email" type="email" required />
</p>
<p>
<label>Message :</label>
<textarea name="message" required></textarea>
</p>
<p>
<button class="g-recaptcha" type="submit" data-sitekey="<?php echo $siteKey ?>" data-callback="onRecaptchaSuccess">
Soumettre
</button>
</p>
</form>
<script>
function onRecaptchaSuccess() {
document.getElementById('contact-form').submit();
}
</script>
</body>
</html>Ce script intègre le badge reCAPTCHA, effectue des validations côté serveur et envoie un email via le serveur SMTP. Les propriétés telles que Host, SMTPAuth, Username, Password, SMTPSecure et Port doivent être remplies avec vos identifiants Mailtrap.
Comment envoyer des emails de formulaire HTML avec des pièces jointes
Il est également possible d’envoyer des emails de formulaire HTML avec des pièces jointes. Pour cela, nous recommandons d’utiliser PHPMailer car c’est une option beaucoup plus simple.
Vous n’aurez qu’à utiliser la méthode $mail->addAttachment() après la propriété du corps. (Note: la graphie correcte est addAttachment, avec un ‘A’ majuscule).
$mail->AddAttachment($_FILES["attachment"]["tmp_name"], $_FILES["attachment"]["name"]);Conclusion
Maintenant que vous connaissez tous les tenants et aboutissants de l’envoi d’emails depuis un formulaire HTML, les formulaires de contact ne vous feront plus peur. Qu’ils soient laids ou relookés ✨, vous pouvez envoyer des emails depuis ceux-ci en toute sécurité avec PHPMailer, reCAPTCHA et la validation JavaScript.
Si vous êtes intéressé par la création de formulaires de contact dans d’autres langages de programmation, consultez notre chaîne YouTube où nous avons publié plusieurs tutoriels sur les formulaires de contact :
- Formulaire de Contact PHP
- Formulaire de Contact Vue.js
- Formulaire de Contact JavaScript
- Formulaire de Contact Ruby on Rails
- Formulaire de Contact Django
- Formulaire de Contact Flask
En attendant, lisez ces articles de blog pour maîtriser les formulaires HTML :
