Design a Subscription Page using HTML and CSS

Last Updated : 17 Nov, 2023

In this article, we will see how to design a Subscription Page using HTML and CSS. The subscription page is a popup that has an input field for email ID and a button to subscribe the newsletter. We create a card that have an input box and a submit button, enabling users to subscribe to any newsletter using their email address. Once subscribed, the user will receive a message thanking them for subscribing to the newsletter.

Approach

First create an HTML card and center in the window, including an input box for email, and a submit button.
Create a CSS file to style your card. Style the input box, paragraphs, and button to make it visually appealing.
Add JavaScript to listen for the form submission and prevent the default form submission action.
Use JavaScript to display a “Thanks for subscribing” message after submitting the form by changing its display property to “block”.

Example: This example describes the basic implementation of a Subscription page using HTML, CSS, and JavaScript.

HTML

<!-- index.html -->
  
<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title>Design a Newsletter</title> 
    <link rel="stylesheet" href="style.css"> 
</head> 
  
<body> 
    <div class="container"> 
        <div class="card"> 
            <h2>Subscribe to GFG Newsletter</h2> 
            <p>Be Updated with latest technologies</p> 
            <form id="thanks" method="POST"> 
                <input type="email" name="email" 
                    id="email" 
                    placeholder="Enter your email" 
                    required> 
                <button type="submit"> 
                    Subscribe 
                </button> 
            </form> 
              
            <p class="msg" id="congo"> 
                Thanks for subscribing! 
            </p> 
        </div> 
    </div> 
  
    <script> 
        const form = document.getElementById("thanks"); 
        const successMessage = 
            document.getElementById("congo"); 
  
        form.addEventListener("submit", function (e) { 
            e.preventDefault(); 
            successMessage.style.display = "block"; 
        }); 
    </script> 
</body> 
  
</html>

CSS

/* style.css */
body { 
    font-family: Arial, sans-serif; 
    background-color: #f2f2f2; 
    margin: 0; 
    padding: 0; 
} 
  
.card { 
    background-color: #ffffff; 
    border-radius: 10px; 
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.4); 
    padding: 50px; 
    text-align: center; 
    max-width: 400px; 
} 
  
.container { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
} 
  
h2 { 
    color: #36b75a; 
    margin-bottom: 10px; 
} 
  
  
form { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
} 
  
p { 
    color: #666; 
} 
  
.msg { 
    display: none; 
    color: green; 
    margin-top: 40px; 
} 
  
  
input[type="email"] { 
    width: 65%; 
    padding: 12px; 
    margin-bottom: 15px; 
    border: 1px solid #ccc; 
    border-radius: 7px; 
} 
  
button { 
    background-color: crimson; 
    color: #fff; 
    padding: 10px 10px; 
    margin-top: 5px; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer; 
    transition: background-color 0.4s ease; 
} 
  
button:hover { 
    background-color: #65686b; 
}