feat: replace mzur/kirby-uniform with custom Kontaktformular implementation

Replaced the `mzur/kirby-uniform` dependency with a custom form handling solution. Updated `kontakt.php`, its backend controller, and corresponding email template for streamlined submission handling. Adjusted styles in `input.css` and integrated a honeypot field for spam prevention.
This commit is contained in:
2025-07-13 17:40:58 +02:00
parent 8fdb707178
commit 78789132a4
5 changed files with 111 additions and 60 deletions
+5
View File
@@ -0,0 +1,5 @@
Hallo Schachfreunde Bad Steben,
<?= $text ?>
<?= $sender ?>
+40 -32
View File
@@ -58,45 +58,53 @@
</dl>
</div>
</div>
<form action="<?php echo $page->url() ?>" method="POST" class="px-6 pt-20 pb-24 sm:pb-32 lg:px-8 lg:py-12">
<div class="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div class="sm:col-span-2">
<label for="name" class="block text-sm/6 font-semibold text-gray-900">Name</label>
<div class="mt-2.5">
<input type="text" id="name" name="name" class="<?php if ($form->error('name')): ?>error <?php endif; ?>block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" value="<?php echo $form->old('name') ?>" />
<div>
<form action="<?= $page->url() ?>" method="POST" class="px-6 pt-20 pb-24 sm:pb-32 lg:px-8 lg:py-12">
<div class="honeypot">
<label for="website">Website <abbr title="required">*</abbr></label>
<input type="url" id="website" name="website" tabindex="-1">
</div>
<div class="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div class="sm:col-span-2">
<label for="name" class="block text-sm/6 font-semibold text-gray-900">Name</label>
<div class="mt-2.5">
<input type="text" id="name" name="name" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" value="<?= esc($data['name'] ?? '', 'attr') ?>" required>
<?= isset($alert['name']) ? '<span class="alert error">' . esc($alert['name']) . '</span>' : '' ?>
</div>
</div>
<div class="sm:col-span-2">
<label for="email" class="block text-sm/6 font-semibold text-gray-900">E-Mail-Adresse</label>
<div class="mt-2.5">
<input type="email" name="email" id="email" autocomplete="email" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" value="<?= esc($data['email'] ?? '', 'attr') ?>" required>
<?= isset($alert['email']) ? '<span class="alert error">' . esc($alert['email']) . '</span>' : '' ?>
</div>
</div>
<div class="sm:col-span-2">
<label for="message" class="block text-sm/6 font-semibold text-gray-900">Nachricht</label>
<div class="mt-2.5">
<textarea name="message" id="message" rows="4" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" required><?= esc($data['text'] ?? '') ?></textarea>
<?= isset($alert['text']) ? '<span class="alert error">' . esc($alert['text']) . '</span>' : '' ?>
</div>
</div>
</div>
<div class="mt-8 flex justify-end">
<button type="submit" class="rounded-md bg-sf_blau-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-sf_gelb-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Absenden</button>
</div>
<div class="sm:col-span-2">
<label for="email" class="block text-sm/6 font-semibold text-gray-900">E-Mail-Adresse</label>
<div class="mt-2.5">
<input type="email" name="email" id="email" autocomplete="email" class="<?php if ($form->error('email')): ?>error <?php endif; ?>block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" value="<?php echo $form->old('email') ?>"/>
</div>
</div>
<div class="sm:col-span-2">
<label for="message" class="block text-sm/6 font-semibold text-gray-900">Nachricht</label>
<div class="mt-2.5">
<textarea name="message" id="message" rows="4" class="<?php if ($form->error('message')): ?>error <?php endif; ?>block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"><?php echo $form->old('message') ?></textarea>
</div>
</div>
</div>
<div class="mt-8 flex justify-end">
<button type="submit" class="rounded-md bg-sf_blau-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-sf_gelb-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Absenden</button>
</form>
<?php if ($success): ?>
<div class="alert success">
<p><?= $success ?></p>
</div>
</div>
<?php echo csrf_field() ?>
<?php echo honeypot_field() ?>
<?php if ($form->success()): ?>
Thank you for your message. We will get back to you soon!
<?php else: ?>
<div class="text-red-500 pt-12">
<?php snippet('uniform/errors', ['form' => $form]) ?>
</div>
<?php if (isset($alert['error'])): ?>
<div><?= $alert['error'] ?></div>
<?php endif ?>
<?php endif; ?>
</form>
</div>
</div>
</div>
</div>