From 62f3bee230fdd3c5637281b2615e4b6544402bee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <bjoern.fromme@ep-reisen.de>
Date: Thu, 22 Oct 2026 12:45:32 +0200
Subject: [PATCH] fix: forms on pages TYPO3 13 renders itself can be submitted

The .form-island wrapper existed only in the form page type (/form), so
on pages TYPO3 13 renders completely (e.g. the EP ambassador page) the
form's hx-target="closest .form-island" found nothing and submitting did
nothing. The island with its loading overlay now comes from the form
plugin's template (Render.html), on full pages and in /form alike; the
page type renders just the plugin again.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../TypoScript/Extensions/Form.typoscript     |  2 ++
 .../TypoScript/Page/Form.typoscript           | 22 ++++++----------
 .../Private/Templates/Form/Island.html        | 25 -------------------
 .../Private/Templates/Form/Render.html        | 25 +++++++++++++++++--
 4 files changed, 33 insertions(+), 41 deletions(-)
 delete mode 100644 packages/ep_theme/Resources/Private/Templates/Form/Island.html

diff --git a/packages/ep_theme/Configuration/TypoScript/Extensions/Form.typoscript b/packages/ep_theme/Configuration/TypoScript/Extensions/Form.typoscript
index 7a5ed25..0db0536 100644
--- a/packages/ep_theme/Configuration/TypoScript/Extensions/Form.typoscript
+++ b/packages/ep_theme/Configuration/TypoScript/Extensions/Form.typoscript
@@ -4,6 +4,8 @@
 
 plugin.tx_form.view {
     templateRootPaths.10 = EXT:ep_theme/Resources/Private/Templates/Form/
+    # Spinner.html for Render.html
+    partialRootPaths.10 = EXT:ep_theme/Resources/Private/Partials/Form/
 }
 
 plugin.tx_form.settings.yamlConfigurations {
diff --git a/packages/ep_theme/Configuration/TypoScript/Page/Form.typoscript b/packages/ep_theme/Configuration/TypoScript/Page/Form.typoscript
index 857250d..4e16ec1 100644
--- a/packages/ep_theme/Configuration/TypoScript/Page/Form.typoscript
+++ b/packages/ep_theme/Configuration/TypoScript/Page/Form.typoscript
@@ -15,21 +15,15 @@ tx_eptheme_form {
         debug = 0
     }
 
-    10 = FLUIDTEMPLATE
+    10 = CONTENT
     10 {
-        templateName = Island
-        templateRootPaths.0 = EXT:ep_theme/Resources/Private/Templates/Form/
-        partialRootPaths.0 = EXT:ep_theme/Resources/Private/Partials/
-
-        variables.forms = CONTENT
-        variables.forms {
-            table = tt_content
-            select {
-                where = {#CType} = 'form_formframework'
-                orderBy = sorting
-            }
-            # Only the plugin (Templates/Form/Render.html): header and frame stay on the static page
-            renderObj =< tt_content.form_formframework.20
+        table = tt_content
+        select {
+            where = {#CType} = 'form_formframework'
+            orderBy = sorting
         }
+        # Only the plugin (Templates/Form/Render.html, a .form-island): header and frame stay on
+        # the static page
+        renderObj =< tt_content.form_formframework.20
     }
 }
diff --git a/packages/ep_theme/Resources/Private/Templates/Form/Island.html b/packages/ep_theme/Resources/Private/Templates/Form/Island.html
deleted file mode 100644
index d4a4ab0..0000000
--- a/packages/ep_theme/Resources/Private/Templates/Form/Island.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
-<f:comment>
-    The forms of a page as the form page type (/path/form) returns them: htmx swaps this element as
-    a whole (see Form.html). While a request runs, htmx sets htmx-request on it and the overlay
-    covers the form. Styled here and not in the theme build: the static pages around the island
-    load the CSS of the TYPO3 10 export. The spinner takes the button colour of each theme.
-</f:comment>
-<div class="form-island">
-    {forms -> f:format.raw()}
-    <div class="form-island__loading" aria-hidden="true">
-        <f:render partial="Form/Spinner" arguments="{class: 'form-island__spinner'}" />
-    </div>
-    <style>
-        .form-island { position: relative; }
-        .form-island__loading { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgb(255 255 255 / .7); visibility: hidden; opacity: 0; transition: opacity .15s, visibility .15s; }
-        .form-island.htmx-request .form-island__loading { visibility: visible; opacity: 1; }
-        .form-island__spinner { width: 6rem; height: 6rem; color: rgb(24 82 123); }
-        .sbw .form-island__spinner { color: rgb(233 28 38); }
-        .snz .form-island__spinner { color: rgb(249 195 61); }
-        .suz .form-island__spinner { color: rgb(130 195 198); }
-        .uch .form-island__spinner { color: rgb(25 163 220); }
-        .ser .form-island__spinner { color: rgb(222 44 27); }
-    </style>
-</div>
-</html>
diff --git a/packages/ep_theme/Resources/Private/Templates/Form/Render.html b/packages/ep_theme/Resources/Private/Templates/Form/Render.html
index cf636c9..73d4b8b 100644
--- a/packages/ep_theme/Resources/Private/Templates/Form/Render.html
+++ b/packages/ep_theme/Resources/Private/Templates/Form/Render.html
@@ -1,10 +1,31 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
-
+<f:comment>
+    Every form sits in a .form-island, on pages TYPO3 13 renders as well as in the form page type
+    (/path/form) that the static pages load: the form posts there, and htmx swaps the island as a
+    whole (see Form.html). While a request runs, htmx sets htmx-request on it and the overlay
+    covers the form. Styled here and not in the theme build: the static pages around the island
+    load the CSS of the TYPO3 10 export. The spinner takes the button colour of each theme.
+</f:comment>
+<div class="form-island">
     <f:flashMessages />
     <f:if condition="{formConfiguration}">
         <div class="py-8">
             <formvh:render overrideConfiguration="{formConfiguration}" />
         </div>
     </f:if>
-
+    <div class="form-island__loading" aria-hidden="true">
+        <f:render partial="Spinner" arguments="{class: 'form-island__spinner'}" />
+    </div>
+    <style>
+        .form-island { position: relative; }
+        .form-island__loading { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgb(255 255 255 / .7); visibility: hidden; opacity: 0; transition: opacity .15s, visibility .15s; }
+        .form-island.htmx-request .form-island__loading { visibility: visible; opacity: 1; }
+        .form-island__spinner { width: 6rem; height: 6rem; color: rgb(24 82 123); }
+        .sbw .form-island__spinner { color: rgb(233 28 38); }
+        .snz .form-island__spinner { color: rgb(249 195 61); }
+        .suz .form-island__spinner { color: rgb(130 195 198); }
+        .uch .form-island__spinner { color: rgb(25 163 220); }
+        .ser .form-island__spinner { color: rgb(222 44 27); }
+    </style>
+</div>
 </html>