Forest: Common Sense Club quiz

Forest's Common Sense Club is its rider-safety initiative for London, backed by Transport for London and the London Cycling Campaign, with folding-helmet maker Newlane as partner. At its centre is a deliberately cheeky safety quiz. Shrink built the first edition natively in Webflow, and it kept 81.6% of players all the way to the end. For the 2026 relaunch we rebuilt it as a React code component that Forest's team places and publishes in Webflow like any other element.

Forest wanted a cycling safety campaign that cut through. Dry safety tips and forgettable PDFs were never going to change how people ride. The campaign needed a reason for riders to stick with it: real Highway Code scenarios, a playful tone, and a reward at the end, with 30 free minutes of riding for passing and the chance to win a Newlane folding helmet.

The concept was sharp from the start: a tongue-in-cheek challenge built on Forest's sticker-style campaign artwork. The interesting problem was technical. Delivering that level of interactivity and polish inside Webflow, with the branding intact, ruled out a generic third-party quiz tool.

For 2026 the brief got harder in both senses. Fewer questions, bigger moments on every answer, and a build Forest could keep running inside its own Webflow site for future editions.

The first edition was a conditional quiz built in Webflow with custom JavaScript: per-answer feedback, real-time progress, GSAP motion with horizontal scrolling on desktop and a vertical flow on mobile, and HubSpot and GTM tracking.

The 2026 edition is a React code component, shipped to Forest's Webflow site through Webflow's code component library. Each answer gets its own full-screen moment: video, sound, a trumpet, confetti, and a gentle "try again" when a rider gets it wrong. Riders who pass claim their free ride minutes through an embedded Typeform. Media is compressed for phones (an 8MB clip down to under 500KB) and served from a CDN, sticker art is rebuilt so it stays sharp on iOS, and the whole experience respects reduced-motion settings. The earlier edition sits in the same component library, so Forest can bring back any year's quiz.

Bot protection without adding friction:

After launch, bots started hitting the quiz's claim form to farm reward codes, which also cluttered Forest's reporting. Adding a captcha would have meant an extra step for real people, so we went for invisible checks instead. The quiz now watches how it's being played: how quickly each question is answered and whether the taps and clicks are genuine. It passes that to the Typeform as hidden data along with proof the quiz was actually completed.

Forest's CRM (Braze) uses those values to decide whether to send the reward email, so anyone who skips the quiz or plays it like a script gets no code. Real users notice nothing, and Forest can filter suspicious entries out of their reporting.

The first edition drew over 5,000 quiz starts, 19,200 views and an 81.6% completion rate, well above typical benchmarks for interactive content. The 2026 edition went live in October 2026 and was signed off by Forest's team, who now place, update and publish the quiz from Webflow themselves.

Boring topics don't have to feel boring. An 81.6% completion rate shows riders will finish a safety quiz when it's built with care, and moving it into a reusable React component means each new edition starts from a working system. For mobility brands, transport apps or anyone engaging people around safety, compliance or education, the build is what makes the brief land.