back to top

Inviare email tramite un form con solo HTML

L’HTML non dispone nativamente di un sistema di invio di email, dato che si tratta di una tecnologia gestibile solo lato server.

Da buon linguaggio (di marcatura) lato client, l’HTML ha la facoltà di sfruttare tutti i tipi di client a disposizione sul computer su cui viene eseguito, come i client di posta elettronica, (Outlook, Eudora, IncrediMail, etc…) ed è quindi attraverso uno di questi che è possibile inviare una mail attraverso un modulo. Le cose importanti da ricordare sono due; la prima è quella di specificare nel Tag <form> il metodo POST, come action l’indirizzo email del destinatario della mail (nell’esempio io@me.te) con tanto di mailto: e l’attributo enctype che dovrà assumere il valore text/plain.

Pubblicitร 

Vediamo quindi come impostare il Tag:

<form method="POST" action="mailto:io@me.te" enctype="text/plain">
Seconda cosa da ricordare è di assegnare ai campi del form i seguenti nomi (proprietà name degli input)
  • to – per il destinatario
  • from – per il mittente
  • subject – per l’oggetto
  • body – per il corpo della mail
Il bottone di invio dovrà essere di tipo submit; se volete impostare un button, magari per effettuare preventivamente un controllo sui campi, sarà necessario utilizzare Javascript ed usare il metodo submit() per l’invio.

Ecco un esempio di form:

<form method="POST" action="mailto:io@me.te" enctype="text/plain">
Oggetto del messaggio:<br />
<input type="text" name="subject"><br />
Testo:<br />
<textarea name="body"></textarea><br />
<input type="submit" value="Ivia Email">
</form>
Unico inconveniente è quello che verrà visualizzato all’utente (mittente) questo messaggio di conferma
che dice che il modulo è stato inviato per posta elettronica, anche se l’avviso corretto sarebbe quello che il modulo sarà inviato via email, quindi dopo la conferma.

In funzione di quanto imparato nelle lezioni e negli articoli dedicati sia all’HTML che al Javascript lascio a voi il compito di costruire il modulo di invio e di testarlo. Per qualsiasi problema vi aspetto sul Forum di discussione.

ATTENZIONE: se non è installato e configurato un client di posta elettronica predefinito il modulo non funzionerà e la mail verrà, nella migliore delle ipotesi, consegnata in maniera anonima.

Altri contenuti interessanti

Pubblicitร 

Potrebbero interessarti queste guide

Leggi anche...

Bloccare lโ€™orientamento di una pagina web su smartphone: come forzare la modalitร  portrait o landscape

Nellโ€™era mobile-first, lโ€™esperienza utente sui dispositivi mobili รจ un...

Video Background HTML e CSS: consigli, caratteristiche tecniche e best practices

Utilizzare un video come sfondo (noto anche come video background)...

Visualizzare il codice sorgente HTML di una pagina web su iPhone e iPad

Molti sviluppatori si trovano in difficoltร  quando hanno bisogno...

Caratteri speciali negli URL: quali sono e come gestirli

Gli URL (Uniform Resource Locator) sono componenti fondamentali del...

Stilizzare HR (linee orizzontali) in puro CSS

Il tag <hr> (Horizontal Rule) รจ un elemento HTML...
Pubblicitร