fix form
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
philipp lang
parent
395b1f40d7
commit
7642ab0c40
|
|
@ -3,7 +3,7 @@
|
|||
<!doctype html>
|
||||
<html lang="it">
|
||||
{% partial 'shared/head' %}
|
||||
<body class="font-nunito dark">
|
||||
<body class="font-nunito">
|
||||
{% partial 'shared/header' %}
|
||||
{% page %}
|
||||
{% partial 'shared/footer' %}
|
||||
|
|
|
|||
|
|
@ -16,9 +16,11 @@ is_hidden = 0
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<section id="ablauf" class="py-10 comtainer mx-auto">
|
||||
<div class="container mx-auto py-10 px-6">
|
||||
<div class="flex space-x-6 items-start">
|
||||
<section id="ablauf" class="grow">
|
||||
{% partial 'heading' title="Ablauf" %}
|
||||
<div class="px-6">
|
||||
<div>
|
||||
{% partial 'listelement' title="Anfragen" number="1" content='Fülle das folgende <a href="#buchen">Formular</a> aus und sende uns so eine Buchungsanfrage.' %}
|
||||
{% partial 'listelement' title="Rückmeldung" number="2" content='Wir melden uns innerhalb von einigen Tagen per E-Mail bei dir und senden dir ein Vertragsdokument als PDF zu.' %}
|
||||
{% partial 'listelement' title="Bestätigung" number="3" content='Sende uns den Vertrag unterschrieben per Post zurück.' %}
|
||||
|
|
@ -28,9 +30,13 @@ is_hidden = 0
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section id="anfrage" class="py-10 container mx-auto">
|
||||
<section id="anfrage" class="shadow-xl bg-neutral-200 border border-neutral-200 rounded-xl p-3 w-2/5 flex-none">
|
||||
{% partial 'heading' title="Anfrage" %}
|
||||
<div class="mt-4">
|
||||
{% component 'anfrage' %}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,29 +1,49 @@
|
|||
<form data-request="anfrage::onSubmit" data-request-flash class="grid grid-cols-[max-content_1fr] gap-x-6 gap-y-2">
|
||||
<span>Vorname</span>
|
||||
<input type="text" name="firstname" class="border-gray-700 border-2" />
|
||||
<span>Nachname</span>
|
||||
<input type="text" name="lastname" class="border-gray-700 border-2" />
|
||||
<span>Telefonnummer</span>
|
||||
<input type="text" name="phone" class="border-gray-700 border-2" />
|
||||
<span>E-Mail-Adressse</span>
|
||||
<input type="text" name="email" class="border-gray-700 border-2" />
|
||||
<span>Grund für die Feier</span>
|
||||
<input type="text" name="reason" class="border-gray-700 border-2" />
|
||||
<span>Wie viele Gäste werden erwartet</span>
|
||||
<input type="text" name="guests" class="border-gray-700 border-2" />
|
||||
<span>Was du sonst noch loswerden willst</span>
|
||||
<textarea name="misc" rows="5" class="border-gray-700 border-2"></textarea>
|
||||
<span>Gewünschtes Datum</span>
|
||||
<div class="relative max-w-sm">
|
||||
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
|
||||
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<input datepicker datepicker-autohide datepicker-format="dd.mm.yyyy" name="date" type="text" class="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 ps-10 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" placeholder="Datum auswählen">
|
||||
<form data-request="anfrage::onSubmit" data-request-flash class="grid grid-cols-2 gap-3">
|
||||
|
||||
<div class="col-span-full">
|
||||
<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 class="flex justify-center col-span-full">
|
||||
<button class="py-3 px-6 rounded bg-gray-600 text-xl font-bold text-gray-300" type="submit">Absenden</button>
|
||||
<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="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>
|
||||
<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>
|
||||
<label for="date" class="block text-sm font-medium text-gray-900 dark:text-white">Gewünschtes Datum</label>
|
||||
<input id="date" name="date" datepicker datepicker-autohide datepicker-format="dd.mm.yyyy" 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">Wie viele Gäste werden erwartet?</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 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 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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<h1 class="font-bold text-center text-3xl">{{title}}</h1>
|
||||
<h1 class="font-bold {{class}} text-3xl">{{title}}</h1>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<div class="mt-3">
|
||||
<div class="flex">
|
||||
<div class="flex-none bg-gray-900 text-white w-12 h-12 flex items-center justify-center rounded-full text-2xl">{{number}}</div>
|
||||
<div class="ml-5">
|
||||
<div class="text-2xl">{{title}}</div>
|
||||
<div class="text-xl"> {{ content | raw }} </div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex-none bg-neutral-900 text-white w-10 h-10 flex items-center justify-center rounded-full text-xl shadow font-semibold">{{number}}</div>
|
||||
<div class="text-2xl ml-6 font-semibold">{{title}}</div>
|
||||
</div>
|
||||
<div class="ml-16 text-lg">
|
||||
{{ content | raw }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue