feat(newsletter): Add subscription confirmation email functionality

- Implemented `send_subscription_confirmation` function to send a confirmation email upon subscription. - Added a default HTML template for the confirmation email in settings. - Updated the newsletter management page to handle subscription and unsubscription actions. - Created new templates for embedding contact and newsletter forms. - Added styles for the new templates and unified CSS styles across the application. - Updated tests to reflect changes in the newsletter management API endpoints.
2025-10-30 12:38:26 +01:00
parent f7695be8ef
commit 56840ac313
24 changed files with 897 additions and 449 deletions
--- a/templates/admin_dashboard.html
+++ b/templates/admin_dashboard.html
@@ -4,91 +4,13 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Admin Dashboard</title>
+    <link rel="stylesheet" href="/static/css/styles.css" />
    <style>
      body {
-        font-family: Arial, sans-serif;
-        margin: 20px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
      }
-      h1 {
-        color: #333;
-        text-align: center;
-        margin-bottom: 30px;
-      }
-      .dashboard-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-        gap: 20px;
-        margin-bottom: 40px;
-      }
-      .dashboard-card {
-        border: 1px solid #ddd;
-        border-radius: 8px;
-        padding: 20px;
-        background-color: #f9f9f9;
-        transition: box-shadow 0.3s ease;
-      }
-      .dashboard-card:hover {
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-      }
-      .dashboard-card h2 {
-        color: #555;
-        margin-top: 0;
-        margin-bottom: 15px;
-      }
-      .dashboard-card p {
-        color: #666;
-        margin-bottom: 15px;
-      }
-      .dashboard-card a {
-        display: inline-block;
-        background-color: #007bff;
-        color: white;
-        padding: 8px 16px;
-        text-decoration: none;
-        border-radius: 4px;
-        transition: background-color 0.3s ease;
-      }
-      .dashboard-card a:hover {
-        background-color: #0056b3;
-      }
-      .logout {
-        text-align: center;
-        margin-top: 40px;
-      }
-      .logout a {
-        color: #dc3545;
-        text-decoration: none;
-      }
-      .logout a:hover {
-        text-decoration: underline;
-      }
-      .stats {
-        display: flex;
-        justify-content: space-around;
-        margin-bottom: 30px;
-        flex-wrap: wrap;
-      }
-      .stat-card {
-        background-color: #e9ecef;
-        padding: 15px;
-        border-radius: 8px;
-        text-align: center;
-        min-width: 150px;
-        margin: 5px;
-      }
-      .stat-card h3 {
-        margin: 0;
-        color: #495057;
-        font-size: 2em;
-      }
-      .stat-card p {
-        margin: 5px 0 0 0;
-        color: #6c757d;
-        font-size: 0.9em;
-      }
    </style>
  </head>
  <body>
@@ -138,6 +60,15 @@
        <p>Create and send newsletters to your subscribers.</p>
        <a href="/admin/newsletter/create">Create Newsletter</a>
      </div>
+
+      <div class="dashboard-card">
+        <h2>Embeddable Forms</h2>
+        <p>
+          Instructions for embedding contact and newsletter forms on other
+          websites.
+        </p>
+        <a href="/admin/embeds">View Embed Codes</a>
+      </div>
    </div>

    <div class="logout">
