Puoi modificare facilmente l'aspetto dei tuoi form, survey e quiz usando il CSS personalizzato. Segui questi semplici passaggi.
1. Dove aggiungere il CSS personalizzato
Opzione 1: All'interno del Form, Survey o Quiz (consigliato)
Vai su Siti (Sites) → Form Builder (oppure Survey Builder / Quiz Builder).
Apri il tuo form.
Clicca sulla scheda Stili → Sezione Avanzata → sezione CSS personalizzato.
Incolla il tuo codice CSS.
Clicca su Salva, poi su Pubblica.
Questo metodo aggiorna l'aspetto del form all'interno del form o survey stesso.
Suggerimento: Per aggiungere uno spazio superiore di base al tuo form, survey o quiz, utilizza i controlli di margine superiore integrati nella sezione Stili → Layout del builder prima di ricorrere al CSS personalizzato. Riserva il CSS per modifiche visive avanzate non disponibili nel pannello Layout.
Opzione 2: Sulla pagina del Funnel o del Sito Web
Se il tuo form è incorporato in una pagina:
Apri il tuo Funnel o Sito Web nel Builder.
Vai su Impostazioni (Settings) → CSS personalizzato.
Aggiungi il CSS qui per stilizzare il contenitore intorno al form (come margini, padding o colore di sfondo).
⚠ Non è possibile stilizzare i campi o i pulsanti da qui, perché il form viene caricato all'interno di un iframe.
Opzione 3: Su siti esterni (come WordPress)
Puoi comunque stilizzare il contenitore dell'iframe, ma non i campi del form al suo interno.
2. Esempi di CSS di base
A. Campi di input
input, textarea, select { border: 1px solid #ccc; border-radius: 8px; padding: 10px; font-size: 16px; }
input:focus, textarea:focus { border-color: #7C3AED; box-shadow: 0 0 4px rgba(124, 58, 237, 0.3); }
B. Pulsante di invio
button[type="submit"] { background-color: #7C3AED; color: white; padding: 12px 20px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; }
button[type="submit"]:hover { background-color: #6931d4; }
C. Etichette ed errori
label { font-weight: 600; color: #111827; }
.hl-error, .error-message { color: #DC2626; font-size: 14px; }
D. Barra di avanzamento Survey/Quiz
.hl-progress .fill { background-color: #7C3AED; transition: width 0.3s ease; }
E. Stile ottimizzato per mobile
@media (max-width: 480px) { form { padding: 0 10px; } button[type="submit"] { width: 100%; } }
3. Stilizzare i pulsanti di navigazione dei Survey
Puoi anche stilizzare i pulsanti Precedente, Successivo e Invia nei survey usando questi snippet CSS.
.ghl-footer-preview .ghl-submit-btn { background-color: #28A745 !important; color: #FFFFFF !important; }
.ghl-footer-preview .ghl-footer-next { background-color: #28A745 !important; color: #FFFFFF !important; }
.ghl-footer-preview .ghl-footer-back { background-color: #28A745 !important; color: #FFFFFF !important; }
? Puoi sostituire #28A745 con il colore del tuo brand per adattarlo al tuo tema.
4. Risoluzione dei problemi
Il CSS non funziona?
Assicurati di averlo aggiunto nell'area CSS personalizzato all'interno del Form/Survey/Quiz.
Clicca su Pubblica, poi aggiorna il browser o apri in modalità Navigazione in incognito.
Se il form è incorporato, ricorda: il CSS della pagina non influisce sull'interno del form (a causa dell'iframe).
5. Consigli rapidi
Esegui sempre Salva e Pubblica dopo le modifiche.
Usa Ispeziona (tasto destro → Ispeziona) per trovare i nomi delle classi degli elementi.
Evita di abusare di
!important.Verifica l'aspetto su desktop e mobile.
6. Template di esempio (Copia & Incolla)
Incolla questo nel campo CSS personalizzato del tuo Form:
input, textarea, select { width: 100%; border: 1px solid #D0D5DD; border-radius: 8px; padding: 10px; }
label { font-weight: 600; color: #111827; } button[type="submit"] { background: #7C3AED; color: #fff; padding: 12px 18px; border: none; border-radius: 8px; cursor: pointer; }
button[type="submit"]:hover { background: #6931d4; }
Fatto! Il tuo form, survey o quiz avrà ora gli stili personalizzati applicati, inclusi i pulsanti adattati al colore del tuo brand.