From 4b7e201b916f1566d69a92279734178f6c01fe49 Mon Sep 17 00:00:00 2001
From: rogalik27 <rogalik.gh@gmail.com>
Date: Wed, 24 Jun 2026 14:48:56 +0200
Subject: [PATCH] Phase 4: wire demo lead forms to live n8n webhook

- demo-tier-a / demo-tier-b: forms POST JSON to /webhook/lead-intake
  (hidden client_id + source, named fields), async submit with
  success/error toast.
- lead-intake webhook: enable CORS (allowedOrigins=*) so the static
  demos (different origin) can submit; re-export n8n/lead-intake.json.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 n8n/lead-intake.json                     |  4 ++-
 templates/landing/demo-tier-a/index.html | 43 ++++++++++++++++++++----
 templates/landing/demo-tier-b/index.html | 43 ++++++++++++++++++++----
 3 files changed, 77 insertions(+), 13 deletions(-)

diff --git a/n8n/lead-intake.json b/n8n/lead-intake.json
index ab5ccd1..14391f1 100644
--- a/n8n/lead-intake.json
+++ b/n8n/lead-intake.json
@@ -6,7 +6,9 @@
         "httpMethod": "POST",
         "path": "lead-intake",
         "responseMode": "onReceived",
-        "options": {}
+        "options": {
+          "allowedOrigins": "*"
+        }
       },
       "id": "f60ee339-9809-4962-9c5d-68ad9a5ec452",
       "name": "Webhook",
diff --git a/templates/landing/demo-tier-a/index.html b/templates/landing/demo-tier-a/index.html
index 2f083fa..1990b9e 100644
--- a/templates/landing/demo-tier-a/index.html
+++ b/templates/landing/demo-tier-a/index.html
@@ -247,14 +247,16 @@
           <h2>Frage stellen oder Rückruf anfordern</h2>
           <p>Schreib uns kurz — wir melden uns am selben Tag.</p>
         </div>
-        <!-- Tier A: in der Live-Version postet dieses Formular an einen n8n-Webhook -> Google Sheet (Leads). -->
-        <form class="lead" onsubmit="event.preventDefault(); this.querySelector('.toast').style.display='block'; this.reset();">
-          <div class="field"><label for="a-name">Name</label><input id="a-name" type="text" placeholder="Max Mustermann" required /></div>
-          <div class="field"><label for="a-contact">E-Mail oder Telefon</label><input id="a-contact" type="text" placeholder="max@example.de" required /></div>
+        <!-- Tier A: dieses Formular postet an einen n8n-Webhook -> Google Sheet (Leads) + Telegram. -->
+        <form class="lead" onsubmit="return submitLead(event, this)">
+          <input type="hidden" name="client_id" value="DEMO-A" />
+          <input type="hidden" name="source" value="demo-tier-a" />
+          <div class="field"><label for="a-name">Name</label><input id="a-name" name="name" type="text" placeholder="Max Mustermann" required /></div>
+          <div class="field"><label for="a-contact">E-Mail oder Telefon</label><input id="a-contact" name="contact" type="text" placeholder="max@example.de" required /></div>
           <div class="field"><label for="a-svc">Gewünschte Leistung</label>
-            <select id="a-svc"><option>Herrenschnitt</option><option>Bartpflege</option><option>Heiße Rasur</option><option>Kids Cut</option><option>Sonstiges</option></select>
+            <select id="a-svc" name="service"><option>Herrenschnitt</option><option>Bartpflege</option><option>Heiße Rasur</option><option>Kids Cut</option><option>Sonstiges</option></select>
           </div>
-          <div class="field"><label for="a-msg">Nachricht (optional)</label><textarea id="a-msg" rows="3" placeholder="Wunschtermin, Frage, …"></textarea></div>
+          <div class="field"><label for="a-msg">Nachricht (optional)</label><textarea id="a-msg" name="message" rows="3" placeholder="Wunschtermin, Frage, …"></textarea></div>
           <button class="btn" type="submit">Anfrage senden</button>
           <div class="toast">✓ Danke! Demo-Formular — in der Live-Version landet deine Anfrage automatisch im CRM.</div>
           <p class="form-note">Mit dem Absenden stimmst du der Verarbeitung deiner Angaben zur Kontaktaufnahme zu.</p>
@@ -280,5 +282,34 @@
     </div>
     <div class="wrap" style="margin-top:30px;opacity:.6;font-size:.8rem;">© 2026 Schnittpunkt Barbershop · Demo-Seite · Impressum · Datenschutz</div>
   </footer>
+  <script>
+    // Lead-Formular -> n8n Webhook -> Google Sheet (Leads) + Telegram-Benachrichtigung.
+    const LEAD_WEBHOOK = 'https://n8n.mivanchenko.de/webhook/lead-intake';
+    async function submitLead(e, form) {
+      e.preventDefault();
+      const btn = form.querySelector('button[type=submit]');
+      const toast = form.querySelector('.toast');
+      const data = Object.fromEntries(new FormData(form).entries());
+      const old = btn.textContent;
+      btn.disabled = true; btn.textContent = 'Senden…';
+      try {
+        const r = await fetch(LEAD_WEBHOOK, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(data),
+        });
+        if (!r.ok) throw new Error(r.status);
+        toast.textContent = '✓ Danke! Deine Anfrage ist eingegangen — wir melden uns.';
+        toast.style.display = 'block';
+        form.reset();
+      } catch (err) {
+        toast.textContent = '⚠ Senden fehlgeschlagen — bitte erneut versuchen oder direkt anrufen.';
+        toast.style.display = 'block';
+      } finally {
+        btn.disabled = false; btn.textContent = old;
+      }
+      return false;
+    }
+  </script>
 </body>
 </html>
