Stylish Newsletter And Email Subscription Box Widget For Web And Blogs

Do you know what is “Email Subscription Widget” is? A stylish Email subscription widget is a subscription form for websites. Interested visitors on your blog just enter their email addresses in the box and hit the subscribe button of the email subscription box to get all updates of your blog in their email inbox. This widget not only increases visitors to your blog but also helps you to grow the community of your blog readers.

Email subscription widgets are a great way to help your readers get your latest posts and updates of your blog right into their inbox via email. It also helps you to get a high amount of traffic to your blog and build and grow a loyal community of readers for your blog.

As we know that email marketing is a great way to market your business online and it is not only cheaper but also has numerous benefits of adding an email subscription widget.

So, why not make your blog’s visitors tempted by installing the best, stylish and customized email subscription widget for your Blogger blog.

Here we have a pure vanilla JavaScript snippet that helps you create a simple image slider with basic carousel functionalities such as infinite scrolling, autoplay, responsive and navigation with bullet points.

There are many code snippets available online or on many other blogs and websites, but everyone cannot optimize your blog or website, so you need some optimized code snippets. So now checkout out the code snippet for your blog and website that will give you all features for your desired code. Now grab the ready-to-use code and paste it where you want.

Features:

1. Light Weight.
2. Pure JavaScript Code.
3. Cross Browser.
4. No External Files.
5. Fully Customizable.
6. Responsive.

How To Use Stylish Newsletter And Email Subscription Box Widget For Web And Blogs?

There are a few easy and understandable steps to achieve your desired functionality that we are gonna share below. Follow each step perfectly.

