Gli stili predefiniti di Contact Form 7 sono la prima cosa che salta all’occhio dopo aver installato il plugin. Campi di input stretti, un pulsante di invio anonimo e messaggi di errore senza il minimo sforzo di design. Dopo aver configurato una dozzina di siti, si perde il conto di quante volte si è modificato manualmente il style.css, ed è sempre la stessa routine.

Un file di esportazione del modulo già pronto risolve questo problema. Importi un modulo preconfezionato con stili preconfigurati: campi, pulsante, validazione e reCAPTCHA hanno un aspetto decoroso subito dopo l’attivazione. Resta solo da sostituire gli indirizzi email e il percorso del logo per il progetto specifico.

Di seguito trovi l’analisi completa delle regole CSS che usiamo nei nostri progetti, più un file di esportazione per partire subito. Gli stili sono stati testati su Contact Form 7 versione 6.x e sono aggiornati al 2026.

💡 Panoramica rapida:

• Scarica il file di esportazione del modulo e importalo in WordPress con la procedura standard
• Sostituisci gli indirizzi email nel template email e il percorso del logo
• Copia gli stili CSS nel style.css del tema o in CSS aggiuntivo
• Adatta colori e font alla brand identity del progetto, se necessario

1. File di esportazione: importazione e configurazione iniziale

Il file di esportazione contiene un modulo di contatto già pronto con i campi: nome, email, telefono, area di testo e Google reCAPTCHA. Il modulo è creato in quattro versioni linguistiche: russo, ucraino, inglese e tedesco.

L’importazione si esegue con lo strumento standard di WordPress: Strumenti → Importa → Contact Form 7 → Esegui importatore. Seleziona il file XML scaricato e i moduli appariranno nella sezione «Moduli».

Subito dopo l’importazione, vai al template email di ciascun modulo nella scheda Posta. Sostituisci tre elementi:

• Il campo «A»: inserisci il tuo indirizzo email reale;
• Il campo «Da»: l’indirizzo deve appartenere al dominio del sito (ad esempio, [email protected]), altrimenti le email finiranno nello spam;
• Il percorso del logo: trova il tag <img src="/Logo-150x150.png"> nel corpo dell’email e sostituiscilo con l’URL completo del logo del tuo sito.

Senza la sostituzione degli indirizzi email, il modulo non invierà messaggi. Questo è un motivo frequente per cui CF7 «non funziona» dopo l’importazione.

2. Stili CSS: analisi completa

Di seguito trovi il set di stili che applichiamo a ogni nuovo progetto. Copialo nel style.css del tema attivo oppure in CSS aggiuntivo (Aspetto → Personalizza → CSS aggiuntivo). La seconda opzione è preferibile: gli stili non andranno persi con l’aggiornamento del tema.

2.1. Messaggi di risposta e validazione

1
/* Form response — top margin */
2
div.wpcf7-response-output {
3
    margin-top: -30px;
4
}
5
 
6
/* Validation hint — centering and spacing */
7
span.wpcf7-not-valid-tip {
8
    margin-top: -14px;
9
    margin-bottom: -10px;
10
    text-align: center;
11
    color: #a01414;
12
    font-size: 1em;
13
    display: block;
14
    font-weight: 700;
15
}

.wpcf7-response-output è il blocco che compare dopo l’invio (successo o errore). Di default disturba il flusso; il margin-top negativo lo avvicina al modulo. .wpcf7-not-valid-tip è il suggerimento rosso sotto un campo non compilato; qui il testo è centrato e in grassetto per garantire visibilità.

2.2. Campi di input e aree di testo

1
/* Unified font for all form elements */
2
input.wpcf7-form-control,
3
textarea#TextareaJA,
4
input.wpcf7-form-control.wpcf7-submit {
5
    font-family: "Open Sans", sans-serif;
6
    font-size: 15px;
7
    line-height: 30px;
8
    font-weight: 700;
9
}
10
 
11
/* Text area height */
12
textarea {
13
    height: 150px !important;
14
}
15
 
