May 10, 2019

On several occasions clients have come to us asking for a form with a gated resource. They want the  resource (.pdf, .doc, .xls etc.) to be available to download after the user fills out a form. In exchange for the visitor's valuable information, we provide them a file.

This is easily achievable in Drupal 8 with the Webform and Token modules.  At the time of creation of this blog post, I used Drupal version 8.7.0.

gated resource webform gif demo

 

Install modules:

Install the modules as usual. If you need more information on this topic, you can find it here.

Enable modules:

Enable Webform UI, Webform Node (which comes with webform) and the Token module.

  • Webform UI is not really required if you are creating your form via the yml editor, but provides a nice UI to generate and configure our form elements.
  • Webform Node provides a bridge between webform submissions and nodes. The description of the module reads: "Provides a Webform content type which allows webforms to be integrated into a website as nodes."
    For this example I will not be using the new Webform content type that the Webform Node module provides,I am using it because it allow me to bridge our webform submission with the node field tokens.
  • Token is going to get the gated file URL and name.

Configuring the content type:

For this tutorial I will use the Article content type, add a file field that we will name Gated file.

gated form add file field

I hide the field from the default display or any display you might use.

disable the field from the node display

By default the file will be disabled/not shown, therefore not accessible to site visitors.

Creating a webform:

I am going to create a basic webform with only two form elements: one for name and another one for email with standard validation.

* Important to add the form via: /admin/structure/webform, as a webform entity not as the new webform content type, so you can reference the form from different nodes.

Here is a screenshot of my simple form:

gated resource gated form screenshot

Referenced webform:

In this example I will be using an entity reference field to reference the webform we have just created, via the new field called Gated form (field_gated_form):

create a new entity reference to a webform

Then I create a node of type Article. 

You can see the gated file field and the gated form field highlighted in the following screenshot, also you can notice that I am referencing our previously created webform in the Gated form select

creating a node of type article with the gated resource and the form referenced

Creating a confirmation modal with the file exposure:

Because the file is not visible to the user, we will use the webform confirmation modal to expose a link to the file.

image displaying the settings for the webform

if you browse the available tokens at the bottom of the Confirmation message you'll see the following tokens:

If you need a deeper nesting look at /admin/help/token page, where you'll see all of the token values available per field.

example of token values available per field inside node

For the confirmation message I added the following HTML:


Here is your file:
 <a href="[webform_submission:node:field_gated_file:entity:url]" target="_blank">
  [webform_submission:node:field_gated_file:entity:name]
 </a>

We are using tokens to get the name and the URL of the field_gated_field, which is the machine name of our file field. Then we form a simple link (HTML a tag) that allow the user to download the file.

Webform in Drupal 8 is super flexible, easy to use and powerful. This is just a simple example of what can be achieved with a little bit of site building and a bunch of clicks.

Disclaimer:
This is not a secure way to protect files, anyone with the original link to the document will be able to see it and download it, but for some use cases is good enough.