Résumé IA
Avez-vous un formulaire long auquel vous souhaitez ajouter une table des matières ? Vous pouvez facilement ajouter des liens HTML en haut de votre formulaire ainsi qu'aux titres de section de votre formulaire, ce qui permet aux utilisateurs de naviguer rapidement et sans effort entre les sections de votre formulaire.
Dans ce tutoriel, nous vous montrerons le HTML nécessaire pour activer la table des matières dans vos formulaires WordPress.
Création de votre formulaire
Dans notre exemple, nous allons créer un formulaire de personnel d'employé pour collecter des informations telles que les informations personnelles, les personnes à charge, les contacts d'urgence et les centres d'intérêt.
Pour commencer, créez un nouveau formulaire ou modifiez-en un existant pour accéder au générateur de formulaires. Dans le générateur de formulaires, ajoutez les champs pertinents. Les différentes catégories d'informations, comme mentionné précédemment, seront divisées à l'aide du champ de formulaire HTML.
Ajout des liens HTML aux titres
Maintenant que le formulaire est configuré, il est temps d'ajouter nos liens aux titres de section.
Par exemple, ajoutons un lien à la section Informations personnelles.
Avec ce HTML, nous ajoutons un titre HTML h2 à notre formulaire, et à l'intérieur de ce titre, nous allons ajouter un lien. L'id du lien est le plus important car il détermine la destination du lien.
Vous devrez répéter cette étape pour chaque section que vous avez.
Remarque : L'id de chaque lien doit être unique. Utiliser le même id pour plusieurs sections d'une page confondra le navigateur, et le sélecteur ne fonctionnera pas.
Création de la table des matières
Avec notre dernière étape HTML, nous ajouterons un champ HTML tout en haut du formulaire qui contiendra une liste non ordonnée HTML avec des liens pointant vers chaque section de notre formulaire.
Lorsque ces liens seront cliqués, la page sautera à la section appropriée du formulaire.
Remarque : L'id de l'étape précédente et le href de cette étape doivent correspondre exactement avec un signe dièse (#) devant le texte, sinon l'un ne sera pas lié à l'autre.
Mise en forme de la table des matières
Cette étape est entièrement facultative. Cependant, si vous souhaitez ajouter une mise en forme à ces liens, copiez simplement ce CSS sur votre site. Si vous avez besoin d'aide pour ajouter du CSS à votre site, veuillez consulter ce tutoriel.
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;
}
Dans notre exemple, l'ID du champ de formulaire HTML est 14 et notre ID de formulaire est 1279. Cela signifie que notre CSS ne sera appliqué qu'à cet ID de formulaire et de champ spécifique.
Si vous avez besoin d'aide pour trouver les ID de vos champs et de vos formulaires, consultez ce tutoriel.
C'est tout ! Vous savez maintenant comment créer facilement une table des matières au début de votre long formulaire !
Ensuite, souhaitez-vous créer un champ interne que vous pouvez utiliser pour filtrer vos entrées ? Consultez notre tutoriel sur l'ajout d'un champ filtrable à un formulaire à usage interne.