Personalizza il tuo Modulo con Codice CSS Personalizzato

21 dicembre 2021

AGGIORNAMENTO: Guarda il video tutorial sullo strumento Form Designer che ti permette di creare fantastici moduli senza bisogno di conoscere il CSS!

Prima di iniziare a personalizzare il tuo modulo tramite il codice CSS proposto qui sotto, dovrai imparare come inserire codice CSS sul tuo modulo.

Youtube Embed Poster: v2apY6221Ro

Imposta un’Immagine di Sfondo nella pagina

.supernova {
background-image:url ('http://www.site.com/image.jpg');
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: cover;}

Replace the URL with your background image.

Guarda Anteprima


Rendi Trasparente lo Sfondo della Pagina

.supernova {
background:transparent;
}

Rimuovi la Spaziatura Attorno al Modulo

.jotform-form {
padding:0;
}

Rendi Trasparente lo Sfondo del Modulo

.form-all {
background:transparent;
}

Modifica il Colore di Sfondo dell’Header

.form-header-group {
background-color: #FFCC66;
}
Personalizza il tuo Modulo con Codice CSS Personalizzato Image-1

Modifica il Colore del Testo del Subheader

.form-subHeader {color:#2408FC !important;}
Personalizza il tuo Modulo con Codice CSS Personalizzato Image-2

Modifica il Colore di Tutte le Sub Label

.form-sub-label {
color:#DBA407;
}
Personalizza il tuo Modulo con Codice CSS Personalizzato Image-3

Modifica il Colore dell’Effetto Evidenziatore Giallo

.form-line-active {
background:#baffb9;
}
Personalizza il tuo Modulo con Codice CSS Personalizzato Image-4

Modifica il Colore dell’Asterisco dei Campi Obbligatori

.form-required {
color: blue !important;
}
Personalizza il tuo Modulo con Codice CSS Personalizzato Image-5

Rimuovi lo Sfondo Rosso nei Messaggi di Errore

.form-line-error {
background:transparent;
}
Personalizza il tuo Modulo con Codice CSS Personalizzato Image-6

Allinea il Modulo a Sinistra

.form-all {
margin:0;
}

Guarda Anteprima


Crea Istantaneamente un Layout a Due Colonne con Campi Ristretti

.form-line-column {
width: 50%;
}
.form-line-column:nth-child(even) {
clear: left;
}

Guarda Anteprima


Rendi Responsive i Campi Relativi alla Carta di Credito in Tutte le Integrazioni di Pagamento

Copia il codice CSS a questo link: http://pastebin.com/raw/UJV3nGf5

Guarda Anteprima

Se non riesci a trovare il codice CSS adatto al tuo modulo e hai bisogno di assistenza, lascia un commento qui in basso o contattaci.

Contatta il Supporto:

Il nostro servizio clienti è disponibile 24/7 e il tempo medio di risposta è tra una e due ore.
Puoi contattare il nostro team via:

Support Forum: https://www.jotform.com/answers/

Contatta il Supporto Jotform: https://www.jotform.com/contact/

Invia un Commento:

Jotform Avatar
Questo sito è protetto da reCAPTCHA e si applicano le Norme sulla Privacy e i Termini di Servizio di Google.

Podo Comment Commenta per primo.