Email Subscription Form | HTML, CSS & JavaScript

Email Subscription Form with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #15

Project Overview

An Email Subscription Form built using HTML, CSS, and JavaScript that allows users to subscribe to updates by entering their email address.
The project validates user input, provides instant feedback, and ensures only properly formatted email addresses are accepted, improving data quality and user experience.

Key Features

Email input with format validation.
Displays success and error messages instantly.
Prevents submission of empty or invalid email addresses.
Clean, responsive, and user-friendly design.
Easy to integrate into landing pages or newsletters.
Can be extended to work with backend or email services.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Email Subscription</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="subscribe-container">
    <h2>Subscribe to our Newsletter</h2>
    <p>Get the latest updates directly in your inbox.</p>

    <form id="subscribeForm">
      <input
        type="email"
        id="emailInput"
        placeholder="Enter your email"
        required
      />
      <button type="submit">Subscribe</button>
    </form>

    <p class="message" id="message"></p>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

* {
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  background: #042453;
  display: flex;
  justify-content: center;
  align-items: center;
}

.subscribe-container {
  background: #ffffff;
  width: 340px;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

h2 {
  margin-bottom: 10px;
}

p {
  font-size: 14px;
  color: #555;
}

form {
  margin-top: 15px;
  display: flex;
}

input {
  flex: 1;
  padding: 10px;
  border-radius: 6px 0 0 6px;
  border: 1px solid #ccc;
  outline: none;
}

button {
  padding: 10px 15px;
  border: none;
  border-radius: 0 6px 6px 0;
  background: #4f46e5;
  color: white;
  cursor: pointer;
}

.message {
  margin-top: 12px;
  font-size: 14px;
}

Javascript Code

const form = document.getElementById("subscribeForm");
const emailInput = document.getElementById("emailInput");
const message = document.getElementById("message");

form.addEventListener("submit", e => {
  e.preventDefault();

  const email = emailInput.value.trim();

  if (!validateEmail(email)) {
    message.style.color = "red";
    message.innerText = "Please enter a valid email address ❌";
    return;
  }

  message.style.color = "green";
  message.innerText = "Subscribed successfully 🎉";
  emailInput.value = "";
});

// Email validation
function validateEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}