Un form mail con JavaScript

In questo articolo vedremo come poter inserire nel proprio sito un form per l’invio delle e-mail senza utilizzare applicazioni server-side (ASP, PHP, etc.).

Ogni Webmaster dovrebbe avere sul proprio sito, ben evidente, un mezzo qualsiasi per farsi contattare, in genere tramite e-mail. Il navigatore esigente difficilmente tende ad accontentarsi del classico link di tipo mailto:, è ormai poco professionale ed ancor meno funzionale avvalersi di questo metodo per incrementare i propri contatti.

La soluzione ideale è senza dubbio l’utilizzo di script lato server, realizzati ad esempio con ASP, PHP, CGI, etc. ma non tutti sono in grado di utilizzare queste tecnologie, o magari non hanno la possibilità di adoperarle a causa, ad esempio, del mancato supporto da parte dell’hosting delle librerie necessarie per il funzionamento di tali tecnologie.

La soluzione rimane quella client-side con l’utilizzo del mailto:, ma proviamo a sfruttare al meglio questo metodo, si provi ad inserire in un semplice link questa sorta di QueryString:

<a href="mailto:[email protected]?Subject=Oggetto%20della%20mail&[email protected]&[email protected]&Body=Messaggio%20di%20prova">invia</a>

il risultato è già diverso e lascia ben sperare per il futuro… proviamo subito.

Come si può notare, in ogni caso viene richiamato il client di posta elettronica riconosciuto per default dal sistema dell’utente, vediamo i campi che abbiamo utilizzato in questo esempio:

Campo	Descrizione
Subject	campo destinato ad ospitare l’oggetto della mail
Cc	campo per inviare una copia in carta carbone della mail ad un secondo destinatario
Bcc	campo per inviare una copia in carta carbone della mail ad un terzo destinatario
Body	campo destinato ad ospitare il corpo del messaggio della mail.

In genere capita di ricorrere ad un mezzo del genere in occasioni in cui ci sono sulla stessa pagina molti indirizzi email da poter contattare, a questo punto diventerebbe scomodo e troppo laborioso realizzare un modulo diverso per ogni singolo destinatario, quindi utilizziamo un metodo del genere:

<a href="mailto:[email protected]?Subject=Oggetto%20per%20il%20signor%20Verdi">Scrivi al signor Verdi</a>
<a href="mailto:[email protected]?Subject=Oggetto%20per%20il%20signor%20Bianchi">Scrivi al signor Bianchi</a>
<a href="mailto:[email protected]?Subject=Oggetto%20per%20il%20signor%20Rossi">Scrivi al signor Rossi</a>

ed il risultato sarà:

Scrivi al signor Verdi Scrivi al signor Bianchi Scrivi al signor Rossi

Inviare email client-side con JavaScript

Possiamo sfruttare questo sistema di concatenamento di stringhe per memorizzare i dati in delle variabili JavaScript ed inviarli al client di posta elettronica attraverso un modulo HTML. Ecco il codice del modulo in cui si utilizza un solo campo destinatario:

<form name="modulo">
Email:<br />
<input type="text" name="email"> <br />
Oggetto:<br />
<input type="text" name="oggetto"> <br />
Messaggio:<br />
<textarea name="messaggio" rows="10" cols="30"></textarea> <br/>
<input type="button" value="Invia" onClick="Email()">
</form>

Lo script che consente il dialogo tra i campi di questo modulo ed il client di posta elettronica è il seguente:

<script type="text/javascript">
<!--
function Email() {
var email = document.modulo.email.value;
var oggetto = document.modulo.oggetto.value;
var messaggio = document.modulo.messaggio.value;
if ((email.indexOf("@") == (-1)) || (email == "") || (email == "undefined")) {
alert("Inserire un indirizzo email valido.");
document.modulo.email.focus();
}
else if ((oggetto == "") || (oggetto == "undefined")) {
alert("Inserire un oggetto.");
document.modulo.oggetto.focus();
}
else if ((messaggio == "") || (messaggio == "undefined")) {
alert("Inserire un messaggio.");
document.modulo.messaggio.focus();
}
else {
location.href = "mailto:" + email + "?Subject=" + oggetto + "&Body=" + messaggio;
}
}
</script>

Ecco un esempio del modulo funzionante:

if ((email.indexOf("@") == (-1)) || (email == "") || (email == "undefined")) { alert("Inserire un indirizzo email valido."); document.modulo.email.focus(); } else if ((oggetto == "") || (oggetto == "undefined")) { alert("Inserire un oggetto."); document.modulo.oggetto.focus(); } else if ((messaggio == "") || (messaggio == "undefined")) { alert("Inserire un messaggio."); document.modulo.messaggio.focus(); } else { location.href = "mailto:" + email + "?Subject=" + oggetto + "&Body=" + messaggio; } }

Email: Oggetto: Messaggio:

Nello script abbiamo inserito anche un piccolo controllo per la validità dei campi, abbiamo approfondito meglio l’aspetto della validazione nell’articolo Validare e inviare un form con JavaScript.

Focalizziamo l’attenzione sulla parte dello script che ci interessa: la proprietà location.href. Abbiamo utilizzato questa proprietà impostandone il valore con le tre variabili prelevate dal form: email, oggetto e messaggio, che abbiamo preteso fossero obbligatori.

Nota: non è possibile nascondere o modificare l’indirizzo di posta del destinatario se il modulo e lo script vengono impostati con un indirizzo email statico, cioè stabilito per default nello script. Questo è un limite dovuto alla natura client-side del nostro programma.

Inviare email a più destinatari

Una volta fatta un po di pratica con questi semplici metodi, proviamo ad implementare qualche piccola variazione sul tema. Creiamo un sistema che permetta di scegliere tra tre possibili destinatari reperendo l’indirizzo email da un menu a cascata, oppure, selezionando una checkbox, di inviare una email a tutti e tre contemporaneamente, ecco un esempio:

<script type="text/javascript">
<!--
function EmailMultipla() {
var selezione = document.formEmail.opzione.checked;
var destinatario = document.formEmail.destinatari.selectedIndex;
if (selezione == true) {
location.href = "mailto:[email protected]?Subject=&[email protected]&[email protected]";
}
else {
switch(destinatario) {
case 0: location.href = "mailto:[email protected]"; break;
case 1: location.href = "mailto:[email protected]"; break;
case 2: location.href = "mailto:[email protected]"; break;
}
}
}
//-->
</script>

<form name="formEmail">
Scegli il destinatario
<select name="destinatari">
<option>[email protected]</option>
<option>[email protected]</option>
<option>[email protected]</option>
</select>
(Invia la mail a tutti i destinatari <input type="checkbox" name="opzione">)
<input type="button" value="Invia" onClick="EmailMultipla()">
</form>

Ecco un esempio del modulo funzionante:

Scegli il destinatario (Invia la mail a tutti i destinatari )

Esaminiamolo.

Abbiamo dichiatato due variabili, selezione che controlla che la checkbox sia selezionata o meno e destinatario che cattura il valore del menu a cascata, se la checkbox è selezionata allora invierà una mail a tutti e tre i destinatari, altrimenti solo a quello selezionato.

Come esercizio consiglio di provare e riprovare ad implementare semplici sistemi del genere, da una semplice prova potrebbe nascere la soluzione ai propri problemi!