Come stilizzare i moduli di Contact Form 7 in WordPress

Probabilmente hai installato Contact Form 7 sul tuo sito WordPress perché è gratuito ed è stato uno dei plugin per moduli di contatto più popolari per WordPress.

Tuttavia, potresti aver notato che i moduli predefiniti appaiono piuttosto semplici sul tuo sito live. Quello stile grigio di base può stonare con il resto del tuo sito e far sembrare il design generale meno curato.

Poiché Contact Form 7 non include un editor visivo o opzioni di stile integrate, apportare modifiche richiede un po' di lavoro se non ti senti a tuo agio con il codice.

La buona notizia è che non devi essere uno sviluppatore per risolvere questo problema. Con solo pochi ritocchi CSS, puoi rendere i tuoi moduli puliti, moderni e completamente in linea con il tuo brand.

In questa guida per principianti, ti mostreremo come personalizzare Contact Form 7 passo dopo passo, senza alcuna competenza avanzata di codifica o design. 🙌

Perché stilizzare i tuoi moduli di Contact Form 7?

Lo styling dei tuoi moduli Contact Form 7 rende il tuo sito più professionale, migliora la leggibilità e aiuta i tuoi moduli a corrispondere al tuo brand. Tutto ciò può aumentare la fiducia e le conversioni dei moduli.

Prima di iniziare, Contact Form 7 è uno dei plugin per moduli di contatto più popolari per WordPress. È gratuito e ti consente di aggiungere un modulo WordPress utilizzando uno shortcode.

Lo svantaggio è che Contact Form 7 è piuttosto limitato in termini di design e funzionalità di personalizzazione. Inoltre, non offre opzioni integrate per modificare lo stile dei tuoi moduli.

Ciò rende difficile abbinare il design del tuo modulo di contatto al tuo tema del sito web o modificare dettagli di base come il carattere e il colore di sfondo per far risaltare il tuo modulo.

Ancora più importante, il plugin ha bloccato lo sviluppo di nuove funzionalità, il che significa che non riceverà aggiornamenti oltre alle correzioni di bug critici e alle patch di sicurezza.

Detto questo, ora vedremo come stilizzare un modulo Contact Form 7 in WordPress. Ecco cosa tratteremo nelle seguenti sezioni:

Iniziamo!

Iniziare con Contact Form 7

Innanzitutto, dovrai installare e attivare il plugin Contact Form 7 sul tuo sito web.

Per fare ciò, dirigiti su Plugin » Aggiungi nuovo plugin nella tua area di amministrazione di WordPress.

Questo aprirà la pagina in cui puoi scegliere un plugin dalla directory dei plugin di WordPress.

Procedi e utilizza la funzione di ricerca per trovare rapidamente il plugin. Quindi, puoi fare clic sul pulsante 'Installa ora' nel risultato della ricerca.

Non dimenticare di fare clic sul pulsante 'Attiva' per abilitarlo sul tuo sito WordPress. Se hai bisogno di aiuto, consulta la nostra guida su come installare un plugin WordPress.

Dopo l'attivazione, puoi accedere a Contatti » Aggiungi nuovo dalla tua bacheca di WordPress.

Ora puoi modificare le impostazioni del modulo per il tuo sito web e iniziare inserendo un titolo per il tuo modulo.

Il plugin aggiungerà automaticamente i campi predefiniti per nome, indirizzo email, oggetto e messaggio. Puoi anche aggiungere altri campi semplicemente trascinandoli e rilasciandoli dove desideri.

Quando hai finito, non dimenticare di fare clic sul pulsante 'Salva' e copiare lo shortcode.

La prossima cosa da fare è incorporare il modulo nel tuo post o pagina del blog.

Per farlo, modifica semplicemente un post o aggiungine uno nuovo.

Una volta nell'editor di WordPress, fai clic sul segno '+' in alto e quindi aggiungi un blocco Shortcode.

Successivamente, semplicemente inserisci lo shortcode per il tuo modulo Contact Form 7 nel blocco shortcode. Sarà simile a questo:

[contact-form-7 id="117" title="Contact Form"]

Ora, procedi e pubblica il tuo post o la tua pagina per vedere il modulo di contatto in azione.

Per questo tutorial, abbiamo utilizzato il modulo di contatto predefinito e lo abbiamo aggiunto a una pagina WordPress. Questo è l'aspetto del modulo di contatto sul nostro sito di prova.

Ora sei pronto per personalizzare il tuo modulo Contact Form 7 in WordPress.

