Tutorial WordPress affidabili, quando ne hai più bisogno.
Guida per principianti a WordPress
WPB Cup
25 Milioni+
Siti web che utilizzano i nostri plugin
16+
Anni di esperienza con WordPress
3000+
Tutorial WordPress di esperti

Come stilizzare i moduli di Contact Form 7 in WordPress

Probabilmente hai installato Contact Form 7 sul tuo sito WordPress perché è gratuito e ampiamente supportato.

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. 🙌

Come stilizzare Contact Form 7 in WordPress

Perché stilizzare i tuoi moduli di Contact Form 7?

Stilizzare i tuoi moduli Contact Form 7 rende il tuo sito più professionale, migliora la leggibilità e aiuta i tuoi moduli a corrispondere a il 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 per WordPress più popolari. È gratuito da usare e ti permette di aggiungere un modulo WordPress tramite shortcode.

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

Questo rende difficile abbinare il design del tuo modulo di contatto con il tuo tema del sito web o cambiare dettagli di base come il font e il colore di sfondo per far risaltare il tuo modulo.

📦 Suggerimento interno: Se desideri moduli più personalizzabili con funzionalità avanzate, ti consigliamo WPForms. Viene fornito con un costruttore di moduli drag-and-drop, strumenti AI, oltre 2.000 modelli di moduli predefiniti e numerose opzioni di personalizzazione.

In realtà utilizziamo WPForms per quasi tutti i nostri moduli: dal modulo di contatto di WPBeginner ai nostri sondaggi annuali per i lettori e al modulo di richiesta di migrazione del sito. Dai un'occhiata alla nostra recensione dettagliata di WPForms per vedere perché raccomandiamo vivamente questo costruttore di moduli.

Se hai un budget limitato, esiste una versione gratuita di WPForms. Include oltre 60 modelli, logica condizionale, pagamenti Stripe e altro ancora.

Abbiamo un confronto diretto tra Contact Form 7 e WPForms che puoi consultare!

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.

Il sottomenu Aggiungi nuovo plugin sotto Plugin nell'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.

Installazione di Contact Form 7

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.

Modifica le impostazioni di Contact Form 7

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.

Copia lo shortcode

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

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.

Aggiungi un blocco shortcode

Dopodiché, 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.

Anteprima modulo di contatto 7

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 stilizzare 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, utilizzeremo il font personalizzato chiamato Lora nei nostri campi di input e cambieremo il colore di sfondo del modulo:

