tfeigel
3b36b83b40
Updated error message formatting for more user-friendly feedback. Enhanced UI by restructuring success and error notifications with improved styles and layout. Added a `name` attribute to the submit button for better form submission handling. Adjusted text field IDs and names for consistency.
120 lines
9.2 KiB
PHP
120 lines
9.2 KiB
PHP
<?php snippet('layout', slots: true) ?>
|
|
|
|
<div id="contact">
|
|
<div class="relative isolate bg-white">
|
|
<div class="mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2">
|
|
<div class="relative px-6 pt-24 pb-20 sm:pt-32 lg:static lg:px-8 lg:py-12">
|
|
<div class="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
|
|
<div class="absolute inset-y-0 left-0 -z-10 w-full overflow-hidden bg-gray-100 ring-1 ring-gray-900/10 lg:w-1/2">
|
|
<svg class="absolute inset-0 size-full mask-[radial-gradient(100%_100%_at_top_right,white,transparent)] stroke-gray-200" aria-hidden="true">
|
|
<defs>
|
|
<pattern id="83fd4e5a-9d52-42fc-97b6-718e5d7ee527" width="200" height="200" x="100%" y="-1" patternUnits="userSpaceOnUse">
|
|
<path d="M130 200V.5M.5 .5H200" fill="none" />
|
|
</pattern>
|
|
</defs>
|
|
<rect width="100%" height="100%" stroke-width="0" fill="white" />
|
|
<svg x="100%" y="-1" class="overflow-visible fill-gray-50">
|
|
<path d="M-470.5 0h201v201h-201Z" stroke-width="0" />
|
|
</svg>
|
|
<rect width="100%" height="100%" stroke-width="0" fill="url(#83fd4e5a-9d52-42fc-97b6-718e5d7ee527)" />
|
|
</svg>
|
|
</div>
|
|
<p class="mt-6 text-lg/8 text-gray-600">Wir freuen uns über Ihre Nachricht!<br /> Sie können uns auf verschiedene Arten kontaktieren!</p>
|
|
<dl class="mt-10 space-y-4 text-base/7 text-gray-600">
|
|
<div class="flex gap-x-4">
|
|
<dt class="flex-none">
|
|
<span class="sr-only">Adresse unseres Spiellokals:</span>
|
|
<svg class="h-7 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z" />
|
|
</svg>
|
|
</dt>
|
|
<dd>
|
|
Vereinsheim TV Reinersreuth<br />
|
|
Reinersreuth 91<br />
|
|
95234 Sparneck
|
|
</dd>
|
|
</div>
|
|
<div class="flex gap-x-4">
|
|
<dt class="flex-none">
|
|
<span class="sr-only">Telefon</span>
|
|
<svg class="h-7 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
|
|
</svg>
|
|
</dt>
|
|
<dd>
|
|
1. Vorsitzender Bernd Haberzettl<br />
|
|
<a class="hover:text-gray-900" href="tel:+49 (9286) 7631">+49 (9286) 7631</a>
|
|
</dd>
|
|
</div>
|
|
<div class="flex gap-x-4">
|
|
<dt class="flex-none">
|
|
<span class="sr-only">E-Mail</span>
|
|
<svg class="h-7 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
|
|
</svg>
|
|
</dt>
|
|
<dd><a class="hover:text-gray-900" href="mailto:vorsitzender@schachfreunde-badsteben.de">vorsitzender@schachfreunde-badsteben.de</a></dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
<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="text" class="block text-sm/6 font-semibold text-gray-900">Nachricht</label>
|
|
<div class="mt-2.5">
|
|
<textarea name="text" id="text" 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" name="submit" value="Submit">Absenden</button>
|
|
</div>
|
|
<div class="py-8">
|
|
<?php if ($success): ?>
|
|
<div class="rounded-md bg-green-500 p-4">
|
|
<div class="mt-2 text-sm text-white">
|
|
<?= $success ?>
|
|
</div>
|
|
</div>
|
|
<?php else: ?>
|
|
<?php if (isset($alert['error'])): ?>
|
|
<div class="rounded-md bg-red-500 p-4">
|
|
<div class="mt-2 text-sm text-white">
|
|
<?= $alert['error'] ?>
|
|
</div>
|
|
</div>
|
|
<?php endif ?>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<?php endsnippet() ?>
|