16
/* Border highlight on focus */
17
form.wpcf7-form input:focus,
18
form.wpcf7-form textarea:focus,
19
form.wpcf7-form input[type="text"]:focus {
20
    border-color: #709242;
21
}

Il selettore input.wpcf7-form-control prende di mira tutti i campi di testo di CF7. textarea#TextareaJA è un identificativo personalizzato del nostro modulo; se il tuo modulo ha un ID diverso, sostituiscilo con quello corretto. Il colore del bordo al focus #709242 è un verde oliva sobrio e riposante per gli occhi.

2.3. Pulsante di invio

1
/* Submit button — main style */
2
input.wpcf7-form-control.wpcf7-submit {
3
    color: #ffffff;
4
    background: #5a8f2b;
5
    font-weight: 600;
6
    border: 2px dashed #ffffff;
7
    margin-top: -25px;
8
    font-family: FuturaDemiC, sans-serif;
9
    padding: 10px 30px;
10
    border-radius: 0;
11
    transition: all .3s ease 0s;
12
}
13
 
14
/* Hover — color inversion */
15
input.wpcf7-form-control.wpcf7-submit:hover {
16
    background: #ffffff;
17
    color: #5a8f2b;
18
    border: 2px dashed #5a8f2b;
19
}

Il pulsante ha uno sfondo verde #5a8f2b con un bordo tratteggiato bianco. Al passaggio del mouse i colori si invertono: sfondo bianco, testo e bordo verdi. Se il verde non fa parte della palette del tuo brand, sostituisci #5a8f2b con il tuo colore accent in entrambe le regole (default e hover).

2.4. Preloader e indicatore di caricamento

1
/* Centering the ajax loader */
2
span.ajax-loader {
3
    margin-left: auto !important;
4
    margin-right: auto !important;
5
    float: inherit !important;
6
    width: 15px !important;
7
    display: block !important;
8
    margin-top: 10px !important;
9
    margin-bottom: -15px !important;
10
}

L’indicatore di invio rotante di CF7 di default resta attaccato al bordo. Qui viene forzatamente centrato tramite margin-left/right: auto e display: block. Le dichiarazioni !important sono necessarie perché il plugin stesso applica stili inline al loader.

2.5. Allineamento di Google reCAPTCHA

1
/* Centering the reCAPTCHA block */
2
.wpcf7-form-control-wrap {
3
    width: 100%;
4
}
5
 
6
.wpcf7-form-control.g-recaptcha.wpcf7-recaptcha {
7
    margin-top: -28px;
8
    margin-left: auto;
9
    margin-right: auto;
10
    width: 300px;
11
}

Il blocco reCAPTCHA si allinea a sinistra per impostazione predefinita. Usando margin-left/right: auto con una larghezza fissa di 300px lo si centra all'interno del form.

2.6. Responsività mobile

1
@media screen and (max-width: 768px) {
2
    span.wpcf7-not-valid-tip {
3
        margin-bottom: 15px;
4
    }
5
 
6
    input.wpcf7-form-control.wpcf7-text {
7
        max-height: 30px;
8
    }
9
}

Sugli schermi inferiori a 768px, il suggerimento di validazione riceve un margine inferiore extra per evitare che si sovrapponga al campo successivo. I campi di testo hanno un'altezza limitata, il che previene uno stiramento eccessivo sui dispositivi mobili.

2.7. Nascondere gli elementi di servizio

1
/* Hide list markers in error messages */
2
.screen-reader-response ul {
3
    display: none;
4
}
5
 
6
/* Hide the green success message */
7
.wpcf7-response-output.wpcf7-display-none.wpcf7-mail-sent-ok {
8
    display: none !important;
9
}
10
 
11
/* Hide the duplicate validation error message */
12
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
13
    display: none !important;
14
}
15
 
16
/* Text color for screen-reader block on dark backgrounds */
17
.screen-reader-response {
18
    color: white;
19
    margin-bottom: 10px;
20
}