--- a/templates/admin_embeds.html
+++ b/templates/admin_embeds.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Embeddable Forms</title>
+    <link rel="stylesheet" href="/static/css/styles.css" />
+    <style>
+      .iframe-code {
+        width: 100%;
+        height: 100px;
+        font-family: monospace;
+        padding: 10px;
+        border: 1px solid #ccc;
+        border-radius: 3px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="logout">
+      <a
+        href="/admin/"
+        style="color: #007bff; text-decoration: none; margin-right: 20px"
+        >Dashboard</a
+      >
+      <a
+        href="/admin/submissions"
+        style="color: #007bff; text-decoration: none; margin-right: 20px"
+        >View Submissions</a
+      >
+      <a
+        href="/admin/settings"
+        style="color: #007bff; text-decoration: none; margin-right: 20px"
+        >Settings</a
+      >
+      <a
+        href="{{ url_for('auth.logout') }}"
+        style="color: #007bff; text-decoration: none"
+        >Logout</a
+      >
+    </div>
+
+    <h1>Embeddable Forms</h1>
+
+    <div class="settings-management">
+      <h2>Contact Form</h2>
+      <p>
+        Use the following HTML code to embed the contact form on other websites:
+      </p>
+      <textarea id="iframeCode" class="iframe-code" readonly>
+<iframe src="http://your-server-domain/embed/contact" width="600" height="400" frameborder="0" allowfullscreen></iframe>
+      </textarea>
+      <button class="btn btn-secondary" onclick="copyIframeCode()">
+        Copy Contact Iframe
+      </button>
+    </div>
+
+    <div class="settings-management">
+      <h2>Newsletter Subscription Form</h2>
+      <p>
+        Use the following HTML code to embed the newsletter subscription form on
+        other websites:
+      </p>
+      <textarea id="iframeNewsletterCode" class="iframe-code" readonly>
+<iframe src="http://your-server-domain/embed/newsletter" width="600" height="300" frameborder="0" allowfullscreen></iframe>
+      </textarea>
+      <button class="btn btn-secondary" onclick="copyNewsletterIframeCode()">
+        Copy Newsletter Iframe
+      </button>
+    </div>
+
+    <div class="settings-management">
+      <p>
+        Replace <code>http://your-server-domain</code> with your actual server
+        domain and port (e.g., https://yourdomain.com).
+      </p>
+    </div>
+
+    <script>
+      function copyIframeCode() {
+        const textarea = document.getElementById("iframeCode");
+        textarea.select();
+        document.execCommand("copy");
+        showMessage("Contact iframe code copied to clipboard!", "success");
+      }
+
+      function copyNewsletterIframeCode() {
+        const textarea = document.getElementById("iframeNewsletterCode");
+        textarea.select();
+        document.execCommand("copy");
+        showMessage("Newsletter iframe code copied to clipboard!", "success");
+      }
+
+      function showMessage(text, type) {
+        // Create message div if it doesn't exist
+        let messageDiv = document.getElementById("message");
+        if (!messageDiv) {
+          messageDiv = document.createElement("div");
+          messageDiv.id = "message";
+          document.body.insertBefore(messageDiv, document.body.firstChild);
+        }
+        messageDiv.className = `message ${type}`;
+        messageDiv.textContent = text;
+        messageDiv.style.display = "block";
+
+        setTimeout(() => {
+          messageDiv.style.display = "none";
+        }, 5000);
+      }
+    </script>
+  </body>
+</html>
--- a/templates/admin_newsletter.html
+++ b/templates/admin_newsletter.html
@@ -4,10 +4,9 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Newsletter Subscribers</title>
+    <link rel="stylesheet" href="/static/css/styles.css" />
    <style>
      body {
-        font-family: Arial, sans-serif;
-        margin: 20px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
--- a/templates/admin_newsletter_create.html
+++ b/templates/admin_newsletter_create.html
@@ -4,10 +4,9 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Create Newsletter</title>
+    <link rel="stylesheet" href="/static/css/styles.css" />
    <style>
      body {
-        font-family: Arial, sans-serif;
-        margin: 20px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
--- a/templates/admin_settings.html
+++ b/templates/admin_settings.html
@@ -4,134 +4,20 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Admin Settings</title>
+    <link rel="stylesheet" href="/static/css/styles.css" />
    <style>
-      body {
-        font-family: Arial, sans-serif;
-        margin: 20px;
-      }
-      h1 {
-        color: #333;
-      }
-      h2 {
-        color: #555;
-        border-bottom: 1px solid #ddd;
-        padding-bottom: 5px;
-      }
-      .setting-group {
-        margin-bottom: 20px;
-      }
-      .setting {
-        margin: 5px 0;
-      }
      .setting strong {
        display: inline-block;
        width: 200px;
      }
-      .logout {
-        margin-top: 20px;
-      }
-      .logout a {
-        color: #007bff;
-        text-decoration: none;
-      }
-      .logout a:hover {
-        text-decoration: underline;
-      }
-      .settings-management {
-        margin-top: 40px;
-        padding: 20px;
-        border: 1px solid #ddd;
-        border-radius: 5px;
-      }
-      .settings-list {
-        margin-bottom: 20px;
-      }
-      .setting-item {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 10px;
-        border-bottom: 1px solid #eee;
-      }
-      .setting-item:last-child {
-        border-bottom: none;
-      }
-      .setting-info {
-        flex-grow: 1;
-      }
-      .setting-actions {
-        display: flex;
-        gap: 10px;
-      }
-      .btn {
-        padding: 5px 10px;
-        border: none;
-        border-radius: 3px;
-        cursor: pointer;
-        text-decoration: none;
-        display: inline-block;
-      }
-      .btn-primary {
-        background: #007bff;
-        color: white;
-      }
-      .btn-danger {
-        background: #dc3545;
-        color: white;
-      }
-      .btn-secondary {
-        background: #6c757d;
-        color: white;
-      }
-      .btn:hover {
-        opacity: 0.8;
-      }
-      .form-group {
-        margin-bottom: 15px;
-      }
-      .form-group label {
-        display: block;
-        margin-bottom: 5px;
-        font-weight: bold;
-      }
-      .form-group input,
-      .form-group select {
+      .iframe-code {
        width: 100%;
-        padding: 8px;
+        height: 100px;
+        font-family: monospace;
+        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 3px;
      }
-      .form-row {
-        display: flex;
-        gap: 10px;
-        align-items: end;
-      }
-      .form-row .form-group {
-        flex: 1;
-        margin-bottom: 0;
-      }
-      .message {
-        padding: 10px;
-        margin: 10px 0;
-        border-radius: 3px;
-      }
-      .message.success {
-        background: #d4edda;
-        color: #155724;
-        border: 1px solid #c3e6cb;
-      }
-      .message.error {
-        background: #f8d7da;
-        color: #721c24;
-        border: 1px solid #f5c6cb;
-      }
-      .edit-form {
-        display: none;
-        margin-top: 10px;
-        padding: 10px;
-        background: #f8f9fa;
-        border-radius: 3px;
-      }
    </style>
  </head>
  <body>
@@ -146,6 +32,11 @@
        style="color: #007bff; text-decoration: none; margin-right: 20px"
        >View Submissions</a
      >
+      <a
+        href="/admin/embeds"
+        style="color: #007bff; text-decoration: none; margin-right: 20px"
+        >Embeds</a
+      >
      <a
        href="{{ url_for('auth.logout') }}"
        style="color: #007bff; text-decoration: none"
@@ -203,6 +94,20 @@
      </form>
    </div>

+    <div class="settings-management">
+      <h2>Embeddable Forms</h2>
+      <p>
+        Manage embeddable forms on the <a href="/admin/embeds">Embeds page</a>.
+      </p>
+    </div>
+
+    <div class="settings-management">
+      <h2>Email Templates</h2>
+      <div id="emailTemplates">
+        <p>Loading email templates...</p>
+      </div>
+    </div>
+
    <script>
      let appSettings = {};

@@ -257,11 +162,21 @@
        }

        const settingsHtml = Object.entries(appSettings)
-          .map(
-            ([key, value]) => `
+          .map(([key, value]) => {
+            const isTemplate = key === "newsletter_confirmation_template";
+            const inputType = isTemplate ? "textarea" : "input";
+            const inputAttrs = isTemplate
+              ? 'rows="10" cols="50"'
+              : 'type="text"';
+            return `
            <div class="setting-item">
              <div class="setting-info">
-                <strong>${escapeHtml(key)}:</strong> ${escapeHtml(value)}
+                <strong>${escapeHtml(key)}:</strong> ${
+              isTemplate
+                ? "<em>HTML template</em>"
+                : escapeHtml(value.substring(0, 50)) +
+                  (value.length > 50 ? "..." : "")
+            }
              </div>
              <div class="setting-actions">
                <button class="btn btn-secondary" onclick="editSetting('${escapeHtml(
@@ -280,9 +195,9 @@
                </div>
                <div class="form-group">
                  <label>New Value:</label>
-                  <input type="text" id="edit-value-${escapeHtml(
-                    key
-                  )}" value="${escapeHtml(value)}" required>
+                  <${inputType} id="edit-value-${escapeHtml(
+              key
+            )}" ${inputAttrs} required>${escapeHtml(value)}</${inputType}>
                </div>
                <div class="form-group">
                  <button class="btn btn-primary" onclick="updateSetting('${escapeHtml(
@@ -294,8 +209,8 @@
                </div>
              </div>
            </div>
-          `
-          )
+          `;
+          })
          .join("");

        container.innerHTML = settingsHtml;
