EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP Migrate contact forms

Browse Source
This commit is contained in:
Björn Fromme
2021-08-21 13:13:44 +02:00
parent e84130f565
commit 622c01afa0
9 changed files with 157 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/contactform_controller.js
+12
View File
@@ -0,0 +1,12 @@
import { Controller } from 'stimulus'
export default class extends Controller {
static targets = [ 'form', 'container' ]
static values = { loading: Boolean }
submit(e) {
}
}
public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Error.html
+12
View File
@@ -2,4 +2,16 @@
xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"> xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="form__success">
<p>
Es ist ein Problem aufgetreten. Bitte versucht es noch einmal.
</p>
<p>
<button class="button button--small"
data-action="contactform#reset">
Neue Anfrage
</button>
</p>
</div>
</html> </html>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Full.html
+42 -11
View File
@@ -11,38 +11,69 @@
<span class="text-gray-700">Betreff*</span> <span class="text-gray-700">Betreff*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="subject"/> <f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="subject"/>
</label> </label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.gender">
<span x-bind:class="formErrors.gender ? 'text-red-500' : 'text-gray-700'">Gender*</span>
<f:form.select class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="gender" options="{M: 'M', W: 'W', D: 'D'}"/>
<div class="text-red-500" x-show="formErrors.gender" x-html="formErrors.gender"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.name"> <label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.name">
<span x-bind:class="formErrors.name ? 'text-red-500' : 'text-gray-700'">Name*</span> <span x-bind:class="formErrors.name ? 'text-red-500' : 'text-gray-700'">Name*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="name"/> <f:form.textfield class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full" property="name"/>
<div class="text-red-500" x-show="formErrors.name" x-html="formErrors.name"></div> <div class="text-red-500 mt-2" x-show="formErrors.name" x-html="formErrors.name"></div>
</label> </label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.firstName"> <label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.firstName">
<span x-bind:class="formErrors.firstName ? 'text-red-500' : 'text-gray-700'">Vorname*</span> <span x-bind:class="formErrors.firstName ? 'text-red-500' : 'text-gray-700'">Vorname*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="firstName"/> <f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="firstName"/>
<div class="text-red-500" x-show="formErrors.firstName" x-html="formErrors.firstName"></div> <div class="text-red-500 mt-2" x-show="formErrors.firstName" x-html="formErrors.firstName"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.gender">
<span x-bind:class="formErrors.gender ? 'text-red-500' : 'text-gray-700'">Gender*</span>
<f:form.select class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="gender" options="{M: 'M', W: 'W', D: 'D'}"/>
<div class="text-red-500 mt-2" x-show="formErrors.gender" x-html="formErrors.gender"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.company">
<span x-bind:class="formErrors.company ? 'text-red-500' : 'text-gray-700'">Firma/Verein*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="company"/>
<div class="text-red-500 mt-2" x-show="formErrors.company" x-html="formErrors.company"></div>
</label> </label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.email"> <label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.email">
<span x-bind:class="formErrors.email ? 'text-red-500' : 'text-gray-700'">E-Mail*</span> <span x-bind:class="formErrors.email ? 'text-red-500' : 'text-gray-700'">E-Mail*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="email"/> <f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="email"/>
<div class="text-red-500" x-show="formErrors.email" x-html="formErrors.email"></div> <div class="text-red-500 mt-2" x-show="formErrors.email" x-html="formErrors.email"></div>
</label> </label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.phone"> <label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.phone">
<span x-bind:class="formErrors.phone ? 'text-red-500' : 'text-gray-700'">Telefon/Fax*</span> <span x-bind:class="formErrors.phone ? 'text-red-500' : 'text-gray-700'">Telefon/Fax*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="phone"/> <f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="phone"/>
<div class="text-red-500" x-show="formErrors.phone" x-html="formErrors.phone"></div> <div class="text-red-500 mt-2" x-show="formErrors.phone" x-html="formErrors.phone"></div>
</label> </label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.period">
<span x-bind:class="formErrors.period ? 'text-red-500' : 'text-gray-700'">Zeitraum</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="period" placeholder="tt.mm.jjjj - tt.mm.jjjj"/>
<div class="text-red-500 mt-2" x-show="formErrors.period" x-html="formErrors.period"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.duration">
<span x-bind:class="formErrors.duration ? 'text-red-500' : 'text-gray-700'">Aufenthaltsdauer</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="duration" placeholder="Tage inkl. An- & Abreisetag"/>
<div class="text-red-500 mt-2" x-show="formErrors.duration" x-html="formErrors.duration"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.pax">
<span x-bind:class="formErrors.pax ? 'text-red-500' : 'text-gray-700'">Anzahl der Personen</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="pax" placeholder="ab 25 Personen"/>
<div class="text-red-500 mt-2" x-show="formErrors.pax" x-html="formErrors.pax"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.age">
<span x-bind:class="formErrors.age ? 'text-red-500' : 'text-gray-700'">Durchschnittsalter</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="age"/>
<div class="text-red-500 mt-2" x-show="formErrors.age" x-html="formErrors.age"></div>
</label>
<div class="mb-4">
<label class="inline-flex items-center">
<f:form.checkbox class="border-gray-400 focus:border-gray-800 text-ep-secondary sbw:text-sbw-secondary" property="children" value="Ja"/>
<span class="ml-2">Kinder (ja/nein)</span>
</label>
</div>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.inquiry"> <label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.inquiry">
<span x-bind:class="formErrors.inquiry ? 'text-red-500' : 'text-gray-700'">(Zusatz-) Wünsche</span> <span x-bind:class="formErrors.inquiry ? 'text-red-500' : 'text-gray-700'">(Zusatz-) Wünsche</span>
<f:form.textarea class="border-gray-400 focus:border-gray-800 mt-1 w-full" <f:form.textarea class="border-gray-400 focus:border-gray-800 mt-1 w-full"
property="inquiry" property="inquiry"
placeholder="z. B. Reiseleiter, Halbpension, Bus Anreise, Programm" placeholder="z. B. Reiseleiter, Halbpension, Bus Anreise, Programm"
cols="30" rows="5"/> cols="30" rows="5"/>
<div class="text-red-500" x-show="formErrors.inquiry" x-html="formErrors.inquiry"></div> <div class="text-red-500 mt-2" x-show="formErrors.inquiry" x-html="formErrors.inquiry"></div>
</label> </label>
<div class="mb-4"> <div class="mb-4">
Ich habe die <f:link.typolink parameter="{settings.dataProtectionPageUid}" Ich habe die <f:link.typolink parameter="{settings.dataProtectionPageUid}"
public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Simple.html
+57
View File
@@ -0,0 +1,57 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:form id="contactform" object="{contactForm}" name="contactForm"
action="processForm" controller="AjaxForm" pluginName="Ajax" pageType="1803"
pageUid="{settings.defaultAjaxUid}"
data="{'contactform-target': 'form', 'action': 'contactform#submit'}">
<f:form.hidden property="pageUrl"/>
<label class="block mb-4 hidden">
<span class="text-gray-700">Betreff*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="subject"/>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.gender">
<span x-bind:class="formErrors.gender ? 'text-red-500' : 'text-gray-700'">Gender*</span>
<f:form.select class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="gender" options="{M: 'M', W: 'W', D: 'D'}"/>
<div class="text-red-500" x-show="formErrors.gender" x-html="formErrors.gender"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.name">
<span x-bind:class="formErrors.name ? 'text-red-500' : 'text-gray-700'">Name*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="name"/>
<div class="text-red-500" x-show="formErrors.name" x-html="formErrors.name"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.firstName">
<span x-bind:class="formErrors.firstName ? 'text-red-500' : 'text-gray-700'">Vorname*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="firstName"/>
<div class="text-red-500" x-show="formErrors.firstName" x-html="formErrors.firstName"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.email">
<span x-bind:class="formErrors.email ? 'text-red-500' : 'text-gray-700'">E-Mail*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="email"/>
<div class="text-red-500" x-show="formErrors.email" x-html="formErrors.email"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.phone">
<span x-bind:class="formErrors.phone ? 'text-red-500' : 'text-gray-700'">Telefon/Fax*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="phone"/>
<div class="text-red-500" x-show="formErrors.phone" x-html="formErrors.phone"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.inquiry">
<span x-bind:class="formErrors.inquiry ? 'text-red-500' : 'text-gray-700'">(Zusatz-) Wünsche</span>
<f:form.textarea class="border-gray-400 focus:border-gray-800 mt-1 w-full"
property="inquiry"
placeholder="z. B. Reiseleiter, Halbpension, Bus Anreise, Programm"
cols="30" rows="5"/>
<div class="text-red-500" x-show="formErrors.inquiry" x-html="formErrors.inquiry"></div>
</label>
<div class="mb-4">
Ich habe die <f:link.typolink parameter="{settings.dataProtectionPageUid}"
title="Datenschutzerklärung"
target="_blank">Datenschutzbestimmungen</f:link.typolink> gelesen und akzeptiert.
</div>
<div class="mb-4">
<button type="submit" class="button button-warning">Jetzt anfragen</button>
</div>
</f:form>
</html>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Success.html
+18
View File
@@ -0,0 +1,18 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="form__success">
<p>
Vielen Dank für Eure Anfrage. Wir werden uns schnellstmöglich mit Euch in Verbindung
setzen.
</p>
<p>
<button class="button button--small"
data-action="contactform#reset">
Neue Anfrage
</button>
</p>
</div>
</html>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxForm/FullForm.html
+1 -1
View File
@@ -5,7 +5,7 @@
<f:layout name="Form/Default"/> <f:layout name="Form/Default"/>
<f:section name="Main"> <f:section name="Main">
<f:render partial="ContactForm/Simple" arguments="{_all}"/> <f:render partial="ContactForm/Full" arguments="{_all}"/>
</f:section> </f:section>
</div> </div>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxForm/SimpleForm.html
+1 -10
View File
@@ -5,16 +5,7 @@
<f:layout name="Form/Default"/> <f:layout name="Form/Default"/>
<f:section name="Main"> <f:section name="Main">
<div class="form form--border" <f:render partial="ContactForm/Simple" arguments="{_all}"/>
data-controller="contactform">
<div data-contactform-target="container">
<f:render partial="ContactForm/Simple" arguments="{_all}"/>
</div>
<div class="hidden form__overlay"
data-contactform-target="loadingIndicator">
<img src="{f:uri.resource(path: 'images/ajax-loader-white.gif', extensionName: 'ep_theme')}" alt="Processing...">
</div>
</div>
</f:section> </f:section>
</div> </div>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/FullForm.html
+7 -93
View File
@@ -5,101 +5,15 @@
<f:layout name="Form/Default"/> <f:layout name="Form/Default"/>
<f:section name="Main"> <f:section name="Main">
<div class="relative" x-data="contactForm"> <div class="relative form form--border"
<f:form id="contactform" object="{contactForm}" name="contactForm" data-controller="contactform">
action="processForm" controller="AjaxForm" pluginName="Ajax" pageType="1803" <div data-contactform-target="container">
pageUid="{settings.defaultAjaxUid}" <f:render partial="ContactForm/Full" arguments="{_all}"/>
additionalAttributes="{'x-ref': 'form', 'x-show': '!success', 'x-on:submit.prevent': 'submit'}"> </div>
<f:form.hidden property="pageUrl"/> <div class="hidden form__overlay"
<label class="block mb-4 hidden"> data-contactform-target="loadingIndicator">
<span class="text-gray-700">Betreff*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="subject"/>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.name">
<span x-bind:class="formErrors.name ? 'text-red-500' : 'text-gray-700'">Name*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full" property="name"/>
<div class="text-red-500 mt-2" x-show="formErrors.name" x-html="formErrors.name"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.firstName">
<span x-bind:class="formErrors.firstName ? 'text-red-500' : 'text-gray-700'">Vorname*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="firstName"/>
<div class="text-red-500 mt-2" x-show="formErrors.firstName" x-html="formErrors.firstName"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.gender">
<span x-bind:class="formErrors.gender ? 'text-red-500' : 'text-gray-700'">Gender*</span>
<f:form.select class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="gender" options="{M: 'M', W: 'W', D: 'D'}"/>
<div class="text-red-500 mt-2" x-show="formErrors.gender" x-html="formErrors.gender"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.company">
<span x-bind:class="formErrors.company ? 'text-red-500' : 'text-gray-700'">Firma/Verein*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="company"/>
<div class="text-red-500 mt-2" x-show="formErrors.company" x-html="formErrors.company"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.email">
<span x-bind:class="formErrors.email ? 'text-red-500' : 'text-gray-700'">E-Mail*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="email"/>
<div class="text-red-500 mt-2" x-show="formErrors.email" x-html="formErrors.email"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.phone">
<span x-bind:class="formErrors.phone ? 'text-red-500' : 'text-gray-700'">Telefon/Fax*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="phone"/>
<div class="text-red-500 mt-2" x-show="formErrors.phone" x-html="formErrors.phone"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.period">
<span x-bind:class="formErrors.period ? 'text-red-500' : 'text-gray-700'">Zeitraum</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="period" placeholder="tt.mm.jjjj - tt.mm.jjjj"/>
<div class="text-red-500 mt-2" x-show="formErrors.period" x-html="formErrors.period"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.duration">
<span x-bind:class="formErrors.duration ? 'text-red-500' : 'text-gray-700'">Aufenthaltsdauer</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="duration" placeholder="Tage inkl. An- & Abreisetag"/>
<div class="text-red-500 mt-2" x-show="formErrors.duration" x-html="formErrors.duration"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.pax">
<span x-bind:class="formErrors.pax ? 'text-red-500' : 'text-gray-700'">Anzahl der Personen</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="pax" placeholder="ab 25 Personen"/>
<div class="text-red-500 mt-2" x-show="formErrors.pax" x-html="formErrors.pax"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.age">
<span x-bind:class="formErrors.age ? 'text-red-500' : 'text-gray-700'">Durchschnittsalter</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="age"/>
<div class="text-red-500 mt-2" x-show="formErrors.age" x-html="formErrors.age"></div>
</label>
<div class="mb-4">
<label class="inline-flex items-center">
<f:form.checkbox class="border-gray-400 focus:border-gray-800 text-ep-secondary sbw:text-sbw-secondary" property="children" value="Ja"/>
<span class="ml-2">Kinder (ja/nein)</span>
</label>
</div>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.inquiry">
<span x-bind:class="formErrors.inquiry ? 'text-red-500' : 'text-gray-700'">(Zusatz-) Wünsche</span>
<f:form.textarea class="border-gray-400 focus:border-gray-800 mt-1 w-full"
property="inquiry"
placeholder="z. B. Reiseleiter, Halbpension, Bus Anreise, Programm"
cols="30" rows="5"/>
<div class="text-red-500 mt-2" x-show="formErrors.inquiry" x-html="formErrors.inquiry"></div>
</label>
<div class="mb-4">
Ich habe die <f:link.typolink parameter="{settings.dataProtectionPageUid}"
title="Datenschutzerklärung"
target="_blank">Datenschutzbestimmungen</f:link.typolink> gelesen und akzeptiert.
</div>
<div class="mb-4">
<button type="submit" class="button button-warning">Jetzt anfragen</button>
</div>
</f:form>
<div class="form__overlay" x-show="processing">
<img src="{f:uri.resource(path: 'images/ajax-loader-white.gif', extensionName: 'ep_theme')}" alt="Processing..."> <img src="{f:uri.resource(path: 'images/ajax-loader-white.gif', extensionName: 'ep_theme')}" alt="Processing...">
</div> </div>
<div class="form__success" x-show="success">
<p>Vielen Dank für Eure Anfrage. Wir werden uns schnellstmöglich mit Euch in Verbindung
setzen.</p>
<p><button class="button button-warning button-small" x-on:click.prevent="reset">Neue Anfrage</button></p>
</div>
<div class="form__overlay" x-show="error">
<p>Es ist ein Problem aufgetreten. Bitte versucht es noch einmal.</p>
<p><button class="button button-warning button-small" x-on:click.prevent="reset">Neue Anfrage</button></p>
</div>
</div> </div>
</f:section> </f:section>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/SimpleForm.html
+7 -62
View File
@@ -5,70 +5,15 @@
<f:layout name="Form/Default"/> <f:layout name="Form/Default"/>
<f:section name="Main"> <f:section name="Main">
<div class="form form--border" x-data="contactForm"> <div class="relative form form--border"
<f:form id="contactform" object="{contactForm}" name="contactForm" data-controller="contactform">
action="processForm" controller="AjaxForm" pluginName="Ajax" pageType="1803" <div data-contactform-target="container">
pageUid="{settings.defaultAjaxUid}" <f:render partial="ContactForm/Simple" arguments="{_all}"/>
additionalAttributes="{'x-ref': 'form', 'x-show': '!success', 'x-on:submit.prevent': 'submit'}"> </div>
<f:form.hidden property="pageUrl"/> <div class="hidden form__overlay"
<label class="block mb-4 hidden"> data-contactform-target="loadingIndicator">
<span class="text-gray-700">Betreff*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="subject"/>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.gender">
<span x-bind:class="formErrors.gender ? 'text-red-500' : 'text-gray-700'">Gender*</span>
<f:form.select class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="gender" options="{M: 'M', W: 'W', D: 'D'}"/>
<div class="text-red-500" x-show="formErrors.gender" x-html="formErrors.gender"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.name">
<span x-bind:class="formErrors.name ? 'text-red-500' : 'text-gray-700'">Name*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="name"/>
<div class="text-red-500" x-show="formErrors.name" x-html="formErrors.name"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.firstName">
<span x-bind:class="formErrors.firstName ? 'text-red-500' : 'text-gray-700'">Vorname*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="firstName"/>
<div class="text-red-500" x-show="formErrors.firstName" x-html="formErrors.firstName"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.email">
<span x-bind:class="formErrors.email ? 'text-red-500' : 'text-gray-700'">E-Mail*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="email"/>
<div class="text-red-500" x-show="formErrors.email" x-html="formErrors.email"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.phone">
<span x-bind:class="formErrors.phone ? 'text-red-500' : 'text-gray-700'">Telefon/Fax*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="phone"/>
<div class="text-red-500" x-show="formErrors.phone" x-html="formErrors.phone"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.inquiry">
<span x-bind:class="formErrors.inquiry ? 'text-red-500' : 'text-gray-700'">(Zusatz-) Wünsche</span>
<f:form.textarea class="border-gray-400 focus:border-gray-800 mt-1 w-full"
property="inquiry"
placeholder="z. B. Reiseleiter, Halbpension, Bus Anreise, Programm"
cols="30" rows="5"/>
<div class="text-red-500" x-show="formErrors.inquiry" x-html="formErrors.inquiry"></div>
</label>
<div class="mb-4">
Ich habe die <f:link.typolink parameter="{settings.dataProtectionPageUid}"
title="Datenschutzerklärung"
target="_blank">Datenschutzbestimmungen</f:link.typolink> gelesen und akzeptiert.
</div>
<div class="mb-4">
<button type="submit" class="button button-warning">Jetzt anfragen</button>
</div>
</f:form>
<div class="form__overlay" x-show="processing">
<img src="{f:uri.resource(path: 'images/ajax-loader-white.gif', extensionName: 'ep_theme')}" alt="Processing..."> <img src="{f:uri.resource(path: 'images/ajax-loader-white.gif', extensionName: 'ep_theme')}" alt="Processing...">
</div> </div>
<div class="form__success" x-show="success">
<p>Vielen Dank für Eure Anfrage. Wir werden uns schnellstmöglich mit Euch in Verbindung
setzen.</p>
<p><button class="button button-warning button-small" x-on:click.prevent="reset">Neue Anfrage</button></p>
</div>
<div class="form__success" x-show="error">
<p>Es ist ein Problem aufgetreten. Bitte versucht es noch einmal.</p>
<p><button class="button button-warning button-small" x-on:click.prevent="reset">Neue Anfrage</button></p>
</div>
</div> </div>
</f:section> </f:section>