Site search or functionality

We’re looking to create a site showcasing a series of pieces of writing. The user will enter a number between 0 and 250, and one of the 250 pieces will appear on the page corresponding to the number on the piece of writing (in a typewriter animation).

The user should be able to then go through each piece of writing using buttons or return to search.

The logo, background, rest of site will remain fixed.

Is this possible?

We’ve explored Webflow search features - however these seem to require indexing. We’d want this to be contained within the actual website content.

Wireframe explainer of journey attached.

Thanks!



Possible? Maybe with a bunch of custom code on Webflow which would not be my first choice. You can explore that yourself or consider hire a Webflow Expert or Partner. I would suggest you prepare a more detailed functional requirement and budget to go from there.

Interesting… I thought with Webflow’s capabilities, especially on a premium membership, this would be easier?

@webdev

We basically want to show/hide a number of different text elements but using something that isn’t a button.

Our back-up is a randomiser e.g. Random poem | Poetry In Voice

But it would be nice if the user could enter a number, which will show a poem with that specific number as a tag?

Thanks

Finsweet has some tools to filter collection results which lots of people use and it is basically nocode. See Finsweet Attributes. Has limitations. Webflow generates static pages and filtering the results means all the content is on the page, just hidden.

I would probably look at using that in conjunction with HTMX.

I think there’s a more simple way?

Jeff’s given you all the right answers.
Webflow doesn’t really offer any prebuilt “dynamic” UX options beyond swipers and tabs, which aren’t designed for 200+ items and don’t natively integrate with the CMS.

If you’re looking for “enter a number, nav to a page”, you can just use a collection list and a form. You’d write some JS to take your input, verify it’s a valid number, and then form your URL like /page/204 and navigate the user there.

That’s the simplest option.

If you want to stay on the same page, you have more complex options…

  • Finsweet cms filter + cms load
  • Swiperjs plus navigation code plus multiple collection lists
  • Interactions-hidden items plus hidden display click-triggers plus navigation code to find and click them

These all require a bit more setup and 2 & 3 require some javascript programming, 1 does not.