From 3b36b83b407ccc24802311db84405afcfb9350e9 Mon Sep 17 00:00:00 2001
From: Tobias Feigel <info@feigel.it>
Date: Sun, 13 Jul 2025 17:57:40 +0200
Subject: [PATCH] feat: improve Kontaktformular error handling and enhance UI
 feedback

Updated error message formatting for more user-friendly feedback. Enhanced UI by restructuring success and error notifications with improved styles and layout. Added a `name` attribute to the submit button for better form submission handling. Adjusted text field IDs and names for consistency.
---
 site/controllers/kontakt.php |  2 +-
 site/templates/kontakt.php   | 34 +++++++++++++++++++++-------------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/site/controllers/kontakt.php b/site/controllers/kontakt.php
index 69f4779..4c6b5e4 100644
--- a/site/controllers/kontakt.php
+++ b/site/controllers/kontakt.php
@@ -49,7 +49,7 @@
 
                 } catch (Exception $error) {
                     if (option('debug')):
-                        $alert['error'] = 'Beim Versenden ist ein Fehler aufgetreten: <strong>' . $error->getMessage() . '</strong>';
+                        $alert['error'] = 'Beim Versenden ist ein Fehler aufgetreten:<br /> <strong>' . $error->getMessage() . '</strong>';
                     else:
                         $alert['error'] = 'Beim Versenden ist ein Fehler aufgetreten!';
                     endif;
diff --git a/site/templates/kontakt.php b/site/templates/kontakt.php
index 6ff5796..5344033 100644
--- a/site/templates/kontakt.php
+++ b/site/templates/kontakt.php
@@ -82,28 +82,36 @@
                                 </div>
                             </div>
                             <div class="sm:col-span-2">
-                                <label for="message" class="block text-sm/6 font-semibold text-gray-900">Nachricht</label>
+                                <label for="text" class="block text-sm/6 font-semibold text-gray-900">Nachricht</label>
                                 <div class="mt-2.5">
-                                    <textarea name="message" id="message" rows="4" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" required><?= esc($data['text'] ?? '') ?></textarea>
+                                    <textarea name="text" id="text" rows="4" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" required><?= esc($data['text'] ?? '') ?></textarea>
                                     <?= isset($alert['text']) ? '<span class="alert error">' . esc($alert['text']) . '</span>' : '' ?>
                                 </div>
                             </div>
                         </div>
                         <div class="mt-8 flex justify-end">
-                            <button type="submit" class="rounded-md bg-sf_blau-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-sf_gelb-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Absenden</button>
+                            <button type="submit" class="rounded-md bg-sf_blau-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-sf_gelb-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" name="submit" value="Submit">Absenden</button>
+                        </div>
+                        <div class="py-8">
+                            <?php if ($success): ?>
+                                <div class="rounded-md bg-green-500 p-4">
+                                    <div class="mt-2 text-sm text-white">
+                                        <?= $success ?>
+                                    </div>
+                                </div>
+                            <?php else: ?>
+                                <?php if (isset($alert['error'])): ?>
+                                    <div class="rounded-md bg-red-500 p-4">
+                                        <div class="mt-2 text-sm text-white">
+                                            <?= $alert['error'] ?>
+                                        </div>
+                                    </div>
+                                <?php endif ?>
+                            <?php endif; ?>
                         </div>
-
                     </div>
                 </form>
-                <?php if ($success): ?>
-                    <div class="alert success">
-                        <p><?= $success ?></p>
-                    </div>
-                <?php else: ?>
-                    <?php if (isset($alert['error'])): ?>
-                        <div><?= $alert['error'] ?></div>
-                    <?php endif ?>
-                <?php endif; ?>
+
             </div>
         </div>
     </div>