Related Snippets

221 in Forms category
1–6 of 60
Quill Rich Text Editor with Custom Toolbar and Character Limit

Quill Rich Text Editor with Custom Toolbar and Character Limit

CodeMirror JSON Editor with Validation Gutter

CodeMirror JSON Editor with Validation Gutter

CodeMirror Code Editor with Line Numbers, Folding and Themes

CodeMirror Code Editor with Line Numbers, Folding and Themes

Marked + DOMPurify Live Markdown Preview

Marked + DOMPurify Live Markdown Preview

FilePond Image Upload with Preview and Reorder

FilePond Image Upload with Preview and Reorder

Cropper.js Aspect-Ratio Presets for Social Posts

Cropper.js Aspect-Ratio Presets for Social Posts

GDPR Data Request Form — Free Privacy Rights Request Widget

GDPR Data Request Form · Forms · Plain HTML, CSS & JS · Live preview

CategoryForms
TagsForms & Validation

What's included

Features

Four GDPR request types
Access, delete, correct, export — in plain language.
Grouped radio fieldset
Accessible legend and labeled options.
Email format validation
Blocks submission on an invalid address.
Accurate GDPR timeline copy
States the real one-month statutory deadline.
Request-echoing confirmation
Restates exactly what was submitted.
Two-state flow
Form and confirmation in one card, no reload.
Restart without reload
form.reset() returns to a clean state.
No dependencies
Pure HTML, CSS, and JavaScript.

About this UI Snippet

GDPR Data Request Form — Access, Delete, Correct, or Export Your Data

Screenshot of the GDPR Data Request Form snippet rendered live

The GDPR data request form is the interface a privacy or account-settings page provides for a person to exercise their data subject rights under GDPR — access, erasure, rectification, and portability — without emailing support and hoping someone reads it. This snippet builds a self-contained version in plain HTML, CSS, and JavaScript.

Four request types, one radio group

A fieldset/legend-grouped set of radio buttons covers the four common request types: Access, Delete, Correct, and Export my data. Each option carries a short description of what it means in plain language, not just legal shorthand, so the visitor picks the right one with confidence.

Identity confirmation before anything happens

An email field asks the requester to confirm the address tied to their account. This snippet validates it's a plausible email format client-side and blocks submission with an inline error otherwise — a real (if basic) organization needs a stronger identity check before actually acting on a request, but the form demonstrates where that gate belongs in the flow.

The correct GDPR timeline — no invented numbers

The confirmation view states the response window as *"within one month (30 days)... may be extended by up to two further months for complex requests."* This is deliberately GDPR's actual statutory deadline (Article 12(3)) — a one-month base period, extendable by two further months when the request is complex — and the copy is written to match that exactly rather than a plausible-sounding but wrong number like "5 business days" or "90 days."

A confirmation that restates the request

Once submitted, the confirmation view echoes back the selected request type and the confirmed email in a sentence, so the requester has a receipt of exactly what they asked for — useful evidence if they need to follow up.

Restart without reload

