Formly & Flowplay
Connect Formly and Flowplay with Webflow to enhance functionality without custom coding.
How to integrate Formly & Flowplay and Webflow
Webflow's native forms don't support multi-step flows, conditional logic, or quiz scoring. And its default video embeds from YouTube and Vimeo give you limited control over player design. Formly and Flowplay from VI Designs solve both problems through attribute-based configuration that works directly in Webflow.
Formly & Flowplay integrate through HTML data attributes you add to Webflow elements. You can install the Webflow Marketplace App for one-click attribute addition or embed scripts manually.
Use the Formly & Flowplay Webflow App
The Webflow Marketplace App is the simplest way to add Formly and Flowplay to your Webflow projects. The app adds the required data attributes with a single click, so you don't need to manually enter code or switch between documentation and your project.
The app installs directly from the Webflow App Store and supports both Formly and Flowplay in a single interface. Select any element, click once in the app, and the required attributes appear automatically. This reduces configuration errors and speeds up setup for the following tasks:
- Build multi-step forms by adding
data-form="multistep"to your form element anddata-form="step"to each step container - Configure navigation buttons with
data-form="next-btn"anddata-form="prev-btn"attributes - Create custom video players by adding
f-data-video="wrapper"to your player container andf-data-video="video-element"to the video element - Add playback controls with attributes like
f-data-video="play-button",f-data-video="volume-slider", andf-data-video="progress-bar"
The app works with Webflow's native form submission system. Form data flows through Webflow's standard processing, including email notifications and the form submissions dashboard.
Script and attribute method
If you prefer direct control over implementation, you can embed scripts and configure attributes manually instead of using the ViDesigns app.
For Formly:
Add the Formly script to your site's custom code section. Go to Site settings > Custom code and paste the script before the closing </body> tag. Then add data attributes to your form elements. The Formly documentation covers all available attributes and configuration options.
For Flowplay:
Add the Flowplay script through Site settings > Custom code in either the <head> section or before closing </body>. Free plan users add flowplay.js and paid plan users add flowplayplus.js. Design your video player controls using native Webflow elements, then add the corresponding f-data-video attributes. The Flowplay features page documents all supported attributes.
What you can build
Integrating Formly and Flowplay with Webflow lets you build advanced form experiences and branded video content for marketing sites, SaaS platforms, and agency client projects.
- Lead qualification quizzes: Build multi-step forms with conditional logic and weighted scoring that route prospects based on responses
- Branded video portfolios: Design custom video players with Webflow's design tools and Flowplay's attributes, integrated with Webflow CMS for dynamic video libraries
- Client intake workflows: Create multi-step application forms with editable steps, form memory for saving progress, and CMS-populated dropdown options
- Product demo experiences: Embed video presentations as custom players with playback controls, quality selectors, and keyboard shortcuts for technical audiences
Frequently asked questions
Conditional logic in Formly requires a FormlyPro subscription. Add the
data-conditionattribute to form elements you want to show or hide based on user input. The attribute syntax uses field references and comparison operators to define visibility rules. See the Formly conditional logic documentation for the complete attribute reference and configuration examples.No. Formly currently supports only one multi-step form instance per page, a limitation documented in the official Formly documentation and Webflow integration guide. If you need multiple complex forms, place them on separate pages or use standard Webflow forms for simpler data collection alongside one Formly form.
No. Flowplay is a front-end JavaScript library that customizes video player interfaces. It does not provide video hosting. You need to host videos externally on platforms like Vimeo Pro (which provides direct MP4 links), YouTube, AWS, or GitHub. The Flowplay HTML Videos documentation explains how to configure video sources for each hosting platform and integrate them with your Flowplay player.
Description
Formly adds conditional logic, form memory, and quiz scoring to Webflow's native forms. Flowplay gives you full control over video player interfaces — including volume sliders, playback speed, and progress bars — using Webflow's design tools
This integration page is provided for informational and convenience purposes only.
React
Connect React (powerful component architecture) with Webflow to build dynamic, interactive web experiences with real-time data, complex state management, and reusable components—all while retaining full visual design control.
Monto Multi-Currency
Connect multi-currency tools with Webflow to display prices and process payments in multiple currencies for global customers.
fullpage.js
Connect fullpage.js with Webflow to get custom scroll hijacking, involving handling momentum scrolling, keyboard navigation, touch gestures, and history state.
F'in sweet Webflow Hacks
A custom code focused video series for Webflow websites. Learn how to use jQuery and javascript to extend the functionality of your Webflow project.
Elfsight Webflow Plugins
Connect your Webflow site with over 100 customizable, no-code widgets from Elfsight to add social feeds, forms, reviews, chat, and more—without writing a single line of code.
CMS Library: Load More
Load items from your Collection List on the same page, with Finsweet's CMS Library!
Common Ninja
Common Ninja brings over 100 customizable no-code widgets to Webflow, enabling businesses to add interactive elements like forms, reviews, countdown timers, and social proof without coding. This integration enhances user engagement, improves conversions, and extends Webflow's functionality through a simple embed process that keeps content automatically synchronized.
CMS Library: Nest
Simulate multiple nested Collections on a single page, with Finsweet's CMS Library!
CMS Library: Slider
Create CMS slider with dynamic number of slides, with Finsweet's CMS Library!
Related integrations
Get started for free
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
