Il modulo di contatto

Come creare un modulo di contatto per il proprio sito web
Sommario:
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, scaricate il file zip che contiene la cartella del modulo Scarica.
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:
<form class="form-contact" action="contact.php" method="post" enctype="multipart/form-data">

Come evidenziato in verde, la "action" non porta più all'indirizzo email di destinazione, ma al file contact.php.
Questa è l'unica differenza sostanziale, a parte il numero e la varietà delle voci che, in questo modulo, ho voluto rendere già più complete, ma che potete arricchire anche nel modulo precedente.

Aprendo il file "contact.php", troverete il campo da completare con il vostro indirizzo email (ho aggiunto il mio, evidenziato in verde, per una migliore comprensione):
//Defining mail settings
        $to = "info@lachiavenelpozzo.com";

Non entrerò nel dettaglio del codice php, perchè presupporrebbe competenze che non sono trattate in questa guida.
Con un po' di intuizione, però, sarete sicuramente in grado di modificare e personalizzare le voci del modulo come preferite.

In questo form sono inseriti due filtri antispam, uno visibile e uno invisibile. Il filtro visibile consiste di 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.

NOTA: i filtri antispam sono efficaci, ma non possono garantire la totale sicurezza. Nel caso vengano superati, potete modificare il nome (e il percorso) del file html contenente il modulo.

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.
Aprendo il file "error.html" potrete personalizzare il messaggio che apparirà all'utente, qualora rispondesse in modo errato alla domanda posta nel filtro antispam visibile.

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.







Fammi sapere se questo argomento ti è stato utile.
Se non ti è stato utile, potrai inviare le tue osservazioni. Grazie
Ti è stato utile questo argomento?
Si
No



Elenco argomenti di questa guida:
Torna alla pagina principale:Creare un sito da zero ->>


E molto altro ancora se leggi:
Tutti gli argomenti