Finsweet Webflow Hacks

Native features cover layout, CMS, and responsive design well, but stop short in specific areas. Form success states can't display the submitter's name, Collection Lists can't show item counts, anchor links leave hash fragments in the URL, and pricing calculators need logic that the built-in form elements don't support.

Finsweet Webflow Hacks closes those gaps with 58 pre-built JavaScript snippets covering forms, CMS display, URL management, pricing calculators, and integrations like MemberStack. Paste a snippet into your custom code fields, apply the required CSS classes, and the functionality runs on your published site. For new projects, reach for the TypeScript rebuild of the original jQuery library.

How to integrate Finsweet Webflow Hacks with Webflow

What is Finsweet Webflow Hacks? Finsweet Webflow Hacks is a free, cloneable project created by Finsweet. It packages 58 JavaScript snippets that extend the native functionality of your site, with fully commented custom code and YouTube video walkthroughs. You can also find the original library at finsweet.com/hacks, and the TypeScript rebuild at finsweet.com/hacks-typescript/. The project has been cloned 6,387 times on the Made in Webflow page.

Reach for Finsweet Webflow Hacks when your project needs targeted functional changes that don't justify building a custom JavaScript solution. A marketing site might need a form that rejects non-business email addresses. A service business might need a pricing calculator built with checkbox and radio inputs. A content site might need anchor links generated from CMS fields. Each of these cases maps to a specific numbered hack in the library.

You can pair Finsweet Webflow Hacks with your site in 2 ways:

• Finsweet Webflow Hacks scripts drop individual JavaScript snippets into your custom code fields for targeted functionality like form additions, URL manipulation, and pricing calculators.
• The Data API is a separate layer you can use alongside Hacks when you need programmatic control over the CMS data that a hack displays on the client side, though you'll need server-side development to take advantage of it.

Most implementations rely on a single hack or a small set of hacks selected for the specific functionality a project needs.

Add Finsweet Webflow Hacks scripts to your site

Each hack is a self-contained JavaScript snippet that you paste into your custom code fields. The original library uses jQuery, while the TypeScript rebuild is the current version recommended for new projects. Both versions work the same way: paste the script, apply CSS classes to your elements, publish, and test.

The 58 hacks span several functional categories:

• Form behavior extensions: custom success messages, email domain rejection, page URL submission, post-submission Interactions
• CMS display: Collection List item counts, CMS-generated anchor links, filter parameter customization, empty list state management
• Navigation and URLs: 404 redirects, anchor link hash removal, back button creation
• Pricing calculators: checkbox, radio, select, range slider, and manual text inputs for building price-quote forms (Hacks #42 through #51)
• MemberStack integration: class toggling based on login state, item save/like functionality, password confirmation validation (Hacks #31 through #36)

To add a hack to your site:

1. Browse the hack library at finsweet.com/hacks or finsweet.com/hacks-typescript and pick the hack you need.
2. Copy the JavaScript snippet provided on the hack's page.
3. In your project, go to Site Settings > Custom Code > Footer Code and paste the snippet before the closing </body> tag. Placing scripts in the footer (rather than the head) means they run after the DOM loads and can access the built-in jQuery.
4. Apply the specific CSS class names the hack requires to the relevant elements on your page. Each hack's documentation tells you which classes to use and where.
5. Save your settings, publish the site, and test on the live URL.

Hacks do not execute in preview mode. The scripts operate on rendered HTML, so you'll need to test on a published or staged URL. To add custom code, you need access to the custom code fields, which aren't available on the free Starter setup. Depending on your workspace and site configuration, double-check the current requirements in the latest plan documentation before you start.

For element-level script placement, use a Code Embed element instead of site-wide custom code. Drop a Code Embed onto the page canvas, paste the hack's script inside, and convert it to a Component if you need to reuse it across pages. Don't include <html>, <body>, or <head> tags inside Code Embed elements — doing so will break your site's layout.

Treat the original jQuery-based Hacks library as legacy. Many of its features have been replaced by Finsweet Attributes and Hacks in TypeScript, separate libraries that are actively updated and recommended for new projects. Attributes uses HTML custom attributes instead of JavaScript snippets. For CMS filtering, loading, sorting, and nesting, start with Attributes. Reach for Hacks when you need specialized functionality that Attributes doesn't cover: custom form behaviors, URL parameter manipulation, and device-specific scripts.

Build with the Data API

Finsweet Webflow Hacks scripts run entirely in the browser on rendered HTML. They don't expose a public REST API or webhook endpoints. When you need to programmatically manage the CMS data that a selected hack displays client-side, the Data API v2 handles that separate layer.

This approach matters when CMS content needs to be created, updated, or published through external systems, and Hacks scripts then display or manipulate that content on the frontend. A job board using Hack #3 (Collection List item count display) could use the API to populate job listings from an external ATS. A pricing page using Hacks #42 through #51 could pull calculator configuration from CMS fields that the API manages.

Available API resources:

• The CMS Collections API lets you create, read, update, and delete collection items
• Webhooks fire events like collection_item_created and collection_item_published to trigger real-time updates between systems

You'll need Bearer token authentication and the appropriate OAuth scopes for all API requests (CMS:read for read operations, CMS:write for writes).

Populate CMS content for Hacks to display

Some Hacks operate on CMS-rendered content, such as Hack #3 (display Collection List item count), Hack #4 (display CMS anchor links), and Hack #5 (CMS-driven filter parameters). When the underlying CMS data comes from an external source, use the API to handle the data pipeline.

To set up CMS population:

1. Identify the collection and fields your hack depends on. Hack #4, for example, generates anchor links from a text field inside a CMS collection item.
2. Use the POST /v2/collections/:collection_id/items endpoint to create items, or PATCH /v2/collections/:collection_id/items to update existing ones (up to 100 items per request).
3. Publish items with POST /v2/collections/:collection_id/items/publish so they appear on the live site where Hacks scripts can operate on the rendered HTML.

Once you've published the items, the selected hack can read and manipulate the rendered CMS output on the live site.

Each Collection List renders a maximum of 100 CMS items per page. Hacks scripts can only interact with items already rendered into the HTML. For collections exceeding 100 items, pair Hacks with Finsweet's List Load Attribute to paginate or render all items before the hack script executes.

What can you build with the Finsweet Webflow Hacks Webflow integration?

Pairing Finsweet Webflow Hacks with your site lets you add targeted functional changes without writing custom JavaScript from scratch.

• Pricing calculator pages: Use Hacks #42 through #51 to build interactive pricing calculators with native form elements. Checkbox, radio, select, and range slider inputs each map to price values, with support for addition, subtraction, and multiplication operations. A SaaS company could build a plan configurator where users toggle features and watch a running total update in real time.
• Conditional form submissions: Use Hack #18 to reject Gmail and other free email providers from a lead generation form. This keeps submissions limited to business email addresses. Combine it with Hack #11 to capture the submitting page's URL in a hidden field. Sales teams get full context on which page generated each lead.
• CMS-powered navigation: Use Hack #4 to generate anchor links from CMS text fields. This creates auto-updating table-of-contents sections on documentation or help center pages. Add Hack #15 or #16 to strip the hash fragment from URLs when users click same-page anchors, keeping the browser address bar clean.
• CMS content display: Use Hack #3 to count and display the number of items in a Collection List. Visitors see "24 results" on a directory page. Pair it with Hack #30 to hide the section title when a list returns zero items. This keeps empty-state UI from appearing on filtered or category pages.

If you need more control over CMS data pipelines or automated content publishing, the separate Data API path covers those cases.