--- a/templates/admin_submissions.html
+++ b/templates/admin_submissions.html
@@ -4,29 +4,13 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contact Submissions</title>
+    <link rel="stylesheet" href="/static/css/styles.css" />
    <style>
      body {
-        font-family: Arial, sans-serif;
-        margin: 20px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
      }
-      h1 {
-        color: #333;
-        margin-bottom: 20px;
-      }
-      .nav {
-        margin-bottom: 20px;
-      }
-      .nav a {
-        color: #007bff;
-        text-decoration: none;
-        margin-right: 20px;
-      }
-      .nav a:hover {
-        text-decoration: underline;
-      }
      .filters {
        background: #f8f9fa;
        padding: 15px;
@@ -39,124 +23,6 @@
        flex-wrap: wrap;
        align-items: end;
      }
-      .filters label {
-        display: block;
-        margin-bottom: 5px;
-        font-weight: bold;
-      }
-      .filters input,
-      .filters select {
-        padding: 8px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-      }
-      .filters button {
-        padding: 8px 15px;
-        background: #007bff;
-        color: white;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-      }
-      .filters button:hover {
-        background: #0056b3;
-      }
-      .filters .clear-btn {
-        background: #6c757d;
-      }
-      .filters .clear-btn:hover {
-        background: #545b62;
-      }
-      table {
-        width: 100%;
-        border-collapse: collapse;
-        margin-top: 20px;
-      }
-      th,
-      td {
-        padding: 12px;
-        text-align: left;
-        border-bottom: 1px solid #ddd;
-      }
-      th {
-        background-color: #f8f9fa;
-        font-weight: bold;
-        cursor: pointer;
-      }
-      th:hover {
-        background-color: #e9ecef;
-      }
-      th.sort-asc::after {
-        content: " ↑";
-      }
-      th.sort-desc::after {
-        content: " ↓";
-      }
-      tr:hover {
-        background-color: #f5f5f5;
-      }
-      .message {
-        padding: 8px;
-        margin: 10px 0;
-        border-radius: 4px;
-      }
-      .message.success {
-        background-color: #d4edda;
-        color: #155724;
-        border: 1px solid #c3e6cb;
-      }
-      .message.error {
-        background-color: #f8d7da;
-        color: #721c24;
-        border: 1px solid #f5c6cb;
-      }
-      .pagination {
-        margin-top: 20px;
-        text-align: center;
-      }
-      .pagination button {
-        padding: 8px 12px;
-        margin: 0 2px;
-        border: 1px solid #ddd;
-        background: white;
-        cursor: pointer;
-      }
-      .pagination button:hover {
-        background: #f8f9fa;
-      }
-      .pagination button.active {
-        background: #007bff;
-        color: white;
-        border-color: #007bff;
-      }
-      .pagination button:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-      .delete-btn {
-        background: #dc3545;
-        color: white;
-        border: none;
-        padding: 4px 8px;
-        border-radius: 3px;
-        cursor: pointer;
-      }
-      .delete-btn:hover {
-        background: #c82333;
-      }
-      .loading {
-        text-align: center;
-        padding: 20px;
-      }
-      .no-data {
-        text-align: center;
-        padding: 40px;
-        color: #666;
-      }
-      .submission-details {
-        max-width: 300px;
-        word-wrap: break-word;
-      }
    </style>
  </head>
  <body>
