Link mailto w HTML: temat, treść, DW i linki tel

Q: Jak utworzyć link e-mail w HTML?

Użyj linku, którego href zaczyna się od mailto:, a po nim jest adres: hello@example.com . Kliknięcie otwiera nową wiadomość w domyślnym programie pocztowym czytelnika.

Q: Jak dodać temat do linku mailto?

Dodaj go jako parametr zapytania po ?: mailto:hello@example.com?subject=Order%20question. Spacje koduj jako %20, a kolejne parametry łącz przez &, na przykład ?subject=Hi&body=Hello.

Q: Jak wysłać link mailto do wielu odbiorców?

Oddziel adresy przecinkami: mailto:ana@example.com,bob@example.com. Do kopii użyj parametrów cc= i bcc=: mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com.

Q: Jak zrobić klikalny numer telefonu w HTML?

Użyj linku tel: z numerem w formacie międzynarodowym: +1 555 123 4567 . Na telefonach rozpoczyna połączenie; na komputerze otwiera zainstalowaną aplikację do dzwonienia, jeśli jakaś jest.

Jak zrobić link e-mail

Zacznij href linku od mailto: i adresu. Kliknięcie otwiera nową wiadomość na ten adres w programie pocztowym czytelnika.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Email link</title>
</head>
<body>
  <p>Questions? Write to <a href="mailto:hello@example.com">hello@example.com</a>.</p>
  <p>Or call <a href="tel:+15551234567">+1 555 123 4567</a>.</p>
</body>
</html>

Podgląd nie otwiera innych aplikacji: kliknięcie jednego z tych linków pokazuje w nim adres, który zostałby otwarty. Na prawdziwej stronie pierwszy otwiera nowego e-maila, a drugi rozpoczyna połączenie na telefonie.

Jako tekstu linku używaj samego adresu. Czytelnik bez skonfigurowanego programu pocztowego (częste na komputerach, gdzie poczta działa w przeglądarce) nadal może go skopiować, a link z samym "Napisz do nas" zostawia go bez wyjścia.

Temat, treść, cc i bcc

Link mailto może uzupełnić więcej elementów wiadomości. Dodaj parametry po ? i łącz je przez &, jak w query stringu adresu URL:

Parametr	Uzupełnia	Przykład
`subject`	Temat wiadomości	`?subject=Order%20question`
`body`	Treść wiadomości	`&body=Hi%20there`
`cc`	Odbiorców kopii (DW)	`&cc=sales@example.com`
`bcc`	Odbiorców ukrytej kopii (UDW)	`&bcc=log@example.com`

Wielu odbiorców wpisuje się w części z adresem, oddzielonych przecinkami: mailto:ana@example.com,bob@example.com.

Wartości muszą być zakodowane jak w URL: spacja to %20, podział linii to %0D%0A, & to %26, a ? to %3F. Skrypt w tym przykładzie dekoduje każdy link, żeby było widać, co dostaje program pocztowy:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mailto parameters</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <a href="mailto:support@example.com?subject=Order%20%23123&body=Hi%2C%0D%0AMy%20order%20has%20not%20arrived.">Report a problem</a>
  <br>
  <a href="mailto:ana@example.com,bob@example.com?cc=boss@example.com&subject=Q3%20plan">Email the team</a>

  <pre id="out"></pre>

  <script>
    const out = document.querySelector('#out');
    for (const a of document.querySelectorAll('a')) {
      const [to, query] = a.getAttribute('href').slice(7).split('?');
      out.textContent += 'To: ' + to + '\n';
      for (const [key, value] of new URLSearchParams(query)) {
        out.textContent += key + ': ' + value + '\n';
      }
      out.textContent += '\n';
    }
  </script>
</body>
</html>

Temat Order #123 trzeba zapisać jako Order%20%23123: goły # zakończyłby w tym miejscu URL i treść by przepadła. Nie używaj też + zamiast spacji. W linku mailto + to dosłowny znak plus i wiele programów pocztowych tak go pokazuje.

Budowanie linku mailto w JavaScript

