Design a Subscription Page using HTML and CSS
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:
Contact Us