Un link mailto permette di aprire l’applicazione email associata al dispositivo dell’utente con uno o più campi del messaggio già compilati. Nella forma più semplice contiene soltanto l’indirizzo del destinatario:
<a href="mailto:[email protected]">Scrivici via email</a>
Puoi però aggiungere anche oggetto, testo del messaggio, destinatari in copia e copia nascosta. È qui che la sintassi diventa più delicata: spazi, caratteri speciali, ritorni a capo e parametri multipli devono essere codificati correttamente.
Un altro punto da chiarire subito è che il collegamento non invia automaticamente un’email. Il clic prepara un nuovo messaggio nel client di posta scelto dall’utente; sarà poi l’utente a modificarlo, inviarlo oppure chiuderlo.
In questa guida vediamo la sintassi corretta, gli esempi più utili, l’encoding dei parametri, l’uso in WordPress e soprattutto i casi in cui questa soluzione non è la scelta migliore.
Cos’è e cosa succede quando clicchi sul link
mailto è uno schema URI definito per identificare una destinazione raggiungibile tramite posta elettronica. La specifica tecnica di riferimento è RFC 6068 dell’IETF.
Viene spesso descritto come un tag HTML o un comando, ma tecnicamente non è nessuna delle due cose. Il tag usato per creare il collegamento è normalmente <a>, mentre lo schema viene inserito nel relativo attributo href.
Se vuoi ripassare la differenza fra elemento, tag e attributo, nella nostra guida a HTML trovi anche il funzionamento di <a> e href.
La struttura minima è:
mailto:[email protected]
Inserita in HTML diventa:
<a href="mailto:[email protected]">Invia un'email</a>
Il messaggio viene preparato, non spedito
Quando attivi il collegamento, il sistema passa la URI a un’applicazione in grado di gestire la posta elettronica.
Il client può quindi aprire una nuova email con i valori indicati nel link già impostati. L’utente mantiene però il controllo del messaggio: può correggerlo, aggiungere contenuti, cambiare destinatari, inviarlo oppure decidere di non inviarlo.
Questo significa che un semplice collegamento email non può sostituire un sistema server-side quando hai bisogno che un dato venga effettivamente trasmesso, registrato o elaborato.
Quale applicazione email viene aperta
Il sito non decide necessariamente se utilizzare Gmail, Outlook, Apple Mail o un altro programma.
Il comportamento dipende dal sistema operativo, dal browser, dalle applicazioni installate e dall’handler configurato dall’utente per i collegamenti email.
Due persone possono quindi cliccare sullo stesso link e ottenere risultati differenti.
Se sul dispositivo non è configurato correttamente un gestore della posta, può anche accadere che non si apra l’applicazione prevista.
Come creare un link email in HTML
Il caso più semplice richiede soltanto l’elemento <a> e l’attributo href:
<a href="mailto:[email protected]">Scrivici</a>
Nel browser apparirà come un normale collegamento. La differenza è nella destinazione: al posto di una URL https://, l’attributo contiene una URI dedicata alla posta elettronica.
Rendere cliccabile direttamente l’indirizzo
Puoi utilizzare l’indirizzo stesso come anchor text:
<a href="mailto:[email protected]">[email protected]</a>
Oppure scegliere un testo più descrittivo:
<a href="mailto:[email protected]">Contatta il nostro supporto via email</a>
La seconda soluzione è spesso più chiara quando il contesto non rende immediatamente evidente cosa succederà dopo il clic.
Una dicitura come “Contatta il supporto via email” comunica infatti l’azione meglio di un generico “Clicca qui”.
Più destinatari nello stesso collegamento
La sintassi permette di indicare più indirizzi nel campo principale, separandoli con una virgola:
<a href="mailto:[email protected],[email protected]"> Scrivi a Mario e Anna </a>
Per i destinatari principali è preferibile mantenerli direttamente dopo lo schema, invece di costruire parametri to aggiuntivi senza necessità.
Subject, body, CC e BCC: come usare i parametri
Dopo l’indirizzo puoi aggiungere una query iniziando con ?.
La struttura generale è:
mailto:[email protected]?parametro=valore
Se i parametri sono più di uno, il primo segue ? e quelli successivi vengono separati con &.
Nel codice HTML l’ampersand va rappresentato come &.
Precompilare l’oggetto con subject
Per impostare l’oggetto utilizza subject:
<a href="mailto:[email protected]?subject=Richiesta%20informazioni"> Richiedi informazioni </a>
Il client dovrebbe aprire un nuovo messaggio destinato a [email protected] con:
Richiesta informazioni
nel campo Oggetto.
Lo spazio non viene lasciato letteralmente nella URI: è codificato come %20.
Precompilare il testo con body
Il parametro body permette di suggerire il contenuto iniziale del messaggio:
<a href="mailto:[email protected]?body=Buongiorno%2C%20vorrei%20ricevere%20maggiori%20informazioni."> Contattaci </a>
Il nuovo messaggio conterrà:
Buongiorno, vorrei ricevere maggiori informazioni.
È meglio usare body per testi brevi e modificabili, non per tentare di costruire email HTML elaborate.
La specifica lo definisce infatti per il contenuto testuale del messaggio e non come sistema per generare un corpo MIME complesso.
Aggiungere un destinatario in CC
Per la copia conoscenza puoi usare cc:
<a href="mailto:[email protected][email protected]&subject=Richiesta%20supporto"> Richiedi supporto </a>
Lo stesso criterio vale quando devi concatenare cc ad altri parametri.
Usare BCC o CCN
È disponibile anche il campo bcc:
<a href="mailto:[email protected][email protected]"> Invia email </a>
Il client può interpretarlo come destinatario in copia nascosta.
C’è però una distinzione importante: BCC nasconde l’indirizzo agli altri destinatari del messaggio, non lo nasconde nella pagina web.
Se inserisci:
[email protected]
dentro una URI pubblica, quell’indirizzo resta leggibile nel codice della pagina e può essere raccolto automaticamente.
Non considerare quindi bcc una misura per proteggere un indirizzo email pubblicato sul sito.
Combinare più parametri
Un esempio completo può essere:
<a href="mailto:[email protected][email protected]&[email protected]&subject=Richiesta%20informazioni&body=Buongiorno%2C%0D%0Avorrei%20ricevere%20maggiori%20informazioni."> Invia una richiesta </a>
La logica è:
destinatario ?cc=copia &bcc=copia-nascosta &subject=oggetto &body=testo
L’ordine dei parametri non è l’aspetto più importante. Conta soprattutto che la URI sia costruita e codificata correttamente.
Encoding corretto: spazi, caratteri speciali e interruzioni di riga
Molti esempi disponibili online sembrano funzionare anche quando contengono spazi o caratteri scritti direttamente. Questo non significa che la stringa sia costruita nel modo più interoperabile.
Una URI utilizza alcuni caratteri con funzioni precise. ?, &, % e = non possono quindi essere trattati sempre come normale testo.
Per questo entra in gioco il percent-encoding.
Gli spazi vanno codificati con %20
Se l’oggetto deve essere:
Richiesta informazioni
la URI può contenere:
Richiesta%20informazioni
e il collegamento diventa:
<a href="mailto:[email protected]?subject=Richiesta%20informazioni"> Scrivici </a>
In questo contesto è preferibile %20 rispetto al simbolo +, perché il carattere + può essere legittimamente presente anche negli indirizzi email.
Caratteri non ASCII e UTF-8
Quando devi inserire lettere accentate o altri caratteri non ASCII, la soluzione robusta consiste nel rappresentarli in UTF-8 e applicare il percent-encoding ai byte risultanti.
Non è necessario fare manualmente questi calcoli ogni volta: se il link viene generato dinamicamente, puoi utilizzare le funzioni di encoding del linguaggio o della piattaforma che stai usando.
Il punto importante è evitare di costruire URI complesse concatenando testo non codificato.
Come andare a capo nel corpo del messaggio
Per creare un’interruzione di riga nel parametro body, la sequenza prevista è:
%0D%0A
Per esempio:
<a href="mailto:[email protected]?body=Buongiorno%2C%0D%0AVorrei%20ricevere%20informazioni.%0D%0AGrazie."> Richiedi informazioni </a>
Il risultato atteso è:
Buongiorno, Vorrei ricevere informazioni. Grazie.
Usare %0D%0A è più preciso che affidarsi al solo %0A.
Perché nell’HTML devi usare &
Consideriamo due parametri:
?subject=Test&body=Ciao
La URI usa & per separarli. Quando la stessa stringa è inserita nel markup HTML, però, l’ampersand ha anche una funzione nella sintassi del documento.
Per questo il sorgente corretto utilizza:
<a href="mailto:[email protected]?subject=Test&body=Ciao"> Invia email </a>
Il browser interpreta l’entità HTML e passa al gestore della posta la URI corrispondente.
La distinzione da ricordare è semplice: encoding della URI ed escaping del markup HTML non sono la stessa cosa.
Esempi HTML pronti da adattare
Non servono decine di varianti quasi identiche. Nella maggior parte dei casi bastano questi modelli.
Email semplice
<a href="mailto:[email protected]">Invia un'email</a>
Email con oggetto
<a href="mailto:[email protected]?subject=Richiesta%20preventivo"> Richiedi un preventivo </a>
Email con oggetto e messaggio
<a href="mailto:[email protected]?subject=Richiesta%20informazioni&body=Buongiorno%2C%20vorrei%20ricevere%20maggiori%20informazioni."> Contattaci </a>
Messaggio su più righe
<a href="mailto:[email protected]?body=Buongiorno%2C%0D%0AVorrei%20ricevere%20informazioni%20sul%20servizio.%0D%0AGrazie."> Richiedi informazioni </a>
CC e oggetto precompilato
<a href="mailto:[email protected][email protected]&subject=Richiesta%20supporto"> Contatta il supporto </a>
Dopo aver adattato gli esempi, non limitarti a verificare che il codice sembri corretto. Prova il risultato almeno sui browser, dispositivi e client più rilevanti per il tuo pubblico.
Come aggiungere il collegamento in WordPress
Per un collegamento email semplice non hai bisogno di un plugin.
L’editor di WordPress permette di associare link a testo, immagini, pulsanti e altri contenuti; la documentazione ufficiale sul controllo Link include anche gli indirizzi email fra le destinazioni supportate.
Puoi quindi selezionare una frase come:
Contattaci via email
e assegnarle:
mailto:[email protected]
come destinazione.
Se vuoi capire meglio come funzionano i componenti dell’editor, puoi approfondire i blocchi Gutenberg in WordPress.
Quando usare il blocco HTML personalizzato
Per un collegamento elementare, l’interfaccia visuale è normalmente sufficiente.
Il blocco HTML personalizzato diventa utile quando vuoi controllare direttamente una stringa con più parametri:
<a href="mailto:[email protected]?subject=Richiesta%20informazioni&body=Buongiorno%2C%0D%0AVorrei%20ricevere%20maggiori%20informazioni."> Richiedi informazioni </a>
Il vantaggio non è che questo tipo di link richieda necessariamente HTML personalizzato. È semplicemente più facile verificare una stringa lunga quando puoi controllare direttamente il valore di href.
Dopo aver salvato la pagina, verifica comunque il markup finale: editor, page builder o sistemi di sanitizzazione possono modificare il codice inserito.
Perché il collegamento può non funzionare come previsto
Una URI può essere formalmente corretta e produrre comunque un’esperienza diversa da quella che avevi immaginato.
La ragione è semplice: il sito costruisce il collegamento, ma è il sistema dell’utente a decidere come gestirlo.
Si apre il programma di posta sbagliato
Se il computer ha associato i link email a un’applicazione che l’utente non utilizza, il browser può aprire proprio quella.
Non è necessariamente un errore del codice.
Prima di modificare la pagina, verifica quindi se il problema riguarda l’associazione delle applicazioni nel sistema operativo o gli handler registrati nel browser.
Gmail o un’altra webmail non viene aperta
Gmail è una webmail, non una conseguenza automatica del clic.
Può essere configurata come gestore dei link email in determinati browser, ma non puoi presumere che lo sia su tutti i dispositivi.
Evita quindi testi come:
Apri Gmail
se il collegamento non punta specificamente a un servizio che garantisce quel comportamento.
Meglio:
Invia un'email
perché descrive l’azione senza promettere quale applicazione verrà aperta.
Alcuni parametri possono essere ignorati
La specifica lascia ai client un margine nella gestione dei campi presenti nella URI e avverte che chi crea il collegamento non dovrebbe aspettarsi supporto affidabile per qualsiasi header immaginabile.
Per i casi comuni, subject e body rappresentano la base più interoperabile. CC e BCC sono ampiamente gestiti, ma se il tuo processo dipende dal fatto che uno specifico campo venga sempre rispettato, questa soluzione non offre la stessa affidabilità di un sistema controllato lato server.
È un buon criterio generale: più il flusso diventa importante per il business, meno conviene affidarlo al comportamento del client email dell’utente.
Limiti: cosa non può fare questo tipo di link
La semplicità è il principale vantaggio, ma anche il suo limite. Cercare di trasformare un collegamento email in un sistema di invio completo porta rapidamente fuori dal suo caso d’uso.
Non invia automaticamente un messaggio
Il clic prepara una composizione. Non effettua da solo una consegna SMTP e non conferma che il messaggio sia stato spedito.
Se devi sapere con certezza che una richiesta è arrivata al tuo sistema, serve un meccanismo diverso.
Non sostituisce PHP, API o un backend
Un’applicazione server-side può:
- validare i campi;
- registrare una richiesta;
- salvare dati in un database;
- inviare notifiche;
- applicare logica;
- comunicare con API esterne;
- mostrare una conferma controllata.
Un semplice collegamento non svolge queste funzioni: trasferisce il controllo al client di posta dell’utente.
Gli allegati non sono un parametro standard e portabile
La ricerca mailto attachment è frequente, ma qui conviene essere precisi.
La specifica non definisce un parametro universale:
attachment=
che permetta a un sito di allegare in modo affidabile un file locale a qualsiasi client email.
Puoi trovare workaround proprietari o comportamenti specifici di singole applicazioni, ma non rappresentano una base adatta a un collegamento web interoperabile.
Se il processo richiede allegati, valuta un modulo con upload oppure un’applicazione progettata per gestire il flusso.
Non è un vero modulo di contatto
Un form può raccogliere nome, email, telefono, scelta del servizio, consenso, file e altri valori prima di inviare o archiviare la richiesta.
Con un link email, invece, stai trasferendo l’utente al proprio client di posta.
Può essere perfettamente adeguato per un semplice “Scrivici”, ma è una soluzione molto diversa da un processo di lead generation, assistenza o raccolta dati strutturata.
Spam, privacy e usabilità
Pubblicare un indirizzo dentro l’attributo href significa renderlo disponibile nel markup della pagina.
Questo vale anche quando il testo visibile non mostra l’indirizzo:
<a href="mailto:[email protected]">Contattaci</a>
Un bot che analizza il codice può comunque individuare [email protected].
La stessa considerazione vale per gli indirizzi inseriti in cc o bcc.
Non usare quindi questo schema pensando che nasconda l’indirizzo email.
L’offuscamento può aumentare leggermente l’ostacolo per scraper molto semplici, ma non è una misura su cui basare una strategia anti-spam.
L’anchor deve spiegare cosa succede
Anche dal punto di vista dell’usabilità, il testo del collegamento dovrebbe essere comprensibile.
Meglio:
Contatta l'assistenza via email
che:
Clicca qui
E se l’azione è importante, valuta se l’utente abbia davvero motivo di essere trasferito fuori dal flusso della pagina.
Una persona da smartphone con un account già configurato può trovare questa soluzione molto comoda. Un utente che lavora solo con una webmail non associata al browser può invece incontrare attrito immediatamente.
Link email o modulo di contatto: quale scegliere
Non esiste una regola per cui il modulo sia sempre migliore o peggiore. Risolvono problemi differenti.
| Scenario | Link email | Modulo di contatto | Scelta più sensata |
|---|---|---|---|
| Mostrare un semplice “Scrivici” | Ottimo | Possibile ma spesso eccessivo | Link email |
| Precompilare oggetto e breve richiesta | Ottimo | Ottimo | Link se basta l’email |
| Raccogliere più campi obbligatori | Debole | Ottimo | Modulo |
| Validare i dati | No | Sì | Modulo |
| Caricare allegati | Non portabile | Sì | Modulo |
| Registrare la richiesta nel database | No | Sì | Modulo/backend |
| Nascondere il destinatario dal markup | No | Possibile | Modulo/backend |
| Controllare il flusso indipendentemente dal client dell’utente | No | Sì | Modulo/backend |
| Lasciare all’utente il proprio client di posta | Sì | No | Link email |
Su WordPress, quando il requisito supera il semplice collegamento, puoi valutare una soluzione dedicata: nella nostra guida ai plugin per moduli di contatto WordPress trovi diverse alternative per creare un flusso gestito direttamente dal sito.
La domanda utile non è quindi “qual è la soluzione migliore in assoluto?”, ma:
chi deve controllare il processo, l’utente attraverso il proprio client email oppure il sito?
Se deve controllarlo l’utente, mailto è spesso sufficiente. Se deve controllarlo il sito, serve un modulo o un backend.
Conclusione
mailto resta uno dei modi più semplici per trasformare un testo, un indirizzo o un pulsante in un invito a scrivere un’email.
Per il caso base basta:
<a href="mailto:[email protected]">Scrivici</a>
Quando aggiungi subject, body, cc o bcc, però, conviene ricordare che stai costruendo una URI con precise regole di encoding e con un comportamento finale che dipende dal client dell’utente.
Gli spazi vanno codificati correttamente, nel markup HTML i separatori & diventano &, per le interruzioni di riga è preferibile %0D%0A e un indirizzo inserito in BCC resta comunque leggibile nella URI pubblicata.
Usa quindi questo meccanismo quando vuoi offrire un passaggio rapido verso il client email dell’utente. Se invece devi raccogliere dati strutturati, validare campi, gestire allegati, registrare richieste o controllare l’intero flusso, passa a un modulo o a una soluzione server-side.