webdevpuneet.com

Related Snippets

221 in Forms category
1–6 of 60

Cascading Select

Fuse.js Typo-Tolerant Product Search with Threshold Tuning

Bootstrap Paste-to-Upload (Clipboard Image Paste)

Bootstrap Multi-File Upload Queue

Avatar Upload

Chip Filter

GDPR Data Request Form — Free Privacy Rights Request Widget

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

CategoryForms
TagsForms & Validation

Copy & paste

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="[email protected]" 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>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

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.