Every Blogger website needs a good subscribe form to grow an audience. A stylish, working form encourages visitors to sign up for updates.
We’ve made 12 unique subscribe form styles that work perfectly on Blogger. Some are simple HTML+CSS subscribe forms, while others use JavaScript with API subscribe forms for better features.
All designs are 100% free subscribe form codes, easy to add on Blogger, and look great on mobile or desktop. You can place them in Blogger sidebar widgets, inside posts, or footers.
These forms are designed to match any Blogger niche — whether you run a Blogger news blog, Blogger personal blog, Blogger shopping site, or Blogger tech tutorial blog. Their responsive subscribe form designs and smooth performance make them perfect for email list building on Blogger.
Subscribe Form Styles
Table of Contents
Subscribe Form Style 1:
<form class="subscribe-form style1" action="https://api.follow.it/subscribe?pub=CQoJCcEXztieMrPUAQYKlNRPCjlhk9FW" method="post" target="_blank">
<h2>Web Name News Alerts</h2>
<p>Receive breaking news updates directly to your inbox from around the world.</p>
<input type="email" name="email" required placeholder="Your email address" aria-label="Email Address">
<button type="submit">Subscribe Now</button>
<p class="privacy-text">By subscribing, you agree to our <a href="#">Privacy Policy</a>.</p>
</form>
<style>
.subscribe-form.style1{max-width:350px;margin:auto;background:#fff;padding:30px;border-radius:8px;font-family:'Helvetica Neue',sans-serif;color:#333;text-align:center;box-shadow:0 5px 15px rgba(0,0,0,0.05);border:1px solid #eee}
.subscribe-form.style1 h2{margin-top:0;margin-bottom:15px;font-weight:600;color:#000}
.subscribe-form.style1 p{font-size:14px;margin-bottom:25px;line-height:1.5;color:#666}
.subscribe-form.style1 input[type="email"]{width:100%;padding:12px 15px;border:1px solid #ddd;border-radius:6px;font-size:14px;margin-bottom:20px;box-sizing:border-box;outline:none;transition:border 0.3s}
.subscribe-form.style1 input[type="email"]:focus{border-color:#000}
.subscribe-form.style1 button{width:100%;background:#000;color:#fff;border:none;border-radius:6px;padding:14px 0;font-size:15px;font-weight:500;cursor:pointer;transition:background 0.3s ease}
.subscribe-form.style1 button:hover{background:#333}
.subscribe-form.style1 .privacy-text{font-size:12px;margin-top:20px;color:#999}
.subscribe-form.style1 .privacy-text a{font-weight:500;text-decoration:none;color:#000}
</style>Copy the HTML, CSS, and JS, then paste and customize it in your Blogger post or template.
Subscribe Form Style 2:
<div class="card-stack">
<form class="unique-form style2" action="https://api.follow.it/subscribe" method="post" target="_blank">
<div class="card card-main">
<h2>Stay Updated</h2>
<p>Get breaking news alerts from your web</p>
<div class="input-wrapper">
<input type="email" name="email" placeholder=" " required>
<label>Email Address</label>
</div>
<button type="submit">
Subscribe
<div class="arrow"></div>
</button>
</div>
<div class="card card-shadow"></div>
<div class="card card-shadow"></div>
</form>
</div>
<style>
.card-stack{position:relative;width:320px;margin:2rem auto;perspective:1000px}
.unique-form.style2 .card{background:white;border-radius:16px;padding:2rem;box-shadow:0 4px 12px rgba(0,0,0,0.1);transition:transform 0.3s,box-shadow 0.3s}
.unique-form.style2 .card-main{position:relative;z-index:3;transform:rotateY(0deg) translateZ(0)}
.unique-form.style2 .card-shadow{position:absolute;top:0;left:0;width:100%;height:100%;background:#f5f5f5;z-index:1}
.unique-form.style2 .card-shadow:nth-child(2){z-index:2;transform:rotateY(-5deg) translateZ(-20px)}
.unique-form.style2 .card-shadow:nth-child(3){transform:rotateY(-10deg) translateZ(-40px)}
.unique-form.style2 .card-main:hover{transform:rotateY(5deg) translateZ(20px);box-shadow:0 10px 30px rgba(0,0,0,0.15)}
.unique-form.style2 h2{margin:0 0 0.5rem;font-size:1.5rem;color:#222}
.unique-form.style2 p{margin:0 0 2rem;color:#666;font-size:0.9rem}
.unique-form.style2 .input-wrapper{position:relative;margin-bottom:1.5rem}
.unique-form.style2 input{color:#000;width:100%;padding:1rem;border:2px solid #eee;border-radius:8px;font-size:1rem;transition:border 0.3s}
.unique-form.style2 input:focus{outline:none;border-color:#0066ff}
.unique-form.style2 label{position:absolute;left:1rem;top:1rem;padding:0 0.25rem;background:white;color:#999;font-size:0.9rem;transition:all 0.3s;pointer-events:none}
.unique-form.style2 input:focus + label,.unique-form.style2 input:not(:placeholder-shown) + label{top:-0.6rem;left:0.8rem;font-size:0.75rem;color:#0066ff}
.unique-form.style2 button{width:100%;padding:1rem;background:linear-gradient(135deg,#0066ff,#0052cc);color:white;border:none;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.5rem;transition:transform 0.3s,box-shadow 0.3s}
.unique-form.style2 button:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,102,255,0.3)}
.unique-form.style2 .arrow{width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M8 0L6.59 1.41 12.17 7H0v2h12.17l-5.58 5.59L8 16l8-8z'/%3E%3C/svg%3E") no-repeat center;transition:transform 0.3s}
.unique-form.style2 button:hover .arrow{transform:translateX(3px)}
</style>Paste the given HTML and CSS (plus JS if any) into your Blogger post and customize as needed.
Subscribe Form Style 3:
<form class="unique-form style3" action="https://api.follow.it/subscribe" method="post" target="_blank">
<div class="form-icon">📰</div>
<h2>News Alerts</h2>
<p>Get important updates directly to your inbox</p>
<div class="input-container">
<input type="email" name="email" placeholder="Your email" required>
<span class="focus-border"></span>
</div>
<button type="submit">
<span>Subscribe</span>
</button>
<div class="privacy">
<small>We'll never share your email. <a href="#">Privacy Policy</a></small>
</div>
</form>
<style>
.unique-form.style3{max-width:300px;margin:2rem auto;padding:2rem;border-radius:20px;background:#f0f0f0;box-shadow:8px 8px 16px #d9d9d9,-8px -8px 16px #ffffff;font-family:'Segoe UI',sans-serif;text-align:center}
.unique-form.style3 .form-icon{font-size:2.5rem;margin-bottom:1rem}
.unique-form.style3 h2{margin:0 0 0.5rem;color:#333;font-weight:600}
.unique-form.style3 p{margin:0 0 1.5rem;color:#666;font-size:0.9rem}
.unique-form.style3 .input-container{position:relative;margin-bottom:1.5rem}
.unique-form.style3 input{width:100%;padding:1rem;border:none;border-radius:12px;background:#f0f0f0;box-shadow:inset 3px 3px 6px #d9d9d9,inset -3px -3px 6px #ffffff;font-size:0.9rem;color:#333;transition:all 0.3s}
.unique-form.style3 input:focus{outline:none;box-shadow:inset 5px 5px 10px #d9d9d9,inset -5px -5px 10px #ffffff}
.unique-form.style3 .focus-border{position:absolute;bottom:0;left:50%;width:0;height:2px;background:#0066ff;transition:all 0.3s}
.unique-form.style3 input:focus ~ .focus-border{width:100%;left:0}
.unique-form.style3 button{width:100%;padding:1rem;border:none;border-radius:12px;background:linear-gradient(145deg,#e0e0e0,#ffffff);box-shadow:5px 5px 10px #d9d9d9,-5px -5px 10px #ffffff;color:#0066ff;font-weight:600;cursor:pointer;transition:all 0.3s}
.unique-form.style3 button:hover{color:white;background:linear-gradient(145deg,#0052cc,#0066ff);box-shadow:5px 5px 10px #d9d9d9,-5px -5px 10px #ffffff,inset 3px 3px 5px rgba(0,0,0,0.1)}
.unique-form.style3 .privacy{margin-top:1.5rem;color:#999}
.unique-form.style3 .privacy a{color:#0066ff;text-decoration:none}
</style>Copy and paste this style’s code into your Blogger post or template, then personalize it.
Subscribe Form Style 4:
<form class="unique-form style5" action="https://api.follow.it/subscribe" method="post" target="_blank">
<div class="newspaper-header">
<div class="date">DAILY EDITION</div>
<h2>WEB NAME</h2>
<div class="breaking-news">BREAKING NEWS ALERTS</div>
</div>
<div class="form-content">
<p>Subscribe to receive urgent news updates directly to your inbox as they happen.</p>
<div class="input-wrapper">
<input type="email" name="email" placeholder="YOUR EMAIL ADDRESS" required>
<div class="underline"></div>
</div>
<button type="submit">
SUBSCRIBE NOW
<div class="corner"></div>
</button>
<div class="privacy-notice">
*By subscribing you agree to receive emails from Al Jazeera
</div>
</div>
</form>
<style> .unique-form.style5{max-width:400px;margin:2rem auto;background:#f9f4e6;border:2px solid #333;box-shadow:8px 8px 0 #333;font-family:'Times New Roman',serif;color:#333;position:relative;overflow:hidden}
.unique-form.style5::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient( #f9f4e6,#f9f4e6 24px,#ddd 25px,#ddd 26px );opacity:0.3;pointer-events:none}
.unique-form.style5 .newspaper-header{padding:1.5rem;background:#333;color:white;text-align:center;border-bottom:2px solid #333}
.unique-form.style5 .date{font-size:0.7rem;letter-spacing:2px;margin-bottom:0.5rem;color:#ccc}
.unique-form.style5 h2{color:#fff;margin:0;font-size:2.5rem;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.unique-form.style5 .breaking-news{font-size:0.9rem;letter-spacing:3px;margin-top:0.5rem;color:#ff4d4d;font-weight:700}
.unique-form.style5 .form-content{padding:2rem}
.unique-form.style5 p{margin:0 0 2rem;font-size:1rem;line-height:1.5}
.unique-form.style5 .input-wrapper{position:relative;margin-bottom:2rem}
.unique-form.style5 input{width:100%;padding:0.8rem 0;background:transparent;border:none;border-bottom:2px solid #333;font-family:'Courier New',monospace;font-size:1rem;font-weight:700;letter-spacing:1px;color:#333;transition:all 0.3s}
.unique-form.style5 input:focus{outline:none;border-bottom-color:#ff4d4d}
.unique-form.style5 .underline{position:absolute;bottom:0;left:0;width:0;height:2px;background:#ff4d4d;transition:width 0.3s}
.unique-form.style5 input:focus ~ .underline{width:100%}
.unique-form.style5 button{width:100%;padding:1rem;background:#333;color:white;border:none;font-family:'Courier New',monospace;font-size:1rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;position:relative;overflow:hidden;transition:all 0.3s}
.unique-form.style5 button:hover{background:#ff4d4d;letter-spacing:2px}
.unique-form.style5 .corner{position:absolute;bottom:0;right:0;width:0;height:0;border-style:solid;border-width:0 0 20px 20px;border-color:transparent transparent #ff4d4d transparent;transition:all 0.3s}
.unique-form.style5 button:hover .corner{border-width:0 0 30px 30px}
.unique-form.style5 .privacy-notice{margin-top:1.5rem;font-size:0.7rem;font-style:italic;text-align:center;color:#666}
</style>To apply this style, copy the code and paste it into your Blogger post or template.
Subscribe Form Style 5:
<form class="unique-form style6" action="https://api.follow.it/subscribe" method="post" target="_blank">
<div class="cyber-header">
<span class="pixel-corner top-left"></span>
<span class="pixel-corner top-right"></span>
<h2>NEWS<span>ALERTS</span></h2>
<p>DIRECT FEED TO YOUR INBOX</p>
</div>
<div class="cyber-input">
<input type="email" name="email" required placeholder=" ">
<label>ENTER_EMAIL</label>
<div class="glow-line"></div>
</div>
<button type="submit">
<span>SUBSCRIBE</span>
<div class="button-light"></div>
</button>
<div class="cyber-footer">
<div class="scanline"></div>
<p>PRIVACY_POLICY_ACCEPTED</p>
</div>
</form>
<style>
.unique-form.style6{max-width:320px;margin:2rem auto;padding:1.5rem;background:#0a0a16;border:1px solid #2a2a4a;font-family:'Courier New',monospace;color:#00f0ff;position:relative;box-shadow:0 0 20px rgba(0,240,255,0.2)}
.unique-form.style6 .pixel-corner{position:absolute;width:10px;height:10px;border:2px solid #00f0ff}
.unique-form.style6 .top-left{top:10px;left:10px;border-right:none;border-bottom:none}
.unique-form.style6 .top-right{top:10px;right:10px;border-left:none;border-bottom:none}
.unique-form.style6 .cyber-header{text-align:center;margin-bottom:2rem;position:relative}
.unique-form.style6 .cyber-header h2{color:#fff;margin:0;font-size:1.8rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-shadow:0 0 10px rgba(0,240,255,0.5)}
.unique-form.style6 .cyber-header h2 span{color:#ff00aa;margin-left:0.5rem}
.unique-form.style6 .cyber-header p{margin:0.5rem 0 0;font-size:0.7rem;letter-spacing:1px;color:#aaa}
.unique-form.style6 .cyber-input{position:relative;margin-bottom:2rem}
.unique-form.style6 .cyber-input input{width:100%;padding:0.8rem;background:rgba(10,10,30,0.8);border:1px solid #2a2a4a;color:#00f0ff;font-family:'Courier New',monospace;font-size:0.9rem;letter-spacing:1px}
.unique-form.style6 .cyber-input input:focus{outline:none;border-color:#00f0ff}
.unique-form.style6 .cyber-input label{position:absolute;left:0.8rem;top:0.8rem;color:#555;pointer-events:none;transition:all 0.3s}
.unique-form.style6 .cyber-input input:focus + label,.unique-form.style6 .cyber-input input:not(:placeholder-shown) + label{top:-0.7rem;left:0.5rem;font-size:0.7rem;background:#0a0a16;padding:0 0.3rem;color:#00f0ff}
.unique-form.style6 .glow-line{position:absolute;bottom:-2px;left:0;width:0;height:2px;background:#ff00aa;box-shadow:0 0 10px #ff00aa;transition:width 0.5s}
.unique-form.style6 .cyber-input input:focus ~ .glow-line{width:100%}
.unique-form.style6 button{width:100%;padding:1rem;background:#111126;border:1px solid #00f0ff;color:#00f0ff;font-family:'Courier New',monospace;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;position:relative;overflow:hidden;transition:all 0.3s}
.unique-form.style6 button:hover{background:rgba(0,240,255,0.1);text-shadow:0 0 10px rgba(0,240,255,0.7);letter-spacing:3px}
.unique-form.style6 .button-light{position:absolute;top:-10px;left:-10px;width:10px;height:10px;background:#ff00aa;box-shadow:0 0 10px #ff00aa;opacity:0;transition:all 0.3s}
.unique-form.style6 button:hover .button-light{opacity:1;animation:buttonGlow 1s infinite alternate}
@keyframes buttonGlow{0%{opacity:0.3}
100%{opacity:1}
}
.unique-form.style6 .cyber-footer{margin-top:1.5rem;position:relative}
.unique-form.style6 .scanline{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient( to bottom,transparent 0%,rgba(0,240,255,0.05) 50%,transparent 100% );animation:scan 2s linear infinite;pointer-events:none}
@keyframes scan{0%{transform:translateY(-100%)}
100%{transform:translateY(100%)}
}
.unique-form.style6 .cyber-footer p{margin:0;font-size:0.7rem;text-align:center;color:#555}
</style>To use this style, copy the provided HTML and CSS (plus JS if included), paste them into your Blogger post or template, and customize the design to match your site
Subscribe Form Style 6:
<form class="unique-form style7" action="https://api.follow.it/subscribe" method="post" target="_blank">
<div class="sketch-header">
<h2>Newsletter</h2>
<svg class="underline" viewBox="0 0 200 10" preserveAspectRatio="none">
<path d="M0,5 Q50,10 100,5 T200,5" fill="none" stroke="#333" stroke-width="1.5" stroke-linecap="round"></path>
</svg>
</div>
<p>Get hand-picked news stories delivered to your inbox</p>
<div class="sketch-input">
<input type="email" name="email" required placeholder=" ">
<label>Your email address</label>
<div class="doodle"></div>
</div>
<button type="submit">
<span>Subscribe</span>
<svg class="arrow" viewBox="0 0 20 20">
<path d="M10 0L7 3l5 5H0v4h12l-5 5 3 3 10-10z" fill="currentColor"></path>
</svg>
</button>
<div class="sketch-footer">
<p>No spam, just quality content</p>
</div>
</form>
<style> .unique-form.style7{max-width:320px;margin:2rem auto;padding:2rem;background:#fff9f0;border:2px solid #333;border-radius:5px;font-family:'Comic Sans MS','Marker Felt',cursive;color:#333;position:relative;box-shadow:5px 5px 0 rgba(0,0,0,0.1)}
.unique-form.style7::before{content:'';position:absolute;top:-5px;left:-5px;right:-5px;bottom:-5px;border:1px dashed #ccc;border-radius:7px;pointer-events:none}
.unique-form.style7 .sketch-header{text-align:center;margin-bottom:1.5rem}
.unique-form.style7 .sketch-header h2{color:#000;margin:0 0 0.5rem;font-size:1.8rem;font-weight:normal}
.unique-form.style7 .underline{width:100px;height:10px;margin:0 auto}
.unique-form.style7 p{margin:0 0 1.5rem;font-size:0.95rem;line-height:1.4;text-align:center}
.unique-form.style7 .sketch-input{position:relative;margin-bottom:2rem}
.unique-form.style7 .sketch-input input{width:100%;padding:0.8rem;background:transparent;border:1px solid #333;border-radius:3px;font-family:inherit;font-size:1rem;transition:all 0.3s}
.unique-form.style7 .sketch-input input:focus{outline:none;border-color:#ff6b6b;box-shadow:0 0 0 2px rgba(255,107,107,0.3)}
.unique-form.style7 .sketch-input label{position:absolute;left:0.8rem;top:0.8rem;background:#fff9f0;padding:0 0.3rem;color:#666;pointer-events:none;transition:all 0.3s}
.unique-form.style7 .sketch-input input:focus + label,.unique-form.style7 .sketch-input input:not(:placeholder-shown) + label{top:-0.7rem;left:0.5rem;font-size:0.8rem;color:#ff6b6b}
.unique-form.style7 .doodle{position:absolute;bottom:-15px;right:-10px;width:40px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M0,10 Q10,20 20,10 T40,10' fill='none' stroke='%23ff6b6b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat}
.unique-form.style7 button{width:100%;padding:0.8rem;background:#ff6b6b;border:2px solid #333;border-radius:5px;color:white;font-family:inherit;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.5rem;transition:all 0.3s;position:relative;overflow:hidden}
.unique-form.style7 button:hover{background:#ff5252;transform:translateY(-2px);box-shadow:0 4px 0 rgba(0,0,0,0.1)}
.unique-form.style7 button:active{transform:translateY(0);box-shadow:none}
.unique-form.style7 .arrow{width:16px;height:16px;transition:transform 0.3s}
.unique-form.style7 button:hover .arrow{transform:translateX(3px)}
.unique-form.style7 .sketch-footer{margin-top:1.5rem;text-align:center;font-size:0.8rem;color:#666;font-style:italic}
</style>Simply copy the HTML, CSS, and JS, then add it to your Blogger post or template and modify it.
Subscribe Form Style 7:
<form class="unique-form style9" action="https://api.follow.it/subscribe" method="post" target="_blank">
<div class="postcard-stamp">✉️</div>
<div class="postcard-header">
<h2>POSTAL NEWS</h2>
<p>Direct to your mailbox</p>
</div>
<div class="postcard-content">
<div class="handwritten">Dear Reader,</div>
<p>Please send your address to receive our daily news bulletin:</p>
<div class="postcard-input">
<input type="email" name="email" required placeholder=" ">
<label>Your E-Mail</label>
<div class="underline"></div>
</div>
<button type="submit">
<span>Send</span>
</button>
</div>
<div class="postcard-footer">
<p>With kind regards,<br>The News Team</p>
</div>
</form>
<style>
.unique-form.style9{max-width:400px;margin:2rem auto;padding:2rem;background:#fff8e7;border:1px solid #d4c9b8;border-radius:2px;font-family:'Georgia',serif;color:#333;position:relative;box-shadow:0 5px 15px rgba(0,0,0,0.1)}
.unique-form.style9::before{content:'';position:absolute;top:10px;left:10px;right:10px;bottom:10px;border:1px dashed rgba(0,0,0,0.1);pointer-events:none}
.unique-form.style9 .postcard-stamp{position:absolute;top:1rem;right:1rem;font-size:2rem;opacity:0.7}
.unique-form.style9 .postcard-header{text-align:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #d4c9b8}
.unique-form.style9 .postcard-header h2{margin:0;font-size:1.8rem;font-weight:700;letter-spacing:2px;color:#8b4513}
.unique-form.style9 .postcard-header p{margin:0.5rem 0 0;font-size:0.9rem;font-style:italic;color:#666}
.unique-form.style9 .postcard-content{padding:0 1rem}
.unique-form.style9 .handwritten{font-family:'Brush Script MT',cursive;font-size:1.3rem;color:#8b4513;margin-bottom:1rem}
.unique-form.style9 .postcard-content p{margin:0 0 1.5rem;font-size:0.95rem;line-height:1.5}
.unique-form.style9 .postcard-input{position:relative;margin-bottom:2rem}
.unique-form.style9 .postcard-input input{width:100%;padding:0.8rem 0;background:transparent;border:none;border-bottom:1px solid #8b4513;font-family:'Courier New',monospace;font-size:1rem;color:#333;transition:all 0.3s}
.unique-form.style9 .postcard-input input:focus{outline:none;border-bottom-color:#d4a017}
.unique-form.style9 .postcard-input label{position:absolute;left:0;top:0.8rem;color:#8b4513;pointer-events:none;transition:all 0.3s}
.unique-form.style9 .postcard-input input:focus + label,.unique-form.style9 .postcard-input input:not(:placeholder-shown) + label{top:-0.7rem;font-size:0.8rem;color:#d4a017}
.unique-form.style9 .underline{position:absolute;bottom:0;left:0;width:0;height:2px;background:#d4a017;transition:width 0.3s}
.unique-form.style9 .postcard-input input:focus ~ .underline{width:100%}
.unique-form.style9 button{padding:0.8rem 2rem;background:#8b4513;border:none;border-radius:3px;color:white;font-family:'Georgia',serif;font-size:1rem;cursor:pointer;transition:all 0.3s;float:right}
.unique-form.style9 button:hover{background:#d4a017;transform:translateY(-2px);box-shadow:0 2px 5px rgba(0,0,0,0.1)}
.unique-form.style9 .postcard-footer{clear:both;padding-top:1.5rem;margin-top:1.5rem;border-top:1px solid #d4c9b8;font-style:italic;color:#666}
</style>Insert the provided code into your Blogger post or template and tweak it to fit your site.
Subscribe Form Style 8:
<form class="story-form" action="https://api.follow.it/subscribe" method="post" target="_blank">
<div class="story-progress"></div>
<div class="story-content">
<div class="page page1 active">
<h3>Welcome to News Chronicles</h3>
<p>Let's set up your personalized news feed. First, we need your email to begin the journey.</p>
<button type="button" class="next-btn">Continue →</button>
</div>
<div class="page page2">
<div class="input-group">
<input type="email" name="email" required placeholder=" ">
<label>Enter Your E-Mail ...</label>
<div class="underline"></div>
</div>
<p>What type of stories interest you? (Optional)</p>
<div class="options">
<label><input type="checkbox"> World Events</label>
<label><input type="checkbox"> Technology</label>
<label><input type="checkbox"> Science</label>
</div>
<button type="submit">Complete Your Chronicle</button>
</div>
<div class="page page3">
<h3>Your Chronicle Awaits!</h3>
<p>Thank you for joining News Chronicles. The first chapter of your personalized news feed will arrive soon.</p>
<div class="success-icon">✉️</div>
</div>
</div>
</form>
<style>
.story-form{height:400px;max-width:400px;margin:2rem auto;padding:2rem;background:#f9f9f9;border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,0.05);font-family:'Georgia',serif;color:#333;position:relative;overflow:hidden}
.story-progress{position:absolute;top:0;left:0;width:33%;height:3px;background:#8b4513;transition:width 0.5s ease}
.story-content{position:relative;min-height:300px}
.page{position:absolute;top:0;left:0;width:100%;height:100%;padding:1rem;opacity:0;pointer-events:none;transition:opacity 0.5s ease;display:flex;flex-direction:column}
.page.active{opacity:1;pointer-events:all}
.story-form h3{margin:0 0 1rem;font-size:1.5rem;color:#8b4513}
.story-form p{margin:0 0 1.5rem;line-height:1.5;flex-grow:1}
.input-group{position:relative;margin-bottom:1.5rem}
.story-form input[type="email"]{width:100%;padding:0.8rem 0;border:none;border-bottom:1px solid #ddd;background:transparent;font-family:'Georgia',serif;font-size:1rem}
.story-form input:focus{outline:none;border-bottom-color:#8b4513}
.story-form .input-group label{position:absolute;left:0;top:0.8rem;color:#999;pointer-events:none;transition:all 0.3s ease}
.story-form input:focus + label,.story-form input:not(:placeholder-shown) + label{top:-0.7rem;font-size:0.8rem;color:#8b4513}
.underline{position:absolute;bottom:0;left:0;width:0;height:2px;background:#8b4513;transition:width 0.3s ease}
.story-form input:focus ~ .underline{width:100%}
.options{display:grid;gap:0.8rem;margin-bottom:1.5rem}
.options label{display:flex;align-items:center;gap:0.5rem;cursor:pointer;color:#555;position:relative;top:0;font-size:1rem;transition:none}
.next-btn,.story-form button[type="submit"]{padding:0.8rem 1.5rem;background:#8b4513;border:none;border-radius:4px;color:white;font-family:'Georgia',serif;cursor:pointer;transition:all 0.3s ease;align-self:flex-start;margin-top:auto}
.next-btn:hover,.story-form button[type="submit"]:hover{background:#a0522d;transform:translateY(-2px)}
.success-icon{font-size:3rem;text-align:center;margin:1rem 0;animation:float 2s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}
50%{transform:translateY(-10px)}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('.story-form');
const nextBtn = document.querySelector('.next-btn');
const pages = document.querySelectorAll('.page');
const progress = document.querySelector('.story-progress');
if(nextBtn) {
nextBtn.addEventListener('click', function() {
pages[0].classList.remove('active');
pages[1].classList.add('active');
progress.style.width = '66%';
});
}
form.addEventListener('submit', function(e) {
e.preventDefault();
// In a real implementation, you would submit the form here
pages[1].classList.remove('active');
pages[2].classList.add('active');
progress.style.width = '100%';
// Simulate form submission
setTimeout(() => {
form.submit();
}, 2000);
});
});
</script>Copy the given code and paste it inside your Blogger post or template, then customize accordingly.
Subscribe Form Style 9:
<form class="coffee-form" action="https://api.follow.it/subscribe" method="post" target="_blank">
<div class="stain"></div>
<h3 style="color:#000">Morning Brief</h3>
<p>Fresh news delivered with your coffee</p>
<div class="input-wrap">
<input type="email" name="email" required placeholder=" ">
<label>Your email mug</label>
</div>
<button type="submit">Pour Me Updates</button>
<p class="note">No spam, just premium content</p>
</form>
<style>
.coffee-form{max-width:280px;margin:2rem auto;padding:2rem;background:#fffaf0;border-radius:5px;box-shadow:0 5px 15px rgba(0,0,0,0.05);position:relative;overflow:hidden;font-family:'Georgia',serif;color:#5a3921}
.stain{position:absolute;top:-30px;right:-30px;width:100px;height:100px;background:rgba(139,69,19,0.1);border-radius:50%}
.coffee-form h3{margin:0 0 0.5rem;font-size:1.5rem;position:relative}
.coffee-form p{margin:0 0 1.5rem;font-size:0.9rem;color:#8b4513}
.input-wrap{position:relative;margin-bottom:1.5rem}
.coffee-form input{width:100%;padding:0.8rem 0;border:none;border-bottom:1px solid #d2b48c;background:transparent;font-family:'Georgia',serif;color:#5a3921}
.coffee-form input:focus{outline:none;border-bottom-color:#8b4513}
.coffee-form label{position:absolute;left:0;top:0.8rem;color:#a0522d;pointer-events:none;transition:all 0.3s}
.coffee-form input:focus + label,.coffee-form input:not(:placeholder-shown) + label{top:-0.7rem;font-size:0.7rem;color:#5a3921}
.coffee-form button{width:100%;padding:0.8rem;background:#8b4513;border:none;border-radius:4px;color:white;font-family:'Georgia',serif;cursor:pointer;transition:all 0.3s}
.coffee-form button:hover{background:#a0522d;transform:translateY(-2px)}
.note{margin:1rem 0 0;font-size:0.7rem;text-align:center;color:#a0522d;font-style:italic}
</style>Use this style by copying the code and pasting it into your Blogger post or template.
Subscribe Form Style 10:
<div class="hologram-container">
<form class="hologram-form" action="https://api.follow.it/subscribe" method="post" target="_blank">
<div class="hologram-header">
<div class="circuit-line"></div>
<h3 style="color:#fff">NEURAL NETWORK FEED</h3>
<div class="circuit-line"></div>
</div>
<div class="hologram-display">
<p>INITIATE_SUBSCRIPTION_SEQUENCE</p>
<div class="input-line">
<span>> ENTER_RECIPIENT_ID:</span>
<input type="email" name="email" required>
</div>
<div class="scan-beam"></div>
</div>
<div class="hologram-keyboard">
<div class="key-row">
<button type="button" class="key" data-char="A">A</button>
<button type="button" class="key" data-char="S">S</button>
<!-- More keys... -->
</div>
<!-- More key rows... -->
<button type="submit" class="enter-key">TRANSMIT</button>
</div>
</form>
</div>
<style>
.hologram-container{width:100%;max-width:500px;margin:2rem auto}
.hologram-form{background:#001122;border:1px solid #00aaff;border-radius:5px;box-shadow:0 0 20px rgba(0,170,255,0.2);overflow:hidden;font-family:'Courier New',monospace;color:#00ffaa}
.hologram-header{display:flex;align-items:center;padding:1rem;background:rgba(0,50,100,0.5)}
.circuit-line{flex:1;height:2px;background:linear-gradient( to right,transparent 0%,#00aaff 20%,#00ffaa 50%,#00aaff 80%,transparent 100% )}
.hologram-header h3{margin:0 1rem;font-size:0.9rem;letter-spacing:2px}
.hologram-display{padding:1.5rem;min-height:150px;border-bottom:1px solid rgba(0,170,255,0.3);position:relative}
.hologram-display p{margin:0 0 1rem;font-size:0.8rem}
.input-line{display:flex;align-items:center;font-size:0.9rem}
.input-line input{flex:1;background:transparent;border:none;border-bottom:1px solid #00ffaa;color:#00ffaa;font-family:'Courier New',monospace;padding:0.3rem;margin-left:0.5rem}
.input-line input:focus{outline:none}
.scan-beam{position:absolute;bottom:0;left:0;width:100%;height:1px;background:#00ffaa;box-shadow:0 0 10px #00ffaa;animation:scan 3s linear infinite}
@keyframes scan{0%{transform:translateY(-100px)}
100%{transform:translateY(100px)}
}
.hologram-keyboard{padding:1rem;display:grid;gap:0.5rem}
.key-row{display:flex;gap:0.5rem}
.key{flex:1;padding:0.5rem;background:rgba(0,170,255,0.1);border:1px solid #00aaff;color:#00ffaa;font-family:'Courier New',monospace;cursor:pointer;transition:all 0.2s}
.key:hover{background:rgba(0,170,255,0.3);box-shadow:0 0 5px #00aaff}
.enter-key{grid-column:span 4;padding:0.8rem;background:rgba(0,255,170,0.2);border:1px solid #00ffaa;color:white;font-weight:bold;cursor:pointer;transition:all 0.3s}
.enter-key:hover{background:rgba(0,255,170,0.4);box-shadow:0 0 15px rgba(0,255,170,0.5)}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const keys = document.querySelectorAll('.key');
const emailInput = document.querySelector('.input-line input');
keys.forEach(key => {
key.addEventListener('click', function() {
emailInput.value += this.getAttribute('data-char');
});
});
});
</script>Paste the supplied HTML, CSS, and JS into your Blogger post or template and tailor it to your needs.
Subscribe Form Style 11:
<div class="console-container">
<form class="console-form" action="https://api.follow.it/subscribe" method="post" target="_blank">
<div class="console-screen">
<div class="pixel-text">NEWS ALERT SYSTEM</div>
<div class="input-pixel">
<span>> EMAIL:</span>
<input type="email" name="email" required>
</div>
<div class="pixel-cursor">_</div>
</div>
<div class="console-controls">
<button type="submit" class="console-button">START</button>
<div class="d-pad"></div>
</div>
</form>
</div>
<style> .console-container{width:300px;margin:2rem auto;background:#ffffff;padding:1.5rem;border-radius:15px;box-shadow:0 10px 20px rgba(0,0,0,0.2);font-family:'Press Start 2P',cursive}
.console-form{display:flex;flex-direction:column;gap:1.5rem}
.console-screen{background:#2c3e50;padding:1rem;border-radius:5px;border:4px solid #34495e;color:#2ecc71;font-size:12px;line-height:1.5;min-height:120px;position:relative}
.pixel-text{margin-bottom:1rem;text-shadow:0 0 5px #2ecc71}
.input-pixel{display:flex;align-items:center;margin-bottom:0.5rem}
.input-pixel input{flex:1;background:transparent;border:none;border-bottom:2px solid #2ecc71;color:#2ecc71;font-family:inherit;font-size:10px;padding:0.3rem}
.input-pixel input:focus{outline:none}
.pixel-cursor{animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}
50%{opacity:0}
}
.console-controls{display:flex;justify-content:space-between;align-items:center}
.console-button{padding:0.5rem 1rem;background:#f39c12;border:none;border-radius:50px;color:white;font-family:inherit;font-size:10px;cursor:pointer;transition:all 0.3s;box-shadow:0 3px 0 #d35400}
.console-button:hover{background:#f1c40f;transform:translateY(-2px);box-shadow:0 5px 0 #d35400}
.console-button:active{transform:translateY(1px);box-shadow:0 1px 0 #d35400}
.d-pad{width:60px;height:60px;background:#34495e;border-radius:50%;position:relative}
.d-pad::before{content:'';position:absolute;width:40px;height:40px;background:#2c3e50;top:10px;left:10px;border-radius:50%}
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');</style>Copy and add this code to your Blogger post or template, then customize as desired.
Subscribe Form Style 12:
<form class="watercolor-form" action="https://api.follow.it/subscribe" method="post" target="_blank">
<div class="watercolor-bg"></div>
<h3>Artful Updates</h3>
<p>Brush strokes of news delivered gently</p>
<div class="paint-input">
<input type="email" name="email" required placeholder=" ">
<label>Your palette</label>
<div class="paint-stroke"></div>
</div>
<button type="submit">
<span>Paint My Inbox</span>
<div class="brush-icon">🖌️</div>
</button>
</form>
<style>
.watercolor-form{width:280px;margin:2rem auto;padding:1.5rem;background:white;border-radius:8px;box-shadow:0 5px 15px rgba(0,0,0,0.1);font-family:'Georgia',serif;color:#333;position:relative;overflow:hidden}
.watercolor-bg{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 30%,rgba(255,200,200,0.3),transparent 70%),radial-gradient(circle at 80% 20%,rgba(200,255,200,0.3),transparent 70%),radial-gradient(circle at 40% 70%,rgba(200,200,255,0.3),transparent 70%);z-index:0}
.watercolor-form h3{position:relative;margin:0 0 0.5rem;font-size:1.5rem;color:#5a3921}
.watercolor-form p{position:relative;margin:0 0 1.5rem;font-size:0.9rem;color:#666;font-style:italic}
.paint-input{position:relative;margin-bottom:1.5rem;z-index:1}
.paint-input input{width:100%;padding:0.8rem 0;background:transparent;border:none;border-bottom:1px solid #d4b483;font-family:'Georgia',serif;color:#5a3921}
.paint-input input:focus{outline:none}
.paint-input label{position:absolute;left:0;top:0.8rem;color:#a78b6f;pointer-events:none;transition:all 0.3s}
.paint-input input:focus + label,.paint-input input:not(:placeholder-shown) + label{top:-0.7rem;font-size:0.8rem;color:#8b4513}
.paint-stroke{position:absolute;bottom:0;left:0;width:0;height:2px;background:#8b4513;transition:width 0.5s ease-out}
.paint-input input:focus ~ .paint-stroke{width:100%}
.watercolor-form button{width:100%;padding:0.8rem;background:#8b4513;border:none;border-radius:4px;color:white;font-family:'Georgia',serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.5rem;transition:all 0.3s;position:relative;overflow:hidden}
.watercolor-form button::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:rgba(255,255,255,0.1);transform:rotate(30deg);transition:all 0.3s}
.watercolor-form button:hover{background:#a0522d}
.watercolor-form button:hover::before{left:100%}
.brush-icon{transition:transform 0.3s}
.watercolor-form button:hover .brush-icon{transform:rotate(30deg) translateX(3px)}
</style>Take the provided code, paste it in your Blogger post or template, and style it to match your site.
Subscribe Forms Advantages
These subscribe forms help increase your blog’s email subscribers quickly by making it easy and attractive for visitors to sign up.
Being mobile-friendly and lightweight, they improve user experience without slowing down your site, which boosts your Blogger SEO ranking.
Easy integration with popular email marketing tools saves your time and effort in managing newsletters.
Multiple stylish designs let you choose the perfect look that matches your blog’s theme and niche, enhancing your site’s professional appearance.
Related Posts
How to add subscription form in blogger
If you want to add a subscription form to your Blogger, follow these steps:
Method One
- Go to your Blogger dashboard and click on Layout.
- On the sidebar, click Add a Gadget and then choose HTML/JavaScript.
- Paste your subscription form code there.
- Click the Save button, then click View to check.
Method Two
Go to your Blogger dashboard, open any post where you want to add the subscription form source code, paste the code, click Save button, then click View to see if the code works properly.
Method Three
Go to your Blogger dashboard, click on the Theme section, then click Edit HTML.
If you face any problems installing the code, please contact us. We are always ready to help you.
Compatibility
These forms are built for Blogger compatibility, meaning they work with Blogger themes, layouts, and templates without breaking design. They’re mobile-friendly, lightweight, and customizable.
You can integrate these Blogger email signup forms with Mailchimp, ConvertKit, or Sendinblue by updating the subscribe form API.
Because they are fast-loading widgets, they won’t affect Blogger site speed — which is important for Blogger SEO ranking and search visibility.
Benefits of These Blogger Subscribe Forms
- 100% free Blogger subscribe code
- Ready-to-use Blogger HTML subscribe form
- Mobile-friendly Blogger subscription design
- Easy Blogger widget integration
- Works with Blogger email marketing tools
- Multiple Blogger form styles for every niche
Why These Forms Stand Out
These Blogger-friendly subscribe forms are designed with modern UI trends. They are customizable widgets that work on any Blogger theme — classic or modern.
They are tested for cross-browser compatibility and work perfectly on mobile templates. You can add them in Blogger header, footer, popup windows, or sidebar widgets.
By using these ready-made Blogger subscribe form HTML codes, you save customization time and improve user engagement without needing coding skills.
Note: This content was edited with AI support and refined for clarity and human readability.
How to add a subscribe form to my Blogger site?
Copy the HTML/CSS code and paste it into your Blogger sidebar widget or post area.
Are Blogger subscribe forms mobile friendly?
Yes, these subscribe forms are fully responsive and work well on all devices.
Can I connect Blogger subscribe form with Mailchimp?
Yes, by updating the form’s action URL to Mailchimp’s API, you can integrate easily.
Will adding a subscribe form slow down my Blogger site?
No, these forms are lightweight and optimized to load quickly without slowing your site.
How to customize subscribe form design in Blogger?
Edit the CSS styles in the form code to match your Blogger theme and colors.
Related Posts
Final Thought
If you want to grow your Blogger email list fast, these 12 subscribe form designs are the best option. They’re free, responsive, and SEO-friendly. Add them to your Blogger website today and start turning readers into loyal subscribers.
