This post contains a total of 10+ CSS Subscribe ( Newsletter ) Form Examples with Source Code. All these Subscribe Forms are made using CSS.
You can use the source code of these examples with credits to the original owner.
Related Posts
CSS Subscribe Form Examples
1. By oritzio
Made by oritzio. A simple Subscribe form with just an email input box. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Oswald);
body { margin:100px 0; background: url(https://s16.postimg.org/488od3c3o/Fotolia_68751569_Subscription_Monthly_M_triangle.jpg); }
.wrapper { width:700px; margin:0 auto; }
.subscribe { position:relative; }
.subscribe input[type="text"] {
width:100%;
background:transparent;
padding:20px;
border:none;
border-bottom:4px solid #21457c;
color:#f12953;
font:400 50px 'Oswald';
transition: 0.4s ease;
-o-transition: 0.4s ease;
-webkit-transition: 0.4s ease;
}
.subscribe input[type="text"]:focus {
outline:0;
border:none;
border-bottom:8px solid #21457c;
transition: 0.4s ease;
-o-transition: 0.4s ease;
-webkit-transition: 0.4s ease;
}
.subscribe input[type="submit"] {
position:absolute;
right:0;
background:#f12953;
color:#fff;
border:none;
padding: 10px 40px;
cursor:pointer;
font:400 20px 'Oswald';
transition: 0.4s ease;
-o-transition: 0.4s ease;
-webkit-transition: 0.4s ease;
}
.subscribe input[type="submit"]:hover {
background:#ff7c98;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="subscribe">
<form>
<input type="text" placeholder="Enter your e-mail:" />
<input type="submit" />
</form>
</div>
</div>
</body>
</html>2. By Nathan Nguyen
Made by Nathan Nguyen. Vision Newsletter Popup Form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://cdn.shopify.com/s/files/1/1467/1304/t/7/assets/font-vision.css?1712788716943003314'>
<style>
body {
line-height: 1.5;
color: #555;
font-family: 'Lato', sans-serif;
background-color: #000;
}
.tea-popup {
width: 770px;
max-width: inherit;
padding: 0;
border: 0;
margin: 0 auto;
margin-top: 100px;
text-align: center;
position: relative;
background-color: #fff;
}
.tea-popup .close-popup {
font-size: 10px;
color: #fff;
text-transform: uppercase;
background: none;
border: 0;
position: absolute;
right: 0;
padding: 0;
top: -20px;
}
.tea-popup .close-popup i {
font-size: 8px;
margin-left: 3px;
}
.white-popup {
background-color: #fff;
}
.banner-newsletter {
float: left;
width: 270px;
}
.kt-popup-newsletter {
position: relative;
overflow: hidden;
padding: 40px 50px;
text-align: center;
min-height: 350px;
}
.popup-title h1 {
font-size: 40px;
text-transform: uppercase;
color: #666;
font-weight: bold;
font-family: "Montserrat", sans-serif;
}
.popup-title .notice {
font-size: 14px;
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
}
.popup-title .primary {
font-size: 17px;
color: #666;
font-family: "Montserrat", sans-serif;
color: #f4bf4e;
margin-bottom: 20px;
display: inline-block;
font-weight: 300;
}
input#mce-EMAIL {
width: 100%;
height: 54px;
border-color: rgba(0, 0, 0, 0.1);
text-align: center;
font-size: 14px;
color: #cfcfcf;
}
button#subscribe {
width: 100%;
background-color: #e3504d;
height: 50px;
margin: 10px 0;
font-family: "Montserrat", sans-serif;
font-size: 14px;
color: #fff;
display: inline-block;
cursor: pointer;
outline: none;
white-space: nowrap;
border: none;
text-transform: uppercase;
}
.checkbox-bottom {
margin-top: 10px;
}
input[type=checkbox] {
display: none;
}
.checkbox-bottom label {
font-size: 12px;
color: #999;
text-transform: uppercase;
font-weight: lighter;
}
input[type=checkbox]+label {
cursor: pointer;
}
input[type=checkbox]+label:before {
content: '';
display: inline-block;
width: 12px;
height: 12px;
border: 1px solid #cfcfcf;
margin: 0 10px 0 30px;
top: 2px;
position: relative;
}
input[type=checkbox]:checked+label:before {
background: url(//cdn.shopify.com/s/files/1/1467/1304/t/7/assets/icon-check.png?2131806913827189849) no-repeat;
}
</style>
</head>
<body>
<div class="tea-popup">
<button type="button" class="close-popup" data-dismiss="modal">close<i class="i-escape"></i></button>
<div class="white-popup">
<div class="banner-newsletter">
<img src="https://cdn.shopify.com/s/files/1/1421/2484/files/Untitled-1.jpg?15764590599489591810" alt="">
</div>
<div class="kt-popup-newsletter">
<div class="popup-title">
<h1>Newsletter</h1>
<p class="notice">Enter you email below to unlock</p>
<span class="primary">Subcrible and get 20% off your first purchase</span>
</div>
<form class="form-subscribe" action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" novalidate="">
<input class="input required email" type="email" value="" placeholder="Enter your email here" name="EMAIL" id="mce-EMAIL">
<button class="button" name="subscribe" id="subscribe" type="submit">Subcrible</button>
</form>
<div class="checkbox-bottom">
<input id="checkBox" type="checkbox" value="">
<label for="checkBox">Don’t show this pop up again</label>
</div>
</div>
</div>
</div>
</body>
</html>3. By Sazzad
Made by Sazzad. Red CSS Newsletter Form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,600");
body {
background: #F53A54;
color: white;
font-family: "Poppins", "Helvetica Neue", "Lucida Grande", Arial, Verdana, sans-serif;
padding: 30vh 0 0;
text-align: center;
}
.container {
margin: 0 auto;
width: 650px;
}
h1 {
font-size: 2.5rem;
font-weight: 300;
letter-spacing: 0.025em;
}
h1 strong {
font-weight: 400;
}
form {
position: relative;
display: block;
height: 70px;
border-radius: 35px;
background: white;
margin: 0 auto;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
overflow: hidden;
}
form input {
line-height: 70px;
padding: 0;
border: none;
outline: none;
font-size: 1rem;
font-weight: 300;
background: #eee;
letter-spacing: 0.02em;
}
form input:not([type=submit]) {
width: 100%;
display: block;
padding: 0 150px 0 30px;
}
form input:not([type=email]) {
position: absolute;
height: 50px;
line-height: 50px;
top: 10px;
right: 10px;
border-radius: 25px;
padding: 0 25px;
background: #f65269;
color: white;
cursor: pointer;
}
form input:not([type=email]):hover {
background: #f00c2c;
}
form input:focus {
outline: none;
background: white;
}
</style>
</head>
<body>
<div class="container">
<h1><strong>Subscribe</strong> to our newsletter</h1>
<form action="">
<input type="email" name="email" id="email" placeholder="[email protected]" />
<input type="submit" name="submit" value="subscribe">
</form>
</div>
</body>
</html>4. By Uday
Made by Uday. A minimalistic Mailing List Subscribe form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Raleway);
html{background-color:#4E4E4E;}
form {
padding:50px;
max-width:500px;
margin:100px auto;
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3);
}
label {
display:block;
text-align:center;
font-size:32px;
font-weight:700;
margin-bottom:30px;
color:#555;
font-family: 'Raleway', sans-serif;
}
input[type="email"] {
display:block;
width:60%;
font-size:18px;
margin:0 auto 20px auto;
border:none;
outline:none;
padding:20px;
color:#4d4d4d;
text-align:center;
box-shadow: 0 1px 3px 0 #c2c2c2 inset;
background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background-position: 0 -60px;
transition:all .6s ease;
}
input[type="email"]:focus {
outline:none;
background-position:0 0;
}
input[type="submit"] {
display:block;
width:60%;
margin:0 auto;
padding:20px;
border:none;
outline:none;
background:#2ECC71;
font-size:18px;
color:#fff;
transition:all .3s ease;
box-shadow:4px 6px 10px -4px rgba(0,0,0,0.3), 0 1px 1px -1px rgba(255,255,255,0.3);
cursor:pointer;
transition:all .6s ease;
}
input[type="submit"]:hover{
background-color:#17AA56;
}
</style>
</head>
<body>
<form>
<label for="email">Subscribe to our mailing list</label>
<input type="email" value="" name="email" placeholder="email address" required>
<input type="submit" value="Subscribe" name="subscribe">
</form>
</body>
</html>5. By krismis
Made by krismis. MailChimp custom email newsletter signup form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<style>
#mailchimp {
background: #ffffff;
color: #3D6392;
text-align: center;
font-family: Roboto;
padding: 20px 15px;
}
#mailchimp h2 {
font-size: 30px;
line-height: 20px;
color:#7e4397;
}
#mailchimp p {
font-size: 17px;
line-height: 17px;
color: #333;
}
#mailchimp input {
border: medium none;
color: gray;
font-size: 14px;
border: 1px solid #dfdfdf;
margin-bottom: 10px;
padding: 8px 10px;
width: 35%;
border-radius: 4px;
-moz-border-radius: 4x;
-webkit-border-radius: 4px;
}
#mailchimp input.email { background: #fff }
#mailchimp input.name { background: #fff}
#mailchimp input[type="submit"] {
background: #90a00d;
color: #fff;
cursor: pointer;
font-size: 15px;
text-transform: uppercase;
width: 35%;
padding: 8px 0;
}
::-webkit-input-placeholder {
color: gray;
}
</style>
</head>
<body>
<div id="mailchimp"><form id="mc-embedded-subscribe-form" class="validate" action="#" method="post" name="mc-embedded-subscribe-form" target="_blank">
<h2>Did you enjoy this article?</h2>
<p>Don't miss out on our new content. Sign Up!</p>
<input id="mce-FNAME" class="name" name="FNAME" size="30" type="text" value="" placeholder="Enter your name" />
<input id="mce-EMAIL" class="required email" name="EMAIL" size="30" type="email" value="" placeholder="Enter your email" />
<input id="mc-embedded-subscribe" class="button" name="subscribe" type="submit" value="Sign up" />
</form></div>
</body>
</html>6. By Mohammad Rahmani
Made by Mohammad Rahmani. Subscribe form with Modern Design. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Nunito');
:root {
--start-color: #0575E6;
--end-color: #021B79;
--p-color: #929DA6;
--button-background: #0575E6;
--input-background: #e4eff8;
--radius-50: 50px;
--padding-15: 15px;
}
body {
margin: 0;
padding: 0;
height: 100vh;
background: var(--start-color);
background: linear-gradient(to right, var(--start-color), var(--end-color)) no-repeat;
font-family: 'Nunito', sans-serif;
}
.wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper .content {
background: #fff;
padding: 40px;
width: 100%;
max-width: 500px;
min-width: 200px;
border-radius: 10px;
text-align: center;
}
.wrapper .content header h1 {
font-size: 230%;
margin-top: 0;
}
.wrapper .content section {
color: var(--p-color);
font-size: 15px;
}
.wrapper .content footer {
padding: var(--padding-15);
}
.wrapper .content footer input {
border: unset;
background-color: var(--input-background);
padding: var(--padding-15);
font-size: 13px;
border-radius: var(--radius-50);
width: 250px;
}
.wrapper .content footer button {
background-color: var(--button-background);
color: #fff;
border: unset;
width: 120px;
border-radius: var(--radius-50);
padding: var(--padding-15);
margin-left: 10px;
cursor: pointer;
}
.wrapper .content footer input:focus, .wrapper .content footer button:focus {
outline: none;
}
@media screen and (max-width: 720px) {
.wrapper .content {
margin-right: 20px !important;
margin-left: 20px !important;
padding: var(--padding-15);
}
.wrapper .content footer input {
width: 200px;
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<section class="wrapper">
<div class="content">
<header>
<h1>Subscribe Us</h1>
</header>
<section>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</section>
<footer>
<input type="email" placeholder="Enter your email">
<button>Let's go</button>
</footer>
</div>
</section>
</body>
</html>7. By Joaquin
Made by Joaquin. A subscribe Card with header Image. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://unpkg.com/modern-css-reset/dist/reset.min.css" />
<!-- Google Fonts Muli -->
<link href="https://fonts.googleapis.com/css2?family=Muli:[email protected];400;700&display=swap" rel="stylesheet">
<style>
.wrapper {
min-height: 100vh;
color: #000;
font-family: 'Muli', sans-serif;
font-size: 1rem;
background-color: #F1E8E6;
display: -ms-grid;
display: grid;
place-items: center;
}
.container {
background-color: #fff;
padding: 1em;
border-radius: 1em;
max-width: 768px;
display: -ms-grid;
display: grid;
place-items: center;
-webkit-box-shadow: 0px 17px 34px -20px #f55951;
box-shadow: 0px 17px 34px -20px #f55951;
}
.title {
font-size: 1.6rem;
font-weight: 700;
}
.text {
font-size: 1rem;
margin-bottom: 0.8em;
}
.container {
max-width: 400px;
overflow: hidden;
padding: 0;
}
.img {
width: 100%;
height: auto;
border-radius: 1em 1em 0 0;
-o-object-fit: cover;
object-fit: cover;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.img__container {
height: 200px;
overflow: hidden;
margin-bottom: 1.5em;
}
.title {
margin-bottom: 0.9em;
}
.subtitle {
font-size: 0.9rem;
text-transform: uppercase;
margin-bottom: 0.5em;
font-weight: 700;
}
.content {
display: -ms-grid;
display: grid;
place-items: center;
padding: 0 2em;
margin-bottom: 1.8em;
}
.mail {
padding: 0.5em 0 0.5em 1.5em;
line-height: 3;
width: 100%;
border: 1px solid #d9d9d9;
border-radius: 0.5em;
margin-bottom: 1em;
}
::-webkit-input-placeholder {
color: #111127;
}
:-ms-input-placeholder {
color: #111127;
}
::-ms-input-placeholder {
color: #111127;
}
::placeholder {
color: #111127;
}
.subscribe {
color: #fff;
font-size: 1.3rem;
font-weight: 700;
background-color: #f55951;
padding: 0.9em 0;
display: inline-block;
border: none;
border-radius: 0.5em;
width: 100%;
margin-bottom: 1.3em;
}
.text {
font-size: 0.9rem;
width: 90%;
text-align: center;
}
</style>
</head>
<body>
<section class="wrapper">
<div class="container">
<div class="img__container">
<img src="https://images.unsplash.com/photo-1546793665-c74683f339c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="salad" class="img">
</div>
<div class="content">
<h2 class="subtitle">Subscribe today</h2>
<h1 class="title">Never miss a recipe</h1>
<input type="text" class="mail" placeholder="Your email address" name="mail" required>
<input type="submit" value="Subscribe" class="subscribe">
<p class="text">We won’t send you spam. Unsubscribe at any time.</p>
</div>
</div>
</section>
</body>
</html>8. By Dinsmore
Made by Dinsmore. Pure CSS Subscribe Form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
<style>
html {
box-sizing: border-box;
font-size: 10px;
line-height: 1.42857143;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
position: relative;
background-image: linear-gradient(to top, #09203f 0%, #1c3e58 100%);
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
main {
margin: auto;
}
.modal {
background: #e55039;
color: #FFF;
width: 60rem;
border-radius: 4px;
text-align: center;
padding: 10rem 4rem 4rem 4rem;
position: relative;
}
.modal__icon {
position: absolute;
top: -3rem;
left: 50%;
margin-left: -165px;
background: #e55039;
padding: 3rem 12rem 0 12rem;
border-radius: 50%;
}
.modal__heading {
text-transform: uppercase;
font-size: 2.6rem;
}
.modal p {
font-size: 1.5rem;
}
.email-box {
position: absolute;
bottom: -2rem;
left: 50%;
margin-left: -20rem;
width: 40rem;
}
.email-box__input {
color: #333333;
display: block;
width: 100%;
height: 4rem;
border-radius: 4px;
border: 1px solid #FFF;
font-size: 1.4rem;
padding: 1rem;
}
.email-box__button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background: transparent;
font-size: 2rem;
position: absolute;
color: #e55039;
right: 0.8rem;
top: 0.8rem;
padding: 0;
}
.email-box__button:hover,
.email-box__button:focus {
color: #a32815;
}
@media only screen and (max-width: 600px) {
.modal {
width: 30rem;
}
.modal__icon {
margin-left: -105px;
padding: 3rem 6rem 0 6rem;
border-radius: 50%;
}
.email-box {
margin-left: -12.5rem;
width: 25rem;
}
}
</style>
<body>
<main>
<div class="modal">
<div class="modal__icon">
<img width="90" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzIwMCcgd2lkdGg9JzIwMCcgIGZpbGw9IiNmZmZmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA2NCA2NCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjQgNjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBkPSJNNTYuNTcsOC4zNDdjLTMuNDUtMi44NTgtNy45NTUtNC4wMjItMTIuMzU4LTMuMTg4Yy0wLjAwNywwLjAwMS0wLjAxNCwwLjAwMi0wLjAyLDAuMDA0TDI1Ljc5NSw5LjAyMSAgYy0wLjA0NiwwLjAxLTAuMDg3LDAuMDMtMC4xMywwLjA0NmMtMi40MzcsMC4yMTYtNC43MDEsMS4wMjEtNi42NjUsMi4yNjZWOGgzYzAuNTUzLDAsMS0wLjQ0NywxLTFWM2MwLTAuNTUzLTAuNDQ3LTEtMS0xaC04ICBjLTAuNTUzLDAtMSwwLjQ0Ny0xLDF2MTUuNjU5Yy0wLjYzNiwxLjY2Mi0xLDMuNDU4LTEsNS4zNDF2M0gzYy0wLjU1MywwLTEsMC40NDctMSwxdjExYzAsMC41NTMsMC40NDcsMSwxLDFoOC40NDdsLTIuOTk0LDYuNTg2ICBjLTEuOTMxLDQuMjQ4LTEuOTUyLDguMzcxLTAuMDYsMTEuMzExQzEwLjA5OCw2MC41NDMsMTMuMTU0LDYyLDE3LDYyYzUuODI3LDAsMTIuNDA4LTMuNDE2LDE3LTguMzM2VjYxYzAsMC41NTMsMC40NDcsMSwxLDFoOWg1ICBjMC41NTMsMCwxLTAuNDQ3LDEtMVYzNi45MWwxMS4zMy0zLjk2NkM2MS43MzEsMzIuODA0LDYyLDMyLjQyNSw2MiwzMlYxOS44OTZDNjIsMTUuNDE2LDYwLjAyMSwxMS4yMDYsNTYuNTcsOC4zNDd6IE0xNSw0aDZ2MmgtMyAgYy0wLjU1MywwLTEsMC40NDctMSwxdjUuODI3Yy0wLjEwMywwLjA5Mi0wLjE5NCwwLjE5Ni0wLjI5NCwwLjI5MWMtMC4xODMsMC4xNzQtMC4zNjMsMC4zNS0wLjUzNywwLjUzMiAgYy0wLjE1MywwLjE2MS0wLjMwMSwwLjMyNS0wLjQ0NywwLjQ5MmMtMC4xODYsMC4yMTMtMC4zNjYsMC40My0wLjU0LDAuNjUzYy0wLjA1OCwwLjA3NS0wLjEyNCwwLjE0My0wLjE4MSwwLjIxOVY0eiBNMTQsMjQgIGMwLTEuNzA5LDAuMzQtMy4zMzgsMC45NDItNC44MzRjMC4zOC0wLjk0NywwLjg3Ni0xLjg0MywxLjQ2My0yLjY3MmMwLjA2NS0wLjA5MiwwLjEzNS0wLjE4LDAuMjAyLTAuMjcgIGMwLjIyNi0wLjMwMywwLjQ2Ni0wLjU5NCwwLjcxOC0wLjg3NmMwLjA5Ni0wLjEwNywwLjE5MS0wLjIxNSwwLjI5LTAuMzE5YzAuMjc0LTAuMjg3LDAuNTYzLTAuNTYsMC44NjItMC44MjIgIGMyLjA2OS0xLjgwMyw0LjcwNy0yLjk1Nyw3LjYwOS0zLjE2MWMwLjAwMiwwLDAuMDA0LDAuMDAxLDAuMDA2LDAuMDAxbDAuMDUxLTAuMDAzQzI2LjQyNywxMS4wMjUsMjYuNzExLDExLDI3LDExICBjNi4xMzQsMCwxMS4yNzcsNC4yNzYsMTIuNjM3LDEwaC0yLjgyMUMzNi45MjgsMjAuNjg2LDM3LDIwLjM1MiwzNywyMHYtMWMwLTEuNjU0LTEuMzQ2LTMtMy0zYy0yLjA4NiwwLTMuOTI0LDEuMDcxLTUsMi42OSAgYy0xLjA3Ni0xLjYyLTIuOTE0LTIuNjktNS0yLjY5Yy0xLjY1NCwwLTMsMS4zNDYtMywzdjAuNWMwLDAuNTM5LDAuMTMzLDEuMDQ0LDAuMzUxLDEuNUgxN2MtMC41NTMsMC0xLDAuNDQ3LTEsMXY0djFoLTJWMjR6IE0zMCwyNSAgdi0yaDRoNS45NDlDMzkuOTc1LDIzLjMzMSw0MCwyMy42NjIsNDAsMjR2MUgzMHogTTQwLDI3djExSDMwVjI3SDQweiBNMzAuMTI3LDIxYzAuNDQ0LTEuNzI0LDIuMDEzLTMsMy44NzMtM2MwLjU1MiwwLDEsMC40NDgsMSwxICB2MWMwLDAuNTUyLTAuNDQ4LDEtMSwxSDMwLjEyN3ogTTE4LDI1di0yaDYuNUgyOHYySDE4eiBNMjgsMjd2MTFIMThWMjh2LTFIMjh6IE0yMywxOS41VjE5YzAtMC41NTIsMC40NDgtMSwxLTEgIGMxLjg2LDAsMy40MjksMS4yNzYsMy44NzMsM0gyNC41QzIzLjY3MywyMSwyMywyMC4zMjcsMjMsMTkuNXogTTQsMzh2LTloOWgzdjloLTNINHogTTM1LjU5OCw0OC4yMjUgIGMtMC4xMTYsMC4yMDEtMC4yMzksMC4zOTgtMC4zNjIsMC41OTZjLTAuMzE5LDAuNTA5LTAuNjYsMS4wMTctMS4wMzYsMS41MjFjLTAuMDA0LDAuMDA1LTAuMDA1LDAuMDExLTAuMDA5LDAuMDE3ICBDMzAuMDM0LDU1LjkyMywyMy4wNTksNjAsMTcsNjBjLTMuMTQzLDAtNS42MDItMS4xMzItNi45MjUtMy4xODZjLTEuNTE4LTIuMzU3LTEuNDQ1LTUuNzg0LDAuMTk4LTkuNEwxMy42NDQsNDBIMTdoMjIuNDQ3ICBsLTAuOCwxLjc2bC0yLjE5NCw0LjgyNmMtMC4xOCwwLjM5Ni0wLjM4MywwLjc4NS0wLjU5MiwxLjE3MkMzNS43NzYsNDcuOTE0LDM1LjY4OCw0OC4wNywzNS41OTgsNDguMjI1eiBNNDMsNjBoLTd2LTguNzI5ICBjMC4xNzgtMC4yNDUsMC4zNDUtMC40OTEsMC41MTEtMC43MzhjMC4wNjEtMC4wOSwwLjEyNC0wLjE3OSwwLjE4My0wLjI3YzAuMjU2LTAuMzkyLDAuNDkyLTAuNzg2LDAuNzE3LTEuMTggIGMwLjA3LTAuMTIyLDAuMTM4LTAuMjQ1LDAuMjA1LTAuMzY4YzAuMjM2LTAuNDM0LDAuNDYxLTAuODY4LDAuNjU3LTEuMzAxbDMuNDYtNy42MTFMNDMsMzkuMzZWNjB6IE00OCw2MGgtM1YzOC42NmwxLjEyNS0wLjM5NCAgTDQ4LDM3LjYxVjYweiBNNjAsMzEuMjlsLTExLjMyOSwzLjk2NmMwLDAtMC4wMDEsMC0wLjAwMSwwTDQyLDM3LjU5VjI2di0yYzAtMC40NzMtMC4wMjgtMC45MzgtMC4wNzEtMS40ICBjLTAuMDEzLTAuMTQ0LTAuMDM1LTAuMjg1LTAuMDUyLTAuNDI4Yy0wLjAzOS0wLjMyMS0wLjA4Ny0wLjYzOS0wLjE0Ni0wLjk1M2MtMC4wMjktMC4xNTUtMC4wNi0wLjMwOS0wLjA5NC0wLjQ2MyAgYy0wLjA3LTAuMzE1LTAuMTUxLTAuNjI1LTAuMjQtMC45MzJjLTAuMDM4LTAuMTMtMC4wNzEtMC4yNi0wLjExMi0wLjM4OWMtMC4xMzctMC40MjYtMC4yODctMC44NDYtMC40Ni0xLjI1NSAgYy0wLjAxNS0wLjAzNi0wLjAzNC0wLjA3MS0wLjA1LTAuMTA3Yy0wLjE2MS0wLjM3Mi0wLjMzOC0wLjczNi0wLjUyNy0xLjA5MmMtMC4wNjctMC4xMjUtMC4xMzktMC4yNDctMC4yMDktMC4zNyAgYy0wLjE1Mi0wLjI2Ni0wLjMxLTAuNTI4LTAuNDc3LTAuNzg0Yy0wLjA4NC0wLjEyOC0wLjE2OC0wLjI1NS0wLjI1NS0wLjM4Yy0wLjE4MS0wLjI1OS0wLjM3MS0wLjUxMS0wLjU2Ny0wLjc1OCAgYy0wLjA3OS0wLjEtMC4xNTQtMC4yMDItMC4yMzYtMC4yOTljLTAuMjgxLTAuMzM2LTAuNTc0LTAuNjYxLTAuODgyLTAuOTcxYy0wLjA0NS0wLjA0NS0wLjA5NS0wLjA4Ni0wLjE0MS0wLjEzMSAgYy0wLjI2OC0wLjI2Mi0wLjU0NS0wLjUxNC0wLjgzMi0wLjc1NmMtMC4xMTEtMC4wOTMtMC4yMjUtMC4xODEtMC4zMzgtMC4yNzFjLTAuMjM2LTAuMTg4LTAuNDc3LTAuMzY5LTAuNzI1LTAuNTQyICBjLTAuMTI2LTAuMDg4LTAuMjUyLTAuMTc2LTAuMzgtMC4yNmMtMC4yNjYtMC4xNzUtMC41MzktMC4zMzgtMC44MTYtMC40OTZjLTAuMTEtMC4wNjItMC4yMTYtMC4xMjktMC4zMjctMC4xODkgIGMtMC4zODYtMC4yMDctMC43ODEtMC4zOTktMS4xODYtMC41NzJjLTAuMDg2LTAuMDM3LTAuMTc2LTAuMDY2LTAuMjYzLTAuMTAxYy0wLjI1OC0wLjEwNS0wLjUxNi0wLjIxLTAuNzgxLTAuMzAxbDEyLjc2MS0yLjY3OCAgYzMuODE2LTAuNzE2LDcuNzEzLDAuMjksMTAuNzAxLDIuNzY2QzU4LjI4NSwxMi4zNjQsNjAsMTYuMDEzLDYwLDE5Ljg5NlYzMS4yOXoiPjwvcGF0aD48cGF0aCBkPSJNMTUuMTA1LDQyLjU1M2wtMyw2bDEuNzg5LDAuODk1TDE2LjYxOCw0NEgzMXYtMkgxNkMxNS42MjEsNDIsMTUuMjc1LDQyLjIxNCwxNS4xMDUsNDIuNTUzeiI+PC9wYXRoPjxyZWN0IHg9IjYiIHk9IjMxIiB3aWR0aD0iOCIgaGVpZ2h0PSIyIj48L3JlY3Q+PHBvbHlnb24gcG9pbnRzPSI0LDggNiw4IDYsNiA4LDYgOCw0IDYsNCA2LDIgNCwyIDQsNCAyLDQgMiw2IDQsNiAiPjwvcG9seWdvbj48cmVjdCB4PSI3IiB5PSIxMiIgd2lkdGg9IjIiIGhlaWdodD0iMiI+PC9yZWN0PjxyZWN0IHg9IjIiIHk9IjE3IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIj48L3JlY3Q+PHJlY3QgeD0iNjAiIHk9IjQ0IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIj48L3JlY3Q+PHJlY3QgeD0iNTMiIHk9IjUxIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIj48L3JlY3Q+PHBvbHlnb24gcG9pbnRzPSI2MCw1NiA1OCw1NiA1OCw1OCA1Niw1OCA1Niw2MCA1OCw2MCA1OCw2MiA2MCw2MiA2MCw2MCA2Miw2MCA2Miw1OCA2MCw1OCAiPjwvcG9seWdvbj48L3N2Zz4=" alt="Icon of Mailbox">
</div>
<h1 class="modal__heading">Subscribe Today</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti aliquid molestias voluptatum fugiat provident tenetur saepe hic consec tetur.</p>
<div class="email-box">
<input type="text" class="email-box__input" placeholder="Email Address" />
<button type="button" class="email-box__button"><i class="ion-paper-airplane"></i></button>
</div>
</div>
</main>
</body>
</html>9. By Baahubali
Made by Baahubali. Simple Newsletter Form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<style>
h1,
h2,
h3,
h4,
h5,
h6 {}
section {
padding: 60px 0;
min-height: 100vh;
}
a,
a:hover,
a:focus,
a:active {
text-decoration: none;
outline: none;
}
a,
a:active,
a:focus {
color: #6f6f6f;
text-decoration: none;
transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-duration: .2s;
-ms-transition-duration: .2s;
-moz-transition-duration: .2s;
-webkit-transition-duration: .2s;
-o-transition-duration: .2s;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
img {
max-width: 100%;
height: auto;
}
.section-title h2 {
font-size: 36px;
font-weight: 700;
background-image: -webkit-linear-gradient(-30deg, #052157 0%, #91039f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 14px;
}
.newsletter {
padding: 16% 0 5%;
background: url(https://i.ibb.co/JRrHmhv/shanghai.jpg) no-repeat center center;
background-size: cover;
position: relative;
z-index: 2;
min-height: 100vh;
}
.newsletter:after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(-30deg, #91039f 0%, #052157 100%);
opacity: .8;
z-index: -1; }
.newsletter .section-title {
margin-bottom: 59px; }
.newsletter .section-title h2 {
background-image: -webkit-linear-gradient(-30deg, #ffffff 0%, #ffffff 100%); }
.newsletter .section-title p {
color: #fff; }
.newsletter .newsletter-form {
background: -webkit-linear-gradient(-30deg, #91039f 0%, #052157 100%);
position: relative;
height: 60px;
z-index: 2; }
.newsletter .newsletter-form:after {
position: absolute;
content: '';
left: -2px;
right: -2px;
top: -2px;
bottom: -2px;
background: -webkit-linear-gradient(-30deg, #91039f 0%, #91039f 100%);
z-index: -1; }
.newsletter .newsletter-form input {
width: 100%;
height: 100%;
border: none;
padding: 30px;
background: #3f1667;
color: #fff;
padding-right: 200px; }
.newsletter .newsletter-form input::-webkit-input-placeholder {
color: #fff;
opacity: .6; }
.newsletter .newsletter-form input:-ms-input-placeholder {
color: #fff;
opacity: .6; }
.newsletter .newsletter-form input::-ms-input-placeholder {
color: #fff;
opacity: .6; }
.newsletter .newsletter-form input::placeholder {
color: #fff;
opacity: .6; }
.newsletter .newsletter-form button {
position: absolute;
top: -2px;
right: -2px;
bottom: -2px;
width: 170px;
background: -webkit-linear-gradient(-30deg, #91039f 0%, #052157 100%);
outline: none;
border: none;
color: #fff;
font-weight: 500;
cursor: pointer; }
.newsletter .newsletter-form button:hover {
background: -webkit-linear-gradient(-30deg, #052157 0%, #91039f 100%); }
</style>
</head>
<body>
<div class="newsletter">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-7 col-lg-7">
<div class="section-title text-center">
<h2>Our Newslatter</h2>
<p>We bring the right people together to challenge established thinking and drive transformation.
We will show the way to successive.</p>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-7 col-lg-7">
<form class="newsletter-form">
<input type="email" placeholder="Enter your email..." required>
<button type="submit">Subscribe Now</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>10. By Hugo Carneiro
Made by Hugo Carneiro. Subscribe Box. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<style>
body {
background-color: #ffb7b7;
}
.parent-wrapper {
position: relative;
width: 400px;
height: 270px;
margin: 40px auto 0;
background-image: url('http://www.imgbase.info/images/safe-wallpapers/digital_art/1_miscellaneous_digital_art/41750_1_miscellaneous_digital_art_simple_dark_shapes.jpg');
background-size: 100%;
background-repeat: no-repeat;
background-position-y: -600%;
background-color: #000;
border-radius: 4px;
color: #FFF;
box-shadow: 0px 0px 50px 5px rgba(0, 0, 0, 0.5);
}
.close-btn {
margin: 20px;
font-size: 18px;
cursor: pointer;
}
.subscribe-wrapper {
position: absolute;
left: -30px;
right: -30px;
height: 200px;
padding: 30px;
background-image: url('https://i.imgur.com/MRjF1PL.png?1');
background-position-x: 272%;
background-position-y: -1px;
background-repeat: no-repeat;
background-color: #FFF;
border-radius: 4px;
color: #333;
box-shadow: 0px 0px 60px 5px rgba(0, 0, 0, 0.4);
}
.subscribe-wrapper:after {
position: absolute;
content: "";
right: -10px;
bottom: 71px;
width: 0;
height: 0;
border-left: 0px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #7149c7;
}
.subscribe-wrapper h4 {
text-align: center;
font-size: 20px;
font-weight: bold;
letter-spacing: 3px;
line-height: 28px;
}
.subscribe-wrapper input {
position: absolute;
bottom: 30px;
border: none;
border-bottom: 1px solid #d4d4d4;
padding: 10px;
width: 65%;
background: transparent;
transition: all .25s ease;
}
.subscribe-wrapper input:focus {
outline: none;
border-bottom: 1px solid #a77cf4;
}
.subscribe-wrapper .submit-btn {
position: absolute;
border-radius: 30px;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
background-color: #a77cf4;
color: #FFF;
padding: 12px 25px;
display: inline-block;
font-size: 12px;
font-weight: bold;
letter-spacing: 2px;
right: -10px;
bottom: 30px;
cursor: pointer;
transition: all .25s ease;
box-shadow: -5px 6px 20px 0px rgba(51, 51, 51, 0.4);
}
.subscribe-wrapper .submit-btn:hover {
background-color: #8e62dc;
}
</style>
</head>
<body>
<div class="parent-wrapper">
<span class="close-btn glyphicon glyphicon-remove"></span>
<div class="subscribe-wrapper">
<h4>SUBSCRIBE TO OUR NEWSLETTER</h4>
<input type="email" name="email" class="subscribe-input" placeholder="Your e-mail">
<div class="submit-btn">SUBMIT</div>
</div>
</div>
</body>
</html>
11. By Scottie
Made by Scottie. Simple CSS Subscribe Form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap');
* {
margin: 0;
padding: 0;
}
html {
font-size: 20px;
font-family: 'Roboto';
}
body {
background: linear-gradient(90deg, #ff9966, #ff5e62);
}
.wrapper {
height: 100vh;
position: realtive;
}
.fas.fa-envelope {
color: #fff;
font-size: 2rem;
background: #333;
padding: 1rem;
border-radius: 100%;
margin: 0 0 1rem 0;
}
.card-content {
max-width: 30rem;
background-color: #fff;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 1rem;
padding: 4rem .5rem;
box-shadow: 1px 1px 2rem rgba(0,0,0,.3);
text-align: center;
}
.card-content h1 {
text-transform: uppercase;
margin: 0 0 1rem 0;
}
.card-content p {
font-size: .8rem;
margin: 0 0 2rem 0;
}
input {
padding: .8rem 1rem;
width: 40%;
border-radius: 5rem;
outline: none;
border: .1rem solid #d1d1d1;
font-size: .7rem;
}
::placeholder {
color: #d1d1d1;
}
.subscribe-btn {
padding: .8rem 2rem;
border-radius: 5rem;
background: linear-gradient(90deg, #ff9966, #ff5e62);
color: #fff;
font-size: .7rem;
border: none;
outline: none;
cursor: pointer;
}
</style>
</head>
<body>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" integrity="sha384-i1LQnF23gykqWXg6jxC2ZbCbUMxyw5gLZY6UiUS98LYV5unm8GWmfkIS6jqJfb4E" crossorigin="anonymous">
<div class="wrapper">
<form action="#" class="card-content">
<div class="container">
<div class="image">
<i class="fas fa-envelope"></i>
</div>
<h1>Subscribe</h1>
<p>Subscribe to our newsletter and stay updated.</p>
</div>
<div class="form-input">
<label for="email"></label>
<input type="email" placeholder="Your Email">
<button class="subscribe-btn">Subscribe</button>
</div>
</form>
</div>
</body>
</html>