Home Web Design CSS CSS Popup Subscription Form | HTML Email Signup Modal Box

CSS Popup Subscription Form | HTML Email Signup Modal Box

July 12, 2019

13222

How we can create a popup email subscribe form using HTML & CSS? Solution: CSS Popup Subscription Form, HTML Email Signup Modal Box With Overlay.

I am sure you know that you know about email subscription form. Previously I have shared an animated Newsletter Form, this time it is a popup form with overlay. On many websites has this feature, when you click on the subscribe button then there appears a popup form. When you fill your email and click on signup then the form disappears.

Today you will learn to create an Email Subscription Form with popup modal box. There is a subscribe button when you click on it its become a modal box with popup effect. You can place this form on your website easily after setup your backend or server-side script. This is also responsive, so it will fit on every screen size.

So, Today I am sharing CSS Popup Subscription Form. In other words, An HTML Email Signup Modal Box With Popup Overlay feature. This subscription form has a responsive design. This whole email sign up form is almost with pure CSS expect the popup toggle switch. For on & off the popup modal box I have used jQuery.

If you are thinking now how this Email Signup Modal Box actually is, then see the preview given below.

Preview Of Responsive Email Signup Modal Box

See this video preview to getting an idea of how this form looks like.

Now you can see this visually. If you like this, then get the source code of its.

CSS Popup Subscription Form Source Code

Before sharing source code, let’s talk about this. For creating this email sign up page design, I have used HTML, CSS, & jQuery. First, I have created a button to open the popup modal box. After that, I have created a modal box with text, image, form with submit button. I want to say that first, I get inspiration from a Behance post to creating this.

After creating a modal box I gave CSS values to hide it. It will open when clicking on the button, jQuery show the modal box with animation. Using CSS transition I gave all elements an animation effect. As you can see on the preview the modal box & the image inside it has an animation which goes left to right, for creating this I have used transform: translate property.

This program has lots of basic commands, I can’t explain all the properties in writing. After getting the codes, You will understand easily. For creating this popup modal box, you have to create 3 files. First for HTML, second for CSS, & third for JavaScript.

Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html’ and put these codes given below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Popup Subscribe Form | Webdevtrick.com</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link href="https://fonts.googleapis.com/css?family=Hammersmith+One&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="button">
  <button><span>Subscribe</span></button>
</div>

<div class="popup">
  <div class="content">
    <div class="container">
      <div class="circles">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>

      </div>
      
      <span class="closebtn">&#9932;</span>
      
      <div class="title">
        <h1>Become A Subscriber</h1>
      </div>
      
      <img src="https://webdevtrick.com/wp-content/uploads/logo-fb-1.png" alt="Car">
      
      <div class="subscribe">
        <h1>Subscribe To Get The Notification Of Latest <span>POSTS</span></h1>
      
        <form>
          <input type="email" placeholder="Put Your Email Address">
          <input type="submit" value="Subscribe">
        </form>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
    <script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>CSS Popup Subscribe Form | Webdevtrick.com</title>

</head>

<body>

<button><span>Subscribe</span></button>

</div>

</div>

<h1>Become A Subscriber</h1>

</div>

<h1>Subscribe To Get The Notification Of Latest <span>POSTS</span></h1>

<form>

</form>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #fff;
  font-family: 'Hammersmith One', sans-serif;
}

.button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.button button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: inherit;
  background-color: #f66867;
  border: 0;
  padding: 15px 25px;
  color: #fff;
  text-transform: uppercase;
  font-size: 21px;
  letter-spacing: 1px;
  width: 200px;
  overflow: hidden;
  outline: 0;
  transition: all 0.4s;
  visibility: visible;
  opacity: 1;
  font-weight: bold;
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.6);
}
.button button:hover {
  cursor: pointer;
  background-color: #2ab1ce;
}
.button button span {
  opacity: 1;
}
.button.clicked button {
  visibility: hidden;
  oacity: 0;
}
.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  overflow-y: auto;
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.4);
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
  z-index: 10;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}

.popup .content {
  width: 100%;
  max-width: 900px;
  overflow: hidden;
  text-align: center;
  position: relative;
  min-height: 100vh;
}
.popup .content .container {
  padding: 100px 20px 140px;
}

.popup .content .closebtn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: 3.1rem;
  letter-spacing: 0.05rem;
  color: #3e4146;
  transition: all 0.4s;
}
.popup .content .closebtn:hover {
  cursor: pointer;
  color: #f66867;
}
.popup .content .circles .circle {
  position: absolute;
  border-radius: 100%;
  z-index: 11;
}
.popup .content .circles .circle:nth-of-type(1) {
  top: -80px;
  right: -80px;
  width: 160px;
  height: 160px;
  background-color: #2ab1ce;
}
.popup .content .circles .circle:nth-of-type(2) {
  bottom: -120px;
  left: -120px;
  width: 240px;
  height: 240px;
  background-color: #f66867;
}