CF7 duplica gli errori di validazione per impostazione predefinita: sia nel tooltip sia nel blocco generale sotto il form. Nascondiamo il blocco generale (.wpcf7-validation-errors) e il messaggio di successo (.wpcf7-mail-sent-ok), poiché i suggerimenti .wpcf7-not-valid-tip sono sufficienti. Gli stili per .screen-reader-response sono rilevanti quando il form è posizionato su uno sfondo scuro.

2.8. Centrare i placeholder

1
/* Centering placeholder in textarea field for different browsers */
2
textarea#TextareaJA::-webkit-input-placeholder {
3
    text-align: center;
4
}
5
 
6
textarea#TextareaJA:-moz-placeholder {
7
    text-align: center;
8
}
9
 
10
textarea#TextareaJA::-moz-placeholder {
11
    text-align: center;
12
}
13
 
14
textarea#TextareaJA:-ms-input-placeholder {
15
    text-align: center;
16
}

Il testo del placeholder all'interno del campo è centrato solo quando il campo è vuoto. Non appena l'utente inizia a digitare, il testo segue l'allineamento normale. #TextareaJA è l'identificativo del nostro form; sostituiscilo con quello corretto per il tuo form.

2.9. Bonus: stili per sfondi scuri

1
/* Error styles for forms on dark background */
2
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
3
    color: aliceblue;
4
    font-weight: 800;
5
}
6
 
7
span.wpcf7-not-valid-tip {
8
    font-weight: 900;
9
    background-color: antiquewhite;
10
}

Se il form è inserito in un blocco con un riempimento scuro, i messaggi di errore devono rimanere leggibili. Il testo dell'errore diventa bianco (aliceblue), e il tooltip riceve uno sfondo chiaro.

2.10. Migliorie aggiuntive

1
/* Bottom error message margin */
2
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
3
    margin-top: -60px;
4
}
5
 
6
/* Centering text fields */
7
span.wpcf7-form-control-wrap input#Email,
8
span.wpcf7-form-control-wrap input#PhoneJA,
9
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
10
    text-align: center;
11
}
12
 
13
/* reCAPTCHA in popups — additional spacing */
14
div#recapcha-popups .wpcf7-form-control-wrap {
15
    padding-top: 25px;
16
    margin-left: -11px;
17
    padding-bottom: 38px;
18
}

I campi di testo per email e telefono sono centrati, il che risulta più ordinato quando il form è composto da 3-4 campi. Il blocco div#recapcha-popups è un selettore specifico per i casi in cui il form è incorporato in una finestra popup.

3. Configurare il template email

Dopo aver importato i form, assicurati di controllare la scheda Mail nell'editor di ciascun form. CF7 usa queste impostazioni per inviare le notifiche email:

• A: l'indirizzo a cui arrivano gli invii. Per impostazione predefinita contiene un segnaposto dall'esportazione; sostituiscilo con il tuo;
• Da: l'intestazione email. L'indirizzo del mittente deve appartenere al dominio del sito, altrimenti le email finiscono nello spam o non vengono affatto recapitate;
• Oggetto: puoi mantenere quello predefinito o aggiungere il nome del sito;
• Corpo del messaggio: un template HTML con il logo. Sostituisci src="/Logo-150x150.png" con l'URL completo del tuo logo.

Se hai bisogno di tag aggiuntivi per il template, l'elenco completo è disponibile nella documentazione ufficiale su contactform7.com.

4. Ottimizzare il caricamento degli script di CF7

Per impostazione predefinita, Contact Form 7 carica CSS e JavaScript su ogni pagina del sito, anche dove non c'è alcun form. Si tratta di richieste non necessarie che rallentano il caricamento.

A partire dalla versione 5.9, lo sviluppatore ha aggiunto un'opzione nativa per controllare il caricamento: in wp-config.php puoi impostare le costanti WPCF7_LOAD_JS e WPCF7_LOAD_CSS su false, e gli script verranno caricati solo sulle pagine che contengono un form. Maggiori dettagli nella documentazione di CF7.