Metodo 1: Stilizzare i moduli Contact Form 7 utilizzando CSS personalizzato

Poiché Contact Form 7 non dispone di opzioni di stile integrate, dovrai utilizzare CSS per personalizzare i tuoi moduli.

Contact Form 7 aggiunge classi CSS e ID standard agli elementi del modulo. Questo rende più facile personalizzare il design se conosci un po' di CSS.

Ogni modulo Contact Form 7 utilizza la classe CSS .wpcf7, che puoi usare per stilizzare il tuo modulo.

In questo esempio, useremo un font personalizzato chiamato Lora nei nostri campi di input e cambieremo il colore di sfondo del modulo. Assicurati che questo font sia caricato dal tuo tema WordPress, o semplicemente cambia 'lora' con un font che il tuo tema utilizza già:

.wpcf7 {
  background-color: #fbefde;
  border: 1px solid #f28f27;
  padding: 20px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  background-color: #725f4c;
  color: #FFF;
  font-family: lora, sans-serif;
  font-style: italic;
}

.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
  background-color: #725f4c;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
}

Puoi aggiungere facilmente questo CSS andando su Aspetto » Personalizza » CSS aggiuntivo nella tua dashboard di WordPress.

Se hai bisogno di ulteriore aiuto, consulta la nostra guida su come aggiungere facilmente CSS personalizzato a un sito WordPress.

Questo è l'aspetto del nostro modulo di contatto dopo aver applicato questo CSS.

Stile di più moduli Contact Form 7

Se stai utilizzando più moduli di contatto e desideri stilizzarli in modo diverso, puoi utilizzare l'ID univoco che Contact Form 7 genera per ciascun modulo.

Lo svantaggio del CSS che abbiamo utilizzato sopra è che verrà applicato a tutti i moduli Contact Form 7 sul tuo sito web.

Per iniziare, apri semplicemente la pagina contenente il modulo che desideri modificare. Quindi, fai clic con il pulsante destro del mouse sul primo campo del modulo e seleziona l'opzione 'Ispeziona'.

Non preoccuparti se il codice sembra complesso; devi solo trovare una riga specifica.

Si aprirà un pannello Strumenti per sviluppatori in basso o di lato allo schermo, mostrando il codice HTML della pagina. In questo pannello, devi individuare la riga di inizio del codice del modulo.

Come puoi vedere nello screenshot sopra, il codice del nostro modulo di contatto inizia con la riga:

<div role="form" class="wpcf7" id="wpcf7-f113-p114-o1" lang="en-US" dir="ltr">

L'attributo ID è un identificatore univoco generato da Contact Form 7 per questo particolare modulo. È una combinazione dell'ID del modulo e dell'ID del post in cui è aggiunto questo modulo.

Utilizzeremo questo ID nel nostro CSS per stilizzare solo questo specifico modulo di contatto. Nel codice seguente, sostituisci il codice standard .wpcf7 con il tuo ID univoco (ad esempio, #wpcf7-f113-p114-o1).

div#wpcf7-f113-p114-o1{
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
#wpcf7-f113-p114-o1 input[type="text"],
#wpcf7-f113-p114-o1 input[type="email"],
#wpcf7-f113-p114-o1 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, "Open Sans", sans-serif;
font-style:italic;
}
#wpcf7-f113-p114-o1 input[type="submit"],
#wpcf7-f113-p114-o1 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

Tieni presente che devi utilizzare l'ID generato sul tuo sito, altrimenti il CSS non funzionerà. Inoltre, poiché questo ID include l'ID specifico della pagina (come p114), se in futuro sposterai questo modulo di contatto su una pagina diversa, dovrai aggiornare il tuo CSS con il nuovo ID.

Ora puoi ripetere questo processo per ogni modulo che desideri personalizzare, sostituendo l'ID con quello generato per quel modulo specifico.

Styling dei moduli in base allo stato di invio

Contact Form 7 aggiunge automaticamente classi CSS al tuo modulo in base alle interazioni dell'utente, consentendoti di stilizzare messaggi di successo, stati di errore e stati di caricamento in modo diverso.

Ecco le classi di stato che Contact Form 7 applica:

• .wpcf7-init — Stato iniziale (prima dell'interazione dell'utente)
• .wpcf7-sent — Modulo inviato con successo
• .wpcf7-failed — Invio fallito (errore del server)
• .wpcf7-invalid — Modulo con errori di validazione
• .wpcf7-spam — Invio contrassegnato come spam
• .wpcf7-aborted — Invio annullato dall'utente