--- a/templates/embed_contact.html
+++ b/templates/embed_contact.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Contact Form</title>
+    <link rel="stylesheet" href="/static/css/styles.css" />
+  </head>
+  <body>
+    <div class="contact-form">
+      <h2>Contact Us</h2>
+      <form id="contactForm" method="post" action="/api/contact">
+        <div class="form-group">
+          <label for="name">Name:</label>
+          <input type="text" id="name" name="name" required />
+        </div>
+        <div class="form-group">
+          <label for="email">Email:</label>
+          <input type="email" id="email" name="email" required />
+        </div>
+        <div class="form-group">
+          <label for="message">Message:</label>
+          <textarea id="message" name="message" required></textarea>
+        </div>
+        <button type="submit">Send Message</button>
+      </form>
+      <div id="responseMessage"></div>
+    </div>
+
+    <script>
+      document
+        .getElementById("contactForm")
+        .addEventListener("submit", function (e) {
+          e.preventDefault();
+          const formData = new FormData(this);
+          fetch("/api/contact", {
+            method: "POST",
+            body: formData,
+          })
+            .then((response) => response.json())
+            .then((data) => {
+              const messageDiv = document.getElementById("responseMessage");
+              if (data.status === "ok") {
+                messageDiv.innerHTML =
+                  '<div class="message success">Thank you for your message! We will get back to you soon.</div>';
+                this.reset();
+              } else {
+                messageDiv.innerHTML =
+                  '<div class="message error">There was an error sending your message. Please try again.</div>';
+              }
+            })
+            .catch((error) => {
+              console.error("Error:", error);
+              document.getElementById("responseMessage").innerHTML =
+                '<div class="message error">There was an error sending your message. Please try again.</div>';
+            });
+        });
+    </script>
+  </body>
+</html>
--- a/templates/embed_newsletter.html
+++ b/templates/embed_newsletter.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Newsletter Subscription</title>
+    <link rel="stylesheet" href="/static/css/styles.css" />
+  </head>
+  <body>
+    <div class="form-container">
+      <h2>Subscribe to Our Newsletter</h2>
+      <form id="newsletterForm" method="post" action="/api/newsletter">
+        <div class="form-group">
+          <label for="email">Email:</label>
+          <input type="email" id="email" name="email" required />
+        </div>
+        <button type="submit">Subscribe</button>
+      </form>
+      <div id="responseMessage"></div>
+    </div>
+
+    <script>
+      document
+        .getElementById("newsletterForm")
+        .addEventListener("submit", function (e) {
+          e.preventDefault();
+          const formData = new FormData(this);
+          fetch("/api/newsletter", {
+            method: "POST",
+            body: formData,
+          })
+            .then((response) => response.json())
+            .then((data) => {
+              const messageDiv = document.getElementById("responseMessage");
+              if (data.status === "ok") {
+                messageDiv.innerHTML =
+                  '<div class="message success">Thank you for subscribing! Please check your email for confirmation.</div>';
+                this.reset();
+              } else {
+                messageDiv.innerHTML =
+                  '<div class="message error">' +
+                  (data.message ||
+                    "There was an error subscribing. Please try again.") +
+                  "</div>";
+              }
+            })
+            .catch((error) => {
+              console.error("Error:", error);
+              document.getElementById("responseMessage").innerHTML =
+                '<div class="message error">There was an error subscribing. Please try again.</div>';
+            });
+        });
+    </script>
+  </body>
+</html>
--- a/templates/login.html
+++ b/templates/login.html
@@ -4,27 +4,14 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Admin Login</title>
+    <link rel="stylesheet" href="/static/css/styles.css" />
    <style>
