feat: Update newsletter form

to kit
2026-08-30 21:33:34 +02:00
parent 186b4a27c2
commit d6375b2fd9
1 changed files with 313 additions and 97 deletions
@@ -2,120 +2,336 @@
 <html lang="de">
 <head>
  <meta charset="utf-8">
+
  <title>Newsletter – Walschleber KulTour</title>
-  <meta name="description" content="Abonniere den Newsletter und erhalte neue Termine der Walschleber KulTour direkt per E-Mail.">
-  <link rel="canonical" href="https://walschleber-kultour.com/newsletter.html">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <meta
+    name="description"
+    content="Abonniere den Newsletter und erhalte neue Termine der Walschleber KulTour direkt per E-Mail."
+  >
+
+  <link
+    rel="canonical"
+    href="https://walschleber-kultour.com/newsletter.html"
+  >
+
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1"
+  >

  <!-- Open Graph -->
-  <meta property="og:title" content="Newsletter – Walschleber KulTour">
-  <meta property="og:description" content="Verpasse keinen Termin: Jetzt anmelden.">
-  <meta property="og:type" content="website">
-  <meta property="og:url" content="https://walschleber-kultour.com/newsletter.html">
-  <meta property="og:image" content="https://walschleber-kultour.com/assets/og-default.jpg">
-  <meta name="twitter:card" content="summary_large_image">
+  <meta
+    property="og:title"
+    content="Newsletter – Walschleber KulTour"
+  >

-  <link rel="icon" href="/assets/logo.png" sizes="32x32" type="image/png">
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
-  <link rel="stylesheet" href="/assets/styles.css">
+  <meta
+    property="og:description"
+    content="Verpasse keinen Termin: Jetzt anmelden."
+  >

-  <!-- Performance hint für MailerLite -->
-  <link rel="preconnect" href="https://assets.mailerlite.com" crossorigin>
-  <link rel="preconnect" href="https://static.mailerlite.com" crossorigin>
+  <meta
+    property="og:type"
+    content="website"
+  >
+
+  <meta
+    property="og:url"
+    content="https://walschleber-kultour.com/newsletter.html"
+  >
+
+  <meta
+    property="og:image"
+    content="https://walschleber-kultour.com/assets/og-default.jpg"
+  >
+
+  <meta
+    name="twitter:card"
+    content="summary_large_image"
+  >
+
+  <!-- Favicon -->
+  <link
+    rel="icon"
+    href="/assets/logo.png"
+    sizes="32x32"
+    type="image/png"
+  >
+
+  <!-- Bootstrap -->
+  <link
+    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+    rel="stylesheet"
+  >
+
+  <!-- Eigene Styles -->
+  <link
+    rel="stylesheet"
+    href="/assets/styles.css"
+  >
+
+  <!-- Performance-Hint für Kit -->
+  <link
+    rel="preconnect"
+    href="https://walschleber-kultour.kit.com"
+    crossorigin
+  >
 </head>
+
 <body>

-<nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom sticky-top">
-  <div class="container">
-    <a class="navbar-brand brand-logo" href="index.html">
-      <img src="/assets/logo.png" alt="Walschleber KulTour Logo" height="34" width="34">
-      <span>Walschleber KulTour</span>
-    </a>
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div id="nav" class="collapse navbar-collapse">
-      <ul class="navbar-nav ms-auto">
-        <li class="nav-item"><a class="nav-link" href="programm.php">Programm</a></li>
-        <li class="nav-item"><a class="nav-link" href="vergangene-vortraege.php">Vergangene Vorträge</a></li>
-        <li class="nav-item"><a class="nav-link" href="ueber-uns.html">Über uns</a></li>
-        <li class="nav-item"><a class="nav-link active" href="newsletter.html">Newsletter</a></li>
-      </ul>
-    </div>
-  </div>
-</nav>
+  <!-- Navigation -->
+  <nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom sticky-top">
+    <div class="container">

-<header class="py-5 bg-light border-bottom">
-  <div class="container">
-    <div class="akzent-line mb-3"></div>
-    <h1 class="display-6 mb-2">Newsletter</h1>
-    <p class="text-muted mb-0">Verpasse keinen Termin – wir mailen dir neue Veranstaltungen beizeiten.</p>
-  </div>
-</header>
+      <a
+        class="navbar-brand brand-logo"
+        href="index.html"
+      >
+        <img
+          src="/assets/logo.png"
+          alt="Walschleber KulTour Logo"
+          height="34"
+          width="34"
+        >