Email Subscription Box:

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Muli:400,700');
*,*:before,*:after,input[type="search"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
input,select,textarea{width:100%}
body {
background: #dfe4ea;
font-family: 'Muli', sans-serif;
margin: 0;
padding: 0;
position: relative;
line-height: normal;
overflow: hidden;
}
a{color:#294db4;text-decoration:none;transition:all .3s}a:hover{color:#2141a0}
#wrapper{
max-width: 340px;
margin: 6% auto;
background:#fff;
padding: 0;
color: #222;
font-size: 16px;
line-height: 1.6;
border-radius: 22px;
overflow:hidden;
box-shadow: 0 13px 15px -10px rgba(9,32,76,.025);
}
#wrapper h3{
font-weight: 700;
margin: 0 auto 10px auto
}
/* Subscribe Box */
#subscribe-box p{position:relative;overflow:hidden}
#subscribe-box p{font-size:14px;color:#767676;margin:0 0 15px;padding:0;line-height:normal}#subscribe-box .emailfield{position:relative;margin:auto;z-index:1}#subscribe-box .emailfield input{background:rgba(255,255,255,.9);padding:13px 20px;color:#aaa;border:1px solid rgba(0,0,0,0.05);font-size:14px;margin-bottom:16px;border-radius:99em}#subscribe-box .emailfield input:focus{color:#222;outline:none;border-color:rgba(0,0,0,0.05);box-shadow:inset 0 0 0 3px rgba(0,0,0,0.05)}#subscribe-box .emailfield .submitbutton{display:block;position:relative;overflow:hidden;background:rgba(255,255,255,.25);color:#fff;width:100%;font-size:15px;font-weight:bold;border:0;margin:auto;box-shadow:0 2px 3px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.13);transition:all 0.2s cubic-bezier(0.4,0,0.2,1)}#subscribe-box .emailfield .submitbutton:active,#subscribe-box .emailfield .submitbutton:hover{background:rgba(255,255,255,.35);color:#fff;box-shadow:0 3px 3px rgba(0,0,0,0.1), 0 3px 4px rgba(0,0,0,0.13)}#subscribe-box .emailfield input:focus.submitbutton{color:#fff}#subscribe-box .emailfield form{position:relative}#subscribe-box .emailfield .submitbuttonlabel{position:absolute;top:3px;right:8px;display:inline;padding:8px 12.5px 8px 20px;cursor:pointer;font-size:13px}#subscribe-box .emailfield .submitbuttonlabel svg{fill:#767676;width:22px;height:22px;vertical-align:middle;transition:all .3s}#subscribe-box .emailfield .submitbuttonlabel svg:hover,#subscribe-box .emailfield .submitbuttonlabel svg:focus{fill:#568af5}#HTML98{position:relative;overflow:hidden;padding:20px}#HTML98:after{content:'';display:block;position:absolute;bottom:0;right:0;width:120px;height:120px;background-image:linear-gradient(50deg,#ff4169,#8b41f6);background-repeat:no-repeat;border-radius:120px 0 0;transition:opacity .3s;opacity:1}#HTML98:before{content:'';display:block;position:absolute;bottom:0;right:0;width:120px;height:120px;background-image:linear-gradient(230deg,#ff4169,#8b41f6);background-repeat:no-repeat;border-radius:120px 0 0;transition:opacity .3s;opacity:1}#HTML98:hover:after{opacity:0}#HTML98:hover:before{opacity:1}#HTML98 h2:after,#HTML98 h3:after,#subscribe-box .emailfield input[type=submit]{display:none}
</style>
<div id='wrapper'>
<div id="HTML98">
<div id='subscribe-box'>
<h3 class="title">Subscribe Our Email</h3>
<p>Get next post from this blog in your email</p>
<div class='emailfield'>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=ArlinaCode&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input required='required' type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email Address&quot;;}' onfocus='if (this.value == &quot;Email Address&quot;) {this.value = &quot;&quot;;}' value='Email Address'/>
<input class="submitbutton" type="submit" id="email-submit" value="Subscribe"/>
<label class="submitbuttonlabel" for="email-submit">
<svg class="icon" viewbox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><g transform="translate(2.000000, 3.000000)"><path d="M14.1972579,8.17124146e-14 C17.3979916,0.00978563072 19.990286,2.62120148 20,5.84554455 L20,5.84554455 L20,7.30693069 L19.99354,7.4036631 C19.9466817,7.75161611 19.6506049,8.01980198 19.2923485,8.01980198 L19.2923485,8.01980198 L19.2835029,8.0019802 L19.1721336,7.99309967 C19.0257158,7.96959451 18.889286,7.90013647 18.7831177,7.79318503 C18.6504073,7.65949573 18.5758514,7.47817413 18.5758514,7.28910891 L18.5758514,7.28910891 L18.5758514,5.84554455 C18.5518871,3.41954659 16.6054921,1.45879454 14.1972579,1.43465347 L14.1972579,1.43465347 L5.80274215,1.43465347 C3.39450789,1.45879454 1.44811291,3.41954659 1.42414861,5.84554455 L1.42414861,5.84554455 L1.42414861,12.1544554 C1.44811291,14.5804534 3.39450789,16.5412055 5.80274215,16.5653465 L5.80274215,16.5653465 L14.1972579,16.5653465 C16.6054921,16.5412055 18.5518871,14.5804534 18.5758514,12.1544554 C18.6163388,11.7890822 18.922975,11.5127474 19.2879257,11.5127474 C19.6528764,11.5127474 19.9595126,11.7890822 20,12.1544554 C19.990286,15.3787985 17.3979916,17.9902144 14.1972579,18 L14.1972579,18 L5.80274215,18 C2.599996,17.995093 0.00487110525,15.3808258 -1.42108547e-14,12.1544554 L-1.42108547e-14,12.1544554 L-1.42108547e-14,5.84554455 C-1.42108547e-14,2.61713944 2.59797615,8.17124146e-14 5.80274215,8.17124146e-14 L5.80274215,8.17124146e-14 Z M4.29443312,5.38692655 C4.48070099,5.36682207 4.6671823,5.42289927 4.81203008,5.54257426 L4.81203008,5.54257426 L8.96948253,8.85742574 C9.48880627,9.2678976 10.2192875,9.2678976 10.7386112,8.85742574 L10.7386112,8.85742574 L14.8518355,5.54257426 L14.8606811,5.54257426 L14.9473987,5.48291804 C15.2462388,5.30808809 15.6344967,5.37260085 15.8602388,5.64950495 C15.9785304,5.79800076 16.0329385,5.98799536 16.0113373,6.17714498 C15.9897361,6.36629461 15.8939207,6.53887938 15.7452455,6.65643564 L15.7452455,6.65643564 L11.6320212,9.98019802 C10.5861526,10.8280382 9.09540423,10.8280382 8.0495356,9.98019802 L8.0495356,9.98019802 L3.92746572,6.65643564 L3.8513546,6.58355583 C3.61891283,6.32594359 3.59998262,5.92999594 3.821318,5.64950495 C3.93770999,5.50163353 4.10816526,5.40703103 4.29443312,5.38692655 Z"></path></g></svg>
</label>
<input name='uri' type='hidden' value='ArlinaCode'/>
<input name='loc' type='hidden' value='en_US'/>
</form>
</div>
</div>
</div>
</div>

Newsletter Subscription Box:

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i);
body {
background: #2c3e50;
font-family: "Roboto", sans-serif;
margin: 0;
padding: 0;
position: relative;
line-height: normal;
}

.container {
max-width: 320px;
margin: 4% auto;
padding: 0;
background: #fff;
color: #222;
font-size: 16px;
line-height: 1.6;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
transform: translatey(0px);
animation: float 6s ease-in-out infinite;
}

.container h1,
.container h2 {
display: block;
margin-bottom: 20px;
font-size: 1.2rem;
font-weight: 700;
color: #222;
}
@keyframes float {
0% {
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.4);
transform: translatey(0px);
}
50% {
box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
transform: translatey(-20px);
}
100% {
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.4);
transform: translatey(0px);
}
}
/* Subscribe Box */
@keyframes rotate {
100% {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
.rainbow {
position: relative;
z-index: 0;
overflow: hidden;
padding: 3px;
}
.rainbow::before {
content: "";
position: absolute;
z-index: -2;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-color: #2ecc71;
background-repeat: no-repeat;
background-size: 50% 50%, 50% 50%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
background-image: linear-gradient(#2ecc71, #2ecc71),
linear-gradient(#fbb300, #fbb300), linear-gradient(#e74c3c, #e74c3c),
linear-gradient(#3498db, #3498db);
animation: rotate 8s linear infinite;
}
.rainbow::after {
content: "";
position: absolute;
z-index: -1;
left: 5px;
top: 5px;
width: calc(100% - 10px);
height: calc(100% - 10px);
background: #fff;
}
#HTML99 {
padding: 0;
}
#HTML99 h2 {
color: #222;
padding: 0;
}
#HTML99 h2:before {
display: none;
}
.subscribe-wrapper {
color: #222;
line-height: 20px;
margin: 0;
padding: 20px;
}
.subscribe-form {
clear: both;
display: block;
margin: 10px auto;
overflow: hidden;
}
.subscribe-wrapper p {
margin: 0;
font-size: 14px;
}
form.subscribe-form {
clear: both;
display: block;
margin: 10px 0 0;
width: auto;
overflow: hidden;
}
.subscribe-css-email-field {
background: #fff;
color: #222;
margin: 0 0 18px;
padding: 12px 0;
width: 99%;
border: 1px solid rgba(0, 0, 0, 0.1);
outline: 0;
font-size: 14px;
text-indent: 20px;
line-height: 20px;
border-radius: 3px;
transition: all 0.6s;
}
.subscribe-css-email-field:hover,
.subscribe-css-email-field:focus {
border-color: rgba(0, 0, 0, 0.3);
}
.subscribe-css-button {
background: #2c3e50;
color: #fff;
cursor: pointer;
font-weight: 500;
padding: 15px 0;
text-transform: none;
width: 100%;
border: none;
font-size: 16px;
border-radius: 3px;
transition: all 0.3s;
}
.subscribe-css-button:hover {
background: #34495e;
}
</style>
<div class="container">
<div class="rainbow">
<div id="subscribe-css">
<div class="subscribe-wrapper">
<h2>Newsletter</h2>
<p>If you like articles on this blog, please subscribe for free via email.</p>
<div class="subscribe-form">
<form action='https://feedburner.google.com/fb/a/mailverify?uri=InSEOFree' class="subscribe-form" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=InSEOFree', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="InSEOFree" ></input>
<input name="loc" type="hidden" value="en_US" ></input>
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your email"></input>
<input class="subscribe-css-button" title="" type="submit" value="Submit" ></input>
</form>
</div>
</div></div></div>
</div>

Customization:

No need to customize it. Just copy-paste. Rest edit the code as per comments and need. Remember to add JavaScript after HTML code.

Troubleshooting the Errors:

Do it with concentration and patience. Check your all steps and again and all codes or scripts. If you find any error you can contact us anytime via comment or better via email, We are always here to help you.

Final Words:

That’s all we have. We hope that you liked this article. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us If you have any doubts or problems please comment below. We are happy to help you! If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it and leave.