For the Blog

Magically generate a gorgeous table of contents for your articles using the heading tags within the rich text block. It can be used on CMS Template or Static pages.

Instructions

Make sure you have the VisualDX script in your <head>. Checkout the Quick Start for how to do this.

Add a rich-text-field to your page, and give it an attribute of vdx-toc-article

Add a list element to your page, and give it an attribute of vdx-toc-list

Add a text-link or link-block inside each list-item

Give each list-item an attribute that relates to the heading tag you wish it to represent.

for the H1 tag use vdx-toc-h1
for the H2 tag use vdx-toc-h2
for the H3 tag use vdx-toc-h3
for the H4 tag use vdx-toc-h4
for the H5 tag use vdx-toc-h5
for the H6 tag use vdx-toc-h6

For example, add the vdx-toc-h2 attribute to the list-item you would like to represent the <h2> tags in your article.

Now you can style both your list-item and text-link / link-block. Feel free to give each tag a different style e.g. you could indent the <h3> tags a little.

We tend to use combo classes such as:

toc_list-item for-h2
toc_list-item for-h3
toc_list-item for-h4

Publish your site to staging and test out both the styles and the behaviour.

An example of the TOC in action

Table of Contents

Using JavaScript with Webflow Forms

Webflow forms are essential for user interaction, and adding JavaScript can enhance their functionality. This article discusses how to implement JavaScript with Webflow forms.

‍

Form Validation

JavaScript can be used to validate form inputs before submission, ensuring data integrity and improving user experience.

‍

Dynamic Form Fields

Using JavaScript, you can create dynamic form fields that change based on user input, making forms more interactive.

"Dynamic forms can significantly improve user engagement."