Esempio: Stile di invio modulo riuscito con bordo verde:

div.wpcf7.wpcf7-sent {
    border: 3px solid #4caf50;
    background-color: #e8f5e9;
    padding: 20px;
}

Esempio: Stile degli errori di validazione con bordo rosso:

div.wpcf7.wpcf7-invalid {
    border: 3px solid #f44336;
    background-color: #ffebee;
}

Esempio: Aggiungi un sottile indicatore di caricamento:

div.wpcf7.wpcf7 form.submitting {
    opacity: 0.7;
    pointer-events: none;
}

Queste classi di stato ti consentono di fornire un feedback visivo chiaro agli utenti, migliorando l'usabilità del modulo e l'esperienza utente.

Metodo 2: Stilizzare i moduli Contact Form 7 con CSS Hero

Un modo più semplice per cambiare lo stile dei moduli Contact Form 7 è utilizzare CSS Hero. Ti consente di modificare i tuoi moduli senza scrivere alcun CSS.

Abbiamo provato e testato questo plugin per vedere se è valido. Scopri tutto nella nostra recensione completa di CSS Hero.

Poiché CSS Hero è un plugin premium, dovrai prima creare un account CSS Hero sul loro sito web. Fai semplicemente clic sul pulsante ‘Get it now’, seleziona un piano e completa il processo di checkout.

Una volta fatto, otterrai la dashboard del tuo account CSS Hero, dove potrai trovare il file zip del tuo plugin e la chiave di licenza.

Ora puoi installare e attivare il plugin CSS Hero sul tuo sito web. Nella tua area di amministrazione di WordPress, vai su Plugin » Aggiungi Nuovo Plugin.

Puoi quindi fare clic sul pulsante ‘Carica Plugin’ per aprire l'uploader di file.

Dopo di che, fai semplicemente clic su ‘Scegli File’ e seleziona il file .zip del plugin.

Una volta caricato, puoi fare clic sul pulsante ‘Installa ora’ e poi su ‘Attiva’ quando appare. Per i dettagli, consulta la nostra guida su come installare un plugin di WordPress.

Dopo l'attivazione, puoi visitare la pagina contenente il tuo modulo sul tuo sito web live. Vedrai un'opzione ‘Personalizza con CSS Hero’ nella barra degli strumenti di amministrazione in alto.

CSS Hero fornisce un'interfaccia facile da usare, point-and-click, per modificare il CSS senza scrivere alcun codice.

Utilizzando il plugin, puoi fare clic su qualsiasi campo, intestazione e altri elementi del tuo modulo e modificare il colore di sfondo, il carattere, i bordi, lo spazio e molto altro.

Dopo aver personalizzato il tuo modulo, fai semplicemente clic sul pulsante 'Salva e pubblica' in basso.

Suggerimento bonus 💡: Un modo senza codice per stilizzare i moduli WordPress

Se il CSS non fa per te, c'è un modo molto più semplice per creare moduli dall'aspetto accattivante in pochi minuti: WPForms. Mentre Contact Form 7 richiede conoscenze CSS per la personalizzazione, WPForms ti offre moduli dall'aspetto professionale subito pronti, senza richiedere alcuna codifica.

Perché gli utenti WPForms lo amano (rispetto a Contact Form 7)

WPForms è utilizzato da oltre 6 milioni di siti web ed è costantemente valutato come più facile da usare rispetto a Contact Form 7. Ecco perché:

• Creazione Moduli in 5 Minuti: Utenti reali segnalano di aver creato il loro primo modulo professionale in meno di 5 minuti utilizzando il generatore drag-and-drop. Nessuna curva di apprendimento CSS richiesta.
• Oltre 2.100 Modelli Predefiniti: Scegli tra migliaia di modelli di moduli pronti per moduli di contatto, sondaggi, registrazioni, pagamenti e altro ancora. Basta sceglierne uno e personalizzarlo.
• Generatore Moduli Potenziato dall'IA: Descrivi il tuo modulo in linguaggio naturale, ad esempio "Ho bisogno di un modulo di registrazione per conferenze con scelta dei pasti", e WPForms AI lo genererà istantaneamente.
• Design Professionale Senza Competenze di Design: I moduli hanno un aspetto pulito e rifinito sul tuo sito automaticamente, corrispondendo agli standard di design web moderno senza lavoro manuale di stilizzazione.
• Supporto Eccezionale: Quando hai bisogno di aiuto, ricevi risposte rapide ed esperte dal team di WPForms, a differenza di fare affidamento sui forum della community per i plugin gratuiti.

