How to Add a Table of Contents for Long Forms

Introduction

Do you have a long form that you would like to add a table of contents to? You can easily add HTML links to the top of your form as well as the section headings on your form that allow users to jump quickly and effortlessly in between sections of your form. In this tutorial, we’ll show you the HTML you need in order to complete this!

Setting up your form

In our example, we’re going to create an employee personnel form that will collect various information such as personal, dependents, emergency contacts and interests.

So to begin, create a new form and add your relevant fields. The various information categories, as mentioned previously, will be divided by using the HTML / Code Block form field.

Each section of your form will need to be separated with an HTML / Code Block to add your links to in the next step.

Now that the form is set up, it’s time to add our links to the section headings.

For example, let’s add a link to our Personal Information section.

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

So what we’re doing there is adding a HTML heading of h2 to our form and inside that heading, we’re going to add a link. The id of the link is the most important as this determines what the link’s destination is.

Add your heading and links to each section of your form.

You’ll need to repeat this step for each section you have.

Please remember that a link’s id should always be unique. If you have more than 1 link on a page, the browser will get confused on which link to jump to so for best practices, always use a unique identifier.

Creating the table of contents

With our final step, we’re going to add an HTML / Code Block to the very top of the form that will hold an HTML unordered list with links that point to each section of our form.

When these links are clicked, the page will jump to the appropriate section of the form.

<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>

Add the code to your form through the HTML / Code Block form field to create your table of contents

The id from the previous step and the href from this step will need to match exactly or one will not link to the other.

Styling the table of contents

This step is completely optional, however, if you’d like to add some styling to these links just copy this CSS to your site.

If you need any help on adding CSS to your site, please review this tutorial.

div#wpforms-1682-field_34 ul {
    text-align: center;
}

div#wpforms-1682-field_34 ul li {
    list-style: none !important;
    display: inline-block;
    margin: 5px 10px !important;
}

In our example, the HTML / Code Block form field ID is 34 and our form ID is 1682.

Just by adding a little CSS you can easily transform your table of contents list into a centered list across your page.

And that’s all you need to easily create a table of contents at the beginning of your long form! Would you like to also learn how to create an internal use field you can use to filter your entries? Take a look at our tutorial on How to Add a Filterable Field to a Form for Internal Use.