Cookie preferences form

How the cookie preferences form is handled

The Cookie Manager library is also, by default, setup to parse a cookie preference form which allows a user to set their cookie preferences in a fine-grained manner. The default configuration is built to work with the template provided below.

In short, on the form submission event:

1. The radio groups within the form are parsed.
2. Each selected option is matched to a cookie category (based on the radio element’s name attribute).
3. The consent value for the selected option is derived from the radio element’s value attribute, which should be either on or off.
4. The selected options are then set as user’s active cookie preferences.

The form layout needs to be configured for each different cookie category you are utilising within your service. This requires you to add another set of radio inputs, with the name attribute set to that of your cookie category, using on/off as their values for consent / reject respectively.

More information about the cookie preferences form functionality and it’s configuration can be found within the cookie preferences form configuration options.

HTML / Nunjucks template

Here is an example of a cookie preferences form (utilising the GOV.UK Frontend ‘Radios’ component). Code has been provided for both HTML and Nunjucks on how this can be used to create a cookie preferneces form for use with @hmcts/cookie-manager. See the GOV.UK Frontend Design System for more about this component

        
<form class="cookie-preferences-form">
   <div class="govuk-form-group">
      <fieldset class="govuk-fieldset">
         <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
            Allow cookies that measure website use?
         </legend>
         <div class="govuk-radios govuk-radios" data-module="govuk-radios">
            <div class="govuk-radios__item">
               <input class="govuk-radios__input" id="analytics" name="analytics" type="radio" value="on">
               <label class="govuk-label govuk-radios__label" for="analytics">
               Use cookies that measure my website use
               </label>
            </div>
            <div class="govuk-radios__item">
               <input class="govuk-radios__input" id="analytics-2" name="analytics" type="radio" value="off" checked="">
               <label class="govuk-label govuk-radios__label" for="analytics-2">
               Do not use cookies that measure my website use
               </label>
            </div>
         </div>
      </fieldset>
   </div>
   <div class="govuk-form-group">
      <fieldset class="govuk-fieldset">
         <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
            Allow cookies that measure website application performance monitoring?
         </legend>
         <div class="govuk-radios govuk-radios" data-module="govuk-radios">
            <div class="govuk-radios__item">
               <input class="govuk-radios__input" id="apm" name="apm" type="radio" value="on">
               <label class="govuk-label govuk-radios__label" for="apm">
               Use cookies that measure website application performance monitoring
               </label>
            </div>
            <div class="govuk-radios__item">
               <input class="govuk-radios__input" id="apm-2" name="apm" type="radio" value="off" checked="">
               <label class="govuk-label govuk-radios__label" for="apm-2">
               Do not use cookies that measure website application performance monitoring
               </label>
            </div>
         </div>
      </fieldset>
   </div>
   <button class="govuk-button" data-module="govuk-button">
   Save
   </button>
</form>
        
      

          
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/button/macro.njk" import govukButton %}

<form class="cookie-preferences-form">
  {{ govukRadios({
    classes: 'govuk-radios',
    idPrefix: 'analytics',
    name: 'analytics',
    fieldset: {
      legend: {
        text: "Allow cookies that measure website use?",
        classes: "govuk-fieldset__legend--s"
      }
    },
    items: [
      {
        value: 'on',
        text: 'Use cookies that measure my website use'
      },
      {
        value: 'off',
        text: 'Do not use cookies that measure my website use',
        checked: true
      }
    ]
  }) }}

  {{ govukRadios({
    classes: 'govuk-radios',
    idPrefix: 'apm',
    name: 'apm',
    fieldset: {
      legend: {
        text: "Allow cookies that measure website application performance monitoring?",
        classes: "govuk-fieldset__legend--s"
      }
    },
    items: [
      {
        value: 'on',
        text: 'Use cookies that measure website application performance monitoring'
      },
      {
        value: 'off',
        text: 'Do not use cookies that measure website application performance monitoring',
        checked: true
      }
    ]
  }) }}

  {{ govukButton({
    text: 'Save'
  }) }}
</form>
          
        

Default configuration

The default config for the cookie preferences form is shown below:

{
  preferencesForm: {
    class: 'cookie-preferences-form'
  }
}

You can see the class in this config used on the preferences form <form> element on the template above.

Using this default config with the above template should set up a cookie preferences form that is correctly targeted by the Cookie Manager library, but further configuration to the HTML is required for each additional category, as explained in the ‘how the cookie preferences form is handled’ section at the top of this page.

Note: To disable the cookie preferences form functionality, set the value of configuration property disableCookiePreferencesForm within config category additionalOptions to true when initializing the library.