Come personalizzare il link mailto

18 Nov 2020 - Guide, Wordpress
Come personalizzare il link mailto

Come molti di voi sapranno, il classico tag <a href=””> non ha solo il compito di inserire un link all’interno di un teso in html, ma ha anche molteplici utilizzi tra cui il mailto: che permette al realizzatore del testo di far aprire il client di posta (il programma di posta utilizzato di default, come “outlook”, “mail”, “thunderbird” ecc) dell’utente finale, al semplice clic sul link.

Quali sono i valori che si possono assegnare al mailto html?

Parametro Descrizione
mailto: Indirizzo email del destinatario. In questo campo è possibile inserire più di un destinatario, separandoli con una virgola
cc= Indirizzo email del destinatario, messo in copia
bcc= Indirizzo email del destinatario messo in copia nascosta
subject= Campo testo in cui inserire il campo “oggetto” dell’email
body= Campo testo in cui inserire il corpo del messaggio preimpostato
? Delimitatore del primo campo
& Delimitatore di tutti gli altri campi

Se il vostro intento è semplicemente quello di far aprire il client di posta, è possibile farlo con un semplice mailto: vuoto.

<a href="mailto:">clicca per inviare l'email</a>
<a href="mailto:nome@sito.it">clicca per inviare l'email</a>
<a href="mailto:nome@sito.it,nome2@sito.it,nome3@sito.it">clicca per inviare l'email</a>

Adesso andiamo ad implementare i parametri che abbiamo visto ad inizio post nella tabella.

<a href=”mailto:nome@sito.it?subject=Oggetto del messaggio”>Clicca per inviare l'email</a>

Analizzaiamo la struttura: come potete vedere, abbiamo inserito dopo il mailto: l’indirizzo email del destinatario e come primo delimitatore di campo, abbiamo inserito il carattere ? seguito dal campo subject= con un testo che verrà visualizzato all’interno del campo oggetto della mail.

Adesso inseriamo un ulteriore campo, mettiamo il campo del testo della mail, al link.

<a href=”mailto:nome@sito.it?subject=Oggetto del messaggio&body=Inserite qui il testo del messaggio”>Clicca per inviare l'email</a>

Analizziamo la struttura: come vedete, in aggiunta all’esempio precedente, abbiamo delimitato la fine del secondo campo con il simbolo & e abbiamo inserito il campo body= con un breve messaggio.

Inseriamo sia il campo per conoscenza e conoscenza nascosto nel solito esempio per non dilungarsi troppo, tanto il procedimento è sempre il solito, non dilunghiamoci troppo.

<a href=”mailto:nome@sito.it?subject=Oggetto del messaggio&body=Inserite qui il testo del messaggio&cc=nome2@sito.it&bcc=nome3@sito.it”>Clicca per inviare l'email</a>
Come personalizzare il link mailto html
Come personalizzare il link mailto html

Se volete vedere in azione questi link, eccovi qui sotto una lista da cliccare che vi mostrerà il risultato finale

Per chi ci segue saprà che cerchiamo sempre di incastrare WordPress in tutte le nostre guide; questa non è un eccezione. 😉

Molto semplicemente, tanto per dare l’input, a chi conosce tutti i template tag e richiami vari, un’applicazione molto favorevole potrebbe essere quella di realizzare un tasto “richiedi info” nella scheda prodotto con il richiamo del titolo nel campo oggetto…

<a href=”mailto:nome@sito.it?subject=Richiesta di info per il prodotto <?php the_title(); ?>”>Clicca per inviare l'email</a>

In questo modo potrete avere il campo dell’oggetto con il nome del prodotto, richiamato in modo dinamico, nella vostra single-prodotto.php.

Adesso che ho dato il “la” per la dinamicizzazione dei campi, sbizzarritevi pure 😉

Conclusioni

Come avete visto sono piccoli “trucchetti” che possono aumentare la user experience sul vostro sito e sono molto facili da realizzare, con un coefficiente di difficoltà molto molto basso.

Spero che questa guida vi sia piaciuta e se avete domande a riguardo o dubbi, vi prego di commentare l’articolo, sarò molto felice di aiutarvi.



Massimiliano Piacentini

Web des. | WP Dev. | SEO Spec.

Dopo vari anni passati come graphic designer e dopo molti corsi, ho seguito la mia massima passione: lo sviluppo di siti web in html, php e WordPress. Il design web è stata una semplice conseguenza di tutte le mie skills che mi permettono, seguendo le best practices, per dare una User Experience sui siti creati.