Impostare lo Stile del Modulo in Colonne

25 giugno 2024

A volte, creare un modulo può rivelarsi piuttosto complicato, specialmente quando si tratta di mettere mano al codice CSS, soprattutto se non si hanno conoscenze specifiche sull’argomento.

Per semplificare le cose, noi di Jotform abbiamo sviluppato delle funzionalità che ti permetteranno di realizzare moduli multi-colonna in maniera facile e veloce.

Youtube Embed Poster: f4dyCN2iy5o

Restringere un Campo

Per poter impostare lo stile del modulo in colonne, è necessario abilitare l’opzione Contrai sul campo in questione. Cosa significa esattamente? Vuol dire contrarre la larghezza di un campo al minimo indispensabile. Di default, ogni campo che aggiungi al modulo, occupa tutta la larghezza dello stesso. Perciò, contrarre il campo, permetterà di mostrare più campi sulla stessa riga, anziché mostrarli uno sotto l’altro.

Impostare lo Stile del Modulo in Colonne Image-1

Impostare il Modulo a 3 o più Colonne

Abilita l’opzione Abilita stile in colonne se desideri che il tuo modulo abbia più di 2 colonne. Senza questa opzione, sarà necessario modificare manualmente il codice CSS per suddividere correttamente il tuo modulo in colonne. Ma grazie al Designer Avanzato accessibile dal Form Builder, basterà mettere la spunta sulla casella e il gioco è fatto.

Nel seguente esempio, creeremo un layout a 3 colonne:

1. Selezionare almeno 3 elementi del modulo utilizzando il tasto CTRL + click.
2. Cliccare col tasto destro del mouse su uno degli elementi selezionati.
3. Selezionare quindi l’opzione Contrai dal relativo menù.

Impostare lo Stile del Modulo in Colonne Image-2

4. Aprire il pannello Form Designer.
5. Cliccare sul pulsante Designer Avanzato accessibile sia dal tab Colori che dal tab Stili.

Impostare lo Stile del Modulo in Colonne Image-3

6. Dal Designer Avanzato, espandere la sezione Layout del Modulo.
7. Mettere la spunta su Abilita stile in colonne.
8. Impostare quindi il numero di colonne.
9. Infine cliccare sull’icona del dischetto, sulla barra verticale alla sinistra dello schermo, per salvare le modifiche.

Impostare lo Stile del Modulo in Colonne Image-4

Tornare poi al Form Builder, cliccando sul logo Jotform nell’angolo in alto a sinistra.

Spostare un Campo Contratto su una Nuova Riga

Perché dovresti voler spostare un campo contratto su una nuova riga? Beh, supponiamo di voler disporre un paio di campi sulla stessa riga – e dopo aver abilitato la proprietà Contrai su tutti i campi, sulla riga vengono improvvisamente mostrati tre o quattro campi invece di due. È in questo caso che abbiamo bisogno di disporre un campo contratto su una nuova riga.

Note

Tenete a mente che vanno considerati alcuni fattori aggiuntivi:

  • La larghezza del modulo – assicurarsi che il modulo sia largo abbastanza per ospitare le colonne desiderate.
  • La larghezza del campo – se stai cercando di creare un modulo a due colonne e uno dei campi non si sposta, potrebbe essere necessario ridurre la sua larghezza. Per via della natura responsive del modulo, un campo relativamente largo occuperebbe troppo spazio per far sì che sulla stessa riga venga ospitato anche l’altro campo. Perciò, la regola base per ottenere un modulo su due colonne, è assicurarsi che entrambi i campi siano proporzionati in modo tale da entrare sulla stessa riga.
  • Posizione dell’etichetta del campo – un campo con etichetta allineata a sinistra sarà più largo di un campo con allineamento dell’etichetta in alto. Perciò questo va tenuto a mente quando si sta creando il modulo.

Vediamo un semplice esempio di modulo a due colonne:

https://form.jotform.com/221225991812960

È tutto! Per qualsiasi suggerimento o chiarimento, lascia un commento in fondo alla pagina, oppure contattaci sul nostro Forum di Assistenza.

Guida correlata: Posizionamento Fianco a Fianco dei Campi del Modulo

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.