-<main class="container my-5">
-  <div class="row g-4">
-    <!-- Links: Embed -->
-    <div class="col-lg-7">
-      <div class="p-4 border rounded-3 bg-white h-100">
-        <p class="section-kicker mb-1">Anmeldung</p>
-        <h2 class="h4">Schnell & DSGVO‑konform</h2>
-        <p>Trage deine E‑Mail ein und bestätige die Anmeldung per Double‑Opt‑In.</p>
+        <span>Walschleber KulTour</span>
+      </a>

-        <!-- MailerLite EMBED (ersetze FORM_ID durch deine ID) -->
-        <div class="p-3 p-md-4 cta-band rounded-4">
-          <!-- BEGIN MailerLite Embed -->
-          <div class="ml-embedded" data-form="IYRbz8"></div>
-          <!-- END MailerLite Embed -->
-          <noscript>
-            <p class="text-danger mt-2 mb-0">Bitte JavaScript aktivieren, um das Newsletter‑Formular zu laden.</p>
-          </noscript>
-        </div>
+      <button
+        class="navbar-toggler"
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target="#nav"
+        aria-controls="nav"
+        aria-expanded="false"
+        aria-label="Navigation öffnen"
+      >
+        <span class="navbar-toggler-icon"></span>
+      </button>

-        <p class="small text-muted mt-3 mb-0">
-          Hinweis: Wir verwenden MailerLite als Newsletter‑Dienst. Mit deiner Anmeldung erklärst du dich mit der Verarbeitung deiner Daten
-          zum Versand des Newsletters einverstanden. Details findest du in unserer <a href="/datenschutz.html">Datenschutzerklärung</a>.
-        </p>
-      </div>
-    </div>
+      <div
+        id="nav"
+        class="collapse navbar-collapse"
+      >
+        <ul class="navbar-nav ms-auto">
+
+          <li class="nav-item">
+            <a
+              class="nav-link"
+              href="programm.php"
+            >
+              Programm
+            </a>
+          </li>
+
+          <li class="nav-item">
+            <a
+              class="nav-link"
+              href="vergangene-vortraege.php"
+            >
+              Vergangene Vorträge
+            </a>
+          </li>
+
+          <li class="nav-item">
+            <a
+              class="nav-link"
+              href="ueber-uns.html"
+            >
+              Über uns
+            </a>
+          </li>
+
+          <li class="nav-item">
+            <a
+              class="nav-link active"
+              href="newsletter.html"
+              aria-current="page"
+            >
+              Newsletter
+            </a>
+          </li>

-    <!-- Rechts: Vorteile -->
-    <div class="col-lg-5">
-      <div class="p-4 border rounded-3 bg-white h-100">
-        <p class="section-kicker mb-1">Vorteile</p>
-        <h2 class="h5">Warum abonnieren?</h2>
-        <ul class="mb-0">
-          <li>Frühzeitig über neue Termine informiert</li>
-          <li>Besondere Hinweise & Hintergründe</li>
-          <li>Nur relevante Infos – kein Spam</li>
-          <li>Jederzeit mit einem Klick abmelden</li>
        </ul>
      </div>
    </div>
-  </div>
-</main>
+  </nav>

-<footer class="py-4 border-top">
-  <div class="container small d-flex gap-3 flex-wrap align-items-center">
-    <span>&copy; <span id="y"></span> Walschleber KulTour</span>
-    <span class="separator">•</span><a href="impressum.html">Impressum</a>
-    <span class="separator">•</span><a href="datenschutz.html">Datenschutz</a>
-    <span class="separator">•</span>
-    <a class="footer-gitea" href="https://git.mrblake.cc/MrBlake/Walschleber-Kultour-CMS" target="_blank" rel="noopener noreferrer" aria-label="Quellcode auf Gitea ansehen" title="Quellcode auf Gitea">
-      <img src="/assets/gitea.svg" width="18" height="18" alt="">
-    </a>
-  </div>
-</footer>

