Chi Siamo Area Clienti Promo del Mese Dicono di Noi Portfolio FAQ Blog
Contattaci
Senza categoria

Personalizzare Gravity Forms con CSS e Codice Custom

· 7 min di lettura

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 del sito, al branding aziendale o a esigenze specifiche di user experience. In questa guida vedremo come personalizzare Gravity Forms utilizzando CSS personalizzato, classi predefinite, hook PHP e snippet JavaScript per ottenere moduli che si integrano perfettamente con il tuo sito WordPress.

La Struttura HTML di Gravity Forms

Per personalizzare efficacemente il CSS, è fondamentale comprendere la struttura HTML generata da Gravity Forms. Ogni modulo è racchiuso in un wrapper con classe e ID specifici:

Il wrapper principale ha la classe .gform_wrapper e un ID nel formato #gform_wrapper_X dove X è l’ID del modulo. All’interno, il tag <form> ha l’ID #gform_X. Ogni campo è racchiuso in un <li> con classe .gfield e ID #field_X_Y dove Y è l’ID del campo. L’input effettivo ha l’ID #input_X_Y.

Questa struttura gerarchica e prevedibile rende facile targetizzare qualsiasi elemento del modulo con selettori CSS specifici:

Editor di Gravity Forms con personalizzazione dei campi e classi CSS

Classi CSS Predefinite di Gravity Forms

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:

Layout a colonne:

Aspetto:

Per applicare una Ready Class, apri le impostazioni del campo, vai alla scheda Appearance e inserisci la classe nel campo “Custom CSS Class”. Puoi combinare più classi separandole con uno spazio.

CSS Personalizzato: Dove Inserirlo

Ci sono diversi modi per aggiungere CSS personalizzato per Gravity Forms, ognuno con vantaggi specifici:

Personalizzazione tema (consigliato): Vai su Aspetto > Personalizza > CSS aggiuntivo e inserisci il tuo CSS. Questo metodo è semplice e i CSS sopravvivono agli aggiornamenti del tema.

Child theme: Aggiungi il CSS nel file style.css del child theme. Ideale per personalizzazioni estese e permanenti.

Plugin CSS custom: Plugin come “Simple Custom CSS and JS” permettono di aggiungere CSS senza modificare file del tema.

Inline nel campo HTML: Per personalizzazioni specifiche a un singolo modulo, puoi aggiungere un tag <style> in un campo HTML del modulo. Questo metodo è rapido ma non è la best practice.

Esempi Pratici di Personalizzazione CSS

Personalizzare il pulsante di invio:

.gform_wrapper .gform_button {
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.gform_wrapper .gform_button:hover {
    background-color: #1d4ed8;
}

Personalizzare i campi di input:

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper textarea {
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 15px;
    transition: border-color 0.3s ease;
}
.gform_wrapper input:focus,
.gform_wrapper textarea:focus {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

Personalizzare i messaggi di errore:

.gform_wrapper .gfield_error .gfield_label {
    color: #dc2626;
}
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea {
    border-color: #dc2626;
    background-color: #fef2f2;
}
.gform_wrapper .validation_message {
    color: #dc2626;
    font-size: 13px;
    margin-top: 4px;
}

Impostazioni avanzate del campo con configurazione delle classi CSS personalizzate

Hook PHP: Personalizzazioni Avanzate

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.

Hook più utilizzati:

gform_pre_render — Si attiva prima del rendering del modulo. Perfetto per modificare dinamicamente le opzioni dei campi dropdown o i valori predefiniti.

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

gform_after_submission — Si attiva dopo il salvataggio della entry. Ideale per integrazioni personalizzate: invia dati a API esterne, crea record nel database, avvia processi automatizzati.

gform_pre_submission — Si attiva prima del salvataggio. Puoi modificare i dati della entry prima che vengano salvati nel database.

gform_notification — Permette di modificare le notifiche email prima dell’invio. Puoi cambiare destinatario, oggetto, corpo o allegati in base alla logica personalizzata.

Esempio: Validazione personalizzata del codice fiscale:

add_filter(gform_field_validation_5_3, function($result, $value, $form, $field) {
    if ($result[is_valid] && strlen($value) !== 16) {
        $result[is_valid] = false;
        $result[message] = Il codice fiscale deve essere di 16 caratteri.;
    }
    return $result;
}, 10, 4);

JavaScript Personalizzato

Gravity Forms espone eventi JavaScript che permettono di aggiungere interattività personalizzata ai moduli:

gform_post_render — Si attiva dopo il rendering del modulo. Utile per inizializzare plugin JavaScript sui campi del form.

gform_page_loaded — Si attiva quando viene caricata una nuova pagina in un modulo multi-step. Utile per eseguire azioni al cambio di pagina.

gform_confirmation_loaded — Si attiva quando viene mostrata la conferma. Perfetto per tracciare le conversioni con analytics.

Esempio: Tracciamento conversione Google Ads:

jQuery(document).on(gform_confirmation_loaded, function(event, formId) {
    if (formId === 5) {
        gtag(event, conversion, {
            send_to: AW-XXXXXXXXX/YYYYYYYY
        });
    }
});

Personalizzare il Tema del Modulo

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:

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.

Stato del sistema Gravity Forms con verifica della compatibilità con temi e personalizzazioni

Personalizzazioni per Elementor

Se utilizzi Elementor come page builder, ci sono considerazioni specifiche per la personalizzazione di Gravity Forms:

Responsive Design

Gravity Forms è responsive per impostazione predefinita: i layout a colonne si impilano automaticamente su schermi piccoli. Tuttavia, potresti voler personalizzare ulteriormente il comportamento responsive:

@media (max-width: 640px) {
    .gform_wrapper .gf_left_half,
    .gform_wrapper .gf_right_half {
        width: 100%;
    }
    .gform_wrapper .gform_button {
        width: 100%;
        padding: 14px;
    }
    .gform_wrapper input[type="text"],
    .gform_wrapper textarea {
        font-size: 16px; /* Previene lo zoom su iOS */
    }
}

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

Best Practice per le Personalizzazioni

Per personalizzazioni avanzate dei tuoi moduli Gravity Forms, contatta il team di G Tech Group.

Continua a Leggere: Guide WordPress Essenziali

Migliora il Tuo Sito WordPress

Scopri le nostre guide complete sugli altri plugin essenziali per WordPress:

#Codice #CSS #Design #Gravity Forms #personalizzazione