Un form mail con JavaScript

di: Luca Ruggiero     03 Marzo 2003

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:

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.

Guide JavaScript

Guida Node.js

Il framework che permette di per usare V8, l'interprete JavaScript...

Canvas, guida ai framework

Canvas, tra gli elementi di HTML5 è forse quello di maggior impatto....

Guida jQuery UI

Creare siti ricchi e dinamici con jQuery UI, il progetto ufficiale...

Altre guide

Newsletter @JavaScript

Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Webmaster base

18 Giugno 2012 a Milano
Disponibilità: 6 Posti

Corso Google AdWords Base

25 Giugno 2012 a Milano
Disponibilità: 7 Posti

Corso JQuery e Ajax per Webmaster

03 Luglio 2012 a Milano
Disponibilità: 7 Posti

Corso Google AdWords Base

05 Giugno 2012 a Roma
Disponibilità: 7 Posti

Corso Webmaster base

11 Giugno 2012 a Roma
Disponibilità: 7 Posti