Làm cách nào chúng ta có thể tạo một popup đăng ký với email bằng HTML & CSS? Mọi người hãy thử làm theo cách trong bài viết này nhé.

Mình chắc các bạn đa phần đều biết về form đăng ký với email. Vì trên nhiều trang web đã có tính năng này, khi các bạn nhấp vào nút đăng ký thì một form đăng ký sẽ xuất hiện. Và khi bạn điền email của bạn và nhấp vào đăng ký thì form đó sẽ biến mất.

Hôm nay mình sẽ chỉ các bạn cách tạo một form đăng ký với email . Có một nút đăng ký khi bạn nhấp vào nó, nó trở thành một hộp modal với hiệu ứng bật lên. Bạn có thể dễ dàng đặt popup form này trên trang web của mình sau khi thiết lập tập lệnh từ phía backend hoặc từ phía máy chủ. Và cũng hãy yên tâm là nó sẽ thích ứng được với mọi kích thước màn hình của các thiết bị điện tử.

Vì vậy, hôm nay mình sẽ thêm CSS cho form bằng HTML này giúp cho form nhìn đẹp và hoàn chỉnh hơn, và để popup được tắt và bật thì ở đây mình sử dụng JQuery nhé.

Dưới đây là hình minh hoạ cho các bạn nhé.

popup

 

Source code CSS cho popup form:

Trước khi chia sẻ source code, thì để mình chia sẻ đôi điều. Để tạo thiết kế trang đăng ký email này, mình đã sử dụng HTML, CSS và jQuery. Đầu tiên, mình đã tạo một nút để mở popup. Sau đó, mình đã tạo ra một modal box với văn bản, hình ảnh, form với nút gửi.

Sau khi tạo một modal box, mình đưa các giá trị CSS để ẩn nó đi. Nó sẽ mở khi nhấp vào nút, và jQuery sẽ làm công việc hiển thị modal box có hình động. Sử dụng CSS transition mình đã cho tất cả các thuộc tính là hiệu ứng hoạt hình.

Trong cái chương trình này có rất nhiều lệnh cơ bản,  nên mình không thể giải thích tất cả các thuộc tính bằng văn bản. Cho nên cách nhanh nhất là sau khi nhận được code, thì bạn sẽ hiểu nó một cách dễ dàng hơn. Để tạo box này thì bạn cần phải tạo 3 tệp. Thứ nhất cho HTML, thứ hai cho CSS và thứ ba cho JavaScript.

Thực hiện theo các bước của mình để đừng có lỗi nhé, vì có lỗi sẽ rất mất thời gian để fix đó.

index.html

popup

Tạo một tệp HTML có tên ‘index.html, và đặt các mã được đưa ra dưới đây.

x.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<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>

style.css

popup

Bây giờ hãy tạo một tệp CSS có tên ‘style.css và đặt các code này vào.

.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
*, *: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

popup

Bước cuối cùng, Tạo một tệp JavaScript có tên ‘function.js’ và đặt code sau đây vào.

2
3
4
5
6
7
8
$(‘button’).click(function(){
  $(‘.popup’).addClass(‘open’);
});
$(‘.popup .closebtn’).click(function(){
  $(‘.popup’).removeClass(‘open’);
});

Xong rồi đó. Bây giờ bạn đã tạo thành công formđăng ký email với HTML&CSS rồi nhé,

Nếu bạn có bất kỳ nghi ngờ hoặc câu hỏi thì bình luận xuống dưới nhé.

Mình cảm ơn các bạn đã đọc bài viết này và mình cũng bật mí là bên phía Nordic Coder có cung cấp khoá học Web Front-End với giá cực ưu đãi.

Nếu bạn muốn trở thành lập trình viên chuyên nghiệp trong thời gian ngắn nhất? Bạn muốn có việc làm IT mức lương khủng sau khoá học? Hãy đăng ký các khoá học lập trình online và offline tại Nordic Coder – Trung tâm dạy lập trình uy tín và chuyên nghiệp. Ngoài ra, Nordic Coder còn là cầu nối nghề nghiệp IT giữa học viên và với các công ty công nghệ hàng đầu Việt Nam sau các khoá học lập trình.