facebook twitter instagram youtube linkedin thumbs-up thumbs-down arrow-right progress locked success play pause

Setting Up Gated Content

Warning!

Proceed with extreme caution. Setting up gated content this way requires customizing your contact forms, which involves editing the code directly. We are not responsible for broken code or undesirable layout shifts. Please follow the below directions carefully and test your forms thoroughly after any customizations are made to ensure they are still working properly.

Gated content is any content where the website visitor has to provide information in order to access it. This could be a name, email address or demographic information. Potential clients have an incentive to provide this information because they’re receiving something helpful in return, such as an eBook, webinar recording or PDF download.

There are many different ways to create gated content. Below we provide one general example of how to set up gated content using the options provided by the Twenty Over Ten platform. We recommend familiarizing yourself with the following before attempting to set up gated content:

Adding files

Adding contact forms

Redirecting users to different pages after submitting contact information

 

Create a Landing Page for your Gated Content

Step 1

On the left of your dashboard you will see the pages in your main navigation listed and then a section for “Other Pages.” The Other Pages section is for pages on your website that are not linked in your navigation bar, which you can sent up to act as landing pages for a variety of purposes!

Click ‘add new’ to add a page with the desired functionality for your landing page. For gated content such as downloadable PDFs, we recommend using the “Page” style. If your gated content is going to involve blog posts, we recommend using the “Blog” page style.

Step 2

Add the appropriate information in the overlay, including a page title. Note: Your page URL for this page is what you will use in a later step to direct users to this page after they provide their contact information.

pages3

Step 3

Add the content that you want your site visitors to be able to access to your landing page. PDFs, such as e-books or special reports, are a popular choice for gated content. Adding PDFs to your landing page is quick and easy to do. Check out our tutorial here on adding PDFs to your site. Your landing page may end up looking something like this:

Set Up the “Gate” to your Content

Step 1

Identify where you want the call-to-action for access to your gated content to live on your main site. Adding the CTA to the home page is a great way to get lots of site visitors to see it quickly. Alternatively, adding the CTA to the footer area of your site will guarantee that the CTA can be seen on every page of your site. For example, we have added our CTA to the home page:

Step 2

Add a contact form to go with your CTA. We have a full tutorial on inserting contact forms here. In this example, we’re using a minimal style contact form:

Step 3

Edit the form code so users are taken to your gated content landing page after submitting their information to your contact form.

1. Click below your contact form to open the editor toolbar.

2. Click the Code View button to toggle open the source code for the page.

3. Identify your form code. Form code starts with the opening <form> and ends with </form>.

4. Place your cursor directly after the opening form-wrapper tag, which looks like this:

<div class="form-wrapper">

5. Paste the below code in below the form wrapper:

<input name="success_redirect" type="hidden" value="YOUR_CUSTOM_URL" />

Your form code should now look something like the following:

<form class="form contact-form" novalidate="novalidate">
<div class="form-wrapper">

<input name="success_redirect" type="hidden" value="YOUR_CUSTOM_URL" />
<div class="form-item">...
...</div>
</div>
</form>

6. Change the text YOUR_CUSTOM_URL in the code to the page URL slug for your gated content landing page. The page URL slug can be copied from the page settings. For example, the page URL slug for our example landing page, “Gated Content Example,” is shown below. Click “Copy URL” to automatically copy the page URL slug:

Editing the code to link to the page URL slug will cause the final version of the code to look like this:

<div class="form-wrapper"><input name="success_redirect" type="hidden" value="/gated-content-example" />
...
...</div>
</div>

Here’s another example of what the final code would look like in the source code editor:

7. Toggle back to the page view by clicking the source code button in the top right.

8. Save your changes.

 

Test your gated content form

You will not be able to test that your form redirects to your landing page until after you publish your site. After publishing, we recommend testing your form by submitting a fake form submission. If set up properly, your form should redirect you to the landing page via the page slug URL link that you added into the form code!

Was this article helpful?
Be the first to tell us!
You already voted on this article!