Your browser is too small.
Mobile and tablet is not yet supported. Resize your browser to be atleast 991px wide.
API & Data
CMS
CSS & Styling
Components
Cookies
Effects
Events & Triggers
Extensions
Filtering & Search
Forms
Links
Memberships
Mobile
Numbers & Calculations
SEO
Safari
Scroll
Sliders, Tabs etc.
Sound
Video
eCommerce
Category
152
Solutions
RESET
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Lumos – Weblow styleguide framework and strategy

Powerup
Timothy Ricks
NEW

lumos

Free
Powerup
Validated
Timothy Ricks
Free

Lumos – Weblow styleguide framework and strategy

A Webflow framework for creating more consistency at scale, using CSS variables and a global color system.

Lumos – Weblow styleguide framework and strategy
INSTRUCTIONS
CSS & Styling

Sheet Monkey – Submit Webflow forms to Google Sheets

Integration
Sheet Monkey
NEW

sheet-monkey-submit-webflow-forms-to-google-sheets

Paid Features
Integration
Validated
Sheet Monkey
Paid Features

Sheet Monkey – Submit Webflow forms to Google Sheets

Choose a sheet, get a URL, submit forms, and watch it fill up automatically.

Sheet Monkey – Submit Webflow forms to Google Sheets
INSTRUCTIONS
Free-to-use for up to 3 forms with 100 submissions.
Forms

Remove https:// from link text

Code
NEW

remove-https-from-link-text

Free
Code
Validated
Free

Remove https:// from link text

Make your site neater by getting rid of "https://" from any link that doesn't have a specific anchor link name attached to it.

Remove https:// from link text
<script> /* Remove https:// from link text */ $(function () { $( "a[data-clean='remove-http']" ).each(function() { var clean = $(this).text().replace(/^\/\/|^.*?:(\/\/)?/, ''); $(this).text(clean); }); }); </script>
INSTRUCTIONS
  1. Add script to before </body> tag in page or project settings.
  2. Add attribute data-clean = "remove-http" to each link element to clean up.
Links

Use checkbox to create a pricing calculator on a Webflow form

Code
Finsweet
NEW

use-checkbox-to-create-a-pricing-calculator-on-a-webflow-form

Free
Code
Validated
Finsweet
Free

Use checkbox to create a pricing calculator on a Webflow form

Useful for service quote forms and project leads.

Use checkbox to create a pricing calculator on a Webflow form
<script> // Use checkbox to create a pricing calculator on a Webflow form // when dom is ready document.addEventListener('DOMContentLoaded', function () { const CHECKBOX_SELECTOR = '[fs-hacks-element="checkbox"]'; const TOTAL_SELECTOR = '[fs-hacks-element="total-value"]'; const HIDDEN_INPUT_SELECTOR = '[fs-hacks-element="hidden-total"]'; const checkboxes = document.querySelectorAll(CHECKBOX_SELECTOR); const totalValueDiv = document.querySelector(TOTAL_SELECTOR); const hiddenTotalInput = document.querySelector(HIDDEN_INPUT_SELECTOR); if (checkboxes.length === 0 || !totalValueDiv || !hiddenTotalInput) return; /*** * This function updates the totals div and the hidden input * @param total * @param totalValueDiv * @param hiddenTotalInput */ const updateTotals = (total, totalValueDiv, hiddenTotalInput) => { // format sum e.g. 3500 to 3,500 const formattedSum = new Intl.NumberFormat().format(total); totalValueDiv.innerText = formattedSum; // add the sum value to the hidden input hiddenTotalInput.value = formattedSum; }; let sum = 0; for (const checkbox of checkboxes) { // find initial totals on page load const amountToBeAdded = Number(checkbox.getAttribute('add-value')); // if amountToBeAdded is Nan skip if (isNaN(amountToBeAdded)) continue; if (checkbox.checked) sum += amountToBeAdded; // add listener to checkbox checkbox.addEventListener('input', function () { // add or subtract amountToBeAdded given the checkbox state if (checkbox.checked) { sum += amountToBeAdded; } else { sum -= amountToBeAdded; } updateTotals(sum, totalValueDiv, hiddenTotalInput); }); } // update totals on page load updateTotals(sum, totalValueDiv, hiddenTotalInput); }); </script>
INSTRUCTIONS
  1. Add script to before </body> tag in page or project settings.
  2. Open the external link, press Copy component and insert it into your Webflow projects.
Forms
Numbers & Calculations

Move element from one div to another with ScrollTrigger Callback Flip

Video Tutorial
Timothy Ricks
NEW

move-element-from-one-div-to-another-with-scrolltrigger-callback-flip

Patreon
Video Tutorial
Validated
Timothy Ricks
Patreon

Move element from one div to another with ScrollTrigger Callback Flip

Use GSAP ScrollTrigger to smoothly move an element between different containers.

Move element from one div to another with ScrollTrigger Callback Flip
INSTRUCTIONS
Effects

Move contents of a div into another div

Code
NEW

move-contents-of-a-div-into-another-div

Free
Code
Validated
Free

Move contents of a div into another div

Finds all children of one div and appends them to a different one.

Move contents of a div into another div
<script> // Move contents of one div into another div $('.flowie-copy-this').children().appendTo('.flowie-insert-here'); </script>
INSTRUCTIONS
  1. Add script to before </body> tag in page or project settings.
  2. Change .flowie-copy-this to the class name of the div you want to move content from.
  3. Change .flowie-insert-here to the class name of the div you want to move content from.
CSS & Styling

Advanced CMS slider with swiper.js

Video Tutorial
Timothy Ricks
NEW

advanced-slider-with-swiper-js

Free
Video Tutorial
Validated
Timothy Ricks
Free

Advanced CMS slider with swiper.js

Create an immersive fullscreen responsive clickable, scrollable and draggable slider

Advanced CMS slider with swiper.js
INSTRUCTIONS
Effects
Sliders, Tabs etc.

Smooth scrolling that works with Webflow Interactions – Lenis

Video Tutorial
Robin G.
NEW

smooth-scrolling-that-works-with-webflow-interactions-lenis

Free
Video Tutorial
Validated
Robin G.
Free

Smooth scrolling that works with Webflow Interactions – Lenis

Use the Lenis Smooth Scrolling library by Studio Freight and use position Sticky and Webflow scroll interactions without issues.

Smooth scrolling that works with Webflow Interactions – Lenis
INSTRUCTIONS
Effects
Scroll

Change color of highlighted text

Code
NEW

change-color-of-highlighted-text

Free
Code
Validated
Free

Change color of highlighted text

Customize text color and background color when text is selected.

Change color of highlighted text
<style> /* Change color of highlighted text */ ::selection { color: #000000; background: #FFFFFF; } </style>
INSTRUCTIONS
  1. Add CSS inside <head> tag or inside a code embed.
  2. Change #000000 to adjust text color and #FFFFFF to adjust background color of highlighted text.
CSS & Styling

Trigger click on an element by clicking something else

Code
NEW

trigger-click-on-an-element-by-clicking-something-else

Free
Code
Validated
Free

Trigger click on an element by clicking something else

Imitates a click on an element, triggered by clicking on something else.

Trigger click on an element by clicking something else
<script> // Trigger click on an element by clicking something else $('.flowie-trigger').on('click', function() { $('.flowie-click-this').click(); }); </script>
INSTRUCTIONS
  1. Add script to before </body> tag in page or project settings.
  2. Change flowie-trigger to the class name of the element the user will click on.
  3. Change flowie-click-this to the class name of the element that should be triggered a click on.
Events & Triggers

Display a countdown for a specific date

Code
NEW

display-a-countdown-for-a-specific-date

Free
Code
Validated
Free

Display a countdown for a specific date

Customize the date and display a message once the countdown is reached.

Display a countdown for a specific date
<script> // Display a countdown for a specific date $(document).ready(function(){ // Set the date we're counting down to var countDownDate = new Date("Oct 5, 2019 15:37:25").getTime(); // Update the count down every 1 second var x = setInterval(function() { // Get today's date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Output the result in an element with a class set $('.flowie-countdown').html(days + "d " + hours + "h " + minutes + "m " + seconds + "s "); // If the count down is over, write some text if (distance < 0) { clearInterval(x); $('.flowie-countdown').html("Countdown has expired!"); } }, 1000); }); </script>
INSTRUCTIONS
  1. Add script to before </body> tag in page or project settings.
  2. Change Oct 5, 2019 15:37:25  to the date you want to countdown from.
  3. Change flowie-countdown to the class name of the div that should display the countdown.
  4. Change Countdown has expired! to the text you want to display when the countdown has reached the end.
Numbers & Calculations

Refokus – Masonry Layout

Powerup
Refokus
NEW

refokus-masonry-layout

Free
Powerup
Validated
Refokus
Free

Refokus – Masonry Layout

Create a Masonry Layout (Pinterest Style) that’s also fully responsive.

Refokus – Masonry Layout
INSTRUCTIONS
CSS & Styling

Attributes - CMS Filter

Powerup
Finsweet
NEW

attributes-cms-filter

Free
Powerup
Validated
Finsweet
Free

Attributes - CMS Filter

Create advanced and complex no-code filter systems for Webflow CMS Collection List content.

Attributes - CMS Filter
INSTRUCTIONS
Filter and search in CMS lists
Filter with Checkbox, Radio Label, Select or Text input
Reset all filters on click
Show number of results
Show active filters
Highlight search terms
Filtering & Search
CMS

Phoneflow – Manage Webflow content from your smartphone

Integration
Phoneflow
NEW

phoneflow-manage-webflow-content-from-your-smartphone

Paid Features
Integration
Validated
Phoneflow
Paid Features

Phoneflow – Manage Webflow content from your smartphone

Create, Edit and remove content. Archive, Draft and Publish.

Phoneflow – Manage Webflow content from your smartphone
INSTRUCTIONS
Create, Edit and remove content
Archive, Draft and Publish
Ecommerce: Manage your products, stocks and orders easily
Ecommerce: Receive notifications on new orders
Ecommerce: Increase all your prices with one tap.
No items found.

Monto – Abandoned Cart Recovery for Webflow

Integration
Monto
NEW

monto-abandoned-cart-recovery-for-webflow

Paid
Integration
Validated
Monto
Paid

Monto – Abandoned Cart Recovery for Webflow

Automatically recover lost sales with automated abandoned cart recovery emails to your customers who left.

Monto – Abandoned Cart Recovery for Webflow
INSTRUCTIONS
Cart abandonment email campaigns
Advanced customization of emails, delays and sequences
Analytics and campaign reporting
Real-time data dashboard
Optimized email deliverability
In-depth cart and contact Records
Multi-user setup with admin/member permissions
Aggregate reporting
eCommerce

Formly – Multistep forms for Webflow

Integration
Formly
NEW

formly-multistep-forms-for-webflow

Paid Features
Integration
Validated
Formly
Paid Features

Formly – Multistep forms for Webflow

Gone are the days of using sliders, tabs and complex animations to create multi-step forms on Webflow. Focus on creating the form, not the code.

Formly – Multistep forms for Webflow
INSTRUCTIONS
Clickable Progress Indicators
Customisable Disable States
Skipping Steps
Country Dropdown
URL Query Params
Call Code Dropdown
Form Memory
Quiz Validation
Logic Breadcrumbs
Forms

Flowmonk – Real-time Pageviews to Webflow CMS

Integration
Flowmonk
NEW

flowmonk-real-time-pageviews-to-webflow-cms

Paid
Integration
Validated
Flowmonk
Paid

Flowmonk – Real-time Pageviews to Webflow CMS

Make your Webflow sites smarter by syncing real-time user pageviews to Webflow's CMS without complicated zaps, scenarios or other complicated solutions.

Flowmonk – Real-time Pageviews to Webflow CMS
INSTRUCTIONS
Real-time visitor data to Webflow CMS
Create dynamic elements
Truly dynamic CMS sorting
Add view count to CMS pages
Filter CMS by pageviews
Dead simple pricing
CMS
Filtering & Search

Animated Grain Background in Webflow with grained.js

Video Tutorial
Web Bae
NEW

animated-grain-background-in-webflow-with-grained-js

Free
Video Tutorial
Validated
Web Bae
Free

Animated Grain Background in Webflow with grained.js

Explores the grained javascript library for easily adding animated grain texture backgrounds to Webflow.

Animated Grain Background in Webflow with grained.js
INSTRUCTIONS
Effects

Disable/enable scroll on menu click

Code
NEW

disable-enable-scroll-on-menu-click

Free
Code
Validated
Free

Disable/enable scroll on menu click

Make sure that you can't scroll on the website while a menu is open and enable scroll again when menu is closed.

Disable/enable scroll on menu click
<script> // Disable scroll on menu click $('.flowie-burger-menu').click(function() { var clicks = $(this).data('clicks'); if (clicks) { $("body").css("overflow", "auto"); } else { $("body").css("overflow", "hidden"); } $(this).data("clicks", !clicks); }); </script>
<script> // If you use anchor links on the same page inside your menu you must trigger a click on the menu button to close the menu and enable scroll again $(".flowie-anchor-link").click(function() { $(".flowie-burger-menu").click(); }); </script>
INSTRUCTIONS
  1. Add script to before </body> tag in page or project settings.
  2. Change flowie-burger-menu to the class name of your menu button.
  3. (optional) Add the second script to before </body> tag in page or project settings.
  4. (optional) Change flowie-anchor-link to the class name of your menu's anchor links.

Scroll

Add swipe gestures to Webflow slider

Code
Corey Moen
NEW

add-swipe-gestures-to-webflow-slider

Free
Code
Validated
Corey Moen
Free

Add swipe gestures to Webflow slider

Enable swiping gestures to a native Webflow slider element for mobile and tablet.

Add swipe gestures to Webflow slider
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.js"></script>
<script> // Add swipe gestures to Webflow slider (Script) $(".w-tab-content").swipe( { swipeLeft:function(event, direction, distance, duration, fingerCount) { $(".w-tab-menu a.w--current").next('a').click(); }, swipeRight:function(event, direction, distance, duration, fingerCount) { $(".w-tab-menu a.w--current").prev('a').click(); }, }); </script>
INSTRUCTIONS
  1. Add library and script to before </body> tag in page or project settings.
Sliders, Tabs etc.
No solutions matching your search.
Create a solution with Flowie Code Assistant AI.