Liens d'e-mail en HTML

Création de liens d'e-mail

Pour créer des liens d'e-mail en HTML, utilisez la balise <a> avec l'attribut mailto:. L'attribut mailto: définit l'adresse e-mail vers laquelle le lien envoie un e-mail.

Pour définir l'adresse e-mail, ajoutez-la après l'attribut mailto: dans la balise <a>.

<a href="mailto:example@example.com">Envoyer un e-mail</a>

Vous pouvez aussi ajouter une ligne d'objet pour l'e-mail. Pour ce faire, ajoutez subject= suivi du texte de l'objet après l'adresse e-mail.

<a href="mailto:example@example.com?subject=Demande">Envoyer un e-mail</a>

Pour pré-remplir le corps du message de l'e-mail, utilisez le paramètre body=. Ajoutez body= suivi du texte du message après l'adresse e-mail ou la ligne d'objet.

<a href="mailto:example@example.com?subject=Demande&body=Madame, Monsieur,">Envoyer un e-mail</a>

Pour définir plusieurs destinataires pour l'e-mail, séparez chaque adresse e-mail par une virgule.

<a href="mailto:example1@example.com,example2@example.com">Envoyer un e-mail</a>

Vous pouvez aussi ajouter des destinataires en copie (CC) et en copie cachée (CCI) dans le lien d'e-mail. Pour ajouter des destinataires en CC, utilisez le paramètre cc= suivi des adresses e-mail. Pour les CCI, utilisez le paramètre bcc=.

<a href="mailto:example@example.com?cc=destinatairecopie@example.com&bcc=destinatairecopiecachee@example.com">Envoyer un e-mail</a>

En utilisant ces méthodes, vous pouvez créer des liens d'e-mail cliquables qui permettent aux utilisateurs d'envoyer facilement des e-mails depuis votre page web.

Formatage des liens de courrier électronique

Vous pouvez styliser les liens de courrier électronique en utilisant CSS pour changer leur apparence et les faire ressortir sur votre page web.

Pour changer la couleur d'un lien de courrier électronique, utilisez la propriété color dans votre CSS. Définissez la propriété color avec la valeur de couleur souhaitée.

<style>
  a[href^="mailto:"] {
    color: blue;
  }
</style>

Par défaut, les liens de courrier électronique ne sont pas soulignés. Pour ajouter un soulignement aux liens de courrier électronique, utilisez la propriété text-decoration dans votre CSS. Définissez la propriété text-decoration sur underline.

<style>
  a[href^="mailto:"] {
    text-decoration: underline;
  }
</style>

Vous pouvez également appliquer des effets de survol aux liens de courrier électronique pour changer leur apparence lorsque l'utilisateur les survole. Utilisez la pseudo-classe :hover dans votre CSS pour définir les styles de survol.

<style>
  a[href^="mailto:"]:hover {
    color: red;
    text-decoration: none;
  }
</style>

En utilisant ces techniques CSS, vous pouvez formater vos liens de courrier électronique pour qu'ils correspondent au style de votre page web et les rendre plus visibles pour les utilisateurs.

Dépannage

Lorsque vous travaillez avec des liens de courrier électronique, vous pouvez rencontrer des problèmes courants. Voici quelques conseils de dépannage pour vous aider à résoudre ces problèmes :

Un des problèmes les plus fréquents avec les liens de courrier électronique est une syntaxe incorrecte. Assurez-vous d'avoir utilisé la bonne syntaxe pour l'attribut mailto: dans la balise <a>. Vérifiez que l'adresse e-mail est correctement orthographiée et qu'il n'y a pas d'espaces ou de caractères supplémentaires dans le lien.

<a href="mailto:example@example.com">Envoyer un e-mail</a>

Un autre problème qui peut survenir est la configuration du client de messagerie sur l'appareil de l'utilisateur. Certains clients de messagerie peuvent ne pas être configurés pour gérer correctement les liens de courrier électronique. Dans ces cas, le lien peut ne pas ouvrir le client de messagerie de l'utilisateur ou peut entraîner un message d'erreur. Pour aider les utilisateurs, vous pouvez fournir des instructions sur la façon de configurer leur client de messagerie pour gérer correctement les liens de courrier électronique.

Si les liens de courrier électronique ne fonctionnent pas comme prévu, il est judicieux de proposer des méthodes de contact alternatives sur votre page web. Cela peut inclure l'affichage de votre adresse e-mail en texte brut, la mise à disposition d'un formulaire de contact, ou l'énumération d'autres moyens de vous contacter, comme un numéro de téléphone ou des profils de médias sociaux. En offrant des méthodes de contact alternatives, vous donnez aux utilisateurs d'autres options pour vous joindre si le lien de courrier électronique ne fonctionne pas pour eux.

<p>Vous pouvez également nous joindre via :</p>
<ul>
  <li>E-mail : example@example.com</li>
  <li>Téléphone : 123-456-7890</li>
  <li>Formulaire de contact : <a href="/contact">Contactez-nous</a></li>
</ul>