Siamo arrivati alla pagina finale del nostro sito Web, ovvero la pagina dedicata ai contatti che consentirà ai visitatori di effettuare una richiesta di informazioni. Questa pagina è una componente fondamentale in quanto svolge molteplici ruoli, dalla comunicazione con gli utenti al rafforzamento della credibilità fino al supporto del cliente. Una pagina "Contatti" ben progettata e facilmente accessibile può migliorare notevolmente la UX e la reputazione del sito Web.
Passiamo quindi alla pratica e partiamo dalla situazione attuale che è la seguente.
Sviluppo della pagina contatti di un sito Web
Nelle scorse lezioni abbiamo inserito la Google Map grazie alla quale i visitatori potranno capire dove siamo e raggiungerci in modo semplice e comodo.
Ora dobbiamo organizzare il layout di pagina predisponendo le aree nelle quali saranno contenute le informazioni principali di contatto come il numero di telefono e l'indirizzo e-mail. Predisporremo anche un form di contatto rapido che consentirà di inviare un'e-mail attraverso il sito Web. Apriamo il file chiamato page-contatti.php presente nella folder di lavoro del nostro sito ed andiamo ad integrare le due nuove macro aree.
<div id="wrapper_contact">
<div id="wrapper_contact_i">
<div class="wrapper_contact_left">
<div class="wrapper_contact_left_i">
</div>
</div>
<div class="wrapper_contact_right">
<div class="wrapper_contact_right_i">
</div>
</div>
<div class="clr"></div>
</div>
</div>Ovviamente diamo anche uno stile per capire meglio quello che stiamo realizzando.
#wrapper_contact{
margin-bottom: 50px;
}
.wrapper_contact_left{
width: 50%;
height: 400px;
position: relative;
float: left;
background-color: #f1f1f1;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper_contact_right{
width: 50%;
height: 400px;
position: relative;
float: left;
background-color: #ccc;
display: flex;
align-items: center;
justify-content: center;
}
Ora abbiamo costruito la griglia che conterrà i nuovi elementi, inseriamo quindi i primi riferimenti di contatto.
<div class="wrapper_contact_left">
<div class="wrapper_contact_left_i">
<p><strong>Siamo a tua disposizione</strong></p>
<p>Tel: <a href="tel:+390000000000">+39 000 0000000</a></p>
<p>E-mail: <a href="mailto:info@nomeazienda.com">info@nomeazienda.com</a></p>
</div>
</div>
.wrapper_contact_left p{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
.wrapper_contact_left p strong{
font-size: 21px;
}
.wrapper_contact_left a{
color: #5400ff;
text-decoration: none;
}Il form di invio e-mail
Ora che abbiamo inserito le informazioni di contatto possiamo concentrarci sullo sviluppo del form di invio e-mail. Andiamo all'interno della dashboard di WordPress ed installiamo un nuovo plugin: Contact Form 7.
Una volta terminata l'installazione andiamo all'interno della sezione del plugin e procediamo alla creazione di un nuovo modulo di contatto.
Come noterai nella schermata di default sono presenti alcuni campi standard tra cui il nome e l'indirizzo e-mail, obbligatorio per il corretto invio delle comunicazioni. All'interno di questa finestra possiamo scegliere quali campi dovranno essere presenti nel form di contatto.
Oltre ai campi proposti da CF7 da essa è possibile inserire anche del codice HTML in base alle nostre esigenze, il quale potrà essere richiamato all'interno del nostro file CSS e personalizzato a dovere. Procediamo quindi con la creazione del modulo di contatto e l'inserimento di tutto il necessario.
<div class="cinquanta"><div class="cinquanta_i">[text* your-name placeholder"Nome"]</div></div>
<div class="cinquanta"><div class="cinquanta_i">[text* your-surname placeholder"Cognome"]</div></div>
<div class="cinquanta"><div class="cinquanta_i">[email* your-email placeholder"E-mail"]</div></div>
<div class="cinquanta"><div class="cinquanta_i">[text* your-phone placeholder"Telefono"]</div></div>
<div class="cento"><div class="cento_i">[textarea your-messaggio placeholder"Messaggio"]</div></div>
<div class="form-input form-privacy">
[acceptance privacy]<p>Accetto la Privacy Policy</p>
</div>
<div class="cento input_invia"><div class="cento_i">[submit "Invia"]</div></div>
Come noterai abbiamo previsto oltre ai campi principali (nome, cognome, e-mail, telefono e messaggio) anche un campo dedicato alla privacy policy.
Privacy policy e form di contatto
La necessità di inserire una privacy policy all'interno di un form di contatto dipende dalle leggi e dai regolamenti sulla privacy dei dati applicabili nella tua giurisdizione e dalle politiche della tua organizzazione. All'interno dell'Unione Europea è generalmente obbligatorio fornire una privacy policy, o informativa sulla privacy, quando si raccolgono e si trattano dati personali. Questo requisito è in gran parte disciplinato dal Regolamento Generale sulla Protezione dei Dati (GDPR), che è entrato in vigore il 25 maggio 2018. Pertanto ti consiglio di informarti in merito alle informazioni che dovranno essere contenute all'interno della privacy policy attraverso un consulente o un'azienda specializzata.
La stilizzazione del form
Proseguiamo con la stilizzazione del nostro form chen a questo punto possiamon eseguire direttamente tramite il file CSS style.css.
/*contact form*/
span.wpcf7-list-item { margin: 0px;}
.cento.submit input.wpcf7-submit {
width: 100%;
height: auto;
display: inline-block;
border: none;
padding: 10px 15px;
font-size: 23px;
font-family: 'Lato', sans-serif;
background-color: #cd000b;
text-transform: uppercase;
color: #fff;
margin-top: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.cento.submit input.wpcf7-submit:hover{ background-color:#0f609b;}
.privacy a{ font-family: 'Lato', sans-serif; font-size:16px; line-height:21px; color:#cd000b; text-decoration:none;}
.cento textarea, .cinquanta input{
font-family: 'Lato', sans-serif;
font-weight: 300;
}
.cento textarea {
height: 200px;
width: 93%;
border: none;
background-color: transparent;
border-bottom: 2px solid #111;
font-size: 16px;
padding-left: 10px;
padding-right: 5%;
padding-top: 10px;
resize: none;
color: #111;
font-weight: 300;
}
.cento {
margin-bottom: 5px;
clear: both;
}
.cento_i{ padding:0px 15px;}
.cinquanta{ width:50%; position:relative; float:left;}
.cinquanta_i{ padding:0px 15px;}
.cinquanta input {
height: 50px;
width: 95%;
border: none;
background-color: transparent;
border-bottom: 2px solid #111;
font-size: 16px;
padding-left: %;
padding-right: 0px;
font-weight: 300;
}
.cinquanta input::placeholder, .cento textarea::placeholder{ color: #111; font-weight: 300; font-size: 18px;}
.cinquanta {
margin-bottom: 0px;
}
.cento_i {
padding-top: 1px;
}
.container .cento p{ text-align:left;}
.privacy_1{ margin-right:5px;}
.privacy_1, .privacy_2{ display:inline-block; float:left;}
.input_invia{ text-align:center; margin-top:20px;}
.input_invia input[type=submit] {
background-color: #0b8d46;
border: none;
text-transform: uppercase;
font-size: 18px;
line-height: 25px;
color: #fff;
padding: 15px 20px;
height: auto !important;
width: 150px;
}
/* Privacy */
.form-privacy {
position: relative;
padding: ;
text-align: left;
width: 100%;
display: flex; align-items: center; justify-content: flex-start;
}
span.wpcf7-list-item { display: inline-block; margin: 0; line-height: 0; }
.form-privacy input[type=checkbox] {
-webkit-appearance: none;
border: 1px solid #ddd;
margin: 0;
width: auto;
background-color: transparent;
white-space: nowrap;
padding: 14px;
overflow: hidden;
}
.form-privacy input[type=checkbox]:checked {
background: url(../images/check.png);
background-repeat: no-repeat;
background-position: center;
background-size: 21px;
background-color: #f1f1f1;
}
.form-privacy p {
padding: ;
margin: 0;
margin-left: 10px;
}
.form-privacy p, .form-privacy a {
display: inline-block;
font-size: ;
line-height: 1;
color: #111;
}
/* Privacy */
/*contact form*/Il form nella pagina dei contatti
A questo punto non rimane che richiamare il form di contatto all'interno della pagina dei contatti. Apriamo la pagina page-contatti.php ed inseriamo il seguente shortcode nel <div> wrapper_contact_right aggiornando il codice in questo modo.
<div class="wrapper_contact_right">
<div class="wrapper_contact_right_i">
</div>
</div>Lo shortcode inserito è visibile all'interno del modulo di WordPress.
Vediamo il risultato ottenuto:
Ora non rimane che proseguire nella configurazione per finalizzare il funzionamento del form di contatto. Torniamo quindi all'interno della dashboard di WordPress ed andiamo all'interno della seconda tab chiamata "menu". Da qui possiamo impostare i parametri dell'invio e-mail, selezionando l'indirizzo di partenza oltre che il messaggio che riceveremo ogni qualvolta un utente completerà il modulo.
Impostiamo ora la mail che riceveremo come riepilogo a seguito di ogni invio.
Da: [your-name]
Nome:
[your-name]
Cognome:
[your-surname]
E-mail:
[your-email]
Telefono:
[your-phone]
Messaggio:
[your-messaggio]
Privacy Policy:
[acceptance-privacy] il [_date], alle ore [_time]
--
Questa e-mail è stata inviata dal modulo di contatto del sito [_site_title] ([_site_url])
In questo modo potremo ricevere tutti i dati inseriti dagli utenti durante la compilazione del modulo di contatto. Infine all'interno dell'ultima parte è possibile impostare una mail automatica da inviare agli utenti come conferma della ricezione e-mail.
Ora non rimane che personalizzare a piacimento il modulo di contatto utilizzando HTML e CSS senza alcun limite.