fs/tsv08kulmbach-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Formular-System: zentrale form-field-Komponente, Inline-Feldfehler (aria-describedby, :user-invalid), Fokus-Ringe, Select-Chevron, Pflichtfeld-Kennzeichnung

Browse Source 
Enthält auch User-WIP: Banner-Styles + zentriertes Kontakt-Layout in components.css

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-06-11 21:55:47 +02:00
parent c63ba642af
commit ee0d6866ea
4 changed files with 421 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
app/components/contact-form.php
View File

@@ -5,6 +5,7 @@ declare(strict_types=1);
/**
* Kontaktformular (Felder wie auf der alten Seite). Props:
* $intro array{title, text}
* 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 "website" + signierter Timestamp "ft" (form_token()).
*/
@@ -18,6 +19,20 @@ $errorMessages = [
'validation' => 'Bitte prüfe deine Eingaben – Pflichtfelder fehlen oder die E-Mail-Adresse ist ungültig.',
'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">
@@ -27,7 +42,7 @@ $errorMessages = [
<p class="text-muted">Oder direkt per Mail an <a href="mailto:<?= e($club['email']) ?>"><?= e($club['email']) ?></a></p>
</div>
<form class="form" method="post" action="<?= e(url('kontakt-senden')) ?>" novalidate>
<div class="form__status" role="status" aria-live="polite" data-form-status>
<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): ?>
@@ -35,47 +50,21 @@ $errorMessages = [
<?php endif; ?>
</div>
<p class="form__note">Pflichtfelder sind mit <span class="form__required" aria-hidden="true">*</span><span class="visually-hidden">Stern</span> markiert.</p>
<div class="form__row">
<div class="form__field">
<label for="contact-name">Name *</label>
<input type="text" id="contact-name" name="name" required autocomplete="name" maxlength="200">
</div>
<div class="form__field">
<label for="contact-email">E-Mail *</label>
<input type="email" id="contact-email" name="email" required autocomplete="email" maxlength="200">
</div>
<?php component('form-field', ['field' => $f['name']]); ?>
<?php component('form-field', ['field' => $f['email']]); ?>
</div>
<div class="form__row">
<div class="form__field">
<label for="contact-phone">Telefonnummer</label>
<input type="tel" id="contact-phone" name="phone" autocomplete="tel" maxlength="50">
</div>
<div class="form__field">
<label for="contact-interest">Ich interessiere mich für</label>
<select id="contact-interest" name="interest">
<option value="">Bitte wählen</option>
<?php foreach ($interests as $interest): ?>
<option value="<?= e($interest) ?>"><?= e($interest) ?></option>
<?php endforeach; ?>
</select>
</div>
<?php component('form-field', ['field' => $f['phone']]); ?>
<?php component('form-field', ['field' => $f['interest']]); ?>
</div>
<div class="form__field">
<label for="contact-subject">Betreff *</label>
<input type="text" id="contact-subject" name="subject" required maxlength="200">
</div>
<div class="form__field">
<label for="contact-message">Nachricht *</label>
<textarea id="contact-message" name="message" rows="6" required maxlength="5000"></textarea>
</div>
<div class="form__field form__field--checkbox">
<input type="checkbox" id="contact-privacy" name="privacy" value="1" required>
<label for="contact-privacy">Ich stimme den <a href="<?= e(url('datenschutz')) ?>">Datenschutzbestimmungen</a> zu. *</label>
</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">

66
app/components/form-field.php Normal file
View File

@@ -0,0 +1,66 @@
<?php
declare(strict_types=1);
/**
* Einheitliches Formularfeld — EINZIGE Quelle für Feld-Markup aller Formulare.
*
* Props: $field (array):
* type text | email | tel | select | textarea | checkbox (Default: text)
* name, label Pflicht
* id Default: field-<name>
* required bool
* autocomplete, maxlength, rows (textarea)
* options[] + placeholder (select)
* hint optionaler Hilfetext (aria-describedby)
* label_html NUR für vertrauenswürdiges Markup aus Komponenten-Code
* (z. B. Datenschutz-Link im Checkbox-Label) — nie Nutzereingaben!
*
* Jedes Feld bekommt ein leeres Fehler-Element (#<id>-error), das form.js bei
* ungültiger Eingabe mit der Browser-Validierungsmeldung füllt (aria-describedby).
*/
$type = $field['type'] ?? 'text';
$name = $field['name'];
$id = $field['id'] ?? 'field-' . $name;
$required = !empty($field['required']);
$errorId = $id . '-error';
$hintId = $id . '-hint';
$describedBy = (!empty($field['hint']) ? $hintId . ' ' : '') . $errorId;
$requiredMark = $required
? ' <span class="form__required" aria-hidden="true">*</span>'
: '';
$commonAttrs = 'name="' . e($name) . '" id="' . e($id) . '"'
. ($required ? ' required' : '')
. ' aria-describedby="' . e($describedBy) . '"'
. (!empty($field['autocomplete']) ? ' autocomplete="' . e($field['autocomplete']) . '"' : '')
. (!empty($field['maxlength']) ? ' maxlength="' . e($field['maxlength']) . '"' : '');
?>
<?php if ($type === 'checkbox'): ?>
<div class="form__field form__field--checkbox">
<input type="checkbox" <?= $commonAttrs ?> value="1">
<label for="<?= e($id) ?>"><?= $field['label_html'] ?? e($field['label']) ?><?= $requiredMark ?></label>
<p class="form__error-msg" id="<?= e($errorId) ?>" hidden></p>
</div>
<?php else: ?>
<div class="form__field">
<label for="<?= e($id) ?>"><?= e($field['label']) ?><?= $requiredMark ?></label>
<?php if ($type === 'select'): ?>
<select <?= $commonAttrs ?>>
<option value=""><?= e($field['placeholder'] ?? 'Bitte wählen') ?></option>
<?php foreach ($field['options'] as $option): ?>
<option value="<?= e($option) ?>"><?= e($option) ?></option>
<?php endforeach; ?>
</select>
<?php elseif ($type === 'textarea'): ?>
<textarea <?= $commonAttrs ?> rows="<?= e($field['rows'] ?? 6) ?>"></textarea>
<?php else: ?>
<input type="<?= e($type) ?>" <?= $commonAttrs ?>>
<?php endif; ?>
<?php if (!empty($field['hint'])): ?>
<p class="form__hint" id="<?= e($hintId) ?>"><?= e($field['hint']) ?></p>
<?php endif; ?>
<p class="form__error-msg" id="<?= e($errorId) ?>" hidden></p>
</div>
<?php endif; ?>