A subscription page is a web page where users can sign up to receive regular updates, newsletters, or services. It typically includes a form for users to enter their email address and possibly other details, along with a submit button. In this article, we will see how to design a subscription page using
Approach :
- Created a simple HTML structure with a form for the subscribing to the newsletter.
- Styled the elements using the Tailwind CSS classes to achieve a clean and modern design.
- Include an input field for the email address and a submit button, with the input field marked as required.
- Added JavaScript to the handle form submission and display a success message upon subscribing.
Example: Implementation to design a subscription page.
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< title >Newsletter</ title >
< link href =
rel = "stylesheet" >
</ head >
< body class = "bg-gray-200" >
< div class = "container flex justify-center items-center h-screen" >
< div class = "card bg-white shadow-lg rounded-lg p-8 max-w-md" >
< h2 class = "text-green-600 text-2xl font-bold mb-4" >
Subscribe to GFG Newsletter
</ h2 >
< p class = "text-gray-600 mb-4" >
Be Updated with latest technologies
</ p >
< form id = "thanks" method = "POST"
class = "flex flex-col items-center" >
< input type = "email" name = "email" id = "email"
placeholder = "Enter your email"
class="w-full px-4 py-2 border border-gray-300
rounded-md mb-4" required>
< button type = "submit"
class="bg-green-500 hover:bg-green-600
text-white font-bold px-4 py-2 rounded-md
transition duration-300 ease-in-out mb-4">
Subscribe
</ button >
</ form >
< p class = "msg text-green-500 mt-4 hidden" >
Thanks for subscribing!
</ p >
</ div >
</ div >
< script >
const form = document.getElementById("thanks");
const successMessage = document.querySelector(".msg");
form.addEventListener("submit", function (e) {
e.preventDefault();
successMessage.classList.remove("hidden");
});
</ script >
</ body >
</ html >
|
Output :
Recommended Articles