In questa guida approfondiamo un argomento di interesse per molti utenti: come modificare e personalizzare il layout di Contact Form 7.
Questo plugin è stato installato più di 5 milioni di volte dalla Community WordPress, un numero davvero considerevole, e gode di ottime valutazioni.
Se sei alle prime armi o non hai mai sentito parlare dei “contact form” o form di contatto, sappi che si tratta semplicemente di una pagina o una finestra che i tuoi visitatori o clienti possono usare per contattarti e condividere informazioni con te.
Con Contact Form 7 puoi creare moduli di contatto (guida) e puoi abilitare filtri spam e sistemi d’identificazione bot come CAPTCHA.
Non sottovalutare l’importanza di avere uno più moduli di contatto sul tuo sito. Grazie a questo strumento puoi ridurre la “distanza” tra te e i tuoi clienti, migliorare la conversione dei visitatori in clienti e fornire un servizio di qualità.
Puoi avere diversi obiettivi per avviare una comunicazione con i tuoi utenti e di conseguenza avrai bisogno di ricevere dati diversi e creare form diversi.
Alcuni siti usano come punti di contatto solo l’indirizzo e-mail, sinceramente non è il massimo anche perché lasciando piena libertà all’utente puoi finire nel dover leggere e-mail molto prolisse e dover filtrare informazioni.
Utilizzando i form di contatto puoi guidare le informazioni e la conversazione con i tuoi utenti.
Ora vediamo come renderci la vita da webmaster facile con Contact Form 7.
Per prima cosa, diamo un’occhiata alla schermata di creazione dei moduli di contatto.
Come vedi, il contenuto del form è configurato mediante codici HTML che racchiudono i tag per i vari campi.
Per aggiungere un nuovo campo, ti basta cliccare sulla tipologia di informazione che vuoi richiedere all’utente e compilare il box che appare in sovrimpressione.
Ti faccio un esempio: per aggiungere un campo dove l’utente può inserire il suo numero di telefono, clicca su tel.
Quindi, spunta la voce Campo obbligatorio per renderlo un campo obbligatorio e lavora sulle altre opzioni avanzate.
Quando clicchi Inserisci Tag, il tag appare nei codici HTML. Ovviamente, devi ora formattarlo.
Come vedi nell’esempio, tutti i tag già presenti sono racchiusi tra i codici <label> e </label>, all’interno dei quali si trova anche un testo per indicare a cosa fa riferimento il campo.
I codici <label> servono a visualizzare le etichette ed i rispettivi campi in “blocchi”.
Personalizzare il formato del tuo modulo di contatto su questa schermata richiede conoscenze base di HTML.
Ovviamente, più sei bravo con l’HTML, maggiori saranno le personalizzazioni che potrai fare al layout del tuo form. Per riposizionare i campi all’interno del modulo, devi semplicemente spostare i tag. Sulla pagina, i campi avranno lo stesso ordine che hanno all’interno del codice HTML.
Prima di andare avanti voglio ricordarti inoltre che se hai bisogno di supporto di qualsiasi tipo sul tuo sito web puoi contattare la nostra assistenza WordPress. Ti risponderemo tempestivamente, aiutandoti a risolvere ogni tuo problema.
Nella schermata chiamata Email, puoi configurare le email di notifica che riceverai quando un utente invia il form. In questa sezione, è importante che tu inserisca i tag relativi alle informazioni che vuoi ricevere dagli utenti.
Mi spiego meglio: se ti interessa che nel corpo del messaggio sia incluso l’indirizzo email fornito dall’utente, dovrai inserire il tag [your-email].
Nella schermata Messaggi, puoi invece inserire i messaggi che appariranno nei vari casi di utilizzo del form. Per esempio, se un utente non inserisce tutte le informazioni, se ci sono problemi tecnici di invio del modulo, eccetera.
Infine, in Impostazioni aggiuntive puoi aggiungere degli snippet di codici per personalizzare il tuo form.
Ecco alcuni snippet che puoi usare:
demo_mode: on
Questo codice serve ad attivare la modalità “Demo” per il tuo form. Questo significa che il form sarà visibile e formattato come l’hai configurato, ma sarà solo una demo – cioè, non invierà i messaggi.
on_sent_ok: "alert('sent ok');" on_submit: "alert('submit');" Tra le virgolette, aggiungi i tuoi codici Javascript per far sì che venga compiuta una specifica azione quando il form è inviato con successo (nel primo caso), o quando il form è semplicemente inviato, indipendentemente dall’esito (nel secondo caso).
Ma come posso aggiungere la casella per l’accettazione del trattamento dei dati personali?
Essere in regola con le normative sulla privacy è importante. Ecco quindi la soluzione offerta da Contact Form 7. Semplicemente, quando ti trovi all’interno della schermata “Modulo” clicca il tag Accettazione.
Contact Form 7 è già configurato in modo che l’utente non possa inviare il form senza spuntare la casella di accettazione. Ci sono poi altre opzioni interessanti:
Veniamo ora al sodo e parliamo di come personalizzare il look del tuo form di contatto.
In questo senso, Contact form 7 è un plugin abbastanza “intelligente”, in quanto sfrutta il più possibile i codici CSS del tuo sito al fine di dare ai moduli un look che sia coerente con le tue pagine.
Se però vuoi personalizzare il form, dovrai creare delle tue regole CSS.
Dove inserire i codici CSS?
Hai diverse possibilità:
Come avrai capito, personalizzare il look dei moduli Contact Form 7 richiede alcune conoscenze di CSS. Se non hai mai utilizzato questo linguaggio di programmazione, per prima cosa ti consiglio di leggere questa guida al CSS.
La classe dei moduli creati con Contact Form 7 è .wpcf7
Per personalizzare l’intero form (per esempio, cambiando lo sfondo o il font), ti basterà creare delle regole .css che includono questa classe.
Ecco un esempio:
.wpcf7 {
background-color: #fff;
font: 15px arial, sans-serif;
} In questo caso, tutto il modulo avrebbe uno sfondo bianco e scritte in font Arial di dimensione 15 pixel.
Poi puoi personalizzare specifiche tipologie di campi.
In generale, i campi Contact Form 7 hanno un selettore chiamato input.
Ogni tipologia di campo si distingue nel seguente modo:
Ti faccio un altro esempio: se volessi rendere arrotondati i bordi del campo per l’inserimento dell’email, dovresti usare questi codici:
input[type=”email”] {
border-radius: 7px;
} Contact Form 7 ha introdotto una funzionalità molto interessante per la personalizzazione di singoli campi all’interno del form.
Quando aggiungi un tag al modulo, puoi specificare al suo interno un ID o una classe a tua scelta, inserendoli negli appositi campi.
Il codice generato include i valori id:mioid class:miaclasse.
Specificati classe o ID, puoi scrivere le tue regole CSS come sempre.
In questo caso, se volessi rendere verde lo sfondo del campo email, dovresti usare questo codice:
#mioid {
background-color: #FF0000
} Come vedi, le regole CSS sono specifiche da caso a caso.
Se vuoi apportare una modifica specifica al tuo modulo creato con Contact Form 7, ti consiglio di lasciare un commento qui sotto.
Faremo il possibile per aiutarti ad integrarlo correttamente.
Siamo arrivati alla fine di questo post su come modificare e personalizzare il layout di Contact Form 7.
Se usi questo plugin da qualche tempo, sicuramente avrai notato come sono cambiate le pagine per la costruzione dei form.
L’unico modo per personalizzare l’aspetto dei moduli creati con Contact Form 7 è attraverso il CSS.
Questa caratteristica offre massima flessibilità, però potrebbe anche porre delle limitazioni a chi non ha conoscenze di programmazione.
In ogni caso, ti consiglio di imparare almeno le basi di HTML e CSS, in quanto sicuramente ti saranno utili per personalizzare tutto il tuo sito WordPress – non solo i form di contatto!
Come al solito, se hai qualunque domanda o commento, non esitare a lasciare un messaggio qui sotto.
Ti risponderemo il prima possibile.
Anche per il mese di aprile sul portale WordFence sono state segnalate e indicate diverse…
Avere un e-commerce può essere una avventura e, come in ogni avventura, puoi incontrare blocchi…
Con un post sul sito ufficiale, lo scorso 23 febbraio Adam Silverstein di WordPress ha…
Quando si costruisce un contenuto quello cui si sta particolarmente attenti sono le regole della…
Novità per i registranti di un dominio: dal 20 maggio 2024, Registro.it – che custodisce…
La situazione, che potremmo definire di leggero panico globale, che si è venuta a creare…