A volte potresti voler nascondere le etichette con il nome dei campi del tuo modulo. In questa guida imparerai esattamente come fare.
A. Per Rimuovere Tutte le Etichette dei Campi del Modulo:
1. Se desideri rimuovere in un colpo solo, tutte le etichette presenti sui campi del tuo modulo, aggiungi il seguente codice CSS al tuo modulo.
.form-label-left, .form-label-right, .form-label-top { display:none; }
B. Per Rimuovere Soltanto delle Specifiche Etichette:
1. Cerca il codice identificativo dell’etichetta, e aggiungici accanto il seguente codice {display:none;}
Esempio:
#label_1 {display:none;} <— Questo codice nasconderà una singola etichetta
#label_1, #label_2 {display:none;} <— Questo codice nasconderà due etichette (puoi separare gli ID utilizzando una virgola “,”)
Spiegazione:
#label_1: Rappresenta il codice identificativo di un certo elemento del modulo. Il selettore ID è utilizzato per specificare uno stile relativo ad uno specifico elemento. L’ID è sempre definito utilizzando il simbolo cancelletto “#”.
{display:none;}: la proprietà display definisce il modo in cui un certo elemento HTML deve essere mostrato. Assegnando il valore none l’elemento non sarà mostrato.
Come ottenere l’ID dell’etichetta?
Il modo più semplice per ottenere l’ID dell’etichetta che desideri nascondere, è utilizzando la funzionalità Ispeziona Elemento presente nei più comuni browser come Chrome, Firefox, Safari, etc. Vediamo come fare:
a. Evidenzia e clicca col tasto destro sull’elemento che desideri nascondere e seleziona Ispeziona
b. Copia l’ID dell’etichetta che troverai accanto all’attributo id.
Per poterlo utilizzare nell’area CSS, basterà aggiungere il simbolo cancelletto # come prefisso dell’ID. Ad esempio, #label_1. Per cui il codice CSS finale sarà #label_1{display: none;}
Se desideri nascondere tutte le etichette del tuo modulo in un colpo solo, puoi utilizzare il selettore della classe. Ad esempio: .form-label. Il codice finale da utilizzare sarà: .form-label{display:none !important;}
c. Dopo aver creato il codice CSS, (ad esempio #label_1, #label_2, #label_3 {display:none;}) applicalo al tuo modulo, seguendo questa guida: Come Inserire Codice CSS. Non dimenticare di salvare le modifiche, cliccando sul pulsante Salva sotto alla finestra dedicata al codice CSS.
Ecco come appare il nostro modulo di esempio dopo aver applicato il codice CSS personalizzato:
Modulo di Esempio: https://form.jotform.com/220936087470964
I principi visti in questa guida, possono essere applicati, in linea di massima, per nascondere qualsiasi altro elemento del modulo, non soltanto le etichette. I passi da seguire sono gli stessi, basterà semplicemente recuperare gli ID corretti degli elementi che si desidera nascondere, e utilizzarli nel codice CSS. Per qualsiasi domanda, o suggerimento, lascia un commento qui in fondo alla pagina.
Invia un Commento: