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.
Finsweet Webflow Hacks
Connect Finsweet Webflow Hacks integrate through Webflow's native code embed features using JavaScript and jQuery snippets.
WooRank
Connect WooRank with Webflow through an official marketplace app to provide real-time SEO analysis, Core Web Vitals monitoring (LCP, FID, CLS), and downloadable PDF reports within Webflow.
Finsweet Components
Finsweet Components provides JavaScript components that integrate with Webflow Designer through a marketplace app and custom code embeds.
EX.CO
Connect EX.CO with Webflow to add interactive video players and monetize content through custom embed codes.
Finsweet Class Adder
You can connect Finsweet Class Adder to manage CSS classes dynamically in Webflow using interactions, CMS data, and visual workflows.
Lottieflow
Connect Lottieflow with Webflow to add customizable, lightweight JSON animations directly to your site.
Pixie
Connect Pixie with Webflow to automate CMS image optimization, reduce file sizes, and speed up page load times.
One2 Menu
Embed One2 Menu restaurant menus in Webflow with HTML code for contactless QR ordering and auto-updates.
ThemeForest
Connect ThemeForest with Webflow to access third-party templates and manually recreate designs in [Webflow Designer](https://university.webflow.com/lesson/intro-to-the-designer).
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.
