A footer with newsletter signup built using pure HTML and CSS that includes an email input and call to action at the bottom of the page, allowing users to subscribe without interrupting their browsing experience or relying on JavaScript.
Usage
This component is ideal for websites where long term engagement matters, such as blogs, content platforms, SaaS products, documentation sites, or portfolios that want to convert passive readers into subscribers at a natural stopping point.
Implementation
The signup area is implemented using semantic form elements, CSS layout alignment, and subtle visual emphasis, ensuring the input and button are accessible, responsive, and visually integrated into the footer layout.
HTML
<footer class="ss-footer">
<p>Subscribe to our newsletter</p>
<div class="subscribe-box">
<input type="email" placeholder="Email address">
<button class="subscribe-btn">Subscribe</button>
</div>
</footer>CSS
.ss-footer{
max-width:420px;
margin:auto;
padding:24px 16px;
text-align:center;
border-radius:14px;
background:var(--footer-bg);
color:var(--footer-text);
}
.ss-footer p{
font-size:14px;
margin-bottom:12px;
}
.subscribe-box{
display:flex;
gap:8px;
justify-content:center;
}
.subscribe-box input{
flex:1;
max-width:220px;
padding:10px 12px;
border-radius:8px;
border:1px solid var(--input-border);
background:var(--input-bg);
color:var(--input-text);
font-size:14px;
outline:none;
}
.subscribe-box input::placeholder{
color:var(--input-placeholder);
}
.subscribe-btn{
padding:10px 14px;
border-radius:8px;
border:none;
cursor:pointer;
font-size:14px;
background:var(--btn-bg);
color:var(--btn-text);
}
:root{
--footer-bg:#f8fafc;
--footer-text:#0f172a;
--input-bg:#ffffff;
--input-text:#0f172a;
--input-border:#cbd5e1;
--input-placeholder:#64748b;
--btn-bg:#2563eb;
--btn-text:#ffffff;
}
@media (prefers-color-scheme: dark){
:root{
--footer-bg:#0f172a;
--footer-text:#e5e7eb;
--input-bg:#020617;
--input-text:#e5e7eb;
--input-border:#1f2937;
--input-placeholder:#94a3b8;
--btn-bg:#3b82f6;
--btn-text:#ffffff;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses a lightweight email input form
- Positioned at a natural conversion point
- Keeps signup unobtrusive yet visible
- Designed for content-driven websites
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.