feat: Update newsletter form

to kit
This commit is contained in:
2026-08-30 21:33:34 +02:00
parent 186b4a27c2
commit d6375b2fd9
+312 -96
View File
@@ -2,120 +2,336 @@
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Newsletter – Walschleber KulTour</title> <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
<meta name="viewport" content="width=device-width, initial-scale=1"> 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 --> <!-- Open Graph -->
<meta property="og:title" content="Newsletter – Walschleber KulTour"> <meta
<meta property="og:description" content="Verpasse keinen Termin: Jetzt anmelden."> property="og:title"
<meta property="og:type" content="website"> content="Newsletter – Walschleber KulTour"
<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">
<link rel="icon" href="/assets/logo.png" sizes="32x32" type="image/png"> <meta
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> property="og:description"
<link rel="stylesheet" href="/assets/styles.css"> content="Verpasse keinen Termin: Jetzt anmelden."
>
<!-- Performance hint für MailerLite --> <meta
<link rel="preconnect" href="https://assets.mailerlite.com" crossorigin> property="og:type"
<link rel="preconnect" href="https://static.mailerlite.com" crossorigin> 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> </head>
<body> <body>
<nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom sticky-top"> <!-- Navigation -->
<nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom sticky-top">
<div class="container"> <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"> <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> <span>Walschleber KulTour</span>
</a> </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav">
<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> <span class="navbar-toggler-icon"></span>
</button> </button>
<div id="nav" class="collapse navbar-collapse">
<div
id="nav"
class="collapse navbar-collapse"
>
<ul class="navbar-nav ms-auto"> <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>
<header class="py-5 bg-light border-bottom"> <li class="nav-item">
<div class="container"> <a
<div class="akzent-line mb-3"></div> class="nav-link"
<h1 class="display-6 mb-2">Newsletter</h1> href="programm.php"
<p class="text-muted mb-0">Verpasse keinen Termin – wir mailen dir neue Veranstaltungen beizeiten.</p> >
</div> Programm
</header>
<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>
<!-- 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>
<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>
<!-- 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>
<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> </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>
</ul>
</div> </div>
</footer> </div>
</nav>
<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>
<!-- MailerLite Universal (geladen am Ende für bessere Performance) --> <!-- Header -->
<script> <header class="py-5 bg-light border-bottom">
(function(w,d,e,u,f,l,n){w[f]=w[f]||function(){(w[f].q=w[f].q||[]).push(arguments);}, <div class="container">
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'); <div class="akzent-line mb-3"></div>
ml('account', '1275954'); // <-- deine Account-ID aus deinem Snippet
</script> <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>
</body> </body>
</html> </html>