10+ CSS Subscribe Form Examples

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

css subscribe form by oritzio
<!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

css newsletter form by nathan nguyen
<!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

css newsletter form by sazzad
<!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

css subscribe form by uday
<!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

css subscribe form by krismis
<!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

css subscribe form by mohammad rahmani
<!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

css subscribe form by joaquin
<!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

css subscribe form by dinsmore
<!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

css newsletter form by baahubali
<!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

css subscribe form by hugo carneiro
<!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

css subscribe form by scottie
<!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>