Learn how to create a stylish and responsive email subscription box using HTML and CSS with simple steps and clean code for your website or blog.
Multi Step Email Subscription FormTable of Contents
Want to collect email addresses from your website visitors? An Email Subscription Box is the perfect tool to grow your subscriber list. It helps you stay in touch with users, send updates, and build your audience.
In this blog, we’ll show you how to create a modern and responsive email subscription box using only HTML and CSS. No JavaScript or backend needed — just clean and simple code!
Prerequisites
Before we begin, make sure you have:
- Basic knowledge of HTML and CSS
- A simple code editor like VS Code, Sublime Text, or Notepad++
- A modern web browser to preview your design
Source Code
Step 1 (HTML Code):
To get started, we first need to create a basic HTML file. In this file, we will include the main structure for our email subscription box. Here's a breakdown of each part:
<!DOCTYPE html>
- Declares the document type as HTML5.
<html lang="en">
- Begins the HTML document and sets the language to English.
<head> Section
This part includes meta info, styles, and fonts:
<meta charset="UTF-8" />: Sets character encoding to UTF-8 (supports all characters).<meta name="viewport" content="width=device-width, initial-scale=1.0" />: Makes the layout responsive on mobile devices.<title>Subscribe - Future Drop</title>: Sets the title shown in the browser tab.<link href="https://fonts.googleapis.com/...>: Imports the "Outfit" font from Google Fonts in three weights (400, 600, 700).<link rel="stylesheet" href="styles.css">: Links an external CSS file for styles.
<body> Section
1. Toggle Dark Mode Button
<button class="toggle-mode" onclick="toggleMode()">Toggle Dark Mode</button>- A button with onclick="toggleMode()" that calls a JavaScript function toggleMode() (defined in script.js) to switch between light and dark modes.
2. Subscription Container
<div class="subscription-container">This is the main box for the email subscription UI.
- <h2>Be the First to Know</h2>
Title encouraging users to subscribe.
- <p>Get exclusive updates...</p>
Short description of what the user will get.
- <input type="email"... />
Email input field with placeholder text.
- required ensures the user must enter a value before submitting.
- <button class="submit-btn"...>
Submit button labeled “Count Me In 🌟”
- Calls submitForm() JavaScript function on click (defined in script.js).
- <div class="thank-you" id="thankYou">You're on the list! ✅</div>
A thank you message, hidden by default using CSS and shown after successful form submission.
<script src="script.js"></script>
Links to an external JavaScript file (script.js) that:
- Handles form submission logic (submitForm() function),
- Handles dark mode toggling (toggleMode() function).
Step 2 (CSS Code):
Once the basic HTML structure of the subscription box is in place, the next step is to add styling to the subscription box using CSS. Here's a section-by-section explanation:
:root and Theme Variables
Light Mode (Default)
:root {
--bg-start: #cce3f7;
--bg-end: #ffe6f0;
...
}- Defines CSS variables (custom properties) for colors and styles.
- These variables are reused throughout the code (e.g., var(--text-color)) for consistency and easy theming.
Dark Mode
body.dark-mode {
--bg-start: #1e1e2f;
--bg-end: #2e2e40;
...
}- Overrides the variables when the body has class dark-mode (e.g., after clicking the toggle button).
- Provides darker colors, glowing effects, and contrasting text for a dark theme.
Global Reset and Font
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Outfit', sans-serif;
}- Resets default browser styles.
- Uses Google’s "Outfit" font throughout the page.
Body Style
body {
background: linear-gradient(...);
display: flex;
align-items: center;
justify-content: center;
...
}- Sets a gradient background using theme variables.
- Centers the content vertically and horizontally.
- Applies smooth transition on background change for dark mode.
Toggle Dark Mode Button
.toggle-mode {
position: absolute;
top: 20px;
right: 20px;
...
}- Positioned at the top-right corner.
- Styled with gradient background and rounded corners.
- Clicking it triggers toggleMode() (defined in JS) to switch dark/light modes.
Subscription Container
.subscription-container {
...
background: var(--glass);
border: 1px solid var(--border-glow);
backdrop-filter: blur(20px);
...
}- A glassmorphic card (transparent + blurred background).
- Smooth box shadow and rounded corners.
- animation: dropIn makes it slide in from the top.
Spinning Emoji
.subscription-container::before {
content: '🌸';
position: absolute;
...
animation: spin 10s linear infinite;
}- Adds a spinning flower emoji in the corner for a fun decorative effect.
Headings and Text
.subscription-container h2, p {
color: var(--text-color);
}- Uses theme-based text colors.
- Clean and readable typography.
Email Input Field
input[type='email'] {
...
background: var(--input-bg);
color: var(--text-color);
}- Full width, padded, rounded field.
- Light transparent background in both themes.
- Transitions smoothly when focused or styled.
Placeholder Text
input::placeholder {
color: var(--placeholder);
}- Faded placeholder color, adjustable per theme.
Submit Button
button.submit-btn {
...
background: var(--btn-gradient);
...
}
button.submit-btn:hover {
transform: scale(1.05);
}- Uses gradient background.
- Slight zoom-in effect on hover for interactivity.
Thank You Message
.thank-you {
display: none;
}- Hidden by default.
- Shown via JavaScript after form submission.
Animations
@keyframes dropIn { ... }
@keyframes spin { ... }- dropIn: makes the form appear by sliding down.
- spin: continuously rotates the emoji.
Responsive Design
@media (max-width: 480px) {
.subscription-container {
padding: 30px 25px;
}
}- Makes the form more compact on small screens (like mobiles).
:root {
--bg-start: #cce3f7;
--bg-end: #ffe6f0;
--glass: rgba(255, 255, 255, 0.15);
--border-glow: rgba(255, 255, 255, 0.3);
--btn-gradient: linear-gradient(135deg, #ffd6e0, #d7f9ff);
--input-bg: rgba(255, 255, 255, 0.25);
--text-color: #333;
--placeholder: #aaa;
--thankyou-color: #333;
}
body.dark-mode {
--bg-start: #1e1e2f;
--bg-end: #2e2e40;
--glass: rgba(255, 255, 255, 0.05);
--border-glow: rgba(255, 255, 255, 0.1);
--btn-gradient: linear-gradient(135deg, #2af598, #009efd);
--input-bg: rgba(255, 255, 255, 0.1);
--text-color: #f3f3f3;
--placeholder: #ccc;
--thankyou-color: #fff;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Outfit', sans-serif;
}
body {
background: linear-gradient(120deg, var(--bg-start), var(--bg-end));
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
transition: background 0.5s ease;
}
.toggle-mode {
position: absolute;
top: 20px;
right: 20px;
background: var(--btn-gradient);
color: var(--text-color);
padding: 8px 16px;
border-radius: 8px;
font-weight: 600;
border: none;
cursor: pointer;
z-index: 10;
}
.subscription-container {
position: relative;
width: 90%;
max-width: 450px;
padding: 40px;
background: var(--glass);
border: 1px solid var(--border-glow);
border-radius: 30px;
backdrop-filter: blur(20px);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
text-align: center;
animation: dropIn 1s ease-out;
transition: background 0.5s ease, border 0.5s ease;
}
.subscription-container::before {
content: '🌸';
position: absolute;
font-size: 50px;
top: -25px;
right: -25px;
animation: spin 10s linear infinite;
}
.subscription-container h2 {
font-size: 28px;
font-weight: 700;
color: var(--text-color);
margin-bottom: 10px;
}
.subscription-container p {
color: var(--text-color);
font-size: 15px;
margin-bottom: 25px;
}
input[type='email'] {
width: 100%;
padding: 14px;
border-radius: 12px;
border: none;
outline: none;
background: var(--input-bg);
color: var(--text-color);
font-size: 15px;
margin-bottom: 20px;
transition: all 0.3s ease;
}
input::placeholder {
color: var(--placeholder);
}
button.submit-btn {
width: 100%;
padding: 14px;
border: none;
border-radius: 12px;
background: var(--btn-gradient);
color: var(--text-color);
font-weight: 600;
cursor: pointer;
transition: transform 0.2s ease;
}
button.submit-btn:hover {
transform: scale(1.05);
}
.thank-you {
margin-top: 20px;
color: var(--thankyou-color);
font-size: 16px;
display: none;
}
@keyframes dropIn {
from {
opacity: 0;
transform: translateY(-40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@media (max-width: 480px) {
.subscription-container {
padding: 30px 25px;
}
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript. Here's a breakdown of each part:
submitForm() – Handle Form Submission
function submitForm() {
const email = document.getElementById('email').value;
const thankYou = document.getElementById('thankYou');
if (email.trim() !== '') {
thankYou.style.display = 'block';
document.getElementById('email').value = '';
setTimeout(() => {
thankYou.style.display = 'none';
}, 5000);
}
}What it does:
1. Get email input value:
const email = document.getElementById('email').value;- Fetches the text entered in the email field.
2. Get the thank-you message element:
const thankYou = document.getElementById('thankYou');3. Check if email is not empty:
if (email.trim() !== '')- Ensures the input is not just empty spaces.
4. Show thank-you message:
thankYou.style.display = 'block';- Makes the hidden message visible.
5. Clear the input field:
document.getElementById('email').value = '';6. Auto-hide the thank-you message after 5 seconds:
setTimeout(() => {
thankYou.style.display = 'none';
}, 5000);Result:
- Shows a confirmation message for 5 seconds when a valid email is entered and then disappears automatically.
toggleMode() – Toggle Dark Mode
function toggleMode() {
document.body.classList.toggle('dark-mode');
}What it does:
- Adds or removes the dark-mode class from the
<body>tag when the "Toggle Dark Mode" button is clicked.
.classList.toggle('dark-mode'):
- If dark-mode is not there, it adds it.
- If dark-mode is already there, it removes it.
This triggers the CSS rules in:
- body.dark-mode { ... }
...to switch the theme of the page dynamically.
function submitForm() {
const email = document.getElementById('email').value;
const thankYou = document.getElementById('thankYou');
if (email.trim() !== '') {
thankYou.style.display = 'block';
document.getElementById('email').value = '';
setTimeout(() => {
thankYou.style.display = 'none';
}, 5000);
}
}
function toggleMode() {
document.body.classList.toggle('dark-mode');
}Final Output:
Conclusion:
Creating an email subscription box using only HTML and CSS is simple and very effective. It gives your visitors an easy way to subscribe to your updates and helps you grow your audience.
You can always add more features like email validation, animations, or connect it with a service like Mailchimp later on.
With this basic design, you now have a clean and responsive subscription box ready to be used on any website!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
