feat: Enhance booking flow with form data handling and validation
This commit is contained in:
@@ -524,7 +524,7 @@
|
||||
<p style="font-size: 0.95rem;">In beiden Fällen werden Ihre Angaben noch einmal geprüft, bevor die Buchung per POST an /booking/payment gesendet wird.</p>
|
||||
<div class="custom-modal-actions">
|
||||
<button class="btn secondary" type="button" onclick="closeBookingModal()">Abbrechen</button>
|
||||
<button class="btn secondary" type="button" onclick="goToBookingReview('consultation')">Gesprächstermin vereinbaren</button>
|
||||
<button class="btn" type="button" onclick="goToBookingReview('consultation')">Gesprächstermin vereinbaren</button>
|
||||
<button class="btn" type="button" onclick="goToBookingReview('payment')">Buchen</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -75,6 +75,43 @@
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.booking-review__form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.9rem;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.booking-review__field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.booking-review__field--full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.booking-review__field label {
|
||||
font-weight: 700;
|
||||
color: #2b4f58;
|
||||
font-size: 0.93rem;
|
||||
}
|
||||
|
||||
.booking-review__field input,
|
||||
.booking-review__field textarea {
|
||||
border: 1px solid #cedbdd;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
color: #173a42;
|
||||
padding: 0.75rem 0.82rem;
|
||||
}
|
||||
|
||||
.booking-review__field textarea {
|
||||
min-height: 110px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.booking-review__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -93,6 +130,10 @@
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.booking-review__form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.booking-review__actions .btn,
|
||||
.booking-review__actions a {
|
||||
width: 100%;
|
||||
@@ -124,11 +165,49 @@
|
||||
Bitte prüfen Sie die Angaben noch einmal. Wenn alles passt, senden Sie die Buchung mit dem folgenden Button per POST an /booking/payment.
|
||||
</div>
|
||||
|
||||
<form method="POST" action="{{ url_for('booking_payment') }}" class="booking-review__actions">
|
||||
<form method="POST" action="{{ url_for('booking_payment') }}">
|
||||
<input type="hidden" name="package" value="{{ package_key }}">
|
||||
<input type="hidden" name="flow" value="{{ flow }}">
|
||||
<button class="btn" type="submit">{{ confirm_label }}</button>
|
||||
<a class="btn secondary" href="{{ url_for('preise') }}">Zurück zu den Preisen</a>
|
||||
|
||||
<div class="booking-review__form-grid" aria-label="Pflichtdaten für Buchung">
|
||||
<div class="booking-review__field">
|
||||
<label for="contact_person">Ansprechpartner *</label>
|
||||
<input id="contact_person" name="contact_person" type="text" required maxlength="120" value="{{ form_data.contact_person }}">
|
||||
</div>
|
||||
<div class="booking-review__field">
|
||||
<label for="school_name">Schule/Einrichtung *</label>
|
||||
<input id="school_name" name="school_name" type="text" required maxlength="160" value="{{ form_data.school_name }}">
|
||||
</div>
|
||||
<div class="booking-review__field">
|
||||
<label for="contact_email">E-Mail *</label>
|
||||
<input id="contact_email" name="contact_email" type="email" required maxlength="160" value="{{ form_data.contact_email }}">
|
||||
</div>
|
||||
<div class="booking-review__field">
|
||||
<label for="contact_phone">Telefon</label>
|
||||
<input id="contact_phone" name="contact_phone" type="text" maxlength="60" value="{{ form_data.contact_phone }}">
|
||||
</div>
|
||||
<div class="booking-review__field booking-review__field--full">
|
||||
<label for="billing_street">Straße *</label>
|
||||
<input id="billing_street" name="billing_street" type="text" required maxlength="160" value="{{ form_data.billing_street }}">
|
||||
</div>
|
||||
<div class="booking-review__field">
|
||||
<label for="billing_zip">PLZ *</label>
|
||||
<input id="billing_zip" name="billing_zip" type="text" required maxlength="20" value="{{ form_data.billing_zip }}">
|
||||
</div>
|
||||
<div class="booking-review__field">
|
||||
<label for="billing_city">Ort *</label>
|
||||
<input id="billing_city" name="billing_city" type="text" required maxlength="120" value="{{ form_data.billing_city }}">
|
||||
</div>
|
||||
<div class="booking-review__field booking-review__field--full">
|
||||
<label for="notes">Zusatzinformationen</label>
|
||||
<textarea id="notes" name="notes" maxlength="600" placeholder="Optional: gewünschter Starttermin, besondere Anforderungen, Rückrufzeiten">{{ form_data.notes }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="booking-review__actions">
|
||||
<button class="btn" type="submit">{{ confirm_label }}</button>
|
||||
<a class="btn secondary" href="{{ url_for('preise') }}">Zurück zu den Preisen</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user