Personalizza il tuo Modulo con Codice CSS Personalizzato

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.

Watch on youtube

Inject Custom CSS Codes to your Form

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;
}

.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;
}

.supernova {
  background: transparent;
}

Rimuovi la Spaziatura Attorno al Modulo

.jotform-form {
padding: 0px;
}

.jotform-form {
  padding: 0px;
}

Rendi Trasparente lo Sfondo del Modulo

.form-all {
background: transparent;
}

.form-all {
  background: transparent;
}

Modifica il Colore di Sfondo dell’Header

.form-header-group {
background-color: #FFCC66;
}

.form-header-group {
  background-color: #FFCC66;
}

Modifica il Colore del Testo del Subheader

.form-subHeader {
color: #2408FC !important;
}

.form-subHeader {
  color: #2408FC !important;
}

Modifica il Colore di Tutte le Sub Label

.form-sub-label {
color: #DBA407;
}

.form-sub-label {
  color: #DBA407;
}

Modifica il Colore dell’Effetto Evidenziatore Giallo

.form-line-active {
background: #baffb9;
}

.form-line-active {
  background: #baffb9;
}

Modifica il Colore dell’Asterisco dei Campi Obbligatori

.form-required {
color: blue !important;
}

.form-required {
  color: blue !important;
}

Rimuovi lo Sfondo Rosso nei Messaggi di Errore

.form-line-error {
background: transparent;
}

.form-line-error {
  background: transparent;
}

Allinea il Modulo a Sinistra

.form-all {
margin: 0px;
}

.form-all {
  margin: 0px;
}

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;
}

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