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 : 100 vh;
} h 2 {
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.4 s ease;
} button:hover { background-color : #65686b ;
} |
Output: