105 lines
9.7 KiB
HTML
105 lines
9.7 KiB
HTML
{% set maingrid = "grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-3" %}
|
|
|
|
<div id="anfrageform" x-data="form">
|
|
|
|
<form data-request="anfrage::onSubmit" data-request-flash class="grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-3">
|
|
|
|
<div>
|
|
<label for="reason" class="block text-sm font-medium text-gray-900 dark:text-white">Grund für die Feier</label>
|
|
<input id="reason" name="reason" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="z.B. 18. Geburtstag">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="date" class="block text-sm font-medium text-gray-900 dark:text-white">Gewünschtes Datum</label>
|
|
<input x-model="date" id="date" name="date" datepicker class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="guests" class="block text-sm font-medium text-gray-900 dark:text-white">Anzahl Gäste (ca)</label>
|
|
<input id="guests" name="guests" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="birthday" class="block text-sm font-medium text-gray-900 dark:text-white">Geburtsdatum</label>
|
|
<input x-model="birthday" id="birthday" name="birthday" datepicker class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="firstname" class="block text-sm font-medium text-gray-900 dark:text-white">Vorname</label>
|
|
<input id="firstname" name="firstname" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="lastname" class="block text-sm font-medium text-gray-900 dark:text-white">Nachname</label>
|
|
<input id="lastname" name="lastname" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="address" class="block text-sm font-medium text-gray-900 dark:text-white">Adresse</label>
|
|
<input id="address" name="address" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="zip" class="block text-sm font-medium text-gray-900 dark:text-white">PLZ</label>
|
|
<input id="zip" name="zip" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="location" class="block text-sm font-medium text-gray-900 dark:text-white">Ort</label>
|
|
<input id="location" name="location" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="phone" class="block text-sm font-medium text-gray-900 dark:text-white">Telefonnummer</label>
|
|
<input id="phone" name="phone" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
|
|
</div>
|
|
|
|
<div class="col-span-full">
|
|
<label for="email" class="block text-sm font-medium text-gray-900 dark:text-white">E-Mail-Adresse</label>
|
|
<input id="email" name="email" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
|
|
</div>
|
|
|
|
<div class="col-span-full">
|
|
<label for="misc" class="block text-sm font-medium text-gray-900 dark:text-white">Was du sonst noch loswerden willst …</label>
|
|
<textarea id="misc" name="misc" rows="5" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light"></textarea>
|
|
</div>
|
|
|
|
<div x-show="isUnder18" class="col-span-full text-sm items-center p-4 border-2 rounded form-group shadow-sm group bg-red-200 border-red-600">
|
|
<div class="text-red-900">
|
|
<span class="font-bold">Bitte beachte:</span> Bei Veranstaltungen mit nicht volljährigen Veranstaltern (z.B. 18. Geburtstag) muss eine Person über 35 Jahre (z.B. Erziehungsberechtigte*r) durchgehend anwesend sein.
|
|
</div>
|
|
<div class="{{maingrid}}">
|
|
<div>
|
|
<label for="parent_name" class="block text-sm font-bold mt-2 text-red-900 dark:text-white">Name eines Erz. Ber.</label>
|
|
<input id="parent_name" name="parent_name" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
|
|
</div>
|
|
<div>
|
|
<label for="parent_email" class="block text-sm font-bold mt-2 text-red-900 dark:text-white">Email eines Erz. Ber.</label>
|
|
<input id="parent_email" name="parent_email" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
|
|
</div>
|
|
<div>
|
|
<label for="parent_phone" class="block text-sm font-bold mt-2 text-red-900 dark:text-white">TelNr. eines Erz. Ber.</label>
|
|
<input id="parent_phone" name="parent_phone" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative col-span-full">
|
|
<div class="grid grid-cols-1 gap-2">
|
|
<label for="datenschutz" class="p-0 block leading-none relative flex items-start">
|
|
<input id="datenschutz" type="checkbox" name="datenschutz" class="peer absolute invisible" />
|
|
<span class="border-neutral-400 border-4 border-solid peer-checked:border-neutral-800 absolute left-0 w-6 h-6 rounded block top-0"></span>
|
|
<span class="peer-checked:bg-neutral-800 left-[0.5rem] top-[0.5rem] w-2 h-2 absolute rounded block top-0"></span>
|
|
<span class="pl-8 pt-1 @sm:pt-0 text-gray-600 text-sm @sm:text-base">
|
|
<span>Ich habe die <a href="/datenschutzerklaerung" class="font-semibold" target="_BLANK">Datenschutzerklärung</a> zur Kenntnis genommen und akzeptiere diese.</span>
|
|
<span class="text-red-800">*</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-center col-span-full mt-5">
|
|
<button class="py-2 px-6 rounded bg-blue-900 hover:bg-blue-800 text-lg font-bold text-gray-300" type="submit">Absenden</button>
|
|
</div>
|
|
</form>
|
|
</div>
|