---
layout: layouts/page.njk
useForms: true
eleventyNavigation:
  key: Anmelden
  order: 20
---

<style>
#mode-self:not(:checked) ~ [data-mode=self],
#mode-self:not(:checked) ~ * [data-mode=self] {
	display: none;
}
#mode-child:not(:checked) ~ [data-mode=child],
#mode-child:not(:checked) ~ * [data-mode=child] {
	display: none;
}
</style>

# Für das CoderDojo anmelden

Schön, dass du an einem CoderDojo teilnehmen möchtest!
Hier findest du schon mal die Details zur kommenden Veranstaltung:

> **Ort**&emsp;&ndash;&emsp;Online (Teilnahmelink kommt per Mail)  
> **Datum**&emsp;&ndash;&emsp;16.01.2021  
> **Start**&emsp;&ndash;&emsp;9:00 Uhr (gerne ab 8:30 eintreffen)  
> **Ende**&emsp;&ndash;&emsp;gegen 15:00 Uhr

<form method="post" action="/anmelden">

Zunächst müssen wir ein paar Formalitäten klären.
Wen möchtest du anmelden?

<input type="radio" id="mode-self" class="radio-input" name="mode" required value="self" />
<div class="form-input">
	<label for="mode-self">Ich bin über 14 Jahre alt und möchte mich selbst anmelden.</label>
</div>
<input type="radio" id="mode-child" class="radio-input" name="mode" required value="child" />
<div class="form-input">
	<label for="mode-child">Ich bin Erziehungsberechtigte&ThinSpace;/&ThinSpace;-r und möchte mein Kind anmelden.</label>
</div>

Bitte verrate uns deinen Namen<span data-mode="child"> und den deines Kindes</span>:

<label class="form-input">
  <span>Name:</span>
  <input type="text" name="contactname" required />
</label>

<label class="form-input" data-mode="child">
  <span>Name des Kindes:</span>
  <input type="text" name="participantname" required />
</label>

Optional kannst du uns jetzt noch eine Telefonnummer für Notfälle hinterlassen.
Bitte gebe außerdem eine E-Mail-Adresse an, an die wir Informationen zur Veranstaltung schicken können.

<label class="form-input">
  <span>Telefonnummer:</span>
  <input type="tel" name="contactphone" placeholder="+49 931 1234567" />
</label>

<label class="form-input">
  <span>Email:</span>
  <input type="email" name="contactemail" required placeholder="mail@beispiel.de" />
</label>

Während der Veranstaltungen werden möglicherweise Fotos gemacht und von uns online auf unserer Homepage (aber nicht in sozialen Netzwerken) zur Verfügung gestellt.
Bist du damit einverstanden?

<input type="radio" id="photos-yes" class="radio-input" name="photos" required value="yes" />
<div class="form-input">
	<label for="photos-yes">
		Ja, <span data-mode="self">es dürfen Fotos von mir gemacht werden</span><span data-mode="child">mein Kind darf fotografiert werden</span>.
		Die Fotos werden möglicherweise Online in einer Galerie gezeigt.
	</label>
</div>
<input type="radio" id="photos-no" class="radio-input" name="photos" required value="no" />
<div class="form-input">
	<label for="photos-no">
		Nein, <span data-mode="self">ich möchte nicht fotografiert werden</span><span data-mode="child">mein Kind soll bei den Fotos ausgelassen werden</span>.
	</label>
</div>

Solltest du noch Fragen haben oder uns anderweitig etwas mitteilen wollen, kannst du das hier tun:

<label class="form-input">
  <span>Nachricht:</span>
  <textarea name="message"></textarea>
</label>

<div class="form-submit">
  <input type="submit" value="Abschicken" />
</div>

</form>