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:
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>
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:
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:
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!
Se vuoi aggiornamenti su Un form mail con JavaScript inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni
relative ai servizi di cui alla presente pagina ai sensi
dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i
seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni
relative ai servizi di cui alla presente pagina ai sensi
dell'informativa sulla privacy.
I Video di HTML.it
Zebra, le novità del 2017
Pietro Maggi ci parla delle novità che Zebra porta nel mercato dei dispositivi Enterprise e ci illustra le opportunità che […]
Alcuni utili consigli per migliorare le performance di caricamento e visualizzazione di una pagina web, sfruttando alcuni trucchi basati su Javascript.
Questo articolo introdurrà il linguaggio JavaScript ai programmatori Java enfatizzando soprattutto le differenze al fine di garantire un più rapido apprendimento.
Vue.js è uno dei framevork JavaScript più utilizzati per la realizzazione di interfacce web e single page application. Questa guida affronta tutti i principali aspetti relativi allo sviluppo di applicazioni basate su Vue.js: dai principi di funzionamento, alla gestione degli eventi e il data binding, passando per la realizzazione di componenti personalizzati, e la gestione dello stato dell’applicazione.