.popup .content .circles .circle:nth-of-type(3) {
  top: -50px;
  left: -50px;
  width: 100px;
  height: 100px;
  background-color: #333;
}
.popup .content .title h1 {
  text-align: center;
  color: #f66867;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 2.8rem;
  letter-spacing: 0.05rem;
}
.popup .content img {
  width: 100%;
  max-width: 220px;
  display: inline-block;
  margin: 30px 0 40px 0;
  opacity: 0;
  transform: translateX(-60px);
  transition: 0.2s;
  -webkit-backface-visibility: hidden;
}

.popup .content .subscribe h1 {
  font-size: 1.5rem;
  color: #3e4146;
  line-height: 130%;
  letter-spacing: 0.07rem;
  margin-bottom: 30px;
}
.popup .content .subscribe h1 span {
  color: #f66867;
}
.popup .content .subscribe form {
  overflow: hidden;
}
.popup .content .subscribe form input {
  width: 100%;
  float: left;
  padding: 15px 20px;
  text-align: center;
  font-family: inherit;
  font-size: 1.1rem;
  letter-spacing: 0.05rem;
  outline: 0;
}
.popup .content .subscribe form input[type=email] {
  margin-bottom: 15px;
  border: 1px solid #bec1c5;
  transition: all 0.4s;
}

.popup .content .subscribe form input[type=email]:focus {
  border-color: #3e4146;
}
.popup .content .subscribe form input[type=submit] {
  background-color: #f66867;
  color: #ffffff;
  border: 1px solid #f66867;
  transition: all 0.4s;
}

.popup .content .subscribe form input[type=submit]:hover {
  cursor: pointer;
  background-color: #2ab1ce;
  border-color: #2ab1ce;
}
.popup.open {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.popup.open img {
  opacity: 1;
  transition: 1s;
  transition-delay: 0.3s;
  transform: translateX(0px);
}
@media (min-width: 568px) {
  .popup .content {
    min-height: inherit;
  }
  .popup .content .container {
    padding: 50px 20px 80px;
  }
}

@media (min-width: 768px) {
  .popup .content .container {
    padding: 70px 0px 90px;
    max-width: 520px;
    margin: 0 auto;
  }
  .popup .content .circles .circle:nth-of-type(1) {
      top: -190px;
      right: -190px;
      width: 380px;
      height: 380px;

    }
  .popup .content .subscribe form input[type=email] {
      margin-bottom: 0px;
      width: 75%;
      border-right-width: 0px;
    }
  .popup .content .subscribe form input[type=submit] {
      width: 25%;
    }
  .popup {
      width: calc(100% - 40px);
      height: auto;
      max-width: 900px;
    }
  
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

/* Code By Webdevtrick ( https://webdevtrick.com ) */

*, *:before, *:after {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

background: #fff;

font-family: 'Hammersmith One', sans-serif;

}

.button {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 2;

}

.button button {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

font-family: inherit;

background-color: #f66867;

border: 0;

padding: 15px 25px;

color: #fff;

text-transform: uppercase;

font-size: 21px;

letter-spacing: 1px;

width: 200px;

overflow: hidden;

outline: 0;

transition: all 0.4s;

visibility: visible;

opacity: 1;

font-weight: bold;

box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.6);

}

.button button:hover {

cursor: pointer;

background-color: #2ab1ce;

}

.button button span {

opacity: 1;

}

.button.clicked button {

visibility: hidden;

oacity: 0;

}

.popup {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%) scale(0.9);

overflow-y: auto;

box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.4);

visibility: hidden;

opacity: 0;

transition: all 0.3s;

z-index: 10;

background-color: #ffffff;

width: 100%;

height: 100%;

}

.popup .content {

width: 100%;

max-width: 900px;

overflow: hidden;

text-align: center;

position: relative;

min-height: 100vh;

}

.popup .content .container {

padding: 100px 20px 140px;

}

.popup .content .closebtn {

position: absolute;

bottom: 20px;

right: 20px;

font-size: 3.1rem;

letter-spacing: 0.05rem;

color: #3e4146;

transition: all 0.4s;

}

.popup .content .closebtn:hover {

cursor: pointer;

color: #f66867;

}

.popup .content .circles .circle {

position: absolute;

border-radius: 100%;

z-index: 11;

}

