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.
Webflow Tabs
Connect Webflow Tabs with external APIs and tools to create dynamic, CMS-driven tab interfaces with automated content.
CMS Library: Anchor
Create CMS anchor links and sections, with Finsweet's CMS Library!
CMS Library: Combine
Combine multiple CMS Dynamic Lists into one single Collection List, with Finsweet's CMS Library!
CMS Library: Add Classes
Give unique add-on classes to elements inside your Collection List, with Finsweet's CMS Library!
Class Adder for Webflow Interactions
Class Adder is a tool to add/remove a class from an element. You can trigger the add/remove on click, hover, scroll in/out of view, or page load. This is an add-on to Webflow Interactions.
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.
