Riassunto AI
Hai un modulo lungo a cui vorresti aggiungere un indice? Puoi facilmente aggiungere collegamenti HTML all'inizio del tuo modulo, così come alle intestazioni di sezione del tuo modulo, che consentono agli utenti di navigare rapidamente e senza sforzo tra le sezioni del tuo modulo.
In questo tutorial, ti mostreremo l'HTML necessario per abilitare l'indice nei tuoi moduli WordPress.
Creazione del tuo modulo
Nel nostro esempio, creeremo un modulo del personale dipendente per raccogliere informazioni come dati personali, persone a carico, contatti di emergenza e interessi.
Quindi, per iniziare, crea un nuovo modulo o modifica uno esistente per accedere al generatore di moduli. Nel generatore di moduli, procedi e aggiungi i campi pertinenti. Le varie categorie di informazioni, come menzionato in precedenza, saranno suddivise utilizzando il campo modulo HTML.
Aggiungere i collegamenti HTML alle intestazioni
Ora che il modulo è impostato, è ora di aggiungere i nostri collegamenti alle intestazioni di sezione.
Ad esempio, aggiungiamo un collegamento alla sezione Informazioni personali.
Con questo HTML, stiamo aggiungendo un'intestazione HTML di h2 al nostro modulo e, all'interno di tale intestazione, aggiungeremo un collegamento. L'id del collegamento è la cosa più importante poiché determina la destinazione del collegamento.
Dovrai ripetere questo passaggio per ogni sezione che hai.
Nota: L'id di ogni collegamento deve essere univoco. L'utilizzo dello stesso id per più sezioni in una pagina confonderà il browser e il selettore non funzionerà.
Creazione dell'indice
Con il nostro ultimo passaggio HTML, aggiungeremo un campo HTML in cima al modulo che conterrà un elenco non ordinato HTML con collegamenti che puntano a ciascuna sezione del nostro modulo.
Quando questi collegamenti vengono cliccati, la pagina salterà alla sezione appropriata del modulo.
Nota: L'id del passaggio precedente e l'href di questo passaggio dovranno corrispondere esattamente con un segno di cancelletto (#) davanti al testo, altrimenti uno non si collegherà all'altro.
Styling dell'indice
Questo passaggio è completamente facoltativo, tuttavia, se desideri aggiungere dello stile a questi collegamenti, copia semplicemente questo CSS sul tuo sito. Se hai bisogno di aiuto per aggiungere CSS al tuo sito, ti preghiamo di consultare questo tutorial.
div#wpforms-1279-field_34 ul {
text-align: center;
}
div#wpforms-1279-field_14 ul li {
list-style: none !important;
display: inline-block;
margin: 5px 10px !important;
}
div#wpforms-1279-field_14 ul li h2 a {
font-size: 18px;
}
#wpforms-form-1279 h2 a {
font-size:26px;
width: 100%;
display: block;
color: #000000;
}
div#wpforms-1279-field_14 ul li h2 a:hover {
color: #b95d52;
text-decoration: underline;
}
Nel nostro esempio, l'ID del campo modulo HTML è 14 e il nostro ID modulo è 1279. Ciò significa che il nostro CSS verrà applicato solo a questo specifico modulo e ID campo.
Se hai bisogno di aiuto per trovare gli ID dei tuoi campi e moduli, dai un'occhiata a questo tutorial.
Ecco fatto! Ora sai come creare facilmente un indice all'inizio del tuo modulo lungo!
Successivamente, desideri creare un campo interno che puoi utilizzare per filtrare le tue voci? Dai un'occhiata al nostro tutorial su come aggiungere un campo filtrabile a un modulo per uso interno.