Webflow Code Snippets

A method to pass the referring domain/URL as a hidden field in a form in Webflow. This is perfect to know who referred the person submitted the form, or a way to display the referring domain on the page on your Webflow site.

Load another pages content on your Webflow site via a simple jQuery script. This allows you to target an element on your page and then put the URL on the page that you want to load without using iFrames.

A simple way of displaying the number of CMS items on a page in Webflow. If you ever wanted to add a CMS item count on a page this script will allow you to easily display the total number of items shown.

An easy way to utilize CSS for Logo marquees and other sections in your Webflow site. An easier way to create an infinite looping marquee on your Webflow site than creating them manually with Webflow interactions.

Create a responsive clip path for images using SVG shapes in Webflow.This allows you to create unique shaped images using SVG paths rather than DIVs or similar methods.

Automatically refresh your Webflow site's page after a form submit with this Javascript snippet. A great way of indicating that a form has been submitted to a user or refreshing the page for another submission.

Track the number of times a user logins or logs out of their Webflow Memberstack account page. This script will allow you to update a Member field of your choosing based on the number of times they have logged into their account.

This code snippet allows you to automatically remove https:// from all link URLs on absolute URL links (links without anchor text) on your Webflow site. This is a great way to cleanup links or pages of links on your Webflow site.

Customize the shape of Webflow's native list item for your Webflow site with this custom CSS solution. Want a different shape than Webflow's native circle list item shape? With this method you can easily update the list item shape.

This helps prevent Google from indexing pages of your choosing on your Webflow site.

Add a file upload preview option to Webflow's native File upload input field. This adds a preview window to the file upload form in Webflow's native solution.

A technique to stop by scrolling on click in Webflow via a small Javascript snippet. This is perfect for modal popups, navigation dropdowns and other overlays that should prevent the body from scrolling on opening.

Add a back to previous page button to your Webflow site with this simple Javascript code snippet. When a user clicks on the button they'll be returned to the previous page they were visiting.

Prevent an input form zoom scaling on mobile on your Webflow site. This allows for a better user experience based on your sites design rather than mobile OS zoom default properties.

Webflow's random sort feature doesn't always work. This method allows for truly random sorting of Webflow CMS items on page load.

Instead of the default circle for your Webflow list items this CSS snippet allows you to add a diamond as an alternative design.

Play a background video when a user hovers over the video on your Webflow site.

Add Google review stars to your Webflow site via this small Javascript script and CSS. This allows your Webflow site to display star ratings in Google's search results.

When hovering over a text link the links underline animates to provide a unique effect for your Webflow site. This CSS code snippet can be customized based on your specifications.

This allows you to show or hide items based on date or time in Webflow. This is great for event based information, you can display various elements based on if its prior to a time or after a specified time on your Webflow site.

Design your own dropdowns and multi-select inputs in Webflow using Select2. With this Javascript code you'll be able to customize the look and design of the multi-select from the native browser select.

Create a backdrop blur on your Webflow site using only CSS. This allows you to utilize CSS to add a backdrop blur to your Webflow site rather than using Webflow's native blur styling.

Automatically superscript all ® Trademark Characters on your Webflow site. Adding this Javascript and CSS allows your Webflow site to automatically superscript all ® trademark symbols on your Webflow site.

Add a countdown timer to your Webflow site with this simple Javascript snippet. Want to display a countdown timer to a time of your choosing on your Webflow site? Now you can easily add one with this Javascript snippet.

Change the default native Webflow lightbox background color with this custom CSS code snippet.