-      body {
-        font-family: Arial, sans-serif;
-        margin: 40px;
-      }
-      form {
+      .login-form {
        max-width: 300px;
-        margin: auto;
+        margin: 40px auto;
      }
-      input {
-        display: block;
+      .login-form input {
        margin: 10px 0;
-        padding: 8px;
-        width: 100%;
-      }
-      button {
-        padding: 10px;
-        background: #007bff;
-        color: white;
-        border: none;
-        cursor: pointer;
      }
      .flash {
        color: red;
@@ -34,13 +21,22 @@
  <body>
    <h1>Admin Login</h1>
    {% with messages = get_flashed_messages() %} {% if messages %}
-    <div class="flash">
+    <div class="message error">
      {% for message in messages %} {{ message }} {% endfor %}
    </div>
    {% endif %} {% endwith %}
-    <form method="post">
-      <input type="text" name="username" placeholder="Username" required />
-      <input type="password" name="password" placeholder="Password" required />
+    <form method="post" class="login-form">
+      <div class="form-group">
+        <input type="text" name="username" placeholder="Username" required />
+      </div>
+      <div class="form-group">
+        <input
+          type="password"
+          name="password"
+          placeholder="Password"
+          required
+        />
+      </div>
      <button type="submit">Login</button>
    </form>
  </body>
--- a/templates/newsletter_manage.html
+++ b/templates/newsletter_manage.html
@@ -4,69 +4,18 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Newsletter Management</title>
+    <link rel="stylesheet" href="/static/css/styles.css" />
    <style>
      body {
-        font-family: Arial, sans-serif;
-        margin: 20px;
        max-width: 600px;
-        margin: 0 auto;
+        margin: 20px auto;
        padding: 20px;
      }
-      h1 {
-        color: #333;
-        text-align: center;
-      }
-      .message {
-        padding: 10px;
-        margin: 10px 0;
-        border-radius: 4px;
-      }
-      .message.success {
-        background-color: #d4edda;
-        color: #155724;
-        border: 1px solid #c3e6cb;
-      }
-      .message.error {
-        background-color: #f8d7da;
-        color: #721c24;
-        border: 1px solid #f5c6cb;
-      }
-      .message.info {
-        background-color: #d1ecf1;
-        color: #0c5460;
-        border: 1px solid #bee5eb;
-      }
-      .form-section {
-        margin: 20px 0;
-        padding: 20px;
-        border: 1px solid #ddd;
-        border-radius: 8px;
-      }
-      .form-section h2 {
-        margin-top: 0;
-        color: #555;
-      }
      form {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
-      input[type="email"] {
-        padding: 8px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-      }
-      button {
-        padding: 10px;
-        background-color: #007bff;
-        color: white;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-      }
-      button:hover {
-        background-color: #0056b3;
-      }
      .unsubscribe-btn {
        background-color: #dc3545;
      }
@@ -93,12 +42,14 @@
      <h2>Subscribe to Newsletter</h2>
      <form method="post">
        <input type="hidden" name="action" value="subscribe" />
-        <input
-          type="email"
-          name="email"
-          placeholder="Enter your email address"
-          required
-        />
+        <div class="form-group">
+          <input
+            type="email"
+            name="email"
+            placeholder="Enter your email address"
+            required
+          />
+        </div>
        <button type="submit">Subscribe</button>
      </form>
    </div>
@@ -107,12 +58,14 @@
      <h2>Unsubscribe from Newsletter</h2>
      <form method="post">
        <input type="hidden" name="action" value="unsubscribe" />
-        <input
-          type="email"
-          name="email"
-          placeholder="Enter your email address"
-          required
-        />
+        <div class="form-group">
+          <input
+            type="email"
+            name="email"
+            placeholder="Enter your email address"
+            required
+          />
+        </div>
        <button type="submit" class="unsubscribe-btn">Unsubscribe</button>
      </form>
    </div>
--- a/templates/unsubscribe_confirmation.html
+++ b/templates/unsubscribe_confirmation.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Unsubscription Confirmed</title>
+    <link rel="stylesheet" href="/static/css/styles.css" />
+    <style>
+      .confirmation-container {
+        text-align: center;
+      }
+      .icon {
+        font-size: 48px;
+        color: #28a745;
+        margin-bottom: 20px;
+      }
+      .back-link {
+        margin-top: 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="confirmation-container">
+      <div class="icon">✓</div>
+      <h1>Unsubscription Confirmed</h1>
+      <p>
+        You have been successfully unsubscribed from our newsletter. We're sorry
+        to see you go, but you can always subscribe again if you change your
+        mind.
+      </p>
+      <p>
+        If you unsubscribed by mistake or have any questions, please feel free
+        to contact us.
+      </p>
+      <a href="/" class="back-link">Return to Homepage</a>
+    </div>
+  </body>
+</html>