Ręczne kodowanie łatwo zepsuć. encodeURIComponent robi to za ciebie. Wpisz coś w pola, a link poniżej się zaktualizuje:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mailto builder</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 8px; }
    input, textarea { display: block; width: 100%; max-width: 360px; font: inherit; }
    code { display: block; background: #e5e7eb; padding: 8px; word-break: break-all; }
  </style>
</head>
<body>
  <label>To <input id="to" value="hello@example.com"></label>
  <label>Subject <input id="subject" value="Question & feedback"></label>
  <label>Body <textarea id="body" rows="3">Hi,
I have a question.</textarea></label>

  <p><a id="link">Open in mail app</a></p>
  <code id="href"></code>

  <script>
    const fields = ['to', 'subject', 'body'].map((id) => document.getElementById(id));
    const update = () => {
      const [to, subject, body] = fields.map((f) => f.value);
      const href = 'mailto:' + to +
        '?subject=' + encodeURIComponent(subject) +
        '&body=' + encodeURIComponent(body.replace(/\r?\n/g, '\r\n'));
      document.getElementById('link').href = href;
      document.getElementById('href').textContent = href;
    };
    fields.forEach((f) => f.addEventListener('input', update));
    update();
  </script>
</body>
</html>

encodeURIComponent zamienia & na %26, a podział linii na %0A; replace zamienia podziały linii na parę %0D%0A, której oczekuje e-mail. Część z adresem zostaw bez zmian: @ i , są tam dozwolone bez kodowania.

Linki telefoniczne przez tel: i sms:

tel: tworzy link do dzwonienia jednym kliknięciem. W href wpisz numer z kodem kraju i bez spacji; widoczny tekst możesz sformatować dowolnie.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contact links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .contact { display: flex; flex-wrap: wrap; gap: 8px; }
    .contact a {
      padding: 10px 14px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      color: #111827;
      text-decoration: none;
    }
    .contact a:hover { border-color: #2563eb; }
  </style>
</head>
<body>
  <div class="contact">
    <a href="tel:+442079460958">Call +44 20 7946 0958</a>
    <a href="sms:+15551234567">Text +1 555 123 4567</a>
    <a href="mailto:hello@example.com">hello@example.com</a>
  </div>
</body>
</html>

tel:+442079460958 działa z każdego kraju. Lokalny numer jak tel:02079460958 działa tylko dla dzwoniących z tego kraju.
Łączniki są dozwolone jako separatory (tel:+1-555-123-4567); spacje nie należą do formatu, więc pomiń je w href.
sms: otwiera aplikację do wiadomości. Dodanie treści przez ?body= działa w wielu aplikacjach, ale obsługa się różni, więc nie polegaj na tym.
Na komputerze tel: otwiera aplikację do dzwonienia, jeśli jest zainstalowana (na przykład FaceTime albo softphone), a w przeciwnym razie nic nie robi.

Safari na iPhonie samo zamienia numery telefonów w zwykłym tekście na linki. Jeśli to psuje coś takiego jak numer zamówienia, wyłącz to przez <meta name="format-detection" content="telephone=no">.

Spam i adresy e-mail

Adres w linku mailto może odczytać każdy bot, który pobierze stronę. Sztuczki w rodzaju hello [at] example [dot] com albo składania adresu w JavaScript zatrzymują część prostych scraperów, ale utrudniają też korzystanie z linku. Formularz kontaktowy, opisany w formularze HTML, całkowicie usuwa adres ze strony. W przypadku większości stron prostszym rozwiązaniem jest dobry filtr antyspamowy w skrzynce.

Unikaj <form action="mailto:...">. Zależy od programu pocztowego czytelnika, wysyła pola zakodowane jak w URL i trudne do odczytania, i nie daje żadnego potwierdzenia, że coś zostało wysłane.

Częste błędy

Zapomniane mailto:. href="hello@example.com" to względny link do strony nazwanej jak adres.
Niezakodowane spacje lub # w temacie albo treści. Koduj wartości przez %20, %23 albo encodeURIComponent.
+ zamiast spacji. Wyświetla się jako znak plus.
Drugi ? zamiast &. Tylko pierwszy parametr stoi po ?; resztę łączy się przez &.
"Napisz do nas" jako jedyny tekst, co nie zostawia użytkownikom poczty w przeglądarce niczego do skopiowania.
Lokalne numery telefonów w tel:. Dodaj kod kraju.

Najczęściej zadawane pytania

Jak utworzyć link e-mail w HTML?

Użyj linku, którego href zaczyna się od mailto:, a po nim jest adres: <a href="mailto:hello@example.com">hello@example.com</a>. Kliknięcie otwiera nową wiadomość w domyślnym programie pocztowym czytelnika.

Jak dodać temat do linku mailto?

Dodaj go jako parametr zapytania po ?: mailto:hello@example.com?subject=Order%20question. Spacje koduj jako %20, a kolejne parametry łącz przez &, na przykład ?subject=Hi&body=Hello.

Jak wysłać link mailto do wielu odbiorców?

Oddziel adresy przecinkami: mailto:ana@example.com,bob@example.com. Do kopii użyj parametrów cc= i bcc=: mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com.

Jak zrobić klikalny numer telefonu w HTML?

Użyj linku tel: z numerem w formacie międzynarodowym: <a href="tel:+15551234567">+1 555 123 4567</a>. Na telefonach rozpoczyna połączenie; na komputerze otwiera zainstalowaną aplikację do dzwonienia, jeśli jakaś jest.

Dlaczego mój link mailto nic nie robi?

Link tylko przekazuje adres domyślnemu programowi pocztowemu. Jeśli czytelnik go nie skonfigurował, co jest częste na komputerach, gdzie używa się poczty w przeglądarce, nic przydatnego się nie dzieje. Pokaż adres jako tekst linku, żeby dało się go skopiować.

Powiązane zagadnienia