Gated Content: Free UI Component by Abdus Salam

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

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

Short Description (Perfect for Framer Component Panel)

“This component links any existing Framer form to a gated content flow. Assign IDs to the sections you want to hide or reveal using Section Name. After the form is submitted, the component unlocks the hidden content and remembers access for a set duration using local storage.”