.gform_wrapper<\/code> e un ID nel formato #gform_wrapper_X<\/code> dove X è l’ID del modulo. All’interno, il tag <form><\/code> ha l’ID #gform_X<\/code>. Ogni campo è racchiuso in un <li><\/code> con classe .gfield<\/code> e ID #field_X_Y<\/code> dove Y è l’ID del campo. L’input effettivo ha l’ID #input_X_Y<\/code>.<\/p>\nQuesta struttura gerarchica e prevedibile rende facile targetizzare qualsiasi elemento del modulo con selettori CSS specifici:<\/p>\n
\n.gform_wrapper<\/code> — Targetizza tutti i moduli Gravity Forms.<\/li>\n#gform_wrapper_5<\/code> — Targetizza solo il modulo con ID 5.<\/li>\n.gfield<\/code> — Targetizza tutti i campi.<\/li>\n#field_5_3<\/code> — Targetizza il campo 3 del modulo 5.<\/li>\n.gfield_required<\/code> — Targetizza tutti i campi obbligatori.<\/li>\n.gfield_error<\/code> — Targetizza i campi con errori di validazione.<\/li>\n<\/ul>\n![\"Editor](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/gf-02-newform.png\")
<\/p>\n
Classi CSS Predefinite di Gravity Forms<\/h3>\n
Gravity Forms include un set di classi CSS predefinite (dette “Ready Classes”) che puoi applicare a qualsiasi campo tramite il campo “CSS Class Name” nelle impostazioni avanzate del campo. Queste classi offrono personalizzazioni immediate senza dover scrivere CSS:<\/p>\n
Layout a colonne:<\/strong><\/p>\n\ngf_left_half<\/code> \/ gf_right_half<\/code> — Due colonne al 50%.<\/li>\ngf_left_third<\/code> \/ gf_middle_third<\/code> \/ gf_right_third<\/code> — Tre colonne al 33%.<\/li>\ngf_first_quarter<\/code> \/ gf_second_quarter<\/code> \/ gf_third_quarter<\/code> \/ gf_fourth_quarter<\/code> — Quattro colonne al 25%.<\/li>\n<\/ul>\nAspetto:<\/strong><\/p>\n\ngf_list_2col<\/code> \/ gf_list_3col<\/code> \/ gf_list_4col<\/code> \/ gf_list_5col<\/code> — Dispone le opzioni di checkbox e radio button su più colonne.<\/li>\ngf_scroll_text<\/code> — Aggiunge un’area scrollabile per testo lungo (utile per termini e condizioni).<\/li>\ngf_invisible<\/code> — Nasconde il campo visivamente (ma rimane nel DOM).<\/li>\n<\/ul>\nPer applicare una Ready Class, apri le impostazioni del campo, vai alla scheda Appearance<\/strong> e inserisci la classe nel campo “Custom CSS Class”. Puoi combinare più classi separandole con uno spazio.<\/p>\nCSS Personalizzato: Dove Inserirlo<\/h3>\n
Ci sono diversi modi per aggiungere CSS personalizzato per Gravity Forms, ognuno con vantaggi specifici:<\/p>\n
Personalizzazione tema (consigliato):<\/strong> Vai su Aspetto > Personalizza > CSS aggiuntivo<\/strong> e inserisci il tuo CSS. Questo metodo è semplice e i CSS sopravvivono agli aggiornamenti del tema.<\/p>\nChild theme:<\/strong> Aggiungi il CSS nel file style.css<\/code> del child theme. Ideale per personalizzazioni estese e permanenti.<\/p>\nPlugin CSS custom:<\/strong> Plugin come “Simple Custom CSS and JS” permettono di aggiungere CSS senza modificare file del tema.<\/p>\nInline nel campo HTML:<\/strong> Per personalizzazioni specifiche a un singolo modulo, puoi aggiungere un tag <style><\/code> in un campo HTML del modulo. Questo metodo è rapido ma non è la best practice.<\/p>\nEsempi Pratici di Personalizzazione CSS<\/h3>\n
Personalizzare il pulsante di invio:<\/strong><\/p>\n\n.gform_wrapper .gform_button {\n background-color: #2563eb;\n color: #ffffff;\n border: none;\n border-radius: 8px;\n padding: 12px 32px;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n.gform_wrapper .gform_button:hover {\n background-color: #1d4ed8;\n}\n<\/pre>\nPersonalizzare i campi di input:<\/strong><\/p>\n\n.gform_wrapper input[type=\"text\"],\n.gform_wrapper input[type=\"email\"],\n.gform_wrapper input[type=\"tel\"],\n.gform_wrapper textarea {\n border: 2px solid #e5e7eb;\n border-radius: 6px;\n padding: 10px 14px;\n font-size: 15px;\n transition: border-color 0.3s ease;\n}\n.gform_wrapper input:focus,\n.gform_wrapper textarea:focus {\n border-color: #2563eb;\n outline: none;\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n<\/pre>\nPersonalizzare i messaggi di errore:<\/strong><\/p>\n\n.gform_wrapper .gfield_error .gfield_label {\n color: #dc2626;\n}\n.gform_wrapper .gfield_error input,\n.gform_wrapper .gfield_error textarea {\n border-color: #dc2626;\n background-color: #fef2f2;\n}\n.gform_wrapper .validation_message {\n color: #dc2626;\n font-size: 13px;\n margin-top: 4px;\n}\n<\/pre>\n![\"Impostazioni](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/gf-03-settings.png\")
<\/p>\n
Hook PHP: Personalizzazioni Avanzate<\/h3>\n
Per personalizzazioni che vanno oltre il CSS, Gravity Forms offre un sistema estensivo di hook PHP (action e filter). Questi permettono di modificare il comportamento del plugin a ogni livello, dalla validazione dei campi alla generazione dell’HTML.<\/p>\n
Hook più utilizzati:<\/strong><\/p>\ngform_pre_render<\/code> — Si attiva prima del rendering del modulo. Perfetto per modificare dinamicamente le opzioni dei campi dropdown o i valori predefiniti.<\/p>\ngform_validation<\/code> — Permette di aggiungere validazioni personalizzate. Ad esempio, puoi verificare che un codice fiscale sia valido o che un indirizzo email appartenga a un dominio specifico.<\/p>\ngform_after_submission<\/code> — Si attiva dopo il salvataggio della entry. Ideale per integrazioni personalizzate: invia dati a API esterne, crea record nel database, avvia processi automatizzati.<\/p>\ngform_pre_submission<\/code> — Si attiva prima del salvataggio. Puoi modificare i dati della entry prima che vengano salvati nel database.<\/p>\ngform_notification<\/code> — Permette di modificare le notifiche email prima dell’invio. Puoi cambiare destinatario, oggetto, corpo o allegati in base alla logica personalizzata.<\/p>\nEsempio: Validazione personalizzata del codice fiscale:<\/strong><\/p>\n\nadd_filter(gform_field_validation_5_3, function($result, $value, $form, $field) {\n if ($result[is_valid] && strlen($value) !== 16) {\n $result[is_valid] = false;\n $result[message] = Il codice fiscale deve essere di 16 caratteri.;\n }\n return $result;\n}, 10, 4);\n<\/pre>\nJavaScript Personalizzato<\/h3>\n
Gravity Forms espone eventi JavaScript che permettono di aggiungere interattività personalizzata ai moduli:<\/p>\n
gform_post_render<\/code> — Si attiva dopo il rendering del modulo. Utile per inizializzare plugin JavaScript sui campi del form.<\/p>\ngform_page_loaded<\/code> — Si attiva quando viene caricata una nuova pagina in un modulo multi-step. Utile per eseguire azioni al cambio di pagina.<\/p>\ngform_confirmation_loaded<\/code> — Si attiva quando viene mostrata la conferma. Perfetto per tracciare le conversioni con analytics.<\/p>\nEsempio: Tracciamento conversione Google Ads:<\/strong><\/p>\n\njQuery(document).on(gform_confirmation_loaded, function(event, formId) {\n if (formId === 5) {\n gtag(event, conversion, {\n send_to: AW-XXXXXXXXX\/YYYYYYYY\n });\n }\n});\n<\/pre>\nPersonalizzare il Tema del Modulo<\/h3>\n
A partire dalle versioni più recenti, Gravity Forms include un sistema di “Form Themes” che permette di applicare stili predefiniti ai moduli. Puoi scegliere tra:<\/p>\n
\n- Gravity Forms 2.5 Theme:<\/strong> Lo stile classico con etichette sopra i campi.<\/li>\n
- Orbital Theme:<\/strong> Uno stile moderno con bordi arrotondati e spaziatura generosa.<\/li>\n<\/ul>\n
Il tema del modulo può essere selezionato nelle impostazioni del singolo modulo o globalmente nelle impostazioni generali del plugin. Il tema si applica come base: il tuo CSS personalizzato lo sovrascrive per le personalizzazioni specifiche.<\/p>\n
![\"Stato](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/gf-06-status.png\")
<\/p>\n
Personalizzazioni per Elementor<\/h3>\n
Se utilizzi Elementor come page builder, ci sono considerazioni specifiche per la personalizzazione di Gravity Forms:<\/p>\n
\n- Il widget Gravity Forms di Elementor include opzioni di styling direttamente nel pannello Elementor, permettendo di personalizzare colori, tipografia e spaziatura senza CSS.<\/li>\n
- Gli stili Elementor hanno una specificità CSS elevata e possono sovrascrivere gli stili nativi di Gravity Forms. Se il tuo CSS personalizzato non funziona, potresti dover aumentare la specificità dei selettori.<\/li>\n
- Per i moduli inseriti tramite shortcode in Elementor, usa il widget HTML di Elementor e applica il CSS nella sezione “Custom CSS” del widget (disponibile in Elementor Pro).<\/li>\n<\/ul>\n
Responsive Design<\/h3>\n
Gravity Forms è responsive per impostazione predefinita: i layout a colonne si impilano automaticamente su schermi piccoli. Tuttavia, potresti voler personalizzare ulteriormente il comportamento responsive:<\/p>\n
\n@media (max-width: 640px) {\n .gform_wrapper .gf_left_half,\n .gform_wrapper .gf_right_half {\n width: 100%;\n }\n .gform_wrapper .gform_button {\n width: 100%;\n padding: 14px;\n }\n .gform_wrapper input[type=\"text\"],\n .gform_wrapper textarea {\n font-size: 16px; \/* Previene lo zoom su iOS *\/\n }\n}\n<\/pre>\nIl font-size di almeno 16px sugli input è particolarmente importante per iOS: Apple Safari fa zoom automaticamente sugli input con font-size inferiore a 16px, causando un’esperienza utente fastidiosa.<\/p>\n
Best Practice per le Personalizzazioni<\/h3>\n\n- Usa selettori specifici (con l’ID del modulo) quando la personalizzazione riguarda un singolo modulo.<\/li>\n
- Non modificare mai i file core di Gravity Forms: ogni aggiornamento sovrascriverà le modifiche.<\/li>\n
- Aggiungi gli hook PHP nel file
functions.php<\/code> del child theme o in un plugin personalizzato (mu-plugin).<\/li>\n- Testa sempre le personalizzazioni su diversi browser e dispositivi.<\/li>\n
- Documenta le personalizzazioni per facilitare la manutenzione futura.<\/li>\n
- Usa le Ready Classes di Gravity Forms prima di scrivere CSS personalizzato: spesso la soluzione è già inclusa nel plugin.<\/li>\n<\/ul>\n
Per personalizzazioni avanzate dei tuoi moduli Gravity Forms, contatta il team di G Tech Group<\/a>.<\/p>\n\nContinua a Leggere: Guide WordPress Essenziali<\/h4>\n\n- Guida completa a Elementor<\/a><\/li>\n
- Ottimizzare WordPress con WP Rocket<\/a><\/li>\n
- SEOPress: la guida definitiva alla SEO su WordPress<\/a><\/li>\n
- Backup WordPress con UpdraftPlus<\/a><\/li>\n
- WooCommerce SEO: ottimizzare il tuo negozio online<\/a><\/li>\n<\/ul>\n<\/div>\n
Migliora il Tuo Sito WordPress<\/h3>\n
Scopri le nostre guide complete sugli altri plugin essenziali per WordPress:<\/p>\n
\n- Come Installare Elementor su WordPress<\/a><\/li>\n
- Come Installare e Configurare WP Rocket<\/a><\/li>\n
- Come Installare e Configurare SEOPress<\/a><\/li>\n
- Come Installare e Configurare UpdraftPlus<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
Personalizzare Gravity Forms con CSS e Codice Custom Gravity Forms genera moduli perfettamente funzionali out-of-the-box, ma spesso è necessario personalizzare l’aspetto per adattarlo al design…<\/p>\n","protected":false},"author":0,"featured_media":167015,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"Personalizzare Gravity Forms con CSS | Guida","_seopress_titles_desc":"Come personalizzare Gravity Forms con CSS e codice custom. Stili, layout, hooks e filtri per sviluppatori.","_seopress_robots_index":"","footnotes":""},"categories":[1],"tags":[3422,2957,3329,3328,471],"class_list":["post-167041","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-senza-categoria","tag-codice","tag-css","tag-design","tag-gravity-forms","tag-personalizzazione"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/167041","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"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=167041"}],"version-history":[{"count":0,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/167041\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/167015"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=167041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=167041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=167041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}