Guida HTML interattiva: Link email (mailto)

Q: Come creo un link email in HTML?

Usa un link il cui href inizia con mailto: seguito dall'indirizzo: hello@example.com . Cliccandolo si apre un nuovo messaggio nell'app di posta predefinita del lettore.

Q: Come aggiungo un oggetto a un link mailto?

Aggiungilo come parametro di query dopo ?: mailto:hello@example.com?subject=Order%20question. Codifica gli spazi come %20 e unisci altri parametri con &, per esempio ?subject=Hi&body=Hello.

Q: Come mando un link mailto a più destinatari?

Separa gli indirizzi con virgole: mailto:ana@example.com,bob@example.com. Usa i parametri cc= e bcc= per le copie: mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com.

Q: Come rendo cliccabile un numero di telefono in HTML?

Usa un link tel: con il numero in formato internazionale: +1 555 123 4567 . Sui telefoni avvia una chiamata; sul desktop apre l'app per le chiamate installata, se c'è.

Come creare un link email

Fai iniziare l'href del link con mailto: e l'indirizzo. Cliccandolo si apre un nuovo messaggio verso quell'indirizzo nell'app di posta del lettore.

<!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>

L'anteprima non apre altre app: cliccando qui uno di questi link vedi l'indirizzo che aprirebbe. Su una pagina vera, il primo apre una nuova email e il secondo avvia una chiamata su un telefono.

Usa l'indirizzo stesso come testo del link. Chi non ha un'app di posta configurata (cosa comune sui desktop di chi usa la webmail nel browser) può comunque copiarlo, mentre un link che dice solo "Scrivici" lo lascia bloccato.

Oggetto, corpo, cc e bcc

Un link mailto può compilare anche altre parti del messaggio. Aggiungi parametri dopo un ? e uniscili con &, come in una query string di un URL:

Parametro	Compila	Esempio
`subject`	La riga dell'oggetto	`?subject=Order%20question`
`body`	Il testo del messaggio	`&body=Hi%20there`
`cc`	I destinatari in copia	`&cc=sales@example.com`
`bcc`	I destinatari in copia nascosta	`&bcc=log@example.com`

Più destinatari vanno nella parte dell'indirizzo, separati da virgole: mailto:ana@example.com,bob@example.com.

I valori devono essere codificati come URL: uno spazio è %20, un a capo è %0D%0A, & è %26 e ? è %3F. Lo script di questo esempio decodifica ogni link così vedi cosa riceve l'app di posta:

<!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>

L'oggetto Order #123 va scritto Order%20%23123: un # non codificato chiuderebbe l'URL in quel punto, e il corpo andrebbe perso. Non usare nemmeno + per gli spazi. In un link mailto, + è un vero segno più, e molte app di posta lo mostrano così.

Creare un link mailto con JavaScript

Codificare a mano è facile da sbagliare. encodeURIComponent lo fa per te. Scrivi nei campi e il link qui sotto si aggiorna:

<!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 trasforma & in %26 e un a capo in %0A; il replace trasforma gli a capo nella coppia %0D%0A che l'email si aspetta. Lascia la parte dell'indirizzo così come è scritta: lì @ e , sono ammessi senza codifica.

Link telefonici con tel: e sms:

tel: crea un link per chiamare con un clic. Scrivi il numero con il prefisso internazionale e senza spazi nell'href; il testo visibile puoi formattarlo come preferisci.

<!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 funziona da qualsiasi paese. Un numero locale come tel:02079460958 funziona solo per chi chiama da quel paese.
I trattini sono ammessi come separatori (tel:+1-555-123-4567); gli spazi non fanno parte del formato, quindi lasciali fuori dall'href.
sms: apre l'app dei messaggi. Aggiungere un messaggio con ?body= funziona in molte app, ma il supporto varia, quindi non farci affidamento.
Sul desktop, tel: apre un'app per le chiamate se ce n'è una installata (come FaceTime o un softphone), altrimenti non fa niente.

Safari su iPhone trasforma da solo in link i numeri di telefono nel testo semplice. Se questo rovina qualcosa come un numero d'ordine, disattivalo con <meta name="format-detection" content="telephone=no">.

Spam e indirizzi email

Un indirizzo in un link mailto è leggibile da qualsiasi bot che scarica la pagina. Trucchi come scrivere hello [at] example [dot] com o comporre l'indirizzo con JavaScript fermano alcuni scraper semplici, ma rendono anche il link più scomodo da usare. Un modulo di contatto, spiegato in form HTML, tiene l'indirizzo del tutto fuori dalla pagina. Per la maggior parte dei siti, un buon filtro antispam sulla casella è la soluzione più semplice.

Evita <form action="mailto:...">. Dipende dall'app di posta del lettore, invia i campi codificati come URL e difficili da leggere, e non ti dà nessuna conferma che qualcosa sia stato inviato.

Errori comuni

Dimenticare mailto:. href="hello@example.com" è un link relativo a una pagina che si chiama come l'indirizzo.
Spazi o # non codificati nell'oggetto o nel corpo. Codifica i valori con %20, %23 o encodeURIComponent.
Usare + per gli spazi. Compare come segno più.
Un secondo ? invece di &. Solo il primo parametro segue ?; gli altri si uniscono con &.
"Scrivici" come unico testo, che non lascia niente da copiare a chi usa la webmail.
Numeri di telefono locali in tel:. Includi il prefisso internazionale.

Domande frequenti

Come creo un link email in HTML?

Usa un link il cui href inizia con mailto: seguito dall'indirizzo: <a href="mailto:hello@example.com">hello@example.com</a>. Cliccandolo si apre un nuovo messaggio nell'app di posta predefinita del lettore.

Come aggiungo un oggetto a un link mailto?

Aggiungilo come parametro di query dopo ?: mailto:hello@example.com?subject=Order%20question. Codifica gli spazi come %20 e unisci altri parametri con &, per esempio ?subject=Hi&body=Hello.

Come mando un link mailto a più destinatari?

Separa gli indirizzi con virgole: mailto:ana@example.com,bob@example.com. Usa i parametri cc= e bcc= per le copie: mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com.

Come rendo cliccabile un numero di telefono in HTML?

Usa un link tel: con il numero in formato internazionale: <a href="tel:+15551234567">+1 555 123 4567</a>. Sui telefoni avvia una chiamata; sul desktop apre l'app per le chiamate installata, se c'è.

Perché il mio link mailto non fa niente?

Il link si limita a passare l'indirizzo all'app di posta predefinita. Se il lettore non ne ha configurata una, cosa comune sui desktop di chi usa la webmail, non succede niente di utile. Mostra l'indirizzo come testo del link così si può copiare.

Concetti correlati