-<script>document.getElementById('y').textContent=new Date().getFullYear();</script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+  <!-- Header -->
+  <header class="py-5 bg-light border-bottom">
+    <div class="container">
+
+      <div class="akzent-line mb-3"></div>
+
+      <h1 class="display-6 mb-2">
+        Newsletter
+      </h1>
+
+      <p class="text-muted mb-0">
+        Verpasse keinen Termin – wir mailen dir neue Veranstaltungen beizeiten.
+      </p>
+
+    </div>
+  </header>
+
+
+  <!-- Hauptinhalt -->
+  <main class="container my-5">
+
+    <div class="row g-4">
+
+      <!-- Anmeldung -->
+      <div class="col-lg-7">
+
+        <div class="p-4 border rounded-3 bg-white h-100">
+
+          <p class="section-kicker mb-1">
+            Anmeldung
+          </p>
+
+          <h2 class="h4">
+            Schnell &amp; DSGVO-konform
+          </h2>
+
+          <p>
+            Trage deine E-Mail-Adresse ein und bestätige die
+            Anmeldung anschließend per Double-Opt-In.
+          </p>
+
+
+          <!-- Kit Newsletter Formular -->
+          <div class="p-3 p-md-4 cta-band rounded-4">
+
+            <!-- BEGIN Kit Embed -->
+            <script
+              async
+              data-uid="d9075b0046"
+              src="https://walschleber-kultour.kit.com/d9075b0046/index.js"
+            ></script>
+            <!-- END Kit Embed -->
+
+            <noscript>
+              <p class="text-danger mt-2 mb-0">
+                Bitte JavaScript aktivieren, um das
+                Newsletter-Formular zu laden.
+              </p>
+            </noscript>
+
+          </div>
+
+
+          <!-- Datenschutzhinweis -->
+          <p class="small text-muted mt-3 mb-0">
+            Hinweis: Wir verwenden Kit als Newsletter-Dienst.
+            Mit deiner Anmeldung erklärst du dich mit der Verarbeitung
+            deiner Daten zum Versand des Newsletters einverstanden.
+            Details findest du in unserer
+            <a href="/datenschutz.html">
+              Datenschutzerklärung
+            </a>.
+          </p>
+
+        </div>
+      </div>
+
+
+      <!-- Vorteile -->
+      <div class="col-lg-5">
+
+        <div class="p-4 border rounded-3 bg-white h-100">
+
+          <p class="section-kicker mb-1">
+            Vorteile
+          </p>
+
+          <h2 class="h5">
+            Warum abonnieren?
+          </h2>
+
+          <ul class="mb-0">
+            <li>
+              Frühzeitig über neue Termine informiert
+            </li>
+
+            <li>
+              Besondere Hinweise &amp; Hintergründe
+            </li>
+
+            <li>
+              Nur relevante Infos – kein Spam
+            </li>
+
+            <li>
+              Jederzeit mit einem Klick abmelden
+            </li>
+          </ul>
+
+        </div>
+      </div>
+
+    </div>
+  </main>
+
+
+  <!-- Footer -->
+  <footer class="py-4 border-top">
+
+    <div class="container small d-flex gap-3 flex-wrap align-items-center">
+
+      <span>
+        &copy;
+        <span id="y"></span>
+        Walschleber KulTour
+      </span>
+
+      <span class="separator">•</span>
+
+      <a href="impressum.html">
+        Impressum
+      </a>
+
+      <span class="separator">•</span>
+
+      <a href="datenschutz.html">
+        Datenschutz
+      </a>
+
+      <span class="separator">•</span>
+
+      <a
+        class="footer-gitea"
+        href="https://git.mrblake.cc/MrBlake/Walschleber-Kultour-CMS"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="Quellcode auf Gitea ansehen"
+        title="Quellcode auf Gitea"
+      >
+        <img
+          src="/assets/gitea.svg"
+          width="18"
+          height="18"
+          alt=""
+        >
+      </a>
+
+    </div>
+  </footer>
+
+
+  <!-- Aktuelles Jahr im Footer -->
+  <script>
+    document.getElementById('y').textContent =
+      new Date().getFullYear();
+  </script>
+
+
+  <!-- Bootstrap JavaScript -->
+  <script
+    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+  ></script>

-<!-- MailerLite Universal (geladen am Ende für bessere Performance) -->
-<script>
-  (function(w,d,e,u,f,l,n){w[f]=w[f]||function(){(w[f].q=w[f].q||[]).push(arguments);},
-  l=d.createElement(e),l.async=1,l.src=u,n=d.getElementsByTagName(e)[0],n.parentNode.insertBefore(l,n);})
-  (window,document,'script','https://assets.mailerlite.com/js/universal.js','ml');
-  ml('account', '1275954'); // <-- deine Account-ID aus deinem Snippet
-</script>
 </body>
-</html>
+</html>