From 2f42d92273c38c647c3a4cb1b588fddf1737395a Mon Sep 17 00:00:00 2001
From: Andreas Hnida <ah@mediendesign-hnida.de>
Date: Sat, 27 Apr 2024 01:11:50 +0200
Subject: [PATCH] Refactor contact form layout and styles, and improve form bot
 detection and validation with multi-language support

---
 content/french/contact.md | 23 ++++++++++-------------
 content/german/kontakt.md | 26 +++++++++++++-------------
 2 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/content/french/contact.md b/content/french/contact.md
index 798a70c..217bef2 100644
--- a/content/french/contact.md
+++ b/content/french/contact.md
@@ -32,10 +32,6 @@ Nous vous contacterons dans les plus brefs délais.
 <div id="formPartOne">
 <input type="hidden" name="formularart" value="Kontaktformular Französisch">
 <input type="hidden" name="project" value="fr-support">
-        <div>
-            <label for="organisation">Nom de l'organisation</label>
-            <input type="text" id="organisation" name="organisation">
-        </div>
         <div>
             <select id="gender" name="gender" required >
                 <option value="männlich">Monsieur</option>
@@ -44,7 +40,7 @@ Nous vous contacterons dans les plus brefs délais.
             </select>
         </div>
         <div>
-            <label for="name">Nom de famille</label>
+            <label for="name">Nom, Nom de famille</label>
             <input type="text" id="name" name="name" required >
         </div>
         <div>
@@ -58,8 +54,8 @@ Nous vous contacterons dans les plus brefs délais.
             <input type="text" id="telefon" name="telefon" required >
         </div>
         <div>
-           <label for="email">Email</label>
-            <input type="email" id="email" name="email" required >
+           <label for="mail">Email</label>
+            <input type="mail" id="mail" name="mail" required >
         </div>
         <div>
             <label for="subject">Objet</label>
@@ -67,14 +63,15 @@ Nous vous contacterons dans les plus brefs délais.
         </div>
        <div>
             <label for="description">Remarque</label>
-            <textarea id="description" name="description" rows="4"></textarea>
+            <textarea id="description" name="description" rows="4" required></textarea>
         </div>        
 </div>
-<!-- <div class ="captcha-container"></div> wir verzichten erstmal auf das Captcha  -->
-<div class="w-full flex justify-center">
-<button id="kontaktformular-btn" type="submit" disabled class="submitbutton text-white mx-auto submit-after-valid-captcha-bak">Envoyer la demande</button>
-<div id="notification" class="bg-blue-500 text-white rounded invisible opacity-0 hidden">Notification</div>
-</div>
+<center class="w-full">
+{{< captcha >}}
+<button id="kontaktformular-btn" type="submit" class="submitbutton text-white mx-auto submit-after-valid-captcha" >Envoyer la demande</button>
+
+<p><div id="notification" class="bg-blue-500 text-white rounded invisible opacity-0 hidden">Notification</div></p>
+</center>
 </form>
 
 {{% /section %}}
diff --git a/content/german/kontakt.md b/content/german/kontakt.md
index 4f7bc71..751f7e0 100644
--- a/content/german/kontakt.md
+++ b/content/german/kontakt.md
@@ -32,10 +32,6 @@ Wir nehmen zeitnah Kontakt zu Ihnen auf.
 <div id="formPartOne">
 <input type="hidden" name="formularart" value="Kontaktformular Deutsch">
 <input type="hidden" name="project" value="de-support">
-        <div>
-            <label for="organisation">Name der Organisation</label>
-            <input type="text" id="organisation" name="organisation">
-        </div>
         <div>
             <select id="gender" name="gender" required >
                 <option value="männlich">Herr</option>
@@ -44,7 +40,7 @@ Wir nehmen zeitnah Kontakt zu Ihnen auf.
             </select>
         </div>
         <div>
-            <label for="name">Nachname</label>
+            <label for="name">Nachname, Vorname</label>
             <input type="text" id="name" name="name" required >
         </div>
         <div>
@@ -58,8 +54,11 @@ Wir nehmen zeitnah Kontakt zu Ihnen auf.
             <input type="text" id="telefon" name="telefon" required >
         </div>
         <div>
-           <label for="email">Email</label>
-            <input type="email" id="email" name="email" required >
+           <label for="mail">Email</label>
+            <input type="mail" id="mail" name="mail" required > 
+        </div>
+        <div>
+            <input type="verify_email" id="verify_email" name="verify_email" >
         </div>
         <div>
             <label for="subject">Betreff</label>
@@ -67,14 +66,15 @@ Wir nehmen zeitnah Kontakt zu Ihnen auf.
         </div>
        <div>
             <label for="description">Anmerkung</label>
-            <textarea id="description" name="description" rows="4"></textarea>
+            <textarea id="description" name="description" rows="4" required></textarea>
         </div>        
 </div>
-<!-- <div class ="captcha-container"></div> wir verzichten erstmal auf das Captcha  -->
-<div class="w-full flex justify-center">
-<button id="kontaktformular-btn" type="submit" disabled class="submitbutton text-white mx-auto submit-after-valid-captcha-bak">Anfrage absenden</button>
-<div id="notification" class="bg-blue-500 text-white rounded invisible opacity-0 hidden">Notification</div>
-</div>
+<center class="w-full">
+{{< captcha >}}
+<button id="kontaktformular-btn" type="submit" class="submitbutton text-white mx-auto submit-after-valid-captcha" >Anfrage absenden</button>
+
+<p><div id="notification" class="bg-blue-500 text-white rounded invisible opacity-0 hidden">Notification</div></p>
+</center>
 </form>
 
 {{% /section %}}