{"id":166625,"date":"2024-06-24T09:00:00","date_gmt":"2024-06-24T08:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/cf7-styling-css-personalizzare-aspetto\/"},"modified":"2026-05-26T10:00:00","modified_gmt":"2026-05-26T08:00:00","slug":"cf7-styling-css-personalizzare-aspetto","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/cf7-styling-css-personalizzare-aspetto\/","title":{"rendered":"Contact Form 7: Personalizzare lo Stile con CSS \u2014 Guida Design"},"content":{"rendered":"<h2>Perche Personalizzare lo Stile di Contact Form 7<\/h2>\n<p>Contact Form 7, nella sua installazione predefinita, genera un modulo funzionale ma visivamente essenziale. Il plugin si limita a creare il markup HTML necessario senza aggiungere stili particolarmente elaborati, delegando la presentazione visiva al tema WordPress attivo. Questo approccio minimalista e intenzionale: permette al modulo di adattarsi a qualsiasi tema, ma spesso il risultato non e sufficientemente curato per un sito web professionale. Campi troppo piccoli, pulsanti anonimi, spaziatura inadeguata e mancanza di feedback visivo possono compromettere la esperienza utente e ridurre il tasso di completamento del modulo.<\/p>\n<p>La personalizzazione CSS di Contact Form 7 ti permette di trasformare un modulo generico in un elemento di design coerente con la identita visiva del tuo sito, migliorando al contempo la usabilita e la accessibilita. In questa guida esploreremo la struttura HTML generata da CF7, le classi CSS disponibili, tecniche di styling avanzate e 5 snippet CSS pronti da utilizzare.<\/p>\n<h2>La Struttura HTML di Contact Form 7<\/h2>\n<p>Per personalizzare efficacemente un modulo, e fondamentale comprendere il markup HTML che Contact Form 7 genera. Ecco la struttura base:<\/p>\n<pre><code>&lt;div class=\"wpcf7\" id=\"wpcf7-f123-p456-o1\"&gt;\n  &lt;form class=\"wpcf7-form\" action=\"...\" method=\"post\"&gt;\n    &lt;p&gt;\n      &lt;label&gt;Il tuo nome\n        &lt;span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"&gt;\n          &lt;input type=\"text\" name=\"your-name\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" \/&gt;\n        &lt;\/span&gt;\n      &lt;\/label&gt;\n    &lt;\/p&gt;\n    &lt;p&gt;\n      &lt;input type=\"submit\" value=\"Invia\" class=\"wpcf7-form-control wpcf7-submit has-spinner\" \/&gt;\n    &lt;\/p&gt;\n  &lt;\/form&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/03-new-form.png\" alt=\"Struttura del modulo Contact Form 7 nel editor con i tag che generano il markup HTML\" \/><\/p>\n<h3>Classi CSS Principali<\/h3>\n<p>Le classi CSS piu importanti per lo styling sono:<\/p>\n<ul>\n<li><code>.wpcf7<\/code> \u2014 il contenitore esterno del modulo<\/li>\n<li><code>.wpcf7-form<\/code> \u2014 il tag form<\/li>\n<li><code>.wpcf7-form-control<\/code> \u2014 classe base di tutti i campi di input<\/li>\n<li><code>.wpcf7-text<\/code> \u2014 campi di tipo testo<\/li>\n<li><code>.wpcf7-email<\/code> \u2014 campi di tipo email<\/li>\n<li><code>.wpcf7-tel<\/code> \u2014 campi di tipo telefono<\/li>\n<li><code>.wpcf7-textarea<\/code> \u2014 aree di testo<\/li>\n<li><code>.wpcf7-select<\/code> \u2014 menu a tendina<\/li>\n<li><code>.wpcf7-submit<\/code> \u2014 pulsante di invio<\/li>\n<li><code>.wpcf7-not-valid<\/code> \u2014 campi con errore di validazione<\/li>\n<li><code>.wpcf7-response-output<\/code> \u2014 messaggio di risposta (successo o errore)<\/li>\n<li><code>.wpcf7-not-valid-tip<\/code> \u2014 messaggi di errore accanto ai singoli campi<\/li>\n<li><code>.wpcf7-validation-errors<\/code> \u2014 messaggio di errore generale<\/li>\n<li><code>.wpcf7-mail-sent-ok<\/code> \u2014 messaggio di successo<\/li>\n<\/ul>\n<h2>Styling dei Campi di Input<\/h2>\n<p>Il primo passo per migliorare la aspetto del modulo e personalizzare i campi di input. Un campo di input ben progettato dovrebbe avere bordi visibili, spaziatura interna adeguata, dimensioni confortevoli per la digitazione e un feedback visivo chiaro quando il visitatore interagisce con esso.<\/p>\n<pre><code>\/* Stile base per tutti i campi di input *\/\n.wpcf7-form-control.wpcf7-text,\n.wpcf7-form-control.wpcf7-email,\n.wpcf7-form-control.wpcf7-tel,\n.wpcf7-form-control.wpcf7-url,\n.wpcf7-form-control.wpcf7-number,\n.wpcf7-form-control.wpcf7-date {\n    width: 100%;\n    padding: 12px 16px;\n    border: 2px solid #e0e0e0;\n    border-radius: 8px;\n    font-size: 16px;\n    line-height: 1.5;\n    color: #333333;\n    background-color: #fafafa;\n    transition: border-color 0.3s ease, box-shadow 0.3s ease;\n    box-sizing: border-box;\n}\n\n\/* Stato focus \u2014 quando il visitatore clicca sul campo *\/\n.wpcf7-form-control.wpcf7-text:focus,\n.wpcf7-form-control.wpcf7-email:focus,\n.wpcf7-form-control.wpcf7-tel:focus {\n    border-color: #2563eb;\n    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);\n    background-color: #ffffff;\n    outline: none;\n}\n\n\/* Stile textarea *\/\n.wpcf7-form-control.wpcf7-textarea {\n    width: 100%;\n    min-height: 150px;\n    padding: 12px 16px;\n    border: 2px solid #e0e0e0;\n    border-radius: 8px;\n    font-size: 16px;\n    line-height: 1.6;\n    resize: vertical;\n    font-family: inherit;\n}<\/code><\/pre>\n<p>Il valore <code>font-size: 16px<\/code> e particolarmente importante: su dispositivi iOS, input con font-size inferiore a 16px causano uno zoom automatico della pagina quando il visitatore tocca il campo, peggiorando la esperienza mobile.<\/p>\n<h2>Styling del Pulsante di Invio<\/h2>\n<p>Il pulsante di invio e la elemento piu importante del modulo dal punto di vista della conversione. Deve essere visivamente prominente, facilmente identificabile e invitare al clic.<\/p>\n<pre><code>\/* Pulsante di invio *\/\n.wpcf7-form-control.wpcf7-submit {\n    display: inline-block;\n    padding: 14px 40px;\n    background-color: #2563eb;\n    color: #ffffff;\n    border: none;\n    border-radius: 8px;\n    font-size: 16px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: background-color 0.3s ease, transform 0.2s ease;\n    letter-spacing: 0.5px;\n}\n\n\/* Hover \u2014 quando il mouse passa sopra *\/\n.wpcf7-form-control.wpcf7-submit:hover {\n    background-color: #1d4ed8;\n    transform: translateY(-2px);\n}\n\n\/* Active \u2014 durante il clic *\/\n.wpcf7-form-control.wpcf7-submit:active {\n    transform: translateY(0);\n}\n\n\/* Focus \u2014 per accessibilita da tastiera *\/\n.wpcf7-form-control.wpcf7-submit:focus {\n    outline: 3px solid rgba(37, 99, 235, 0.5);\n    outline-offset: 2px;\n}<\/code><\/pre>\n<h2>Styling dei Messaggi di Errore e Successo<\/h2>\n<p>I messaggi di errore e successo devono essere chiaramente visibili e distinguibili. Utilizza colori convenzionali: rosso per gli errori, verde per il successo.<\/p>\n<pre><code>\/* Messaggio di errore accanto al campo *\/\n.wpcf7-not-valid-tip {\n    color: #dc2626;\n    font-size: 13px;\n    margin-top: 6px;\n    display: block;\n    font-weight: 500;\n}\n\n\/* Campo con errore *\/\n.wpcf7-not-valid {\n    border-color: #dc2626 !important;\n    background-color: #fef2f2 !important;\n}\n\n\/* Messaggio di risposta \u2014 successo *\/\n.wpcf7-form.sent .wpcf7-response-output {\n    border: 2px solid #16a34a;\n    background-color: #f0fdf4;\n    color: #166534;\n    padding: 16px 20px;\n    border-radius: 8px;\n    font-weight: 500;\n}\n\n\/* Messaggio di risposta \u2014 errore *\/\n.wpcf7-form.invalid .wpcf7-response-output,\n.wpcf7-form.failed .wpcf7-response-output {\n    border: 2px solid #dc2626;\n    background-color: #fef2f2;\n    color: #991b1b;\n    padding: 16px 20px;\n    border-radius: 8px;\n}<\/code><\/pre>\n<p>Per una guida completa alla personalizzazione dei messaggi di testo, consulta la <a href=\"https:\/\/gtechgroup.it\/blog\/cf7-validazione-campi-messaggi-errore\/\">guida alla validazione e ai messaggi di errore<\/a>.<\/p>\n<h2>Design Responsive per Dispositivi Mobili<\/h2>\n<p>Oltre la meta del traffico web proviene da dispositivi mobili. Il tuo modulo deve funzionare perfettamente su schermi di ogni dimensione.<\/p>\n<pre><code>\/* Layout base del modulo *\/\n.wpcf7-form p {\n    margin-bottom: 20px;\n}\n\n.wpcf7-form label {\n    display: block;\n    margin-bottom: 6px;\n    font-weight: 600;\n    font-size: 14px;\n    color: #374151;\n}\n\n\/* Responsive \u2014 schermi piccoli *\/\n@media (max-width: 768px) {\n    .wpcf7-form-control.wpcf7-text,\n    .wpcf7-form-control.wpcf7-email,\n    .wpcf7-form-control.wpcf7-textarea {\n        font-size: 16px; \/* Previene lo zoom su iOS *\/\n        padding: 14px;\n    }\n\n    .wpcf7-form-control.wpcf7-submit {\n        width: 100%;\n        padding: 16px;\n        font-size: 18px;\n    }\n}<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/04-edit-form.png\" alt=\"Editor modulo Contact Form 7 con classi CSS personalizzate assegnate ai campi\" \/><\/p>\n<h2>Layout con CSS Grid e Flexbox<\/h2>\n<p>Per disporre i campi su piu colonne, puoi utilizzare CSS Grid o Flexbox. Questo e particolarmente utile per posizionare campi come Nome e Cognome, o Email e Telefono, sulla stessa riga su desktop.<\/p>\n<p>Per utilizzare un layout a griglia, modifica il template del modulo utilizzando <code>&lt;div&gt;<\/code> al posto dei tag <code>&lt;p&gt;<\/code>:<\/p>\n<pre><code>&lt;div class=\"form-grid\"&gt;\n    &lt;div class=\"form-field\"&gt;\n        &lt;label&gt;Nome [text* your-name]&lt;\/label&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"form-field\"&gt;\n        &lt;label&gt;Cognome [text* your-surname]&lt;\/label&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"form-field\"&gt;\n        &lt;label&gt;Email [email* your-email]&lt;\/label&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"form-field\"&gt;\n        &lt;label&gt;Telefono [tel your-phone]&lt;\/label&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>E il CSS corrispondente:<\/p>\n<pre><code>.form-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 20px;\n}\n\n@media (max-width: 768px) {\n    .form-grid {\n        grid-template-columns: 1fr;\n    }\n}<\/code><\/pre>\n<h2>5 Snippet CSS Pronti per Contact Form 7<\/h2>\n<h3>Snippet 1: Stile Minimalista Moderno<\/h3>\n<pre><code>.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit) {\n    border: none;\n    border-bottom: 2px solid #d1d5db;\n    border-radius: 0;\n    padding: 12px 4px;\n    background: transparent;\n}\n.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):focus {\n    border-bottom-color: #2563eb;\n    box-shadow: none;\n}<\/code><\/pre>\n<h3>Snippet 2: Campi con Icone<\/h3>\n<pre><code>.wpcf7-form .field-icon {\n    position: relative;\n}\n.wpcf7-form .field-icon::before {\n    position: absolute;\n    left: 14px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: #9ca3af;\n    font-size: 18px;\n}\n.wpcf7-form .field-icon input {\n    padding-left: 44px;\n}<\/code><\/pre>\n<h3>Snippet 3: Pulsante con Gradiente<\/h3>\n<pre><code>.wpcf7-submit {\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    color: white;\n    padding: 16px 48px;\n    border: none;\n    border-radius: 50px;\n    font-size: 16px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n}\n.wpcf7-submit:hover {\n    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);\n}<\/code><\/pre>\n<h3>Snippet 4: Modulo con Ombra e Bordo Arrotondato<\/h3>\n<pre><code>.wpcf7-form {\n    background: #ffffff;\n    padding: 40px;\n    border-radius: 16px;\n    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);\n    max-width: 600px;\n    margin: 0 auto;\n}<\/code><\/pre>\n<h3>Snippet 5: Tema Scuro (Dark Mode)<\/h3>\n<pre><code>.wpcf7-form {\n    background: #1a1a2e;\n    padding: 40px;\n    border-radius: 12px;\n}\n.wpcf7-form label { color: #e0e0e0; }\n.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit) {\n    background: #16213e;\n    border: 1px solid #2a3a5c;\n    color: #e0e0e0;\n}\n.wpcf7-form .wpcf7-submit {\n    background: #e94560;\n    border: none;\n    color: white;\n}<\/code><\/pre>\n<h2>Dove Inserire il CSS Personalizzato<\/h2>\n<p>Puoi aggiungere il CSS personalizzato in diversi punti:<\/p>\n<p><strong>Personalizzatore WordPress:<\/strong> vai su <strong>Aspetto &gt; Personalizza &gt; CSS aggiuntivo<\/strong>. Questo e il metodo piu semplice e sicuro, poiche il CSS viene mantenuto anche quando aggiorni il tema.<\/p>\n<p><strong>File style.css del tema figlio:<\/strong> se utilizzi un tema figlio, aggiungi il CSS nel file <code>style.css<\/code>. Questo metodo e preferibile per personalizzazioni estese.<\/p>\n<p><strong>Plugin CSS dedicato:<\/strong> plugin come &#8220;Simple Custom CSS&#8221; offrono una interfaccia nella bacheca per gestire il CSS personalizzato senza toccare i file del tema.<\/p>\n<h2>Guide Correlate della Serie Contact Form 7<\/h2>\n<ul>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/cf7-installare-configurare-wordpress\/\">Come Installare e Configurare Contact Form 7 su WordPress<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/cf7-creare-form-contatto-passo-passo\/\">Creare un Form di Contatto Perfetto Passo Passo<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/cf7-tutti-tag-campi-guida-completa\/\">Tutti i Tag e Campi \u2014 Guida Completa<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/cf7-configurare-email-notifiche-smtp\/\">Configurare Email, Notifiche e SMTP<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/cf7-validazione-campi-messaggi-errore\/\">Validazione Campi, Messaggi di Errore e Conferma<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/cf7-protezione-spam-recaptcha-honeypot\/\">Protezione Spam con reCAPTCHA, Honeypot e Quiz<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/cf7-form-avanzati-condizionali-multi-step\/\">Form Avanzati \u2014 Condizionali, Multi-Step e File Upload<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/cf7-integrazioni-mailchimp-crm-zapier\/\">Integrazioni con Mailchimp, CRM e Zapier<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/cf7-styling-css-personalizzare-aspetto\/\">Personalizzare lo Stile con CSS \u2014 Guida Design<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/cf7-problemi-comuni-email-non-arrivano\/\">Email Non Arrivano? Problemi Comuni e Soluzioni<\/a><\/li>\n<\/ul>\n<p>Desideri un design personalizzato e professionale per i tuoi moduli di contatto? Il team di <a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">G Tech Group<\/a> crea soluzioni su misura per ogni progetto. <a href=\"https:\/\/gtechgroup.it\/contatti\/\">Contattaci<\/a> per trasformare i tuoi moduli.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Perche Personalizzare lo Stile di Contact Form 7 Contact Form 7, nella sua installazione predefinita, genera un modulo funzionale ma visivamente essenziale. Il plugin si&hellip;<\/p>\n","protected":false},"author":2,"featured_media":166614,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"CF7: Personalizzare con CSS \u2014 Guida Design","_seopress_titles_desc":"Come personalizzare lo stile di Contact Form 7 con CSS: input, button, layout responsive e 5 snippet pronti.","_seopress_robots_index":"","footnotes":""},"categories":[61],"tags":[2784,2786,2787,2785],"class_list":["post-166625","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-cf7-css","tag-design-form","tag-personalizzare-cf7","tag-styling-form"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=166625"}],"version-history":[{"count":0,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166625\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/166614"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=166625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=166625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=166625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}