.popup .content .circles .circle:nth-of-type(1) {

top: -80px;

right: -80px;

width: 160px;

height: 160px;

background-color: #2ab1ce;

}

.popup .content .circles .circle:nth-of-type(2) {

bottom: -120px;

left: -120px;

width: 240px;

height: 240px;

background-color: #f66867;

}

.popup .content .circles .circle:nth-of-type(3) {

top: -50px;

left: -50px;

width: 100px;

height: 100px;

background-color: #333;

}

.popup .content .title h1 {

text-align: center;

color: #f66867;

text-transform: uppercase;

font-weight: 900;

font-size: 2.8rem;

letter-spacing: 0.05rem;

}

.popup .content img {

width: 100%;

max-width: 220px;

display: inline-block;

margin: 30px 0 40px 0;

opacity: 0;

transform: translateX(-60px);

transition: 0.2s;

-webkit-backface-visibility: hidden;

}

.popup .content .subscribe h1 {

font-size: 1.5rem;

color: #3e4146;

line-height: 130%;

letter-spacing: 0.07rem;

margin-bottom: 30px;

}

.popup .content .subscribe h1 span {

color: #f66867;

}

.popup .content .subscribe form {

overflow: hidden;

}

.popup .content .subscribe form input {

width: 100%;

float: left;

padding: 15px 20px;

text-align: center;

font-family: inherit;

font-size: 1.1rem;

letter-spacing: 0.05rem;

outline: 0;

}

.popup .content .subscribe form input[type=email] {

margin-bottom: 15px;

border: 1px solid #bec1c5;

transition: all 0.4s;

}

.popup .content .subscribe form input[type=email]:focus {

border-color: #3e4146;

}

.popup .content .subscribe form input[type=submit] {

background-color: #f66867;

color: #ffffff;

border: 1px solid #f66867;

transition: all 0.4s;

}

.popup .content .subscribe form input[type=submit]:hover {

cursor: pointer;

background-color: #2ab1ce;

border-color: #2ab1ce;

}

.popup.open {

visibility: visible;

opacity: 1;

transform: translate(-50%, -50%) scale(1);

}

.popup.open img {

opacity: 1;

transition: 1s;

transition-delay: 0.3s;

transform: translateX(0px);

}

@media (min-width: 568px) {

.popup .content {

min-height: inherit;

}

.popup .content .container {

padding: 50px 20px 80px;

}

@media (min-width: 768px) {

.popup .content .container {

padding: 70px 0px 90px;

max-width: 520px;

margin: 0 auto;

}

.popup .content .circles .circle:nth-of-type(1) {

top: -190px;

right: -190px;

width: 380px;

height: 380px;

}

.popup .content .subscribe form input[type=email] {

margin-bottom: 0px;

width: 75%;

border-right-width: 0px;

}

.popup .content .subscribe form input[type=submit] {

width: 25%;

}

.popup {

width: calc(100% - 40px);

height: auto;

max-width: 900px;

}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
$('button').click(function(){
  $('.popup').addClass('open');
});

$('.popup .closebtn').click(function(){
  $('.popup').removeClass('open');
});

/* Code By Webdevtrick ( https://webdevtrick.com ) */

$('button').click(function(){

$('.popup').addClass('open');

});

$('.popup .closebtn').click(function(){

$('.popup').removeClass('open');

});

That’s It. Now you have successfully created A CSS Popup Subscription Form, An HTML Email Signup Modal Box. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

9 COMMENTS

Sumit kumar July 13, 2019 At 5:59 am

Which syntax highlighter you are using on your blog

Reply
- shaan July 13, 2019 At 9:31 am
  
  crayon
  
  Reply
  - Sumit kumar July 14, 2019 At 11:07 am
    
    But in our latest version crayon is not working
    
    Reply
    - Kamran Tahir July 14, 2019 At 8:47 pm
      
      Try using enlighter
      
      Reply
      - shaan July 15, 2019 At 3:06 am
        
        sure
Taran jeet July 15, 2019 At 4:04 pm

Kindly Provide Usage, Lots of Beginners wants to know how and where we can use these. I am Using WordPress, Is it possible to use This in WordPress? Please Guide me..

Reply
- shaan July 15, 2019 At 4:34 pm
  
  This is for learning purpose. For wordpress, you can use the HelloBar plugin.
  
  Reply
Candypops Shoes September 5, 2020 At 9:35 am

I read this paragraph completely about the comparison of latest and previous technologies, it’s awesome article.

Reply
YouTube Downloader September 15, 2022 At 10:42 am

can you please tell me where to add this as I am using php script from codecanyon

Reply