Come stilizzare un modulo in WPForms

Mentre crei il tuo modulo di contatto, vai alla sezione Impostazioni » Temi all'interno del generatore drag-and-drop di WPForms.

Una volta dentro, scegli tra oltre 40 temi bellissimi e predefiniti per abbinare istantaneamente il design del tuo sito.

Questi temi sono completamente personalizzabili. Puoi:

• Regolare dimensioni, bordi e colori dei campi
• Modificare font delle etichette, sotto-etichette e messaggi di errore
• Personalizza il pulsante di invio per abbinarlo al tuo brand

Ecco come potrebbe apparire sul tuo schermo:

In alternativa, puoi applicare un tema WPForms dall'editor a blocchi di WordPress.

Dopo aver aggiunto il tuo modulo a una pagina, apri il pannello delle impostazioni del blocco sulla destra e scorri fino alla sezione 'Temi'. Troverai quindi i temi di moduli integrati di WPForms, lo stesso elenco di quello all'interno del generatore di moduli.

Troverai anche opzioni di personalizzazione per il campo del modulo, l'etichetta, il pulsante, il contenitore e lo sfondo.

Per istruzioni passo passo, consulta la nostra guida su come personalizzare e stilizzare i moduli WordPress.

In conclusione: Se vuoi saltare il tutorial CSS e mettere online moduli professionali oggi stesso, WPForms è la tua migliore opzione. Ti fa risparmiare ore di lavoro di stilizzazione e offre risultati che sembrano creati da un designer.

FAQ: Stilizzare Contact Form 7 in WordPress

Se hai appena iniziato con Contact Form 7 o vuoi perfezionare il tuo design, queste rapide FAQ ti aiuteranno con le domande più comuni sullo stile.

Come posso stilizzare il pulsante di invio di Contact Form 7?

Puoi stilizzare il pulsante di invio di Contact Form 7 con CSS prendendo di mira la classe di invio predefinita .wpcf7-submit. Quindi aggiungi i tuoi stili personalizzati in Aspetto » Personalizza » CSS aggiuntivo.

Come configurare Contact Form 7 in WordPress?

Per configurare Contact Form 7, puoi aprire il tuo modulo, andare alla scheda 'Posta', impostare l'indirizzo 'A' (dove devono essere inviati i messaggi) e assicurarti che i tag di posta corrispondano ai campi del tuo modulo.

Contact Form 7 è gratuito?

Sì, Contact Form 7 è completamente gratuito da scaricare e utilizzare dalla directory ufficiale dei plugin di WordPress.org. Il plugin principale non costa nulla, anche se alcuni componenti aggiuntivi o integrazioni di terze parti opzionali potrebbero essere a pagamento.

Contact Form 7 è valido?

Contact Form 7 è un'opzione funzionale e ampiamente utilizzata se desideri un plugin per moduli gratuito e flessibile e non ti dispiace una configurazione leggermente più tecnica.

È potente se combinato con HTML personalizzato e CSS, ma non offre un builder visivo drag-and-drop, quindi le modifiche allo stile e al layout spesso richiedono la modifica del codice o l'uso di strumenti aggiuntivi.

Posso inserire Contact Form 7 in Canva per la modifica?

No, non puoi modificare un modulo Contact Form 7 all'interno di Canva perché Contact Form 7 è un plugin di WordPress e necessita di un ambiente WordPress per funzionare. Puoi, tuttavia, progettare l'aspetto del tuo modulo in Canva come mockup e poi ricreare quel design in WordPress.

Risorse aggiuntive per la personalizzazione dei moduli WordPress

Speriamo che questo articolo ti abbia aiutato a imparare come stilizzare i moduli Contact Form 7 in WordPress.

Potresti anche voler consultare le nostre altre utili guide su:

• Come aggiungere scelte di immagini nei moduli di WordPress
• Come aggiungere l'autocompletamento per i campi indirizzo in WordPress
• Suggerimenti per creare moduli più interattivi in WordPress
• Utilizzo della logica condizionale nei moduli WordPress
• Guida definitiva all'uso dei moduli WordPress

Se ti è piaciuto questo articolo, iscriviti al nostro Canale YouTube per tutorial video su WordPress. Puoi trovarci anche su Twitter e Facebook.