back to top

Il link MAILTO: creare un link per spedire un email

Nella lezione precedente abbiamo visto come creare e gestire collegamenti ipertestuali all’interno di un documento HTML. In questa lezione vedremo come sfruttare il markup offerto dal tag <a> per creare un link piuttosto particolare: il link MAILTO (“mail to …”, in italiano, significa “mail per …”).

Creare link MAILTO in HTML: la guida completa

Come molti di voi sapranno, infatti, รจ possibile creare dei link collegati ad un indirizzo e-mail per fare in modo che l’utente, cliccandoci sopra, possa aprire il proprio client di posta per scrivere una mail all’indirizzo specificato nel link stesso. Per creare un link di questo tipo si utilizza una sintassi particolare caratterizzata, appunto, dalla keyword mailto all’interno dell’attributo href del tag <a>.

Rendere “cliccabile” un indirizzo email

Vediamo quindi un esempio di come creare un link per creare, in modo estremamente facile e veloce, un metodo di collegamento diretto con gli utenti del nostro sito che potranno contattarci per e-mail attraverso un semplice click del mouse. In altre parole vediamo come rendere cliccabile un indirizzo email all’interno di una pagina web.

<a href="mailto:[email protected]">Scrivi una mail</a>

Come potete vedere il valore dell’attributo href รจ valorizzato con la keyword mailto seguita dai due punti (:) e dall’indirizzo email di destinazione.

Se vogliamo inserire un link a piรน indirizzi email non dovremo fare altro che separarli con una virgola:

<a href="mailto:[email protected],[email protected],[email protected]">Scrivi una mail</a>

Cliccando su un link MAILTO l’effetto che si ottiene, solitamente, รจ l’apertura del client di posta predefinito nel computer (ad esempio Outlook) con la finestra di composizione nuovo messaggio giร  compilata per il campo destinatario.

Quella vista poco sopra, in realtร , รจ solo la sintassi basica, in quanto รจ possibile specificare, oltre al destinatario, altri valori come il subject ed il contenuto della mail da inviare. Vediamo un esempio piรน completo in cui viene definito anche l’oggetto del messaggio:

<a href="mailto:[email protected]?subject=Oggetto%20del%20messaggio">Scrivimi una mail</a>

Per aggiungere il subject non abbiamo fatto altro che aggiungere, dopo l’indirizzo email, un punto di domanda e, di seguito, il parametro subject seguito da un uguale (=) e dal suo valore (opportunamente trattato attraverso encoding, come vedremo in seguito).

Esattamente come abbiamo fatto per il subject possiamo arricchire il nostro link MAILTO con altri parametri come:

  • cc: definisce il valore preimpostato per il campo copia carbone (accetta come valore un indirizzo email)
  • bcc: definisce il valore preimpostato per il campo copia carbone nascosta (accetta come valore un indirizzo email)
  • subject: definisce il valore preimpostato per il campo oggetto (accetta come valore una stringa di testo)
  • body: definisce il contenuto preimpostato della mail (accetta come valore una stringa di testo)

Vediamo un esempio di link completo:

<a href="mailto:[email protected][email protected]&[email protected]&subject=Oggetto%20del%20messaggio&body=Contenuto%20del%20messaggio%20di%20posta">Scrivi una mail</a>

Effettuare l’encoding dei valori di subject e body

Guardando il codice qui sopra potete notare che gli spazi bianchi della frasi utilizzate per i parametri subject e body sono stati convertiti con la notazione %20… Per includere una stringa di testo nella URL del link MAILTO, infatti, รจ necessario utilizzare l’encoding percentuale, in cui ogni carattere speciale viene sostituito da una sequenza di due cifre esadecimali precedute dal simbolo “%” (ad esempio, il carattere spazio viene codificato come “%20”).

Effettuare l’encoding delle stringhe garantisce il corretto funzionamento del link.

Se non avete confidenza con il codice HTML e siete abituati a gestire le pagine web del vostro sito con WordPress non preoccupatevi. Il CMS piรน famoso in Rete vi offre la possibilitร  di rendere cliccabile un indirizzo email con poco sforzo.

Sarร  sufficiente evidenziare la frase che dovrร  fungere da ancora (ad esempio “clicca qui per scrivermi una email”) e premere sull’icona per l’aggiunta di link; all’apertura della finestra di dialogo, invece di inserire il link di una pagina web, dovrete semplicemente digitare il vostro indirizzo email preceduto da mailto. Ad esempio:

mailto:[email protected]
Inserire un link MAILTO in WordPress

Fate attenzione a non inserire spazi! In caso contrario il link non funzionerร .

Puรฒ capitare che cliccando su un link collegato ad un indirizzo email non accada nulla: questo si verifica quando sul computer dell’utente non รจ stato impostato un programma di default per la gestione della posta elettronica. Purtroppo questa eventualitร  รจ tutt’altro che remota: al giorno d’oggi, infatti, molti utenti preferiscono non dotarsi di un software per la posta elettronica (come Outlook o Thunderbird) ma far ricorso alle interfacce web di servizi come Gmail o Outlook.com.

In questo caso l’utente, cliccando sul link, non scatenerebbe alcuna azione creando un problema di usabilitร  per la pagina web (l’utente potrebbe sentirsi disorientato cliccando su un ipotetico link “Scrivimi una mail” che non produce, ai suoi occhi, nessuna azione).

MAILTO e rischio spam

In conclusione di questa lezione รจ bene ricordare che questo particolare tipo di link ha il grosso inconveniente di esporre pubblicamente un indirizzo e-mail al rischio spam. E’ noto, infatti, che i professionisti dello spam siano ghiotti di questo tipo di link in quanto, attraverso semplici software, รจ possibile scandagliare migliaia di pagine web in pochissimo tempo ed estrarre gli indirizzi e-mail in esse eventualmente presenti per poi utilizzarli quali target di invii massivi di posta indesiderata.

Limitare il rischio che i robot degli spammer intercettino il nostro indirizzo email

Un piccolo trucco consiste nel convertire la chiocciola nella corrispondente entitร  HTML. Anche se questo trucco non รจ del tutto efficace (basta infatti che lo spam robot converta l’entitร  che identifica l’@), puรฒ evitare di riempire almeno in parte le nostre caselle email a causa della presenza del nostro indirizzo nel nostro sito.

<a href="mailto:nome.cognome&#64;miosito.it">Email</a>

Un’altra tecnica, anch’essa non efficace al 100%, consiste nell’utilizzare una qualche funzione javascript per creare dei link mailto in cui l’indirizzo email non sia in chiaro ma criptato. Di seguito un esempio di funzione di questo tipo:

function nospamEmail(utente,dominio) {
  var email = utente + '@' + dominio;
  var email_criptata = '';
  for (var i = 0; i < email.length; i++) {
    email_criptata += '&#' + email.charCodeAt(i) + ';';
  }
  return email_criptata;
}

// esempio di utilizzo della funzione
document.write('<a href="mailto:' + nospamEmail('nome.cognome','miosito.it') + '">Invia un'email</a>');

Utilizzare moduli di contatto (invece di utilizzare MAILTO)

L’utilizzo del link MAILTO, pertanto, deve esserre ponderato attentamente in quanto, al fine di gestire i contatti con gli utenti del sito, รจ preferibile dotarsi di un modulo di contatto piuttosto che pubblicare “in chiaro” il proprio indirizzo di posta elettronica.

Pubblicitร 
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).