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.

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.
Bisogna precisare che ciò non si può ottenere solo con il linguaggio HTML, ma bisogna utilizzare, in parte, anche un linguaggio lato server. Nello specifico, utilizzeremo PHP, perchè è 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!
Ho voluto rendere le voci di questo modulo più complete, ma potete aggiungerle anche nel modulo precedente lato client.

Aprendo il file "contact.php", troverete il campo da completare con il vostro indirizzo email (qui sotto ho aggiunto il mio, evidenziato in verde, per una migliore comprensione):

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.

Infine, se avete seguito tutti i passi della mia guida per creare un sito da zero, sarete in grado di personalizzare la grafica della pagina di ringraziamento e di quella di errore secondo il layout del vostro sito web.

INFO: Alcune caselle di posta potrebbero non riconoscere il mittente come valido e bloccare il messaggio, o metterlo nello spam. La cosa migliore è collegare il modulo alla casella di posta fornita dallo stesso hosting che ospita il sito.
Dopo aver configurato tale casella sul proprio hosting, è anche opportuno testarla tramite lo strumento "https://www.mail-tester.com/ e contattare l'assistenza in caso il risultato non fosse soddisfacente.
Inoltre, 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.

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">

Altri tipi di moduli, moduli avanzati e varie

Visita la pagina I moduli
Potrai scaricare moduli per ogni esigenza, registrandoti come membro, o con una piccola donazione.
Troverai: Torna alla pagina principale:Creare un sito da zero ->>