From 622c01afa0813ff7631184daeffe0e6384247f80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Sat, 21 Aug 2021 13:13:44 +0200
Subject: [PATCH] WIP Migrate contact forms

---
 .../js/controllers/contactform_controller.js  |  12 +++
 .../Private/Partials/ContactForm/Error.html   |  12 +++
 .../Private/Partials/ContactForm/Full.html    |  53 ++++++++--
 .../Private/Partials/ContactForm/Simple.html  |  57 ++++++++++
 .../Private/Partials/ContactForm/Success.html |  18 ++++
 .../Private/Templates/AjaxForm/FullForm.html  |   2 +-
 .../Templates/AjaxForm/SimpleForm.html        |  11 +-
 .../Private/Templates/Form/FullForm.html      | 100 ++----------------
 .../Private/Templates/Form/SimpleForm.html    |  69 ++----------
 9 files changed, 157 insertions(+), 177 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/contactform_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/contactform_controller.js
index e69de29b..c3122595 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/contactform_controller.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/contactform_controller.js
@@ -0,0 +1,12 @@
+import { Controller } from 'stimulus'
+
+export default class extends Controller {
+
+    static targets = [ 'form', 'container' ]
+
+    static values = { loading: Boolean }
+
+    submit(e) {
+
+    }
+}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Error.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Error.html
index 0fe4b966..f2d586b5 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Error.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Error.html
@@ -2,4 +2,16 @@
       xmlns="http://www.w3.org/1999/xhtml"
       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>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Full.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Full.html
index 946680a2..7731c7cf 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Full.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Full.html
@@ -11,38 +11,69 @@
             <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>
+            <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" 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 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>
+            <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" 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 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" 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>
         <div class="mb-4">
             Ich habe die <f:link.typolink parameter="{settings.dataProtectionPageUid}"
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Simple.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Simple.html
index e69de29b..946680a2 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Simple.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Simple.html
@@ -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>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Success.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Success.html
index e69de29b..6aab0343 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Success.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactForm/Success.html
@@ -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>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxForm/FullForm.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxForm/FullForm.html
index 02202f64..57808447 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxForm/FullForm.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxForm/FullForm.html
@@ -5,7 +5,7 @@
     <f:layout name="Form/Default"/>
 
     <f:section name="Main">
-        <f:render partial="ContactForm/Simple" arguments="{_all}"/>
+        <f:render partial="ContactForm/Full" arguments="{_all}"/>
     </f:section>
 
 </div>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxForm/SimpleForm.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxForm/SimpleForm.html
index c86f90c7..02202f64 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxForm/SimpleForm.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxForm/SimpleForm.html
@@ -5,16 +5,7 @@
     <f:layout name="Form/Default"/>
 
     <f:section name="Main">
-        <div class="form form--border"
-             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:render partial="ContactForm/Simple" arguments="{_all}"/>
     </f:section>
 
 </div>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/FullForm.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/FullForm.html
index 037be6ca..b540b24a 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/FullForm.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/FullForm.html
@@ -5,101 +5,15 @@
     <f:layout name="Form/Default"/>
 
     <f:section name="Main">
-        <div class="relative" x-data="contactForm">
-            <f:form id="contactform" object="{contactForm}" name="contactForm"
-                    action="processForm" controller="AjaxForm" pluginName="Ajax" pageType="1803"
-                    pageUid="{settings.defaultAjaxUid}"
-                    additionalAttributes="{'x-ref': 'form', 'x-show': '!success', 'x-on:submit.prevent': '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.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">
+        <div class="relative form form--border"
+             data-controller="contactform">
+            <div data-contactform-target="container">
+                <f:render partial="ContactForm/Full" 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 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>
     </f:section>
 
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/SimpleForm.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/SimpleForm.html
index fa2becd6..b905bcec 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/SimpleForm.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/SimpleForm.html
@@ -5,70 +5,15 @@
     <f:layout name="Form/Default"/>
 
     <f:section name="Main">
-        <div class="form form--border" x-data="contactForm">
-            <f:form id="contactform" object="{contactForm}" name="contactForm"
-                    action="processForm" controller="AjaxForm" pluginName="Ajax" pageType="1803"
-                    pageUid="{settings.defaultAjaxUid}"
-                    additionalAttributes="{'x-ref': 'form', 'x-show': '!success', 'x-on:submit.prevent': '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>
-            <div class="form__overlay" x-show="processing">
+        <div class="relative form form--border"
+             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 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>
     </f:section>