Ajout d'une table des matières pour les formulaires longs

Avez-vous un formulaire long auquel vous aimeriez ajouter une table des matières ? Vous pouvez facilement ajouter des liens HTML au sommet de votre formulaire ainsi qu'aux titres des sections de votre formulaire pour permettre aux utilisateurs de passer rapidement et sans effort d'une section à l'autre de votre formulaire.

Dans ce tutoriel, nous vous montrerons le HTML dont vous avez besoin pour activer la table des matières dans vos formulaires WordPress.

Création du formulaire

Dans notre exemple, nous allons créer un formulaire pour le personnel afin de collecter des informations telles que l'identité, les personnes à charge, les contacts en cas d'urgence et les centres d'intérêt.

Pour commencer, créez un nouveau formulaire ou modifiez un formulaire existant pour accéder au générateur de formulaires. Dans le générateur de formulaires, ajoutez les champs appropriés. Les différentes catégories d'informations, comme mentionné précédemment, seront divisées en utilisant le champ du formulaire HTML.

Ajout des liens HTML aux titres

Maintenant que le formulaire est configuré, il est temps d'ajouter nos liens aux titres des sections.

Par exemple, ajoutons un lien vers la section Informations personnelles.

<h2><a id="personal">Personal Information</a></h2>

Avec ce code HTML, nous ajoutons un titre HTML h2 à notre formulaire, et à l'intérieur de ce titre, nous allons ajouter un lien. L'identifiant 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.

Création de la table des matières

Pour notre dernière étape HTML, nous ajouterons un champ HTML tout en haut du formulaire qui contiendra une liste HTML non ordonnée avec des liens pointant vers chaque section de notre formulaire.

Lorsque l'on clique sur ces liens, la page passe à la section appropriée du formulaire.

<ul>
<li><h2><a href="#personal">Personal Information</a></h2></li>
<li><h2><a href="#dependents">Dependents</a></h2></li>
<li><h2><a href="#emergency">Emergency Contacts</a></h2></li>
<li><h2><a href="#hobbies">Hobbies & Interests</a></h2></li>
</ul>


Mise en forme de la table des matières

Cette étape est totalement facultative, mais si vous souhaitez ajouter un style à ces liens, il vous suffit de copier cette feuille de style 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 du formulaire HTML est 14 et l'ID de notre formulaire est 1279. Cela signifie que notre CSS ne sera appliqué qu'à ce formulaire spécifique et à cet identifiant de champ.

Si vous avez besoin d'aide pour trouver où se trouvent les identifiants de vos formulaires et champs, consultez ce tutoriel.

Voilà, c'est fait ! Vous savez maintenant comment créer facilement une table des matières au début de votre formulaire long !

Ensuite, vous souhaitez 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 pour un usage interne.