I was wondering if anyone is able to help me regarding footnote implementation in Webflow’s CMS pages. I’ve seen it mentioned in a few different forum posts on here but haven’t been able to find a satisfactory solution. (Here and here you can see similar questions to my own).
I want to include footnotes in my long-form content, either as tooltips, a side bar or in a div at the bottom of the page, however there is no clear way to create anchor links from the in-line footnote to the relevant footnote itself and back again in Webflow’s CMS natively. I currently use Refokus’ rich-text enhancer to wrap in-line footnote numbers in an anchor link to the relevant footnote, but lots of our essays are long and have upwards of 80 footnotes, and doing this manually is extremely bulky and time-consuming.
Basically I want to know if anybody has created any custom code that would tell Webflow to generate two-way anchor links each time you create an in-line footnote link - e.g. for every time you use superscript text for the footnote number. Or if there is a way to extend something like Bigfoot.js to work inside CMS items, so that you don’t need to create a new collection for each new set of footnotes (we have nearly 150 publications and counting so this is not practical).
I’m amazed that something like this is not part of Webflow’s functionality seeing as its CMS is otherwise very compatible with long-form written content. I’ve requested that Webflow create their own feature to automate this process, so if anyone feels similarly please give the request an upvote here!
Hi Sophie, I’ve written custom code for this but nothing in a library form that you can simply plug in. The problem is that each client’s implementation requirements are different. Some want the footnotes as a scroll-to section. Some want a sidebar. Some want a tooltip or a popup. The indicators can be styled differently too.
But the basic feature is straightforward to build if you are familiar with basic JS.
The best approach I’ve found is to have two separate rich text fields in the CMS- one for the article content, one for the footnotes.
In both, I use the notation [n] to indicate footnotes, with n as any positive integer.
The script parses the blog content [n]'s into footnote indicators that you like, I often keep the brackets and the number, and link and superscript them. These are linked to #footnote-n.
It also parses the footnote content [n]'s similarly, usually presenting them as a bolded numeric indicator prefacing the footnote, which has the id footnote-n.
That’s the whole setup.
This lets you add as many footnotes as you want, and to repeat references like [36]. Using numbers also has the advantage that if JS is disabled in the browser, the user can still read and locate the correct footnote.
Note that it won’t warn you if you’ve created a footnote references that doesn’t exist, or about orphaned footnotes. Also the editing experience isn’t ideal since they’re completely separate.
But this is the simplest implementation.
There are a LOT of variations to this, but I generally recommend keeping it simple if you can.
Hi Michael thanks for taking the time to reply. This sounds like a good solution and similar to the method that I am already using manually. Is there a script that you then include in the body code of the collection template? If so are you able to share?
Yes you’ll need to write a script for your specific setup. In my case each client project is different so these get custom built. Feel free to DM me if you need help building this.
If you follow the outline I gave you above, that’s the most straightforward design I’ve found and you should be able to describe it a tool like chatgpt and get a basic functional script.
