How to Gate Content on Webflow

Webflow can show forms, but it has no built-in way to hide content until someone enters their email. The simplest way to add that without writing your own logic is to build the gated page elsewhere and place it in your Webflow design with the Code Embed element. The reader sees your preview, fills in the form, and the rest of the content or a PDF download appears in the same spot on your Webflow page.

What you need before you start

On Webflow: according to Webflow's Code Embed documentation, you can use the Code Embed element if you have a Core, Growth, Agency or Freelancer Workspace, or if the site has an active Site plan. The element supports HTML, CSS in <style> tags and JavaScript in <script> tags, with a 50,000 character limit that the Gatedleads snippet is nowhere near.

On Gatedleads: embedding on your own site is a Pro feature. If you're on the free plan, the free alternative near the end of this post gets you most of the way.

Step 1: Build and publish the gated page

Create the page in Gatedleads: headline, the preview visitors see first, the gate, and the content that appears after signup. For a PDF lead magnet, upload the file as a file block so it becomes a gated download. Publish it and test it on its own link before embedding, so you know any later problem is with the embed rather than the page.

Keep the design simple. The page will sit inside your Webflow layout, so a plain layout usually looks more natural than a heavily styled one.

Step 2: Copy the embed code

In the Gatedleads page editor's settings, go to Embed on your site and click Copy embed code. The snippet is an iframe plus a short script. The script loads your page into the iframe, adjusts its height to fit the content, carries any UTM tags on your Webflow URL through to Gatedleads, and records your Webflow page as the traffic source.

Step 3: Add a Code Embed element in the Designer

Following Webflow's steps:

1. Open the page in the Webflow Designer.
2. Open the Add panel and drag a Code Embed element onto the canvas where the gated content should appear.
3. Paste the snippet into the code editor.
4. Save and close the modal.

Paste the whole snippet, not just the iframe. Without the script, the iframe has no address to load and stays empty.

If you'll use the same gated resource on several pages, Webflow lets you turn the Code Embed element into a component, so you only update it in one place.

Adding it inside a rich text element

If the gated content belongs in the middle of an article in a rich text element, Webflow's docs describe a second route: place your cursor in the rich text element, click the plus icon to open the insert menu, click the custom code button, and paste the snippet.

Step 4: Preview, then publish

Don't judge the embed from the canvas. Webflow's documentation explains that any code with a <script> tag shows as a placeholder in the Designer, and only renders when you preview, publish or export the site. Its effects only go live once you publish.

The cleanest test is to publish to your .webflow.io staging domain first, open the page in a private window, and submit a test email. Check that the gated content or PDF appears, and that the lead is in your Gatedleads dashboard with your Webflow page as its source. Then publish to your custom domain.

Sizing and layout tips

The snippet sets the iframe to full width of whatever it sits in, and its height follows the content, so there's no inner scrollbar. To control the width, put the Code Embed element inside a div block or container and size that instead. On mobile, check the breakpoint views in the Designer after publishing to make sure the parent isn't squeezing it.

The free alternative: link to the gated page

On the Gatedleads free plan, publish the gated page on its own link and point a Webflow button or text link at it. Put the button right after the section that makes the resource relevant rather than in the footer. Visitors leave your site for one step, but the form, the gated content and the lead capture all work the same.

How to gate content without code covers this standalone-page setup in more detail, including when it's the better choice even on Pro.

Using another platform?

The same embed code works elsewhere, with different steps and plan rules. See how to gate content on WordPress and how to gate content on Squarespace.

FAQ

Can I use Webflow's native form and hide content with custom code instead?

You can build that yourself with custom JavaScript, but content hidden with CSS or script is still in the page source, and you'd need your own way to deliver a file. An embedded gated page keeps the gated content off your page until the email is submitted.

Does the embed work on CMS template pages?

The Code Embed element can go on any page in the Designer, including CMS templates. If every item should show the same gated resource, one embed on the template covers them all.

Why do I only see a grey placeholder in the Designer?

That's expected. Webflow shows a placeholder for any code containing a script. Preview or publish to see the real embed.

Where do the leads go?

Into your Gatedleads dashboard, with the Webflow page recorded as the source. From there you can export a CSV or, on Pro, send each lead on through Zapier.

Create your gated page free, or see how Gatedleads works first.