Per un controllo più preciso (solo pagine specifiche), usa uno snippet in functions.php:

1
add_action('wp_enqueue_scripts', 'cf7_dequeue_scripts', 99);
2
function cf7_dequeue_scripts() {
3
    if (!is_page(array('contact', 'order'))) {
4
        wp_dequeue_script('contact-form-7');
5
        wp_dequeue_style('contact-form-7');
6
    }
7
}

Questo snippet rimuove gli script di CF7 da tutte le pagine tranne quelle specificate nell'array di is_page(). Sostituisci 'contact' e 'order' con gli slug delle tue pagine che contengono i form.

⁉️🤔 Domande frequenti

I moduli non inviano dopo l'importazione. Cosa devo fare?

Per prima cosa, controlla la scheda "Mail": i campi "To" e "From". Il file di esportazione contiene dei segnaposto in quei campi. "To" deve contenere un'email reale e "From" deve essere un indirizzo sul dominio del sito. Se il dominio non corrisponde, il server di posta del destinatario respingerà l'email come spam.

Dove è meglio inserire gli stili CSS: nel file style.css del tema o in CSS aggiuntivo?

Il CSS aggiuntivo è preferibile. Quando il tema si aggiorna, style.css viene sovrascritto, mentre il CSS aggiuntivo no. Lo svantaggio: gli stili nel CSS aggiuntivo vengono caricati in linea nell'<head> anziché come file esterno, ma per 100-150 righe di CSS la differenza di velocità è trascurabile.

Come faccio a cambiare i colori dei pulsanti per adattarli al brand del cliente?

Trova le due regole per input.wpcf7-form-control.wpcf7-submit negli stili (default e hover). Sostituisci #5a8f2b con il colore accent del brand nella proprietà background della regola principale e nelle proprietà color e border della regola hover. Non serve modificare altro.

Perché reCAPTCHA si sposta a sinistra su mobile?

Il blocco .g-recaptcha nei nostri stili ha una larghezza standard fissa. Su schermi molto stretti potrebbe non entrare. Aggiungi una regola con transform: scale() e transform-origin: left alla media query e reCAPTCHA si ridurrà proporzionalmente per adattarsi a qualsiasi schermo.

Gli stili non vengono applicati. Qual è la causa?

Tre cause comuni: (1) cache del browser (apri il sito in modalità incognito); (2) cache di un plugin di performance (WP Rocket, LiteSpeed) che deve essere svuotata; (3) ordine di caricamento, poiché CF7 carica i suoi CSS per ultimo. Aggiungi !important alla regola in conflitto o aumenta la specificità del selettore aggiungendo una classe genitore.

Come verifico che il modulo funzioni effettivamente dopo la configurazione?

Invia un'email di test tramite il modulo sul sito stesso. Se l'email non arriva, controlla la cartella spam. Se non è nemmeno lì, configura un plugin SMTP (ad esempio, FluentSMTP o Post SMTP). Senza SMTP, WordPress invia tramite wp_mail() e molti host bloccano questo tipo di email.

Stilizzare CF7: veloce, una volta sola e per tutti i progetti

Un file di esportazione già pronto e un set di stili raffinato fanno risparmiare dai 15 ai 30 minuti su ogni nuovo progetto. Invece di regolare manualmente margin-top: -14px per tentativi, ottieni un modulo con campi, pulsante e validazione già sistemati. Non resta che inserire l'email e il logo.

Se la palette verde #5a8f2b non si adatta al design, sostituisci il colore accent con il tuo. Se il modulo è incorporato in un popup, aggiungi un selettore con l'ID del popup come mostrato nella sezione 2.10. Se il sito è multilingue, usa i duplicati per lingua dal file di esportazione (RU/UK/EN/DE).

Nei progetti senza designer, questo set di stili copre la stragrande maggioranza delle esigenze per un modulo di contatto dall'aspetto decoroso. Nei progetti con designer, funge da base per una personalizzazione più fine.

Salva gli stili come snippet e la tua prossima configurazione di CF7 richiederà esattamente due minuti.