How to Gate Any Content in Elementor Using Gravity Forms

1. Why Use the Shortcode Method?
2. Understanding the [gpsa] Shortcode
3. Two Ways to Gate Elementor Content
   1. Method 1 — Gating Text and HTML
   2. Method 2 — Gating Elementor Posts, Pages, and Templates
      1. Get Elementor Content ID
      2. Build the Elementor Shortcode
      3. Add Elementor Shortcode inside the [gpsa] Shortcode
4. Wand a Better Way? 🪄

GP Submit to Access makes it easy to gate content in the native WordPress block editor, whether it’s a specific block or the whole page.

But what if you want to gate content built in Elementor? Say you want to hide a video, ebook, or a simple download button?

With the shortcode method, you absolutely can. 🔐

Why Use the Shortcode Method?

While full-page redirects work great for beefy forms, shortcodes offer the flexibility to…

• Gate content in tricky spots like sidebars, footers, or directly inside your favorite page builder like Elementor.
• Wrap your content with shortcodes, so you can keep designing in Elementor without interruptions.
• Gate entire pages, posts, or specific sections like a video, ebook, or download button.
• Instantly reveal content after submitting the form—no redirects, no reloads.

Understanding the [gpsa] Shortcode

Before we jump in, let’s first get familiar with how to build the GP Submit to Access shortcode aka [gpsa] shortcode.

Here’s its most basic form:

[gpsa required_form_ids="1"] Put content here. [/gpsa]

Let’s break this down:

• The [gpsa]…[/gpsa] tags create the gate. Any content between them stays gated.
• required_form_ids=”1” tells the gate which form unlocks it. Change 1 to your form’s actual ID.

It’s also possible to tweak how the gate behaves using a few handy parameters we can add inside the shortcode. For example:

• requires_access_message lets you show a message before someone fills out the form. Want to put your form right in the middle of the message? Just drop the {form} merge tag wherever you’d like it to appear.
• fallback_behavior decides what happens if someone hasn’t filled out the form yet. Use show_message to show your message, or hide to hide everything until they submit.

Example:

[gpsa required_form_ids="1" requires_access_message="Fill out form to unlock! {form}" fallback_behavior="show_message"] Put content here. [/gpsa]

In this example, visitors see the message with the form embedded right where the {form} is placed. The fallback_behavior=”show_message” makes sure the message shows up first.

Two Ways to Gate Elementor Content

1. Method 1 is for simple texts, links, or HTML you can drop right into a shortcode widget.
2. Method 2 is for gating entire posts, pages, or saved templates built in Elementor.

Method 1 — Gating Text and HTML

This method is great for gating messages, text announcements, download links, coupon codes, or any HTML content in Elementor.

Here’s how:

1. Open your Spellbook › activate GP Submit to Access.
2. Edit post or page with Elementor › drag a Shortcode widget into the layout.
3. Paste the [gpsa] shortcode › replace 1 with the form ID.
4. Add the text or HTML content between the [gpsa] tags.
5. Save the page.

Now the content stays hidden until visitors submit the form. 

Method 2 — Gating Elementor Posts, Pages, and Templates

While method 1 works perfectly for simple texts and HTML, what if you want to gate an entire post, page, or template built in Elementor?

Say, a styled container with a video player, or even a full page template.

Since we can’t wrap this type of content directly in Elementor, we instead use a “nesting” trick: grab the content’s ID, turn it into a shortcode, and nest it inside the [gpsa] tags.

Get Elementor Content ID

For Posts or Pages:

1. Edit the post or page with Elementor.
2. Look at the browser’s URL bar and find the ID number after post=. Example: post=123 means the ID is 123.

For Widgets or Sections:

We’ll need to turn widgets or entire sections into a template first, then grab its ID.

1. In the post or page you’re editing, right-click the container where the widget or section is › select Save as a Template.
2. In the WordPress dashboard, just below Elementor › click Templates › Saved Templates.
3. Edit the template with Elementor.
4. Look at the browser’s URL bar and find the ID number after post=. Example: post=149 means the template’s ID is 149.

Build the Elementor Shortcode

1. In the WordPress dashboard, navigate to Plugins › Add New.
2. Search for Dynific Addons for Elementor › Install and Activate.
3. Build the shortcode using Dynific’s shortcode [INSERT_ELEMENTOR] plus the ID you grabbed from the URL: [INSERT_ELEMENTOR id=”149”] —  replace 149 with the content ID.
   • [INSERT_ELEMENTOR] simply displays the Elementor content you want to gate.
4. Copy shortcode to your clipboard.

Add Elementor Shortcode inside the [gpsa] Shortcode

1. Edit post or page with Elementor › drag a Shortcode widget into the layout.
2. Paste the [gpsa] shortcode (replace 1 with your form ID),
3. Paste the Elementor shortcode inside the [gpsa] shortcode, like this:

[gpsa required_form_ids="1"] [INSERT_ELEMENTOR id="149"] [/gpsa]

4. Save Page.

And that’s it! When visitors see your form, they fill it out, submit, and the Elementor content unlocks instantly.

Wand a Better Way? 🪄

If you think it’d be awesome to have this built directly into GP Submit to Access, drop a comment below. If enough wizards ask for it, we might just brew it up! 🧙