Email Subscription Form | HTML, CSS & JavaScript

Email Subscription Form with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #15

Project Overview

The Email Subscription Form is a beginner-friendly project built using HTML, CSS, and JavaScript. It allows users to enter their email address and subscribe through a simple form interface. The application checks whether the user has entered a valid email address before displaying a success or error message. JavaScript reads the user’s input, validates the email address, prevents invalid submissions, and updates the webpage dynamically without refreshing it.

By building this project beginners can practice working with forms, input fields, event listeners, conditional statements, regular expressions, and DOM manipulation.

Key Features

Email Input Field: Users can enter their email address into a dedicated input field. The form provides a simple way to collect an email address from the user.
Email Validation: JavaScript checks whether the entered email address follows a valid email format. This helps prevent users from submitting incorrect or incomplete email addresses.
Empty Input Validation: The application checks whether the email input is empty before processing the form. If no email address is entered, an appropriate message can be displayed.
Success Message: When a valid email address is submitted, the application displays a success message. This provides immediate feedback that the subscription action was completed.
Error Message: If the email address is invalid, JavaScript displays an error message. This helps users understand that they need to correct their input.
Real-Time User Feedback: The form updates messages dynamically based on the user’s input. Users do not need to refresh the webpage to see validation results.
Form Submission Handling: JavaScript handles the form submission using an event listener and prevents the browser’s default behavior when necessary. This allows the application to control the validation process.
Simple and Clean Interface: The project uses a clean layout that keeps the email field and subscription button easy to locate. This makes the form simple for users to understand.
Responsive Design: The Email Subscription Form can adjust to different screen sizes. Therefore, it can be comfortably used on desktops, tablets, and mobile devices.
Easy to Extend: Developers can expand this project by connecting it to a backend, storing subscriber information, or integrating it with an email marketing service.

What You'll Learn

Understand how HTML forms collect user information.
Learn how to work with email input fields.
Practice selecting HTML elements using JavaScript.
Understand how form submission events work.
Learn how preventDefault() controls form submission.
Practice reading values from input fields.
Understand how conditional statements validate user input.
Learn how to check whether an input field is empty.
Practice validating an email address.
Understand how JavaScript updates messages dynamically.
Learn how to display success and error messages.

HTML Code

HTML creates the structure of the Email Subscription Form. First, the style.css file is linked inside the <head> section so CSS can control the appearance and layout of the application. The main content is placed inside the subscription form container, which holds the heading, description, email input field, subscription button, and message area.

The email input allows users to enter their email address, while the Subscribe button submits the form. A separate message element provides space for JavaScript to display validation, error, or success messages based on the user’s input. Finally, the script.js file is loaded at the bottom of the <body> so JavaScript can access the form elements and handle the subscription functionality.

<!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

CSS controls the appearance and layout of the Email Subscription Form. The body uses Flexbox to center the main form on the page, while the main container uses padding, rounded corners, and a shadow to create a clean card-style interface.

The email input and Subscribe button are styled to make them easy to identify and use. Additional styles can be used for success and error messages so users can clearly understand the result of their submission. Responsive CSS rules also help the form remain comfortable to use on smaller screens.

* {
  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

The JavaScript code handles the validation and interaction of the Email Subscription Form. First, it selects the form, email input, and message element from the HTML. An event listener is then added to detect when the user submits the form.

When the form is submitted, JavaScript reads the value entered into the email input and removes unnecessary spaces using .trim(). The code checks whether the input is empty and whether the entered value follows a valid email format. If the email address is invalid, JavaScript displays an error message and prevents the subscription from continuing.

When the user enters a valid email address, the application displays a success message and can clear the input field. The DOM is updated instantly, allowing users to receive feedback without refreshing the webpage.

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);
}