Gewinnspiel-Formular erstellen
Teilnehmen, ohne zu raten
Namensfeld, Teilnahme-Kästchen, Eingabezweck: drei Stellen im Teilnahmeformular.
Formular-Blaupause
Ein Formular, zwei Datenwege
Die Teilnahme endet im Lostopf. Werbung bekommt eine eigene, freiwillige Spur.
Herbstverlosung
Teilnahmeschluss: 31. Oktober, 23:59 Uhr
Wie der Veranstalter die Angaben verarbeitet, steht im Datenschutzhinweis. Dafür ist in dieser Blaupause kein Bestätigungs-Kästchen vorgesehen.
Immer
Teilnahme
- Name
- Altersbestätigung
- Bedingungen
Ziehung und Benachrichtigung
Nur bei Auswahl
Newsletter
- Einwilligungstext
- Zeitpunkt und Textversion
Versand und Widerruf
Nur Nötiges abfragen
Legen Sie zuerst fest, welche Angabe Ziehung und Benachrichtigung wirklich brauchen. Die Altersbestätigung gehört nur hinein, wenn Ihre Bedingungen eine Altersgrenze setzen.
Information direkt verlinken
Der Datenschutzhinweis nennt unter anderem Verantwortliche, Zwecke, Rechtsgrundlagen, Empfänger, Speicherdauer und Rechte. Ein Link steht dort, wo die Daten erhoben werden.
Werbung abtrennen
Soll die E-Mail-Adresse zusätzlich für Werbung dienen, zeigen Sie Zweck, Absender und Widerruf als eigene Entscheidung. Prüfen Sie die Rechtsgrundlage für Ihren Einzelfall.
Kopierbares Grundgerüst
Das HTML hinter der Blaupause
Sichtbare Beschriftungen sind mit den Feldern verbunden. Hinweise ergänzen den Namen, statt als zweites label zu konkurrieren. Passen Sie Bedingungen, Verantwortliche und Datenschutzhinweis an Ihr Gewinnspiel an.
<form action="/gewinnspiel" method="post">
<h1>An der Herbstverlosung teilnehmen</h1>
<p>Mit * markierte Felder sind Pflichtfelder.</p>
<p>
<label for="name">Vor- und Nachname *</label>
<input id="name" name="name" type="text"
autocomplete="name" required>
</p>
<p>
<label for="email">E-Mail-Adresse *</label>
<input id="email" name="email" type="email"
autocomplete="email" aria-describedby="email-hinweis" required>
<span id="email-hinweis">
Dorthin senden wir die Gewinnbenachrichtigung.
</span>
</p>
<p>
<input id="alter" name="alter" type="checkbox" required>
<label for="alter">Ich bin mindestens 18 Jahre alt. *</label>
</p>
<p>
<input id="bedingungen" name="bedingungen" type="checkbox" required>
<label for="bedingungen">
Ich akzeptiere die
<a href="/teilnahmebedingungen">Teilnahmebedingungen</a>. *
</label>
</p>
<p>
Informationen zu Zwecken, Speicherdauer und Rechten stehen im
<a href="/datenschutz">Datenschutzhinweis zum Gewinnspiel</a>.
</p>
<p>
<input id="newsletter" name="newsletter" type="checkbox">
<label for="newsletter">
Ja, ich möchte den Newsletter des Veranstalters per E-Mail erhalten.
Ich kann meine Einwilligung jederzeit über den Abmeldelink widerrufen.
</label>
</p>
<p>
Teilnahmeschluss:
<time datetime="2026-10-31T23:59">
31. Oktober 2026, 23:59 Uhr
</time>
</p>
<button type="submit">Teilnahme absenden</button>
</form>So prüfen Sie das fertige Formular
Tab-TasteJedes Feld, jedes Kästchen und jeder Link erhält sichtbar Fokus.
BeschriftungEin Klick auf den Text setzt das zugehörige Kästchen.
FehlerfallEine Meldung nennt das Feld und erklärt, was zu ändern ist.
DatenwegOhne Newsletter-Auswahl landet die E-Mail nicht im Werbeverteiler.
Quellen und Vertiefung
- Datenschutzkonferenz: Orientierungshilfe Direktwerbung Informationspflichten, Einwilligung und Preisausschreiben
- EUR-Lex: Datenschutz-Grundverordnung, Artikel 7 und 13 Trennbarkeit der Einwilligung und Information bei Erhebung
- W3C WAI: Formularelemente beschriften Verknüpfte Labels und größere Klickflächen
Aus dem Prüfbericht
Drei Regeln, drei Befunde
Kritisch Das Kästchen für die Teilnahmebedingungen Regel label
Der Text steht neben dem Kästchen, ist aber nicht damit verbunden. Ein label mit for macht ihn zum Namen und zur Klickfläche.
Prüfen Zwei Beschriftungen am Namensfeld Regel form-field-multiple-labels
„Vor- und Nachname“ und „wie im Ausweis“ hängen beide als label am Feld. Der Zusatz gehört über aria-describedby daneben.
Kritisch Der Eingabezweck ist erfunden Regel autocomplete-valid
Am Namensfeld steht autocomplete="teilnehmer". Gültig ist name, damit der Browser die gespeicherte Angabe anbietet.
Zum Mitnehmen
Das Teilnahmeformular, korrigiert
Drei Änderungen im HTML. Die sichtbaren Texte bleiben.
Korrektur in 3 Schritten ansehen
Das Kästchen beschriften
Das label mit for macht den Text zum Namen des Kästchens. Nebenbei wird der ganze Text zur Klickfläche.
KorrekturvergleichSchritt 1 · HTML Vorher
<input type="checkbox" name="bedingungen" required> <span>Teilnahmebedingungen akzeptieren</span>Nachher
<input id="bedingungen" type="checkbox" name="bedingungen" required> <label for="bedingungen">Teilnahmebedingungen akzeptieren</label>Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf den Text neben dem Kästchen. Das Häkchen setzt sich.
Den Zusatz als Hinweis verknüpfen
Zwei label an einem Feld machen den Namen unklar. Das zweite wird ein span und über aria-describedby als Hinweis verbunden.
KorrekturvergleichSchritt 2 · HTML Vorher
<label for="name">Vor- und Nachname</label> <input id="name" type="text" name="name"> <label for="name">wie im Ausweis</label>Nachher
<label for="name">Vor- und Nachname</label> <input id="name" type="text" name="name" aria-describedby="name-hinweis"> <span id="name-hinweis">wie im Ausweis</span>Markierte Zeilen wurden geändert
So prüfen Sie es Der Zusatz bleibt sichtbar. Ein Vorleseprogramm sagt zuerst den Namen, dann den Hinweis.
Einen gültigen Eingabezweck setzen
autocomplete kennt eine feste Liste von Werten. Mit name bietet der Browser die gespeicherte Angabe an, statt sie erneut abzutippen.
KorrekturvergleichSchritt 3 · HTML Vorher
<input id="name" type="text" name="name" aria-describedby="name-hinweis" autocomplete="teilnehmer">Nachher
<input id="name" type="text" name="name" aria-describedby="name-hinweis" autocomplete="name">Markierte Zeilen wurden geändert
So prüfen Sie es Tippen Sie einen Buchstaben in das Feld. Der Browser schlägt den gespeicherten Namen vor.