Il modulo “suggerisci il sito ad un amico”

Inseriamo nelle nostre pagine la funzione “suggerisci il sito ad un amico”

Solitamente i form per l’invio di dati utilizzano linguaggi di “programmazione” come Perl, Asp o Php. Il fatto stesso che questi script siano lato server (vengono cioè interpretati dal server remoto e non dal browser dell’utente) rende possibile, al 99% dei casi, la riuscita dell’operazione; l’1% dei malfunzionamenti è dovuto ad un problema abbastanza grave (ad esempio potrebbe essersi bloccato il motore perl o il server di posta) ma mai dipenderà da qualche impostazione del navigatore.

Sappiamo, però, che è possibile anche costruire dei semplici moduli in html, utilizzando javascript per il controllo dei dati inseriti.

Ovviamente consiglio sempre l’uso di forme più professionali e sicure come quelle lato server …ma per un attimo mettiamoci nei panni di un webmaster in erba: dato che nessuno “nasce imparato” (o almeno così dovrebbe essere) è normale che i primi esperimenti per ricevere dati si facciano costruendo un banalissimo modulo in html; se aggiungiamo inoltre che il sito si trova su uno spazio gratuito (e non offre la possibilità di tecnologie più avanzate) la scelta è a senso unico.

Probabilmente non tutti sanno che è possibile costruire dei moduli in html con destinatari “dinamici”; con la parola “dinamico” intendo dire che si può variare, ad ogni invio, il soggetto che riceverà i dati. Questa caratteristica ci permette di pensare a nuovi interessanti utilizzi dei moduli visto che finora eravamo stati abituati ad impostare un unico destinatario statico.

A tal proposito si potrebbe realizzare un codice lato client che abbia le stesse funzioni dei ben più performanti script in Cgi; la funzione è quella che normalmente chiamiamo “Suggerisci il sito ad un amico” ma attenzione: si tratta pur sempre di un espediente per chi non sa o non può utilizzare linguaggi lato server e quindi avremo tutti i limiti del caso.

Ad esempio, dato che i form in html si appoggiano al programma di posta dell’utente, potrebbe accadere che l’invio non vada a buon fine se l’utente stesso non ha ben configurato il proprio pc.

Fatte queste doverose avvertenze procediamo con l’analisi di un primo form di prova.

Ecco il codice di un primo form di prova:

<html>
<head>
<title>Segnala sito</title>
<script language=”Javascript”>
<!–
/*
saibal copyright 2001 – http://www.lorenzone.it
*/
function destin() {
 var destinatario=document.forms[0].elements[1].value;
 var link = “http://www.html.it.it”; // <span style=”color:#ba1b0a”>url del sito da suggerire</span>
 var messaggio_iniziale = “Messaggio inviato a ” + destinatario; // <span style=”color:#ba1b0a”>messaggio
iniziale dell’email</span>  
 var mittente = document.forms[0].elements[0].value;
 document.forms[0].elements[2].name = messaggio_iniziale;

 // soggetto dell’email
 funz_destinatario = “mailto:” + destinatario + “?subject=Sito da visitare!!”;
 
 document.forms[0].action = funz_destinatario;
 
 // testo che segue il messaggio iniziale
 document.forms[0].elements[2].value = ” Ciao amico/a, ” + mittente + ” pensa che questo sito ti
potrebbe interessare ” + link; }
//–>
</script>
</head>

<body bgcolor=”white” >

<form ENCTYPE=”text/plain” name=”form” method=’post’ action=” onSubmit=”return destin()”>
<table cellspacing=”0″ cellpadding=”0″ width=”450″>
<tr>
  <td><font face=”verdana” size=”2″>Il tuo nome:</font></td>
  <td><input type=”text” size=”26″ maxlength=”40″ ></td>
</tr>
<tr>
  <td><font face=”verdana” size=”2″>Email destinatario:</font></td>
  <td><input type=”text” size=”26″ maxlength=”40″></td>
</tr>
<tr>
  <td> </td>
  <td><input type=”hidden”></td>
</tr>
<tr>
  <td><font face=verdana size=2>Commenti e suggerimenti:</font></td>
  <td><textarea name=”Commenti ” ROWS=6 COLS=30 wrap=virtual></textarea></td>
</tr>
<tr>
  <td> </td>
  <td>
   <input type=”submit” value=”Spedisci”>
   <input type=”reset” value=”Reset”>
  </td>
</tr>
</table>
</form>
</body>
</html>

La prima cosa che dovrebbe balzare agli occhi è che il tag <form> non ha dichiarato l’action che invece, in un normale modulo html, sarebbe impostato su mailto:indirizzo@mail.it.

La risposta a questo dilemma è presto detta: l’action del form, solitamente, contiene l’email del destinatario ma il nostro scopo è renderlo dinamico e non statico; proprio per questo motivo utilizziamo javascript. Al momento di premere INVIO, infatti, il form richiama una funzione chiamata destin(); queste poche linee di codice hanno parecchie funzioni:

N.B. Ricordiamoci che il conteggio degli elementi in un form avviene partendo dall’elemento numero 0

var destinatario=document.forms[0].elements[1].value;

La variabile destinatario corrisponderà al valore scritto nel secondo campo del form (il campo email del destinatario; partendo da zero, l’elemento 1 corrisponde appunto al secondo input).

var link = “http://www.html.it”;

La variabile link contiene l’url del sito da suggerire.

var messaggio_iniziale = “Messaggio inviato a ” + destinatario;

È il messaggio iniziale dell’email; la variabile “destinatario” verrà sostituita, naturalmente, con l’indirizzo inserito nel form.

funz_destinatario = “mailto:” + destinatario + “?subject=Sito da visitare!!”;

Se prima abbiamo visto che la variabile destintario corrispondeva al valore del secondo campo del form (email), adesso dichiariamo che funz_destinatario sarà uguale alla stringa mailto: ….. da inserire nell’action del form. È ovvio che + destinatario + verrà sostituito con l’indirizzo inserito dal visitatore ed infine notiamo anche che è stato aggiunto un soggetto predefinito all’email: Sito da visitare!!.

document.forms[0].action = funz_destinatario;

È questa una stringa chiave; si può “leggere” che l’action del form deve essere uguale a funz_destinatario che, come abbiamo appena visto, sarà uguale a “mailto:indirizzo_destinatario?subject=Sito da visitare!!”.

I conti iniziano a tornare no? Quasi… dobbiamo ancora spiegare due cose: come mai c’è un campo hidden nel form e perchè gli input del modulo non hanno l’attributo name?

Iniziamo dal secondo punto. In un modulo html l’attributo name dato ai textfield è fondamentale per due motivi:

1) Il nome identifica in modo univoco un textfield e ciò può essere utile in molti casi (ad es. per il controllo del form con javascript). La sintassi completa di un campo di testo è simile a : <input type=”text” nome=”prova” value=”valore iniziale facoltativo” size=”20″ maxlength=”50″>

2) Identificare con un nome i campi del form fa in modo che i dati inseriti dall’utente negli input vengano stampati nell’email. Mi spiego: supponiamo di avere due campi di testo chiamati rispettivamente nick e nome

<form name=”prova” method=”post” action=”mailto:prova@prova.it”>
<input type=”text” nome=”nick” value=”” size=”20″ maxlength=”50″>
<input type=”text” nome=”nome” value=”” size=”20″ maxlength=”50″>
<input type=”submit” name=”bottone” value=”Spedisci”>
</form>

Con un form di questo tipo, dopo averlo riempito ed inviato, riceverò un modulo così strutturato:

nick = Saibal
nome = Lorenzo
bottone =

Come vedete, accanto al nome di ogni input, compare il valore inserito nel relativo campo; se invece avessi omesso il parametro name nel codice html, anche dopo aver riempito correttamente il modulo, avrei ricevuto una email del tutto bianca.

Come mai, allora, nel form che stiamo costruendo non compare l’attributo “nome” ma vengono stampati comunque i risultati?

Semplice: assegnano un attributo name attraverso l’uso di javascript e lo facciamo solamente sui campi del form che ci interessa visualizzare… guardate qua:

document.forms[0];.elements[2];.name = messaggio_iniziale;

“Letto” in italiano dovrebbe essere: “Il terzo elemento del form (il campo hidden) avrà come nome (e quindi verrà stampato) ciò che è scritto nella variabile messaggio_iniziale; sappiamo poi che la variabile var messaggio_iniziale corrisponde a “Messaggio inviato a ” + destinatario + ” “;.”

Adesso aggiungo:

document.forms[0].elements[2].value = ” Ciao amico/a, ” + mittente + ” pensa che questo sito ti potrebbe interessare ” + link;

“Leggiamo” ancora una volta ed ottieniamo: “Il valore del terzo elemento del form (il campo hidden) avrà come valore la stringa “Ciao amico/a etc etc”.

A questo punto fermiamoci un attimo per fare due calcoli e capire cosa riceveremo nella casella di posta.

Il form è composto da:

  • due campi di testo visibili: uno per il nome del mittente e l’altro per l’email del destinatario
  • una textarea per i commenti
  • un campo hidden
  • un bottone submit
  • un bottone reset

Guardando il codice html del form notiamo che solamente la textarea ha l’attributo name e quindi, da quanto detto finora, teoricamente dovremmo ricevere nell’email solo ciò che è stato scritto nella textarea stessa. Dobbiamo invece ricordarci che, attraverso javascript, attribuiamo un nome ed un valore anche al campo hidden e perciò riceveremo un’email fatta così:

Messaggio inviato a xxx@xxx.it = Ciao amico/a, saibal pensa che questo sito ti potrebbe interessare http://www.html.it Commenti = Un bel sito!! Soprattutto il forum!!

Ecco quindi che, da un form con 6 elementi (3 campi text, una textarea e due bottoni), abbiamo un’email con solo due elementi stampati (quelli che ci interessano di più): il campo hidden e il campo commento.

Il form di prova analizzato è funzionante ma un minimo di controllo si rende necessario per evitare che, accidentalmente o meno, vengano inviati dei moduli vuoti. Ancora una volta ricorriamo a javascript per “obbligare” l’utente a riempire i campi Mittente ed Email destinatario:

<html>
<head>

<title>segnala sito</title>
<script language=”Javascript”>
<!–
/*
saibal copyright – 2001 – http://www.lorenzone.it
*/

var emailAddress=””;
function destin() {
var link = “http://www.html.it”; // sito da suggerire

var messaggio_iniziale = “Messaggio inviato a ” + emailAddress; // messaggio iniziale dell’email

var mittente = document.forms[0].elements[0].value;

var destinatario=document.forms[0].elements[1].value;

document.forms[0].elements[2].name = messaggio_iniziale;

funz_destinatario = “mailto:” + destinatario + “?subject=Sito da visitare!!”; // soggetto dell’email

document.forms[0].action = funz_destinatario;

document.forms[0].elements[2].value = ” Ciao amico/a, ” + mittente + ” pensa che questo sito ti potrebbe interessare ” +
link; // testo che segue il messaggio iniziale
}

// funzione submit che segue al controllo della funzione nome ed email
function submitForm() {
if ( (nome() ) && (email()) )
if (confirm(“nIl form sarà spedito a :nn”+emailAddress+”nn Confermi l’invio?”))
return true;
else
alert(“nHai interrotto l’invio”);
return false;
}


// funzione di controllo sul campo nome
function nome() {
 var controlla = document.forms[0].elements[0].value;
 if (controlla == “”) {
  alert(“nNon hai inserito il tuo nome.nnPer favore inseriscilo.”)
  document.forms[0].elements[0].focus();
  return false;
 }
return true;
}


// funzione di controllo sul campo email
function email() {
 emailAddress=document.forms[0].elements[1].value;
 if (document.forms[0].elements[1].value == “”){
  alert(“nNon hai inserito l’email del distinatario.”)
  document.forms[0].elements[1].focus();
  return false;
 }
 
 if (document.forms[0].elements[1].value.indexOf (‘@’,0) == -1 || document.forms[0].elements[1].value.indexOf (‘.’,0)
== -1) {  
  alert(“nL’ E-mail deve contenere “@” e uno o più “.””)
  document.forms[0].elements[1].select();
  document.forms[0].elements[1].focus();
  return false;
 
 } else {
  destin();
  return true;
 }
}
//–>
</script>
</head>

<body bgcolor=”white” >

<form enctype=”text/plain” name=”form” method=’post’ action=” onSubmit=”return submitForm()”>
<table cellspacing=”0″ cellpadding=”0″ width=”450″>
<tr>
  <td><font face=verdana size=2>Il tuo nome:</font></td>
  <td><INPUT TYPE=”text” SIZE=”26″ MAXLENGTH=40 ></td>
</tr>
<tr>
  <td><font face=verdana size=2>Email destinatario:</font></td>
  <td><INPUT TYPE=”text” SIZE=”26″ MAXLENGTH=40 ></td>
</tr>
<tr>
  <td></td>
  <td><INPUT TYPE=”hidden”></td>
</tr>
<tr>
  <td><font face=verdana size=2>Commenti e suggerimenti:</font></td>
  <td><TEXTAREA NAME=”Commenti ” ROWS=6 COLS=30 wrap=virtual></TEXTAREA></td>
</tr>
<tr>
  <td> </td>
  <td><input type=”submit” value=”Spedisci”>
    <input type=”reset” value=”Reset”> </td>
</tr>
</table>
</form>

</body>
</html>

Ecco qua: abbiamo inserito tre nuovi funzioni che effettuano un controllo sui dati inseriti: function submitForm(), function nome() e function email().

Al momento di premere INVIO viene richiamata la funzione submitForm() che, a sua volta, controlla l’esatta compilazione dei campi Mittente ed Email destinatario. Se questi due controlli vanno a buon fine la funzione submitForm() richiama, finalmente, la già citata funzione destin() che provvede ad inviare il form.

Adesso non ci resta altro che implementare lo script nelle nostre pagine ed aspettare che qualcuno suggerisca il nostro sito a qualche amico :)

I Video di HTML.it

WebHooks: The API Strikes Back

Le (o l’impero delle) API colpiscono ancora. Phil Nash, developer evangelist per Twilio ne è convinto. Ci sono ma sono […]