Netlify: Delete form submissions (GDPR)

Published:

2021-10-08

Updated:

2023-12-16

Author:

Jonas Jared Jacek

License:

CC BY-SA 4.0

Summary

How to set up Netlify forms to be General Data Protection Regulation (GDPR) conformant by automatically deleting form submissions after processing. The approach uses Netlify functions to delete submissions.

Use Netlify forms GDPR compliant #

Configuring Netlify forms to be GDPR conformant by automatically deleting form submissions with the help of Netlify functions. This prevents form submissions, which may include personally identifiable information (PII) to remain on Netlify servers, after form submissions have been processed, e.g. forwarded to an email address.

This works only in production environments.
Back up existing submissions, if you need them, before implementing.

Get Netlify API Access Token #

The set up makes use of Netlify API and requires an access token. The token must be added to the projects environment variables in Netlify.

Important: Personal access token are private tokens. They should not be shares it with anybody and should not be committed into repositories.

Steps to follow: #

• Go to personal access token settings
• Click “New access token”.
• Give the token a descriptive name, e.g. example.com_contact-form.
• Click “Generate token”.
• Copy and store the token somewhere safe.
• In your Netlify account, for your site, go to “Settings > Build & Deploy > Environment”.
• Click “Edit variables”.
• Click “Add variable”.
• For the key enter NETLIFY_API_ACCESS_TOKEN
• For the value enter the token e.g. Iq1Ty4S7TZxylm7QsOVFJBc1DwxIGjE_w8LJHOOVm_o
  (do not use this token, use yours).
• Click “Save”.

Create Netlify function #

Define location of function #

Making use of file-based configuration with netlify.toml, we can define the location of the function, which deletes the form submissions.

• If you are not using netlify.toml yet, ceate this file in your projects base directory.
• If you already have a [build] section, add the line functions = "netlify/functions" to it.
• If netlify.toml is a newly created file, add the following 2 lines to it:

[build]
  functions = "netlify/functions"

The path netlify/functions is the default path in which Netlify looks for functions. Adjust it as needed.

Create Netlify function file #

• In your projects base directory, create a netlify directory.
• Within the netlify directory, create a functions directory. This is the default location for Netlify to look for functions.
• Inside the functions directory, create a file called submission-created.js. The name follows the naming convention for Netlify triggers and should not be changed.
• Copy and paste the code below into the submission-created.js file.

/*
  Supports GDPR conformity of contact form submissions on Netlify.
  process.env.SITE_ID variable is one of Netlify's built-in env vars. It is defined as the ID specific to the site on Netlify.
*/

// require netlify package as a dependency
const NetlifyAPI = require('netlify')

exports.handler = async function (event, context) {
  const client = new NetlifyAPI(process.env.NETLIFY_API_ACCESS_TOKEN)

  const submissions = await client
    .listSiteSubmissions({
      site_id: process.env.SITE_ID,
    })
    .catch((e) => console.log('Error getting submissions', e))

  if (submissions.length) {
    for (i = 0; i < submissions.length; i++) {
      await client.deleteSubmission({ submission_id: submissions[i].id })
    }
    return {
      statusCode: 200,
      body: 'All submissions deleted',
    }
  } else {
    return {
      statusCode: 200,
      body: 'No submissions to delete',
    }
  }
}

The submission-created.js function will be triggered when a form submission is verified for your site.

Create/Update package.json file #

• If you are not using a package.json file in your project, create a default package.json file now, by running npm init --yes.
• In package.json, add netlify as a dependency:

"dependencies": {
  "netlify": "^4.3.13"
}

• In your projects base directory, run npm install netlify-lambda --save-dev to install the netlify-lambda package as a dev dependency.
• Open package.json and add "postinstall": "netlify-lambda install" in the scripts section:

"scripts": {
  "postinstall": "netlify-lambda install",
}

• Push the code and let Netlify build the site.

If there are errors, they will be mentioned in the Netlify deploy log file. Make sure to test everything in production.

With the next form submission, all previous submissions will be deleted. You should see something like this:

"No remaining verified submissions
This form’s verified submissions have all been deleted or marked as spam."

Further readings #

Sources and recommended, further resources on the topic:

• Netlify
• Netlify Functions
• General Data Protection Regulation
• Trigger serverless functions on events
• Netlify API
• Netlify Environment variables
• Netlify file-based configuration
• Available Netlify triggers
• Create package.json file

Author

Jonas Jared Jacek (J15k)

Jonas works as project manager, web designer, and web developer since 2001. On top of that, he is a Linux system administrator with a broad interest in things related to programming, architecture, and design. See: https://www.j15k.com/

<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://www.ditig.com/instructions/netlify-delete-form-submissions">Netlify: Delete form submissions (GDPR)</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://www.j15k.com/">Jonas Jared Jacek</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer">CC BY-SA 4.0</a>.</p>