Questa pagina è un completamento della guida Come creare un sito da zero

Ogni sito che si rispetti deve avere il suo modulo di contatto. Perchè? Prima di tutto perchè è giusto dare agli utenti la possibilità di contattarci e poi perchè non è mai opportuno mettere direttamente a disposizione il proprio indirizzo email, perchè si diventerebbe facile preda di spammer e spyware. Bisognerebbe, in ogni caso, creare un link con l'indirizzo opportunatamente criptato (vedi: Criptatore).
Per creare un modulo di contatto ci sono tre strade:

1. Affidarsi ad un servizio esterno (vedi: Google Drive, come creare un modulo)
2. Creare un modulo che funziona tramite client di posta.
3. Creare un modulo che funziona tramite server.

Per prima cosa, vediamo come si compone un modulo strutturalmente

Struttura di un modulo (form)

Gli elementi di un modulo sono racchiusi tra i tag <form></form>.
Il form è il contenitore per una varietà di elementi di input (immissione): campi di testo, checkbox, radio button, submit button, etc.
Un elemento input viene visualizzato diversamente secondo l'attributo type che possiede.
Es: <input type="text">

• button: definisce un pulsante
• checkbox: definisce le caselle di controllo con la possibilità di effettuare più scelte
• color: definisc e il campo che deve contenere un colore. Se il browser lo supporta, verrà visualizzato, al click, un selettore di colori
• date: definisce il campo che deve contenere una data. Se il browser lo supporta, verrà visualizzato, al click, un selettore di date. Possibile aggiungere un minimo e un massimo
• mail: definisce il campo che deve contenere un indirizzo email
• file: definisce un pulsante per selezionare e caricare un file dal browser
• hidden: definisce un campo non visibile all'utente
• image: definisce un pulsante di invio rappresentato da un`ìmmagine
• month: definisce un campo  che deve contenere mese e anno. Se il browser lo supporta, verrà visualizzato, al click, un selettore di date
• number: definisce un campo che deve contenere un numero. Se il browser lo supporta, verranno visualizzate frecce di avanzamento. Possibile aggiungere un minimo e un massimo
• password: definisce il campo che deve contenere una password
• radio: definisce il pulsante per le opzioni che permette una sola scelta
• reset:definisce il pulsante per resettare i campi del modulo e ripristinare i valori predefiniti
• submit: definisce il pulsante per l'invio del modulo
• tel: definisce il campo che deve contenere il numero di telefono
• text (default): definisce il campo per una linea di testo
• time: definisce il campo che deve contenere un orario
• url: definisce il campo che deve contenere un indirizzo url

Attributo name

Ogni campo di input deve avere un attributo name per essere inviato.
Es: <input type="text" name="name">

Elemento select

Definisce un elenco a discesa.
È possibile dividere le voci dell'elenco in gruppi o categorie utilizzando l'attributo optgroup.

Elementi fieldset e legend

L'elemento fieldset, in un elemento input, definisce un gruppo di dati racchiuso in una cornice. L'elemento legend rappresenta la didascalia dell'elemento fieldset.

Elemento datalist

L'elemento datalist definisce un elenco a discesa di opzioni. L'attributo list dell'elemento <input> deve fare riferimento all'attributo id dell'elemento <datalist>.
L'attributo list dell'elemento <input> deve avere lo stesso valore dell'attributo id dell'elemento datalist.
Esempio:
<input list="browsers" name="browser">
<datalist id="browsers">

Elemento textarea

Definisce il campo per inserire molteplici linee di testo.
Possibile definire la larghezza del campo (cols) e l'altezza (rows).
Es: <textarea name="message" cols="20" rows="15" style="max-width:100%"></textarea>

Le etichette

Gli elementi di un modulo devono avere le corrispondenti etichette (label) il cui testo deve essere univoco.

L'etichetta è implicita se il tag "label" avvolge anche l'elemento input, per esempio:
<label>Name: <input type="text"></label>

Diversamente, è necessario specificare l'etichetta con metodi alternativi, per esempio utilizzando gli elementi for e id:
<label for="name">Name:</label> <input type="text" id="name">
Oppure:
<label for="name"><input type="text"  id="name" placeholder="Name*"></label>
Nell'esempio sopra il label avvolge anche l'input, ma, al posto del testo, contiene una placeholder che non è considerata efficace come etichetta, perchè viene rimossa quando l'utente inserisce il testo nell'input.
NOTA: for e id devono contenere identico valore.
Se non è possibile aggiungere un label associato, bisogna aggiungere un attributo descrittivo aria-label al campo del modulo.
<input type='text' aria-label='name' placeholder="Name>
L'attributo aria-label sovrascrive, ove presente, il nome di un elemento, sostituendolo con il testo specificato. Per questo motivo viene utilizzato per dare indicazioni agli screen readers utilizzati dai non vedenti.
Facciamo l'esempio di un pulsante utilizzato per chiudere un popup:
<button aria-label="Close">×</button>
Senza aria-label lo screen reader leggerebbe la lettera x che non ha nessun significato come testo, ma lo ha se interpretata come chiusura da chi è vedente. Con aria-label, invece, lo screen reader leggerà "Close" fornendo la giusta interpretazione e indicazione all'utente.
Per maggiori informazioni su "aria", leggi:
https://w3c.github.io/using-aria

Segnala link non funzionante:

Anche gli elementi select possono avere un'etichetta implicita, esempio:
<label>Stati europei: <select></select></label>
In alternativa, si può usare aria-label, esempio:
<select aria-label="State"></select>

Gli elementi del modulo che devono avere etichette sono:

    Gli elementi di  testo: <input type="text">, <input type="password"> e <textarea>
    I radio buttons: <input type="radio">
    I checkbox: <input type="checkbox">
    I select: <select></select>

Gli elementi che non necessitano di etichette sono:

    Pulsanti autoetichettanti: <input type="reset">, <input type="submit">
    Elementi nascosti, che non sono visibili per l'utente: es. <input type="hidden">

---

Guarda un esempio pratico

---

Modulo tramite client di posta

In un modulo tramite client di posta, l'utente compila tutti campi richiesti, clicca sul pulsante per inviare il modulo e il suo browser comanda l'apertura del client di posta configurato sul computer, trovando i campi prestabiliti già compilati e la mail pronta da inviare.
Per avere un modulo di questo tipo, potete utilizzare un codice come questo: "Codice-01"

Aggiungiamo un po' di stile per migliorare l'aspetto: "Codice-02"

Alla fine, il modulo ottenuto sarà come in questa immagine: Naturalmente, con le dimensioni appropriate.

Modulo tramite server

Per creare un modulo tramite server, le cose si complicano un tantino, ma niente paura, basta un po' di attenzione.
Un modulo tramite server gestisce l'invio della posta direttamente, vale a dire che il messaggio inviato sarà spedito immediatamente dopo il click sul bottone di invio effettuato dall'utente e senza alcun altro intervento da parte del medesimo.
Un modulo di questo tipo non si può ottenere solo con il linguaggio HTML, ma bisogna utilizzare anche un linguaggio lato server. Nello specifico, utilizzeremo PHP, perchè è il linguaggio più conosciuto e supportato da tutti i servizi di hosting.
Prima di tutto, sostieni il sito con una piccolissima donazione e scarica il file zip che contiene la cartella del modulo Scarica.
In caso di problemi con il download, Contattami.
I file necessari per creare questo modulo sono quattro:

1. Il file "contact.html" che contiene il codice del modulo
2. Il file "contact.php" che contiene il codice php di collegamento con il server
3. Il file "thankyou.html" per il ringraziamento e la conferma di invio
4. Il file "contact.css" che contiene le regole di stile

Aprendo il file "contact.html" noterete, nella parte iniziale del codice del form, una differenza fondamentale rispetto al modulo precedente:

Come evidenziato in verde, la "action" non porta più all'indirizzo email di destinazione, ma al file contact.php. Questo collegamento non va modificato!

Aprendo il file "contact.php", troverete il campo da completare con l'indirizzo (al posto di mail@mail.com) al quale volete ricevere la notifica e che può essere un qualunque indirizzo di posta elettronica:

Più sotto, troverete il campo in cui inserire l' indirizzo della vostra casella di posta creata con la mailbox del vostro servizio di hosting (es: info@nomedominio.com):

Non entrerò nel dettaglio della costruzione del codice php, perchè questo presupporrebbe competenze che non sono trattate in questa guida.
Con un po' di intuizione e con alcune indicazioni presenti nel codice stesso, sarete sicuramente in grado di compilare le voci necessarie.

In questo form sono inseriti due filtri antispam, uno visibile e uno invisibile. Il filtro visibile consiste in un captcha che si rinnova ad ogni caricamento della pagina. Il filtro invisibile, invece, inganna i programmi degli spammer mettendo un campo nel modulo che solo loro possono vedere e che, se compilato, porta all'errore.
Inoltre, è presente un filtro che non permette di inserire link nel testo del messaggio.

In questo form è presente la casella per il consenso al trattamento dei dati personali, come previsto dalla legge.

Aprendo il file "thankyou.html" potrete personalizzare il messaggio che apparirà all'utente dopo l'invio.

Caricate la cartella con i file nel vostro spazio hosting e create un link per raggiungere il file contact.html che aprirà il modulo per i vostri utenti.

Alla fine, il modulo ottenuto sarà come in questa immagine: Naturalmente, con le dimensioni appropriate.
NOTA: i numeri del captcha saranno visibili solo nel modulo online.

Se avete seguito i passi della mia guida per creare un sito da zero, sarete in grado di personalizzare la grafica sia del modulo che della pagina di ringraziamento.

ATTENZIONE:: Alcune caselle di posta potrebbero non riconoscere il mittente come valido e bloccare il messaggio, o metterlo nello spam, controllate.
Inoltre, sarebbe bene testare il vostro indirizzo di posta elettronica tramite lo strumento "https://www.mail-tester.com/ e contattare l'assistenza del vostro servizio di posta in caso il risultato non fosse soddisfacente.
Alcune caselle di posta, nelle impostazioni avanzate per la visualizzazione dei messaggi, offrono la scelta del "set di caratteri predefinito". In questo caso, è opportuno scegliere UTF-8 (Unicode), al fine di avere una corretta lettura del testo.

Altri tipi di moduli, moduli avanzati e varie

Visitando la pagina I moduli troverai moduli per ogni esigenza. Torna alla pagina principale:Creare un sito da zero ->>