Contact Form 7 è sicuramente uno dei plugin di WordPress più apprezzato per la creazione di form di contatto. Di seguito, qualche suggerimento utile per migliorare l’esperienza d’uso ed estendere qualche funzionalità:
Impostare il valore di un campo data
con la data corrente (o con una data qualsiasi)
Aggiungere nella pagina un javascript come il seguente:
<script>
jQuery(function ($) {
var now = new Date();
var day = (“0” + now.getDate()).slice(-2);
var month = (“0” + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear()+”-“+(month)+”-“+(day);
$(‘#datePicker’).val(today);
$(“#datePicker”).attr(“min”, today);
});
</script>
Definire il controllo data con l’ID utilizzato nel javascrip (oppure ovviamente viceversa)
[date* your-date class:required id:datePicker]
Creare un form responsive a 2 colonne
Esempio di codice HTML del form:
<div id=”responsive-form” class=”clearfix”>
<div class=”form-row”>
<div class=”column-half”>First Name [text* first-name]</div>
<div class=”column-half”>Last Name [text* last-name]</div>
</div><div class=”form-row”>
<div class=”column-half”>Email [email* your-email]</div>
<div class=”column-half”>Phone [text* your-phone]</div>
</div><div class=”form-row”>
<div class=”column-full”>Subject [text* your-subject]</div>
</div><div class=”form-row”>
<div class=”column-full”>Your message [textarea your-message]</div>
</div><div class=”form-row”>
<div class=”column-full”>[submit “Send”]</div>
</div></div><!–end responsive-form–>
Impostare il CSS dei tag DIV come segue:
#responsive-form{
max-width:600px /*– change this to get your desired form width –*/;
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-half, .column-full{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after {
content: “”;
display: table;
clear: both;
}/**—————- Media query —————-**/
@media only screen and (min-width: 48em) {
.column-half{
width: 50%;
}
}
Impostare il CSS del FORM con questi stili oppure a piacimento:
.wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.wpcf7 input[type=”text”]:focus{
background: #fff;
}
.wpcf7-submit{
float: right;
background: #CA0002;
color: #fff;
text-transform: uppercase;
border: none;
padding: 8px 20px;
cursor: pointer;
}
.wpcf7-submit:hover{
background: #ff0000;
}
span.wpcf7-not-valid-tip{
text-shadow: none;
font-size: 12px;
color: #fff;
background: #ff0000;
padding: 5px;
}
div.wpcf7-validation-errors {
text-shadow: none;
border: transparent;
background: #f9cd00;
padding: 5px;
color: #9C6533;
text-align: center;
margin: 0;
font-size: 12px;
}
div.wpcf7-mail-sent-ok{
text-align: center;
text-shadow: none;
padding: 5px;
font-size: 12px;
background: #59a80f;
border-color: #59a80f;
color: #fff;
margin: 0;
}
Formattare un campo data nella mail
La formattazione della data nel Date Picker di contact form viene effettuata secondo specifiche di HTML5 in questo modo: YYYY-MM-DD (Es. 2013-04-15).
Quello che non vogliamo però è che l’utente che riceve la mail si trovi una data in formato insolito che può generare anche incomprensioni tra giorno e mese per chi non ne conosce la sequenza di formattazione.
Possiamo ovviare a questo problema utilizzando una semplice sintassi si formattazione del campo con il prefisso “_format_” davanti al nome del campo:
[_format_{field name} “{date format}”]
In questo modo, nella mail la data verrà formattata come richiesto dal programmatore.
I tipi di formattazione possibili per le date, sono quelli utilizzati da PHP e possono essere trovati a questo indirizzo:
http://us1.php.net/manual/en/function.date.php
Esempio:
[_format_your-date “D, d M Y”] – Risultato: Mer, 25 Gen 2017
Alcune veloci variazioni a questa formattazione:
m – indica il mese in formato numerico
y – indica l’anno di sole 2 cifre
Campi con visualizzazione condizionale
Ovvero, come visualizzare campi da riempire solo con alcune selezioni.
Quante volte capita di dover inserire nei form campi che vorremmo nascondere perché da compilare solo in certe situazioni?
Il seguente plugin ci viene in aiuto a questo scopo:
Contact Form 7 Conditional Fields – di Jules Colle
Permette di creare delle sezioni del form che possono comparire o scomparire in base a selezioni su altri campi.
Il funzionamento è molto semplice ed intuitivo; si crea una sezione, si associa ad una o più condizioni dei campi presenti nel form, si inseriscono i dati da nascondere/visualizzare all’interno dello shortcode di gruppo: [group-name] … [/group-name]
Redirezione del form a una pagina personalizzata
Il messaggio di conferma di spedizione della mail non sempre è visibile quanto vorremmo. Potremmo lavorare sui CSS per personalizzarne la formattazione oppure utilizzare questo plugin per dare la possibilità al form di cambiare pagina e finire su una pagina di conferma di invio dedicata.
Contact Form 7 – Success Page Redirects – di Ryan Nevius
Con l’aggiunta di una semplice finca nella configurazione del form, abbiamo la possibilità di specificare una pagina di destinazione a seguito dell’invio dei dati.
