Semi-gated content with a HubSpot form

Gated content is an article, white paper or video, that requires the user to fill some form, register, or overcome the paywall before viewing the full version. HubSpot Forms allows you to create "half-gated" or "semi-gated" pieces of content.

Adding the form

Follow these steps to create a "gated content" effect on your post:

1. Create a short version of your post. The last screen of the post will be hidden under the overlay.

2. Add a grid at the end of the post. This grid will be the overlay layer.

3. Add custom CSS to this grid. Here is the starting point. Feel free to adjust the code to better fit your website styles.

position: absolute; left: 0; bottom: 0; right: 0; min-height: 100vh; margin-bottom: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.9) 50%); z-index: 100

4. Add content to the overlay grid: heading and the embed component with the HubSpot form embed code in it.

5. If you want to redirect visitors to the full post after the form is submitted, add the redirectUrl parameter to the form initialization code with the redirect URL as a value.

Form code example:

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
  portalId: "2624364",
  formId: "1ca557d4-2121-4e7d-9ea4-8a44d90f2a11",
  redirectUrl: "https://setka.io/"
});
</script>

Video with a preview of a half-gated content piece with a HubSpot form overlay created in Setka Editor

Customizing the placeholder for the form

In the example above the form is located on a placeholder. Here is how you can customize its appearance in the custom CSS field:

position: absolute; left: 0; bottom: 0; right: 0; min-height: 100vh; /* maximize grid size to fit screen*/
margin-bottom: 0; /* remove bottom margin */
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.9) 50%); /* background from transparent to semi-transparent grey */
z-index: 100 /* place grid over other page content*/

• You can maximize the grid to fit the screen.

• You can set a gradient for the background color (from transparent to semi-transparent).

• You can set the color of the background.

You can customize the placeholder design further by changing the custom CSS.