How to Gate Content on a Framer Site

Framer is good at making a site look great, but it does not hide content until someone enters their email. Its forms collect addresses, and that is where its built-in tools stop. If you want a guide, checklist or PDF to unlock only after signup, you need a gate from somewhere else.

The simplest approach is to build the gated page in Gatedleads and connect it to your Framer site in one of two ways: a plain link, or an embed. This post covers both, what each can and cannot do, and how to test before you publish. If you use another site builder, we have matching guides for Webflow, Squarespace and WordPress.

Why a Framer form is not a gate

A form on a Framer page collects an email. It does not control who sees what. If the guide sits on the same page, hidden with a toggle or an animation, the content is still in the page and a determined visitor can read it. And if the form just redirects to a page with the resource, anyone with that link can skip the form.

A real gate keeps the content off the page until the email is submitted. In Gatedleads, the gated blocks are held back by the server and are only sent after the visitor submits the form. That is the difference between a gate and a form.

Option 1: Link to the gated page (works on every plan)

This is the easiest route and it works on the Free plan.

1. Build the page in Gatedleads. Write the headline, add the content blocks or upload a PDF as a file block (up to 25 MB), place the gate and publish. Pick inline mode to show a preview before the form, or squeeze mode to show the form first. Inline gating versus squeeze pages explains the choice.
2. Copy the page link. On Free it is gatedleads.com/your-page-slug. On Pro you can use your own domain.
3. Add a button or text link in Framer. Select a button or text layer, open the link settings in the right-hand panel and paste the URL. Choose to open it in a new tab if you want visitors to keep your site open.
4. Place it near the context. Put the button right after the section that makes the resource relevant, not only in the footer.

What visitors experience: they click, land on the gated page, enter their email, and the content or download appears. The leads, the gate and the delivery all work exactly the same as with an embed. The only difference is that the visitor leaves your Framer site for that step.

You can tag the Framer link with UTM parameters so you know which button or page sent each lead. Add ?utm_source=framer&utm_medium=button&utm_campaign=your-resource to the end of the URL. Gatedleads stores these with each lead. See UTM links for lead magnets for a naming scheme.

Option 2: Embed the gated page in your Framer layout (Pro)

If you want the gated page to appear inside your Framer design, so visitors never leave your site, use the embed. Embedding on your own site is a Pro feature, so this option needs the $29 per month plan.

Step 1: Build and test the page first

Publish the page and test it on its own link first. That way, if something looks wrong later, you know it is the embed and not the page. Keep the design plain. It sits inside your Framer layout, and a simple layout usually blends in better than a heavily styled one.

Step 2: Copy the embed code

In the Gatedleads page editor, open the settings and find Embed on your site. Click Copy embed code. The snippet is an iframe plus a short script. The script does three things: it sets the iframe's address, it resizes the iframe to fit the page's height so there is no inner scrollbar, and it carries any UTM tags from your Framer page's address through to Gatedleads, and records your Framer page as the traffic source.

Step 3: Add an Embed component in Framer

1. In the Framer canvas, open the Insert menu and add an Embed component where the gated page should appear.
2. In the component's properties on the right, set the type to HTML.
3. Paste the whole snippet, both the iframe and the script. If you paste only the iframe, it has no address to load and stays blank.
4. Size the component. Give it the full width of its container and a generous height.

Framer's own documentation describes the Embed component and its options, and the details can change, so check it if the panel looks different from the steps above. Whether custom code embeds are available can also depend on your Framer plan, so confirm that on Framer's side before you build around it.

Step 4: Preview and publish

Check the page in Framer's preview, then publish and test on the live site. Do not judge the embed from the canvas alone, because embedded code often looks different or blank while editing.

Open the published page in a private window and submit a test email with an address you control. Check that:

• the content or PDF appears after submitting
• the lead appears in your Gatedleads dashboard with your Framer page as its source
• the layout works on a phone, since Framer's breakpoints can squeeze an embed

Then delete the test lead from your dashboard if you do not want it counted.

A fallback if the script will not run

Some embed setups strip or block scripts. If your embed shows an empty box, there is a simpler fallback: use the Embed component in URL mode with your page address followed by ?embed=1, for example https://gatedleads.com/your-page-slug?embed=1. This loads the gated page without the script.

Be aware of what you lose. Without the script, the height does not adjust automatically, so you need to set a fixed height that fits, and UTM tags from your Framer page are not passed through. Treat it as a fallback, not the first choice. If it does not work either, use Option 1.

Which option should you choose?

Use the link when you want the simplest setup, you are on the Free plan, or the gated resource is a separate destination such as a downloadable guide. It also keeps your Framer pages light and lets you reuse the same page from social posts and email.

Use the embed when the resource belongs on a specific page of your site, such as a blog-style article with a gate midway, and you want the visitor to stay in your design.

Many people start with a link, then move to an embed once they know the page converts. For a step-by-step on the standalone-page approach, see how to gate content without code.

Placement tips

• Put the gated section where the reader has just learned why they want it, not at the very top.
• Avoid stacking the embed inside a small container. Let it take the full width.
• Keep one gated page per resource. Repeating the same embed on several pages is fine, but each page then competes for the same visitor.
• Add a line of text above the embed saying what the visitor will get, so the page makes sense even before the embed loads.

FAQ

Does Framer have a built-in email gate?

No. Framer forms collect email addresses but do not hide content until a form is submitted. You need a gate from another tool, which you connect with a link or an embed.

Do I need Pro to gate content on Framer?

Not for the link method. Linking to a gated page works on the Free plan. Embedding the page inside your Framer site is a Pro feature.

Why is my embed blank in the Framer editor?

Embedded code often does not render while you are editing. Preview or publish the site, then test in a private window. If it is still blank, check that you pasted both the iframe and the script, or try the URL fallback.

Where do the leads go?

Into your Gatedleads dashboard, with your Framer page recorded as the source for embeds. You can export a CSV on any plan, and on Pro send each lead to your email tool through Zapier or a webhook.

Can I gate just part of a Framer page?

You can place the embed in one section of a page, so the surrounding content stays open and the gated part sits in that embed. Anything you want locked should be inside the Gatedleads page itself, not in Framer.

To get started, create a free Gatedleads page, publish it, and link to it from your Framer site today.