Newsletter Section

About this module

A newsletter capture that validates the email and shows an inline success message with JavaScript.

Installation

1. 1

   Create the files

   Create `index.html` and `style.css` in the same folder.

2. 2

   Paste the code

   Copy each file's source into its matching file.

3. 3

   Open in the browser

   Open `index.html` in any modern browser.

Usage

1. 1

   Copy the HTML

   Paste the section markup where you need it.

   <link rel="stylesheet" href="style.css" />
   <script src="script.js"></script>
   <section class="mh-sec">
     <div class="mh-container mh-news">
       <span class="mh-eyebrow">Newsletter</span>
       <h2 class="mh-h2">Get new modules weekly</h2>
       <p class="mh-sub">One email every Friday with the latest components and animations.</p>
       <form id="mh-news" class="mh-news-form" novalidate>
         <label class="mh-sr" for="n-email">Email address</label>
         <input id="n-email" type="email" placeholder="you@example.com" />
         <button type="submit">Subscribe</button>
       </form>
       <p id="mh-status" class="mh-status" role="status" aria-live="polite"></p>
     </div>
   </section>

2. 2

   Wire up the script

   Include `script.js` before the closing body tag.

   const form = document.getElementById("mh-news");
   const status = document.getElementById("mh-status");
   form.addEventListener("submit", (e) => {
     e.preventDefault();
     const email = form.querySelector("input").value.trim();
     const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
     if (!valid) { status.textContent = "Please enter a valid email."; status.className = "err"; return; }
     status.textContent = "✓ You're subscribed. Welcome aboard!";
     status.className = "ok";
     form.querySelector("input").value = "";
   });