Aby wstawić adres e-mail w HTML, standardowo używa się specjalnego linku z atrybutem mailto:. Dzięki temu użytkownik po kliknięciu w taki link może automatycznie rozpocząć pisanie wiadomości e-mail w swoim domyślnym kliencie pocztowym. Poniżej znajdziesz szczegółowy poradnik wraz z praktycznymi przykładami.
Podstawowy link do adresu e-mail
Podstawowy sposób to zastosowanie znacznika <a> z atrybutem href ustawionym na mailto:[email protected]. Przykład:
<a href="mailto:[email protected]">Napisz do nas</a>
Po kliknięciu w taki link użytkownikowi otworzy się domyślna aplikacja pocztowa z polem „Do” wypełnionym podanym adresem.
Przykłady zastosowań
1. Zamiana adresu e-mail na klikalny link
<a href="mailto:[email protected]">[email protected]</a>
Wynik: adres e-mail na stronie stanie się aktywnym, klikalnym odnośnikiem.
2. Własny tekst zamiast adresu e-mail
Jeśli nie chcesz wyświetlać samego adresu, możesz ustawić dowolny tekst:
<a href="mailto:[email protected]">Skontaktuj się z obsługą</a>
3. Link e-mail w przycisku lub grafice
Adres e-mail można umieścić także w przycisku lub pod obrazkiem:
<!-- Przyciski -->
<button onclick="window.location.href='mailto:[email protected]';">Wyślij e-mail</button>
<!-- Obraz jako link -->
<a href="mailto:[email protected]">
<img src="icon-mail.png" alt="Napisz do nas">
</a>
4. Dodanie domyślnego tematu i treści wiadomości
Do linku można dodać parametry, które automatycznie wypełnią temat i treść:
<a href="mailto:[email protected]?subject=Zapytanie&body=Dzień dobry, mam pytanie dotyczące...">
Wyślij zapytanie
</a>
Dostępne parametry:
- subject – temat wiadomości (przykład:
subject=Zapytanie); - body – treść wiadomości (przykład:
body=Dzień dobry...); - cc – do kogo wysłać kopię (przykład:
[email protected]); - bcc – do kogo wysłać ukrytą kopię (
[email protected]).
5. Link do wielu odbiorców
Można dodać kilku adresatów, oddzielając adresy przecinkiem:
<a href="mailto:[email protected],[email protected]">Napisz do nas</a>
Wskazówki dotyczące stosowania
- Unikaj prezentowania adresów e-mail w formie niezaszyfrowanej jeśli chcesz ograniczyć spam – rozważ np. ich ukrywanie przy pomocy JavaScript, generowanie w backendzie lub przedstawianie ich jako kod obrazkowy lub z użyciem CAPTCHA;
- Linki
mailto:są zależne od konfiguracji przeglądarki i systemu użytkownika – nie zawsze otworzą webowego klienta poczty, lecz najczęściej aplikację desktopową.
Podsumowanie
- Do wstawienia adresu e-mail w HTML użyj
<a href="mailto:[email protected]">Tekst</a>, - możesz określić temat, treść, odbiorców kopii i ukrytej kopii,
- możesz zamienić dowolny tekst lub grafikę w klikalny link e-mail,
- rozważ bezpieczeństwo adresów e-mail publikowanych w jawnej formie.
Dzięki tym metodom możesz łatwo i wygodnie udostępnić kontakt mailowy na swojej stronie internetowej w estetycznej i funkcjonalnej formie.
