Formulare (form-field.php, 3 Form-Wrapper, components.css, form.js): - Floating Labels (Label im Feld, wandert bei Fokus/Inhalt hoch; select/date dauerhaft oben) via :has() + placeholder=" "-Trick. Echtes <label> bleibt im DOM (kein Placeholder-als-Label). - Globale "Pflichtfelder mit *"-Hinweiszeile entfernt; Stern bleibt am Feld, pro Feld als visually-hidden "(Pflichtfeld)" für Screenreader erklärt. - Markenroter Fokus-Ring statt Weiß. - Felder als sanfter Füll-Look: weichere Ränder (eigene --clr-field-*-Tokens), Erkennbarkeit über Fläche + Rand (WCAG 1.4.11 erfüllt). - form.js: Submit-Button-Text wird je Formular korrekt wiederhergestellt. Glas-Look global (tokens.css, components.css): - Frosted Glass zentral: --glass-blur + --glass-shadow (Glow + Top-Sheen), eine Regel statt 28× wiederholt; Leaf-Karten mit Blur, Container nur Glow (kein Doppel-Frost). @supports-Fallback. - Dunkleres Glas (--clr-glass-bg auf Schwarz-Tint), dezenter Card-Rand. Hero-Fade (components.css): - Unterer Auslauf nicht mehr mit grauem --clr-bg zugedeckt, sondern .hero__media per mask-image ausgeblendet → echter dunkler, texturierter Hintergrund scheint durch (schwärzer, durchsichtig, kein graues Band). Abdunklung auf reines Schwarz. Gilt für alle drei Hero-Varianten. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HGzc6GhWhmLJt1jC2q1SRZ
90 lines
5.0 KiB
PHP
90 lines
5.0 KiB
PHP
<?php
|
||
|
||
declare(strict_types=1);
|
||
|
||
/**
|
||
* Kontaktformular (Felder wie auf der alten Seite). Props:
|
||
* $intro array{title, text}|null — optionaler Intro-Block (Überschrift, Teaser, Direkt-Mail).
|
||
* Weglassen → nur das Formular (z. B. auf /kontakt, wo der Hero den Kontext liefert).
|
||
* $return string optional — Slug der absendenden Seite (Default '' = Startseite). Die Action
|
||
* leitet nach PRG hierher zurück (whitelist-validiert), damit /kontakt nicht auf die
|
||
* Startseite springt.
|
||
* Felder rendern ausschließlich über component('form-field') — siehe CLAUDE.md.
|
||
* Liest Flash-Status aus Query-Params (?sent=1 / ?error=...) — PRG-Muster.
|
||
* Spam-Schutz: Honeypot "company_url" + signierter Timestamp "ft" (form_token()).
|
||
*/
|
||
$club = json_load('club');
|
||
$return = $return ?? '';
|
||
$intro = $intro ?? null;
|
||
|
||
$interests = ['Herrenfußball', 'Damenfußball', 'Jugendfußball', 'Turnen', 'Sonstiges'];
|
||
|
||
$sent = isset($_GET['sent']);
|
||
$error = isset($_GET['error']) ? (string) $_GET['error'] : null;
|
||
$errorMessages = [
|
||
'validation' => 'Bitte prüfe deine Eingaben – Pflichtfelder fehlen oder die E-Mail-Adresse ist ungültig.',
|
||
'ratelimit' => 'Zu viele Anfragen in kurzer Zeit. Bitte versuche es in ein paar Minuten erneut.',
|
||
'mail' => 'Deine Nachricht konnte gerade nicht versendet werden. Bitte versuche es später erneut oder schreib uns direkt an ' . $club['email'] . '.',
|
||
];
|
||
|
||
$f = [
|
||
'name' => ['type' => 'text', 'name' => 'name', 'id' => 'contact-name', 'label' => 'Name', 'required' => true, 'autocomplete' => 'name', 'maxlength' => 200],
|
||
'email' => ['type' => 'email', 'name' => 'email', 'id' => 'contact-email', 'label' => 'E-Mail', 'required' => true, 'autocomplete' => 'email', 'maxlength' => 200],
|
||
'phone' => ['type' => 'tel', 'name' => 'phone', 'id' => 'contact-phone', 'label' => 'Telefonnummer', 'autocomplete' => 'tel', 'maxlength' => 50],
|
||
'interest' => ['type' => 'select', 'name' => 'interest', 'id' => 'contact-interest', 'label' => 'Ich interessiere mich für', 'options' => $interests],
|
||
'subject' => ['type' => 'text', 'name' => 'subject', 'id' => 'contact-subject', 'label' => 'Betreff', 'required' => true, 'maxlength' => 200],
|
||
'message' => ['type' => 'textarea', 'name' => 'message', 'id' => 'contact-message', 'label' => 'Nachricht', 'required' => true, 'maxlength' => 5000, 'rows' => 6],
|
||
'privacy' => [
|
||
'type' => 'checkbox', 'name' => 'privacy', 'id' => 'contact-privacy', 'required' => true,
|
||
'label' => 'Ich stimme den Datenschutzbestimmungen zu.',
|
||
'label_html' => 'Ich stimme den <a href="' . e(url('datenschutz')) . '">Datenschutzbestimmungen</a> zu.',
|
||
],
|
||
];
|
||
?>
|
||
<section class="section contact" id="kontakt">
|
||
<div class="container contact__inner">
|
||
<?php if (!empty($intro)): ?>
|
||
<div class="contact__intro">
|
||
<h2><?= e($intro['title']) ?></h2>
|
||
<p><?= e($intro['text']) ?></p>
|
||
<p class="text-muted">Oder direkt per Mail an <a href="mailto:<?= e($club['email']) ?>"><?= e($club['email']) ?></a></p>
|
||
</div>
|
||
<?php endif; ?>
|
||
<form class="form" method="post" action="<?= e(url('kontakt-senden')) ?>" novalidate>
|
||
<div class="form__status" role="status" aria-live="polite" tabindex="-1" data-form-status>
|
||
<?php if ($sent): ?>
|
||
<p class="form__success">Danke für deine Anfrage! Wir melden uns so schnell wie möglich bei dir.</p>
|
||
<?php elseif ($error !== null): ?>
|
||
<p class="form__error"><?= e($errorMessages[$error] ?? $errorMessages['mail']) ?></p>
|
||
<?php endif; ?>
|
||
</div>
|
||
|
||
<div class="form__row">
|
||
<?php component('form-field', ['field' => $f['name']]); ?>
|
||
<?php component('form-field', ['field' => $f['email']]); ?>
|
||
</div>
|
||
|
||
<div class="form__row">
|
||
<?php component('form-field', ['field' => $f['phone']]); ?>
|
||
<?php component('form-field', ['field' => $f['interest']]); ?>
|
||
</div>
|
||
|
||
<?php component('form-field', ['field' => $f['subject']]); ?>
|
||
<?php component('form-field', ['field' => $f['message']]); ?>
|
||
<?php component('form-field', ['field' => $f['privacy']]); ?>
|
||
|
||
<?php /* Honeypot — für Menschen unsichtbar, Bots füllen es aus */ ?>
|
||
<div class="visually-hidden" aria-hidden="true">
|
||
<label for="contact-company-url">Bitte dieses Feld leer lassen</label>
|
||
<input type="text" id="contact-company-url" name="company_url" tabindex="-1" autocomplete="off">
|
||
</div>
|
||
<input type="hidden" name="ft" value="<?= e(form_token()) ?>">
|
||
<input type="hidden" name="return" value="<?= e($return) ?>">
|
||
|
||
<p class="form__submit">
|
||
<button class="btn" type="submit">Nachricht senden</button>
|
||
</p>
|
||
</form>
|
||
</div>
|
||
</section>
|