Various form experiments and demonstrations that are covered in Sygnal's Webflow courses.

Webflow Forms Demos

A simple prototype of progressive filtering with FS CMS Filter.

Finsweet CMS Filter | Progressive Filtering

Have a different hover color for every CMS item.

CMS Item-Specific Hover Color

Using custom CSS, design a circular tabs arrangement which allows you to easily change the number of tabs, and design responsively.

Circular Tabs Arrangement

Control your video players, and receive events as they playback and change state.

Video Player Control

Make your collection list data easily accessible to your scripts.

Access CMS Data from JavaScript

Create a CMS-Driven Expando using Webflow Interactions

CMS-Driven Expando

Create Grouped collection lists in Webflow, with a single collection list and no custom code. Add a navigation bar with one more collection list, and a small piece of custom code.

Glossary w/ Letter Groupings

Bind Collection Lists to Form Dropdowns, Querystring params to form inputs. Bind fields to cookies, so much more.

Custom Data-Sources & Data-Binding

Advanced routing for Webflow Memberships. Route your users to any page you want immediately after login, and optionally have a special route for the first time a new user logs in - a great way to welcome them and introduce them to the members-only content area.

Memberships Login & Routing

Create lightbox groups for your item-specific image galleries.

CMS Lightbox + Groups

Build interactions-based modals fully integrated with item-specific CMS content, and make them triggerable from within a CMS collection list.

CMS Modals Demo

Automatically use querystring params in your forms and page content, open external links in a new tab, and fix-up relative links.

Url Query Params & Navigation

Give Webflow's paginated collection lists responsive pages sizes, using Finsweet's CMS Load and some custom code.

Responsive Pagination

Learn how write custom CSS and JavaScript that respond to Webflow's breakpoints

Webflow Breakpoints

Host your larger PDFs, images, and other files externally on Google Drive or Dropbox, and download them automatically.

Hosting Files

Make the most of Webflow's elements. Manipulate native elements with code.

Webflow Smart Elements

This is a demonstration of a circular progress bar that indicates the distance you have remaining until the end of an article section.

Sygnal

About

About

About