diff --git a/templates/landing/demo-tier-b/index.html b/templates/landing/demo-tier-b/index.html
index 3ab6275..9c11807 100644
--- a/templates/landing/demo-tier-b/index.html
+++ b/templates/landing/demo-tier-b/index.html
@@ -279,14 +279,16 @@
           <h2>Rezept einreichen oder Frage stellen</h2>
           <p>Schreiben Sie uns — wir melden uns zeitnah und vertraulich zurück.</p>
         </div>
-        <!-- Tier B: in der Live-Version postet dies an einen self-hosted Endpoint -> n8n -> CRM (kein Drittanbieter). -->
-        <form class="lead" onsubmit="event.preventDefault(); this.querySelector('.toast').style.display='block'; this.reset();">
-          <div class="field"><label for="b-name">Name</label><input id="b-name" type="text" placeholder="Maria Musterfrau" required /></div>
-          <div class="field"><label for="b-contact">E-Mail oder Telefon</label><input id="b-contact" type="text" placeholder="maria@example.de" required /></div>
+        <!-- Tier B: dieses Formular postet an einen n8n-Webhook -> CRM (Leads) + Telegram. -->
+        <form class="lead" onsubmit="return submitLead(event, this)">
+          <input type="hidden" name="client_id" value="DEMO-B" />
+          <input type="hidden" name="source" value="demo-tier-b" />
+          <div class="field"><label for="b-name">Name</label><input id="b-name" name="name" type="text" placeholder="Maria Musterfrau" required /></div>
+          <div class="field"><label for="b-contact">E-Mail oder Telefon</label><input id="b-contact" name="contact" type="text" placeholder="maria@example.de" required /></div>
           <div class="field"><label for="b-svc">Anliegen</label>
-            <select id="b-svc"><option>Neuer Termin</option><option>Rezept einreichen</option><option>Manuelle Therapie</option><option>Krankengymnastik</option><option>Sonstiges</option></select>
+            <select id="b-svc" name="service"><option>Neuer Termin</option><option>Rezept einreichen</option><option>Manuelle Therapie</option><option>Krankengymnastik</option><option>Sonstiges</option></select>
           </div>
-          <div class="field"><label for="b-msg">Nachricht</label><textarea id="b-msg" rows="3" placeholder="Ihr Anliegen, Wunschtermin, Diagnose laut Rezept …"></textarea></div>
+          <div class="field"><label for="b-msg">Nachricht</label><textarea id="b-msg" name="message" rows="3" placeholder="Ihr Anliegen, Wunschtermin, Diagnose laut Rezept …"></textarea></div>
           <div class="field consent"><input type="checkbox" id="b-consent" style="width:auto;margin-top:4px;" required /><label for="b-consent" style="margin:0;">Ich willige ein, dass meine Angaben zur Bearbeitung meiner Anfrage verarbeitet werden. Die Daten werden verschlüsselt in Deutschland gespeichert.</label></div>
           <button class="btn" type="submit">Anfrage sicher senden</button>
           <div class="toast">✓ Danke! Demo-Formular — in der Live-Version landet Ihre Anfrage verschlüsselt im Praxis-CRM.</div>
@@ -319,5 +321,34 @@
     <div class="chat-input"><input type="text" placeholder="Nachricht schreiben …" /><button aria-label="Senden">➤</button></div>
     <div class="chat-foot">Demo — in der Live-Version KI-gestützt (Claude)</div>
   </div>
+  <script>
+    // Lead-Formular -> n8n Webhook -> CRM (Leads) + Telegram-Benachrichtigung.
+    const LEAD_WEBHOOK = 'https://n8n.mivanchenko.de/webhook/lead-intake';
+    async function submitLead(e, form) {
+      e.preventDefault();
+      const btn = form.querySelector('button[type=submit]');
+      const toast = form.querySelector('.toast');
+      const data = Object.fromEntries(new FormData(form).entries());
+      const old = btn.textContent;
+      btn.disabled = true; btn.textContent = 'Senden…';
+      try {
+        const r = await fetch(LEAD_WEBHOOK, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(data),
+        });
+        if (!r.ok) throw new Error(r.status);
+        toast.textContent = '✓ Danke! Ihre Anfrage ist eingegangen — wir melden uns.';
+        toast.style.display = 'block';
+        form.reset();
+      } catch (err) {
+        toast.textContent = '⚠ Senden fehlgeschlagen — bitte erneut versuchen oder direkt anrufen.';
+        toast.style.display = 'block';
+      } finally {
+        btn.disabled = false; btn.textContent = old;
+      }
+      return false;
+    }
+  </script>
 </body>
 </html>