A "Submit another request" button resets the form and swaps the views back, letting one page handle multiple sequential requests (e.g., an internal tool processing several people's requests) without reloading.

Customizing it

Wire the submit handler to your real request-intake API or ticketing system, add a free-text details field for correction requests, or add a stronger identity-verification step (e.g. a follow-up email link) before the request is actually logged. Pair it with gdpr-consent-manager or cookie preferences.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSThe request form renders with Access preselected.
  2. 2
    Choose a request typeAccess, Delete, Correct, or Export.
  3. 3
    Confirm your emailRequired and format-validated before submit.
  4. 4
    Submit the requestErrors show inline if the email is invalid.
  5. 5
    View the confirmationSee the restated request and the GDPR timeline.
  6. 6
    Wire to a real backendReplace the demo submit with your intake API.

Real-world uses

Common Use Cases

Privacy settings pages
Let users exercise access, deletion, correction and export rights themselves, using a grouped radio fieldset with an accessible legend and labelled options.
Compliance intake forms
Feed a legal team's request queue with structured submissions, blocking invalid email addresses before anything is sent.
Consent management pairing
Sit beside a GDPR consent manager so people can set cookie preferences and also request their data in one privacy centre.
Cookie and privacy centres
Place alongside cookie preferences, with copy that states the real statutory deadline of one month for a response.
Multi-region adaptation
Adapt the template for CCPA and other regimes, and let support agents log a request on a user's behalf using the same form.
Related: Number Stepper with Keyboard Arrows and Long-Press Acceleration
See the Number Stepper with Keyboard Arrows and Long-Press Acceleration for a related forms pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Because that's GDPR's actual statutory deadline. Article 12(3) requires organizations to respond to data subject requests without undue delay and within one month (roughly 30 days) of receipt, extendable by up to two further months for complex or numerous requests. This snippet states that real figure deliberately rather than an invented, faster-sounding number.

No — it performs basic email format validation only, which is not sufficient identity verification for a production privacy tool. A real implementation needs a stronger check (e.g. requiring the requester to click a confirmation link sent to the account email, or matching against authenticated session data) before actually acting on the request.

They map to core GDPR data subject rights: the right of access (Article 15), the right to erasure/"to be forgotten" (Article 17), the right to rectification (Article 16), and the right to data portability (Article 20). The form's copy summarizes each in plain language rather than citing article numbers to the end user.

In the submit handler, after validation passes, send the selected request type and confirmed email to your backend (ticketing system, CRM, or dedicated privacy-request tool) instead of just rendering the confirmation view locally, and use the real ticket/reference number in the confirmation copy.

Yes — add another radio option following the same pattern (a value, a bold label, and a description), or add fields like a free-text "what would you like corrected" box that only appears when the Correct option is selected, toggled via a change listener on the radio group.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain how the four request types map to GDPR's actual data subject rights (access, erasure, rectification, portability), and to double-check that the response-time copy correctly reflects GDPR's real one-month deadline (extendable by two further months for complex requests) rather than a plausible-sounding but wrong figure. It can help you add a genuine identity-verification step (like an email confirmation link) before a request is actually processed, wire the submission to a real ticketing or privacy-request-tracking backend, or add a conditional detail field that only appears for the "Correct my data" option.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a "GDPR data request form" in plain HTML, CSS, and JavaScript (no dependencies).

Requirements:
- A fieldset/legend-grouped radio button group with four options representing core GDPR data subject rights: access my data, delete my data (erasure), correct my data (rectification), and export my data (portability) — each option should have a short plain-language description of what it means, not just a legal term.
- An identity-confirmation email field that is required and validated client-side for a plausible email format before the form can be submitted; show an inline error and keep focus on the field if validation fails.
- On successful submission, hide the form and show a confirmation view in the same card (no page navigation) that restates exactly which request type was submitted and for which email address.
- The confirmation view MUST state the response-time expectation accurately per GDPR: respond within one month (30 days) of receiving the request, which may be extended by up to two further months for complex or numerous requests. Do not invent a different number of days — use GDPR's real statutory timeline (Article 12(3)).
- A "submit another request" action that resets the form and returns to the form view without a page reload.
- Keep the whole thing accessible: a proper fieldset/legend for the radio group, a label tied to the email input, and a clearly announced/visible error state.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Source Code

<div class="gd-card">
  <form id="gdForm" class="gd-form">
    <h2>Data privacy request</h2>
    <p class="gd-sub">Exercise your rights under GDPR. We'll confirm your identity before processing.</p>

    <fieldset class="gd-fieldset">
      <legend>What would you like to do?</legend>
      <label class="gd-radio">
        <input type="radio" name="gdType" value="Access my data" checked />
        <span><strong>Access my data</strong><small>Get a copy of the personal data we hold about you.</small></span>
      </label>
      <label class="gd-radio">
        <input type="radio" name="gdType" value="Delete my data" />
        <span><strong>Delete my data</strong><small>Request erasure of your personal data ("right to be forgotten").</small></span>
      </label>
      <label class="gd-radio">
        <input type="radio" name="gdType" value="Correct my data" />
        <span><strong>Correct my data</strong><small>Fix inaccurate or incomplete personal data.</small></span>
      </label>
      <label class="gd-radio">
        <input type="radio" name="gdType" value="Export my data" />
        <span><strong>Export my data</strong><small>Receive your data in a portable, machine-readable format.</small></span>
      </label>
    </fieldset>

    <div class="gd-field">
      <label for="gdEmail">Confirm your account email</label>
      <input type="email" id="gdEmail" placeholder="you@example.com" required />
      <p class="gd-error" id="gdError" hidden>Enter the email address associated with your account.</p>
    </div>

    <button type="submit" class="gd-submit">Submit request</button>
  </form>

  <div class="gd-confirm" id="gdConfirm" hidden>
    <div class="gd-check">✓</div>
    <h2>Request received</h2>
    <p class="gd-confirm-detail" id="gdConfirmDetail"></p>
    <div class="gd-timeline-note">
      <strong>What happens next</strong>
      <p>We'll respond within <strong>one month (30 days)</strong> of receiving your request, as required under GDPR. For complex requests, this may be extended by up to two further months — we'll notify you if that applies.</p>
    </div>
    <button type="button" class="gd-restart" id="gdRestart">Submit another request</button>
  </div>
</div>