---
title: "Gated Content — Free Framer component · Best of Framer"
description: "Free Framer component · by Abdus Salam · Forms. Collect Email to Generate Lead"
canonical: "https://framer.elliotli.dev/component/gated-content"
---

[Home](/)/[Components](/components)/[Forms](/components/category/forms)/Gated Content

# Gated Content

Collect Email to Generate Lead

[View on Framer](https://framer.com/marketplace/components/gated-content/?via=elliot-li)

![Gated Content preview image 1](https://framer.elliotli.dev/og/component/gated-content/f203e59747923356/1600x1200.jpg)

## Summary

Collect Email to Generate Lead

## Description

## Overview

This component is connects an existing Framer form to a gated-content workflow. By assigning IDs to specific sections on your page, the component can hide or reveal content based on whether the user has submitted the form.

This allows you to turn any regular Framer form into a **content unlock mechanism**—perfect for gated PDFs, guides, videos, or premium sections.

## Use Case

Use this component when you want to:

-   Reveal premium content after a form submission
    
-   Unlock a hidden section without redirecting the user
    
-   Run lead-generation flows (PDFs, playbooks, templates, etc.)
    
-   Show or hide sections based on stored access state
    
-   Add gating functionality without changing your form layout
    

This component simply listens to the form submission event and toggles visibility between your "visible" and "hidden" sections.

**How It Works**

To enable this feature, you must assign **unique section IDs** inside Framer. These IDs let the component know:

-   Which section should be visible before submission
    
-   Which section should become visible after submission
    
-   Which form triggers the unlock action
    

**How to Add IDs in Framer**

### 1\. Assign an ID to the initial visible section

This is the section users see before submitting the form.

**Steps:**

-   Select the section
    
-   In the right sidebar, set a **Section Name**
    
-   Example: visible-content
    

### 2\. Assign an ID to the hidden section

This section will remain hidden until the form is submitted.

**Steps:**

-   Select the section
    
-   Set a **Section Name**
    
-   Example: hidden-content
    

### 3\. Assign a Form ID

Select your existing Framer form and give it a unique ID.

**Steps:**

-   Select the form
    
-   In Form Settings → set **Form ID**
    
-   Example: playbook-form
    

**Component Field Mapping**

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-vmtnvuut-xPOIYS7NvNF41nOUrpEZImFhfPHCB3)

**Expiration Behavior**

After the form is submitted:

-   The hidden content becomes visible
    
-   Access state is stored in **Local Storage**
    
-   The content stays unlocked for the number of hours you set in **Expire (hours)**
    
-   Once expired, the user must submit the form again
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #2786

## Details

- **Author**: Abdus Salam
- **Published**: 2025-11-26
- **Updated**: 2026-06-26
- **Added**: 2025-11-07
- **Categories**: Forms

## More across types

-   [Wallble: Guest Book & Wall of Love](/plugin/wallble-guest-book-wall-of-love) — Wallble · Free — Guest book & Wall of Love

## More like this

-   [Stay Booking Pro](/component/stay-booking-pro) — Design Foundry · $10 — Stay Planner with Dynamic Pricing
-   [Postcode Checker](/component/postcode-checker) — Sean Weekes · $15 — Do we cover your area? (UK
-   [Property Calculators](/component/property-calculators) — Sean Weekes · $12 — UK Stamp Duty, mortgage and yield
-   [UTM Lead Capture](/component/utm-lead-capture) — Sean Weekes · $9 — See where every lead came from