div.wpcf7 { 
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
background:#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 bacheca 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.

Anteprima CSS personalizzato
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.

Lo schermo del browser si dividerà e vedrai il codice sorgente della pagina. Nel codice sorgente, devi individuare la riga di inizio del codice del modulo.

Ispeziona il modulo e ottieni l'ID 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à.

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

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 al riguardo nella nostra recensione completa di CSS Hero.

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

Sito web CSS Hero

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.

Il sottomenu Aggiungi nuovo plugin sotto Plugin nell'area di amministrazione di WordPress

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.

Installazione di CSS Hero

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 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.

Personalizza con CSS hero

CSS Hero fornisce un'interfaccia intuitiva point-and-click per modificare il CSS senza scrivere 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.

Interfaccia CSS Hero

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 trovi che lavorare con CSS in Contact Form 7 sia un po' troppo tecnico, esiste una soluzione molto più semplice e senza codice: WPForms.

WPForms è uno dei migliori costruttori di moduli sul mercato. Viene fornito con un editor visivo e temi predefiniti, in modo da poter personalizzare completamente i tuoi moduli senza scrivere alcun codice.

Ecco quanto è facile stilizzare un modulo in WPForms:

Dopo aver aggiunto il tuo modulo a una pagina, apri il pannello delle impostazioni del blocco sulla destra e scorri fino alla sezione 'Temi'.

Quindi puoi scegliere tra oltre 40 bellissimi temi predefiniti per abbinare istantaneamente il design del tuo sito.

Temi dei moduli WPForms

Oltre a ciò, puoi:

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

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

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 costruttore visuale 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 quindi 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:

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

Dichiarazione: Il nostro contenuto è supportato dai lettori. Ciò significa che se fai clic su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come è finanziato WPBeginner, perché è importante e come puoi supportarci. Ecco il nostro processo editoriale.

Il Toolkit WordPress Definitivo

Ottieni l'accesso GRATUITO al nostro toolkit - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Interazioni del lettore

47 CommentsLeave a Reply

  1. Grazie!
    Le tue istruzioni sono state molto utili.
    Grazie per aver dedicato del tempo a condividerle!

  2. Il pulsante di invio in PDF non funziona più da quando ho caricato il modulo sul sito WordPress.

    • L'incorporamento PDF che raccomandiamo è per la visualizzazione dei contenuti. Per la compilazione dei moduli, consigliamo di utilizzare un plugin per moduli

      Amministratore

  3. Ciao, è possibile aggiungere un messaggio se non ho compilato uno o più "campi obbligatori" per ricevere un messaggio? Perché ricevo solo le "frecce rosse" sui "campi obbligatori" che non ho compilato. E voglio inoltre un messaggio di errore come

    "Uno o più campi obbligatori presentano un errore. Controlla e riprova."
    Ma ho solo le frecce rosse, e il problema è che sui telefoni cellulari le frecce rosse non sono nella finestra e il cliente non le vede.

    • Dovresti contattare il supporto di Contact Form 7 per sapere cosa hanno attualmente disponibile.

      Amministratore

  4. Ciao,
    Grazie per questo tutorial.
    Vorrei aggiungere un'immagine personalizzata a destra dell'etichetta "invia", nel pulsante.
    L'ho fatto con un :before per gli altri pulsanti sul mio sito web, ma non riesco a trovare l'elemento nel modulo di invio per inserire il CSS...

  5. Sono un principiante, ma determinato a scoprirlo! Quindi, per favore, dammi dei passaggi elementari se rispondi.

    Ho un modulo contact7 sul mio sito web. Il font appare bianco su uno sfondo bianco per le etichette (Il tuo nome, La tua email, ecc).
    Come faccio a cambiare il colore – dove devo andare per dirgli di cambiare colore?
    Ho provato a copiare e incollare alcuni dei codici che avevate nelle vostre risposte qui sopra, ma sono apparsi sulla mia pagina, ma non hanno cambiato il font.

    • Puoi selezionare l'area dell'etichetta in questo modo-

      .wpcf7 form p label { color: white; background: black; font-family: sans-serif; }

      • Ciao!

        Sto lottando con le intestazioni modali. Ho cambiato lo sfondo del modulo in un colore più scuro ma ora voglio cambiare il colore dell'intestazione. Non sembra cambiare affatto con tutte le diverse opzioni che ho provato finora.

        Sai come fare? Aiutami per favore!

        Grazie!

  6. Il mio modulo di contatto ha uno sfondo immagine scuro, quindi ho bisogno che "il tuo nome", "la tua email" e "il tuo messaggio" siano bianchi. Non riesco a trovare una classe o un ID per questi elementi, ho provato con ispeziona elemento ma non riesco a trovare nulla che funzioni. Questo è l'unico modulo di contatto su questo sito. Sto usando CSS nel foglio di stile del mio child theme e ho provato diverse opzioni ma non riesco a cambiare il colore. Qualcuno può aiutarmi?

  7. Sono abbastanza nuovo a Wordpress e ai plugin in generale, ma ho questo plugin installato e tutto funziona correttamente, ma invece di vedere il messaggio della persona, mostra solo [your-message] nel corpo dell'email. Ho impostato tutto come sopra e scritto correttamente, quindi non sono sicuro di quale sia il problema. Qualsiasi aiuto sarebbe molto apprezzato! Grazie!

    • Ho lo stesso problema. Sono nuovo ai moduli su WP ma sono bloccato anch'io. Sto cercando di costruire una pagina di registrazione con nome dell'azienda, indirizzo, ecc. insieme alle informazioni di contatto personali e un menu a discesa per fare la loro scelta e ovviamente un campo commenti. Dopo aver testato questo numerose volte, ottengo lo stesso risultato tuo; il contenuto del campo commenti.

      Vorrei che ci fossero stati uno o due esempi nella pagina Documentazione di Contact 7; qualcosa di diverso dal solo modulo di contatto predefinito.

  8. Non credo che Contact Form 7 sia il più popolare. Viene preinstallato con molti temi e installazioni di WordPress, questo è il motivo per cui hanno così tanti utenti. È così frustrante modificare qualsiasi cosa in questo plugin.

  9. Ciao, se qualcuno vuole un modulo di contatto con sfondo trasparente o vuole aggiungere il modulo di contatto 7 su un'immagine banner grande con sfondo trasparente, aggiungi questo codice al tuo CSS personalizzato.

    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 textarea
    {
    background-color: Trasparente;
    color: BLU;
    width: 100%;

    }

    div.wpcf7 {
    color: white;
    margin: 0;
    padding: 0;
    }

  10. Sei un salvavita assoluto. Ci sto combattendo da ore.
    Un punto che vorrei sottolineare e che altri potrebbero trovare utile sapere, è che stavo cercando di stilizzare il pulsante di invio, che si trovava su un modulo di contatto 7 che avevo messo nella mia barra laterale.

    Questo ha funzionato per la prima pagina su cui si trovava, ma poi non ha funzionato sulle pagine successive. Tuttavia, ho poi notato che il codice f2 nella seconda pagina aveva un suffisso 'o2', e quando l'ho aggiunto al mio css, anche lo stile su questa pagina ha funzionato.

    Grazie ancora.

  11. Grazie per un ottimo post, è stato molto utile. Una cosa mi preoccupa ancora ed è che non ho trovato un modo per personalizzare le caselle di controllo. Hai trovato un modo per cambiare ad esempio la dimensione della casella di controllo in modo che funzioni su ogni browser?

    Sembra che la struttura dell'input non venga modificata, quindi non è possibile aggiungere span extra per simulare le caselle di controllo, ho ragione?

    Sarei felice se avessi tempo di aiutarmi, saluti.

  12. Oh mio Dio! Non hai idea di quanto ti sia grato per questo post! GRAZIE!

    Volevo semplicemente cambiare il font utilizzato nel pulsante di invio. Ho cercato e cercato per ore e provato varie variazioni di codice CSS e niente ha funzionato finché non mi sono imbattuto nel tuo codice e poi ho aggiunto un elemento font. Problema risolto!

  13. contact-form-7/includes/css/styles.css (inattivo) questo appare sopra il mio file di modifica css, per cui nessuna delle modifiche viene applicata al sito web, aiutami come renderlo attivo

  14. Salve,

    Mi chiedo se qualcuno possa aiutarmi a sistemare il modulo di contatto per dispositivi mobili. Riesco a vedere il modulo ma è troppo largo e viene tagliato.

    Grazie.

  15. Trovo il tuo sito web molto utile. Solo un suggerimento, sarebbe fantastico se potessi lanciare presto un'app per il tuo sito web... le app sono più convenienti delle email.

  16. Le migliori funzionalità di WordPress ti permettono di personalizzare facilmente lo stile senza bisogno di conoscenze approfondite per gestire il tuo sito su WordPress. Nel modulo Contact 7, puoi creare la tua struttura che hai già progettato in HTML o in un altro modo.

  17. Se lavorare con il CSS è un po' al di là delle tue attuali capacità, potresti anche considerare l'utilizzo di https://wordpress.org/plugins/contact-form-7-skins/.

    Contact Form 7 Skins, che funziona direttamente all'interno della normale interfaccia di Contact Form 7, rendendo più facile per gli utenti WordPress regolari creare moduli Contact Form 7 dall'aspetto professionale utilizzando una gamma di modelli e stili compatibili, anche se non si hanno competenze HTML e CSS.

    • Grazie Neil, penso che sia proprio quello di cui avevo bisogno. Mi sono emozionato e l'ho installato, poi ho sovrascritto il mio modulo esistente, quindi ho dovuto ripristinare un backup del mio sito per farlo funzionare di nuovo. Ci darò un'occhiata più approfondita quando avrò tempo, immagino che dovrò copiare il mio modulo attuale al suo interno o iniziare da capo con uno nuovo. Vado a guardare alcuni tutorial. Spero che questo sia ancora il migliore da usare. So che è un vecchio post qui, ma dice che è stato recentemente aggiornato sulla pagina del plugin.

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tieni presente che tutti i commenti sono moderati secondo la nostra politica sui commenti, e il tuo indirizzo email NON verrà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avviamo una conversazione personale e significativa.