homepage/sites/coderdojo/anmelden.md

97 lines
3.2 KiB
Markdown

---
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 Email-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>