Pochi giorni fa abbiamo visto Come inserire un Contact Form su WordPress in pochi secondi. Oggi in particolare ci concentriamo sul plugin più famoso in merito. In questo articolo ti illustrerò come personalizzare il plugin Contact Form 7, sia per quanto riguarda il contenuto (i campi da inserire) sia per quantori guarda la forma (la resa visivia della form).
Il tutto cercando di rimanere il più semplici possibile e alla portata di tutti.
Iniziamo.
Indice
- Installare Contact Form 7 su WordPress.
- Personalizzare Contact Form 7: il contenuto.
- Personalizzare Contact Form 7: la forma.
- In conclusione, padroneggiare il Modulo di Contatto.
Installare Contact Form 7 su WordPress.
Come prima cosa concentriamoci sull’installazione di Contact Form 7. Da WordPress andiamo alla voce Plugin, quindi clicchiamo sul pulsante “Aggiungi nuovo”.
Nel campo di ricerca in alto a destra cerchiamo Contact Form 7 e una volta trovato clicchiamo su “Installa adesso”. Quindi attiviamo il plugin.
Ora possiamo creare il nostro primo form. Andiamo nella nuova voce Contatto e, una volta caricata la pagina, clicchiamo su “Aggiungi nuovo”.
Diamo un nome al nostro nuovo modulo e la prima fase è finita.
Personalizzare Contact Form 7: il contenuto.
A questo punto dovremmo aver davanti già una form pre-configurata per un modulo di contatto. Se non c’è ti basta crearne una. Quindi nella sezione Modulo ci dovrebbero essere quattro elementi label con all’interno un campo e un elemento submit.
Per ora ti consiglio di lasciare le cose scritte così come sono. Fra poco vedremo come modificarle al meglio. Nel momento in cui avrai bisogno di inserire nuovi campi (o di toglierli) ti faciliterai il lavoro utilizzando gli appositi pulsanti (quelli che vedi in Figura 1).
Inserire i campi della form nel modo corretto.
Per inserire nuovi campi all’interno del modulo ti basterà posizionare il cursore in uno spazio vuoto (preferibilmente tra le righe, come in Figura 2) e cliccare sull’apposito pulsante.
Facciamo un esempio. Diciamo che vuoi aggiungere il campo telefono. Allora non dovrai far altro che seguire l’indicazione qui sopra riportata e cliccare sul pulsante “tel”.
Nella finestra che si apre dovrai impostare rispettivamente un Nome, un eventuale valore predefinito e due eventuali attributi. Inoltre potrai rendere il campo obbligatorio.
Il nome lo puoi mettere a tuo piacimento e il valore predefinito sarà il valore che si vedrà all’interno del campo prima della sua compilazione.
Ti consiglio anche di compilare i due attributi come segue. L’Attributo Id sarà un nome univoco che userai esclusivamente per questo campo, quello class invece lo userai in ogni singolo campo che andrai ad inserire.
Come puoi vedere in Figura 3, ho compilato un campo telefono di prova. Il risultato è riportato nel tag in fondo alla finestrella. Nel mio caso particolare è:
[tel* your-phone id:phone-contact-form class:input-contact-form]Il campo è racchiuso da parentesi quadre e la prima parola identifica il tipo di input. L’asterisco quindi mi dice che il campo è obbligatorio. Di seguito vengono riportati rispettivamente Nome, Attributo Id e Attributo class.
Ora che hai capito come è formato ogni singolo campo, possiamo andare a modificare quelli pre-esistenti.
In particolare aggiungiamo class:input-contact-form come riportato in Figura 4. Sempre come vedi in figura, racchiudiamo anche il nuovo campo tel nella <label>, così come sono gli altri campi.
Aggiornare l’email con tutti i campi corretti.
Ci sono tanti altri campi che si possono inserire, ma il procedimento è sempre lo stesso. Quelli più comuni sono comunque quelli che già sono presenti nel Modulo.
Un’altra cosa importante da non trascurare è personalizzare l’email che ti arriverà con tutti i campi selezionati.
Infatti, appena un visitatore avrà compilato la form ti verrà inviata un’email con i dati che questo ti ha appena lasciato.
Per fare in modo che ti arrivi correttamente andiamo a verificare che sia tutto impostato correttamente alla voce Mail (a fianco a Modulo).
Per prima cosa ci interessa la Sezione A, che dovrà contenere l’email a cui verranno inviati i messaggi creati tramite la form.
Come seconda cosa, ma non meno importante, è verificare che nel Corpo del messaggio ci siano tutti i campi del modulo.
Come puoi vedere in Figura 5, ci sono tutti quelli di default tranne quello inserito da noi. Rimediamo subito aggiungendo anche quello.
Per farlo ti basterà inserire un paio di righe come riportato in Figura 6.
Ho aggiunto come segue.
Numero di telefono:
[your-phone]Puoi scrivere qui come ti pare, l’importante è che riporti tra parentesi quadre esattamente il nome che hai dato al nuovo campo tel. Se ricordi lo avevamo chiamato your-phone.
Se avessimo aggiunto più campi avremmo dovuto inserire poi anche quelli nel corpo del messaggio.
Bene, ora dovrebbe funzionare tutto quanto. La parte contenutistica dell’articolo è conclusa. Ora non ci rimane che verificare l’aspetto grafico del modulo.
Personalizzare Contact Form 7: la forma.
Per poter verificare la forma estetica del modulo dobbiamo prima inserirlo all’interno di una pagina. Per farlo dobbiamo recuperare lo shortcode della form.
Lo trovi subito sotto il nome dato al modulo di contatto. Per facilitarti puoi vedere in Figura 7 dove recuperarlo.
Una volta copiato ti basterà andare sulla pagina adibita a contenerlo e incollarlo all’interno come del semplice testo.
Mi raccomando, incollalo nella posizione in cui vuoi che compaia. Abbi quindi cura di dove posizionerai il tuo cursore.
Una volta inserito ti basterà caricare la pagina su una nuova scheda e verificare che il modulo si veda esattamente come ti aspettavi.
Personalizzare con i fogli di stile CSS.
Ora possiamo fare qualcosa di un pochino più avanzato. In questa sezione non sarò completamente esaustivo perché l’argomento è vasto e richiederebbe un approfondimento a sé.
Ti lascerò comunque dei cenni importanti che poi ti permetteranno di approfondire l’argomento in autonomia.
Andiamo a giocare un pochino con i CSS, ovvero con i fogli di stile che caratterizzano la parte estetica di ogni singolo Sito Web esistente.
Ogni elemento che vedi in un sito internet ha delle regole di stile. Ad esempio: sfondo grigio, bordo nero con angoli arrotondati, colore del testo, tipo di carattere ecc.
Oguna di queste voci avrà una corrispettiva regoletta CSS.
Non ti preoccupare se ad ora ti sembra poco chiaro il tutto. Per ora segui semplicemente le mie istruzioni.
Come in Figura 8, dal menu principale di WordPress vai alla voce Aspetto e quindi Personalizza. Ti si aprirà una finestra con tutte le opzioni del tema che hai installato. In fondo dovresti avere una voce “CSS aggiuntivo”.
Ottimo, cliccaci pure sopra.
Personalizzare esteticamente i campi con l’Attributo Class.
È giunto il momento di recuperare il concetto di Attributo ID e Attributo Class usati in precedenza. Ricordi? Li abbiamo inseriti all’interno di ogni singolo campo del modulo di contatto.
Ora è arrivato il momento di riutilizzarli.
Come riportato in Figura 9, dovresti ora aver la possibilità di scrivere del codice all’interno di un’area di testo.
Dobbiamo richiamare i nostri singoli campi e giocare con le proprietà CSS per cambiare il loro aspetto estetico. Per farlo ti basterà richiamare il nome dato all’Attributo Class preceduto da un punto (.input-contact-form). In questo modo andrai a modificare tutti i campi di quella classe.
Diciamo che vogliamo cambiare il colore di sfondo, del testo e del bordo. Ognuna di queste istruzioni occuperà una riga. Scriveremo:
.input-contact-form {
background-color: green;
color: white;
border: 2px solid black;
}Stiamo dicendo che tutti i campi che hanno classe .input-contact-form hanno 3 regolette estetiche. Queste vengono racchiuse tra parentesi graffe. La prima dice: colore sfondo è verde (nota la punteggiatura : e ;, da non trascurare). La seconda dice: colore del testo in bianco. La terza infine: bordo dev’essere spesso 2px, solido e nero.
Guarda in Figura 10. Nel mio caso non sembra abbia funzionato benissimo. Forse a te funzionerà da subito, ma dipende molto dalle regole che il tema installato sta utilizzando.
Se, come a me, ha applicato le regole solo ad alcuni campi (o a nessuno) devi aggiungere ancora una parola ad ogni singola riga: !important.
Mi raccomando, va inserita subito prima del punto e virgola, come riportato qui sotto.
.input-contact-form {
background-color: green !important;
color: white !important;
border: 2px solid black !important;
}Questa parola “magica” forza l’applicazione della regola. Bene, ora dovrebbe finalmente funzionare.
Personalizzare esteticamente i singoli campi con l’Attributo ID.
Ora… ipotizziamo che vogliamo modificare solamente un campo invece che applicare uno stile grafico a tutto il gruppo. Come poter fare?
Ecco che qui entra in gioco l’Attributo ID. Abbiamo detto che questo è univoco e viene rilasciato solamente per un solo campo.
Possiamo quindi richiamarlo nel nostro documento CSS e applicare uno stile solamente al campo a cui è stato associato.
Ipotizziamo di voler mettere lo sfondo rosso al campo tel creato poco sopra. Scriveremo qualcosa del genere.
#phone-contact-form {
background-color: red !important;
}Puoi notare come l’Attributo ID in questo caso venga richiamato con prima il cancelletto. In definitiva, per la classe si usa . e per l’Id si usa #. In Figura 11 puoi vedere il testo finora scritto e il risultato sul modulo di contatto.
Come ultimo consiglio, devi sapere che in un foglio di stile ciò che sta più in basso è più rilevante importante di ciò che gli sta sopra. In questo caso il colore di sfondo verde viene sovrascritto da quello rosso scritto nella nuova regola di stile data all’Attributo ID.
In conclusione, padroneggiare il Modulo di Contatto.
Bene, direi che siamo giunti finalmente alla fine di questo articolo.
Hai imparato come personalizzare il plugin Contact Form 7 creando dei moduli di contatto che siano completi sia nel contenuto che nella forma.
Ora sai come aggiungere dei campi e come personalizzarli al meglio. Non solo, ti ho voluto aggiungere una sezione anche sul CSS e come applicarlo ai singoli campi.
Come già accennato, questa seconda parte non è del tutto esaustiva ma ti permette di capire un po’ meglio come funziona il lato estetico di un sito web. In questo senso ti invito ad approfondire l’argomento su Google. Troverai tantissime altre simpatiche regole da aggiungere agli elementi di un sito! 🙂
P. S. In questo articolo ti spiego anche come adeguare al meglio e personalizzare Contact Form 7 per la normativa sulla privacy chiamata GDPR.
Leggendo anche questo articolo hai in mano le capacità di creare modulo di contatti completi, belli e conformi con le norme vigenti.
A presto!
