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.
PowerImporter
PowerImporter automtes content updates that can create bottlenecks when marketing teams manage information in Airtable or spreadsheets but developers must manually transfer data to Webflow CMS.
Rive
Add interactive, state-driven animations directly to your Webflow sites with native Rive support. Upload .riv files through the Assets panel and control animation states using Webflow Interactions without writing integration code.
All in One Accessibility
Connect All in One Accessibility with Webflow to add 70+ accessibility features that help your site meet ADA, WCAG, and Section 508 requirements without custom development.
Sage
Connect Sage accounting software with Webflow to display financial data, sync customer information, or automate billing workflows on your website. This integration requires third-party tools or custom API development since Sage doesn't offer a native Webflow connection.
Flowstar Tabs
Connect Flowstar Tabs with Webflow to organize content in customizable horizontal or vertical tabbed layouts.
Typed.js
Typed.js brings animated typing effects to your Webflow projects. Create engaging headlines that type, delete, and cycle through messages automatically — perfect for hero sections, testimonials, and dynamic call-to-actions that capture visitor attention without complex coding.
Typed.js
Enter in any text string, and watch it type at the speed you've set.
Sweet Text by Finsweet
Connect Sweet Text with Webflow to add advanced text styling and typography controls to your Rich Text content.
Scrollbar Styler by Finsweet
Connect Scrollbar Styler with Webflow to customize scrollbar design using visual controls and generated CSS code.
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.
