A Consent Module Primer

By Rob Allen · November 30, 2021 · Read in about 5 minutes.

The Consent module isn’t always specifically for cookies, rather it relates to collection (and use) of any personal information, whether stored in cookies or otherwise.

This is just one approach to creating consent forms, the module has many other tags and variables you can use to build your own consent mechanism, see the Consent documentation for full details.

The consent ‘popup’ form
Hiding the ‘popup’ form after it’s been actioned
Dealing with opted in consents
Making the form always available
Using a consent form to hide and show content

The consent ‘popup’ form

The various consent requests (e.g. ee:cookies_functionality) are found in System settings > Security & privacy > Consent Requests

This form you’d probably display as an overlay, popup or fixed to the bottom of the screen.

{!-- form tag with all default consent= requests --}
{exp:consent:form consent="ee:cookies_functionality|ee:cookies_performance|ee:cookies_targeting"}

  {!-- message --}
  <p>What consents do you want to allow?</p>

  {!-- loop through requests --}
  <ul>
    {consents}
    <li>
        <label>
          <input type="checkbox" name="{consent_short_name}" value="y">
          {consent_title}
        </label>
    </li>
    {/consents}
  </ul>

  {!-- submit/save button--}    
  <button type="submit">Save</button>

  {!-- link to privacy/cookies page --}
  <a href="{path='site/cookies'}">Manage options</a>

{/exp:consent:form}

I prefer to add this form in an embed template which is then added to my layout template. The embed template can then be run uncached - because you need it to be dynamic.

Hiding the ‘popup’ form after it’s been actioned

When a visitor has saved their preferences you’ll want to hide the form. ExpressionEngine doesn’t do this automatically so we need to wrap the form in a conditional like this:

{if ! consent:has_responded:ee:cookies_functionality}
{exp:consent:form consent="ee:cookies_functionality|ee:cookies_performance|ee:cookies_targeting"}

 ...form code here

{/exp:consent:form}
{/if}

Basically this conditional says if the form has not been actioned/saved, show the form, otherwise don’t show it.

Dealing with opted in consents

Using the default consents (Functionality, Performance and Targeting), once the consent form has been actioned/saved you can then output any scripts or code that collect personal data.

To do this I add some extra tags to my consent embed template like this:

{!-- performance related opted-in consents --}
{exp:consent:requests consent="ee:cookies_performance"}
  {if consent_granted}

    // performance scripts, typically analytics

  {/if}
{/exp:consent:requests}

{!-- targeting related opted-in consents --}
{exp:consent:requests consent="ee:cookies_targeting"}
  {if consent_granted}

    // targeting scripts, typically 3rd party adtech tracking

  {/if}
{/exp:consent:requests}

Note: I’ve omitted a tag for “Functionality” consents because you probably wouldn’t need to run any consent driven scripts here. Feel free to add if you need it!

Making the form always available

After a visitor has saved the consent form you’ll still need to offer the same options so they can opt in and out at any time. To do this I create another template so I can display the consent form on its own page.

The form tag is the same but the output is a little different:

{exp:consent:form consent='ee:cookies_functionality|ee:cookies_performance|ee:cookies_targeting'}

  {!-- no consents message --}
  {if no_results}
    <p>No Consent Requests to Display</p>
  {/if}

  {!-- loop through consents --}
  {consents}
  <fieldset>
    <legend>

      {!-- name of the consent --}
      {consent_title}

      {!-- current status of the consent, accepted or declined --}
      {if consent_granted}(currently accepted){/if}
      {if ! consent_granted}(currently declined){/if}

    </legend>

    {!-- consent description--}
    {consent_request}

    {!-- radio buttons to accept or decline --}     
    <ul>
      <li>
        <label>
          <input type="radio" name="{consent_short_name}" value="y" {if consent_granted}checked{/if}> Accept
        </label>
      </li>
      <li>
        <label>
          <input type="radio" name="{consent_short_name}" value="n" {if ! consent_granted}checked{/if}> Decline</label>
      </li>
    </ul>

  </fieldset>
  {/consents}

  {!-- save button --}
  <button type="submit">Save</button>

{/exp:consent:form}

Using a consent form to hide and show content

It’s not all about privacy laws and cookies, you can also use the consent mechanism to hide content and make visitors click a button to see it.

You’ll need to create a new consent in System settings > Security & privacy > Consent requests - I’ll call mine “ee:promo”.

Here’s an example:

{!-- consent form tag  --}
{if ! consent:has_responded:ee:promo}
{exp:consent:form consent="ee:promo"}

  {!-- pass the consent value in a hidden input --}
  {consents}
    <input type="hidden" name="{consent_short_name}" value="y">
  {/consents}

  {!-- HTML --}
  <p>Do you want to see this thing?</p>

  {!-- submit button--} 
  <button type="submit">Yes please!</button>

{/exp:consent:form}
{/if}

{!-- show the content after the form has been submitted --}
{exp:consent:requests consent="ee:promo"}
  {if consent_granted}

    <p>THIS THING</p>

  {/if}
{/exp:consent:requests}

You could even reverse this idea to show something by default and use the consent mechanism to hide it.

Rob Allen

I've been creating web sites since 1998, and working with ExpressionEngine since 2007, building and maintaining sites for individuals, charities, organisations and businesses. I love using EE to do…