Puoi cambiare 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 (consigliata)

  1. Vai su Sites → Form Builder (oppure Survey Builder / Quiz Builder).
  2. Apri il tuo Form.
  3. Clicca sulla scheda Styles → Advanced Section → sezione Custom CSS.
  4. Incolla il tuo codice CSS.
  5. Clicca su Save, poi su Publish.

GIF che mostra come aggiungere CSS personalizzato

Questo metodo aggiorna l'aspetto del Form all'interno del Form o Survey stesso.

Suggerimento: Per aggiungere uno spazio sopra al Form, Survey o Quiz, usa prima i controlli di margine superiore integrati nella sezione Styles → 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

Se il tuo Form è incorporato in una pagina:

  1. Apri il tuo Funnel o Sito nel Builder.
  2. Vai su Settings → Custom CSS.
  3. Aggiungi qui il CSS per stilizzare il contenitore intorno al Form (come margini, padding o colore di sfondo).

⚠ Non puoi 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 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. Label 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 responsive per mobile

@media (max-width: 480px) {  form {    padding: 0 10px;  }  button[type="submit"] {    width: 100%;  } }

3. Stilizzare i Pulsanti di Navigazione della Survey

Puoi stilizzare anche i pulsanti Precedente, Successivo e Invia nelle 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 che sia stato aggiunto nell'area Custom CSS all'interno del Form/Survey/Quiz.
  • Clicca su Publish, poi aggiorna il browser o aprilo in Incognito.
  • Se il Form è incorporato, ricorda: il CSS della pagina non influisce sull'interno del Form (a causa dell'iframe).

5. Consigli Rapidi

  • Fai sempre Save and Publish dopo le modifiche.
  • Usa Inspect (tasto destro → Inspect) per trovare i nomi delle classi degli elementi.
  • Evita di usare !important eccessivamente.
  • Controlla l'aspetto sia su desktop che su mobile.

6. Template di Esempio (Copia e Incolla)

Incolla questo nella casella Custom CSS 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 i tuoi stili personalizzati applicati, inclusi i pulsanti stilizzati per rispecchiare il tuo brand.