mirror of
https://codeberg.org/angestoepselt/homepage.git
synced 2025-05-24 14:46:16 +00:00
Add CoderDojo registration form
This commit is contained in:
parent
f4a93edb83
commit
89320a1abf
3 changed files with 136 additions and 10 deletions
69
sites/coderdojo/anmelden.md
Normal file
69
sites/coderdojo/anmelden.md
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
---
|
||||
layout: layouts/page.njk
|
||||
useForms: true
|
||||
eleventyNavigation:
|
||||
key: Anmelden
|
||||
order: 20
|
||||
---
|
||||
|
||||
# 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** – Online (Teilnahmelink kommt per Mail)
|
||||
> **Datum** – 16.01.2021
|
||||
> **Start** – 9:00 Uhr (gerne ab 8:30 eintreffen)
|
||||
> **Ende** – 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?
|
||||
|
||||
<div class="form-input">
|
||||
<input type="radio" id="registertype-self" name="registertype" required value="self" />
|
||||
<label for="registertype-self">Ich bin über 14 Jahre alt und möchte mich selbst anmelden.</label>
|
||||
</div>
|
||||
<div class="form-input">
|
||||
<input type="radio" id="registertype-child" name="registertype" required value="child" />
|
||||
<label for="registertype-child">Ich bin Erziehungsberechtigte / -r und möchte mein Kind anmelden.</label>
|
||||
</div>
|
||||
|
||||
Bitte verrate uns deinen Namen:
|
||||
|
||||
<label class="form-input">
|
||||
<span>Name:</span>
|
||||
<input type="text" name="contactname" required />
|
||||
</label>
|
||||
|
||||
<label class="form-input">
|
||||
<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>
|
||||
|
||||
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>
|
||||
|
|
@ -18,11 +18,28 @@
|
|||
%form-label {
|
||||
font-weight: typography.$emphasized-weight;
|
||||
color: colors.$blue-800;
|
||||
|
||||
@include colors.coderdojo-theme {
|
||||
color: colors.$brown-800;
|
||||
}
|
||||
}
|
||||
|
||||
%base-form-input {
|
||||
background-color: transparent;
|
||||
border: 0.1rem solid colors.$blue-800;
|
||||
|
||||
@include colors.coderdojo-theme {
|
||||
border-color: colors.$brown-800;
|
||||
}
|
||||
}
|
||||
|
||||
%focused-form-input {
|
||||
outline: none;
|
||||
background-color: colors.$yellow-500;
|
||||
|
||||
@include colors.coderdojo-theme {
|
||||
background-color: colors.$green-500;
|
||||
}
|
||||
}
|
||||
|
||||
%form-input {
|
||||
|
|
@ -37,15 +54,14 @@
|
|||
|
||||
&:focus-visible,
|
||||
&:active {
|
||||
outline: none;
|
||||
background-color: colors.$yellow-500;
|
||||
@extend %focused-form-input;
|
||||
}
|
||||
}
|
||||
|
||||
.form-input {
|
||||
@extend %form-item;
|
||||
|
||||
> span {
|
||||
> :first-child {
|
||||
@extend %form-label;
|
||||
flex-grow: 1;
|
||||
|
||||
|
|
@ -54,8 +70,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
> input,
|
||||
> textarea {
|
||||
> :last-child {
|
||||
@extend %form-input;
|
||||
flex-basis: 60%;
|
||||
margin-top: layout.$small-gap;
|
||||
|
|
@ -65,6 +80,40 @@
|
|||
margin-left: layout.$normal-gap;
|
||||
}
|
||||
}
|
||||
|
||||
> input[type='radio']:first-child {
|
||||
opacity: 0;
|
||||
|
||||
+ label {
|
||||
position: relative;
|
||||
color: colors.$gray-800;
|
||||
|
||||
&:before {
|
||||
content: '\2771';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: #{layout.$large-gap * -1};
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
$color: colors.$teal-600;
|
||||
|
||||
@include colors.coderdojo-theme {
|
||||
$color: colors.$orange-500;
|
||||
}
|
||||
|
||||
+ label {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible + label {
|
||||
@extend %focused-form-input;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-checkbox {
|
||||
|
|
@ -89,6 +138,10 @@
|
|||
|
||||
&:focus-visible + div {
|
||||
background-color: colors.$yellow-600;
|
||||
|
||||
@include colors.coderdojo-theme {
|
||||
background-color: colors.$green-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -109,14 +109,18 @@ a[href] {
|
|||
}
|
||||
|
||||
blockquote {
|
||||
@extend %narrow-content-gutter;
|
||||
$border: 0.5em solid colors.$teal-300;
|
||||
border-top: $border;
|
||||
border-bottom: $border;
|
||||
$color: colors.$teal-300;
|
||||
|
||||
@include colors.coderdojo-theme {
|
||||
$border: colors.$orange-300;
|
||||
$color: colors.$orange-300;
|
||||
}
|
||||
|
||||
@extend %narrow-content-gutter;
|
||||
padding-left: layout.$small-gap;
|
||||
padding-right: layout.$small-gap;
|
||||
$border: 0.5em solid $color;
|
||||
border-top: $border;
|
||||
border-bottom: $border;
|
||||
}
|
||||
|
||||
.cta-link {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue