Tóm Tắt
Cách Tạo Contact Form Bằng HTML, CSS
Ngày hôm nay chúng ta sẽ đi vào thực hành HTMl, CSS thông qua việc tạo form contact(liên hệ) cho trang web nhé!
Thiết Lập HTML Cho Contact Form
Bước đầu tiên chúng ta sẽ đi vào tạo file index.html để chứa HTML của contact form. Sau đó chúng ta sẽ liên kết chúng vối file style.css(Nơi chứa mã CSS), CDN Google Font và Font Awesome v4.7 thông qua đoạn mã sau nhé (Lưu ý là file html và css bạn phải đặt chung một thư mục nha):
HTML
Thêm Phần Tử HTML Cho Contact Form
Trong một contact form (biểu mẫu liên hệ) thì thường được chia thành hai phần đó là phần giới thiệu về công ty và phần biểu mẫu(form) dùng để thu thập thông tin cũng như ý kiến của người dùng muốn gửi đến chúng ta.
Bây giờ chúng ta sẽ đi vào thiết lập phần giới thiệu công ty thông qua đoạn mã sau nhé:
HTML
<section>
<div class="container">
<div class="containerinfo">
<div>
<h2>Thông Tin Liên Hệ</h2>
<ul class="info">
<li>
<span><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<span>Đường 1234 Phan Văn Trị<br />
Quận Gò Vấp,<br />
Thành Phố Hồ Chí Minh
</span>
</li>
<li>
<span><i class="fa fa-envelope" aria-hidden="true"></i></span>
<span>[email protected]</span>
</li>
<li>
<span><i class="fa fa-phone-square" aria-hidden="true"></i></span>
<span>012-345-6789</span>
</li>
</ul>
</div>
<ul class="sci">
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
</ul>
</div>
</section>
Và kết quả bạn xem ở dưới đây nhé:
Thiết Lập Vị Trí Và Font Chữ Cho Contact Form
Phần tiếp theo chúng ta sẽ đi vào thiết lập style cho thẻ section và xác định vị trí, độ rộng, chiều cao… của contact form thông qua thẻ div có class là .container trong file HTML thông qua đoạn mã sau nhé:
CSS
*{
margin:0;
padding: 0;
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
}
section{
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #112d42;
}
section::before{
content: "";
position: absolute;
top: 0;
left: 0;
width:50%;
height: 100%;
background: #03a9f4;
}
section .container{
position: relative;
min-width: 1100px;
min-height: 550px;
display:flex;
z-index: 100;
}
Kết quả của đoạn code trên bạn xem dưới đây nhé:
Thiết Lập Style Cho Nội Dung Giới Thiệu Công Ty
Trong phần này chúng ta sẽ dùng CSS để thiết kế lại nội dung giới thiệu về công ty như địa chỉ, email, điện thoại… trong contact form được đẹp mắt hơn thông qua đoạn mã CSS dưới đây nhé:
CSS
section .container .containerinfo{
position: absolute;
top: 40px;
width: 350px;
height: calc(100% - 80px);
background: #0f3959;
z-index: 1;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 20px 20px rgba(0,0,0,0.2);
}
section .container .containerinfo h2{
color: #fff;
font-size: 24px;
margin: 20px 0;
}
section .container .containerinfo li{
position: relative;
list-style: none;
display: flex;
margin: 20px 0;
cursor: pointer;
align-items: flex-start;
}
section .container .containerinfo li span{
color: #fff;
margin-left: 10px;
font-weight: 300;
opacity: 0.5;
font-size: 20px;
}
/*Hiệu Ứng Hover Cho Thẻ Li*/
section .container .containerinfo li:hover span{
opacity: 1;
}
Và kết quả bạn xem ở dưới đây nhé:
Thiết Lập Style Cho Icon Mạng Xã Hội
Tiếp theo chúng ta sẽ đi vào thiết kế lại vị trí cũng như khoảng cách giữa các icon mạng xã hội trong contact form được đẹp mắt hơn thông qua đoạn mã sau nhé:
CSS
section .container .containerinfo .sci{
position: relative;
display:flex;
}
section .container .containerinfo .sci li{
list-style: none;
margin-right: 15px;
}
section .container .containerinfo .sci li a{
text-decoration: none;
opacity: 0.5;
color: #fff;
font-size: 32px;
}
/*Hiệu Ứng Hover Icon*/
section .container .containerinfo .sci li:hover a{
opacity: 1;
}
Và dưới đây là kết quả nha:
Thêm Form Để Thu Thập Thông Tin Người Dùng
Phần này chúng ta sẽ đi vào thiết lập form dùng để thu thập thông tin cũng như nhận xét từ người dùng bằng các thẻ input trong HTML. Để hiểu rõ hơn bạn xem đoạn mã sau nhé:
HTML
<section>
<div class="container">
<div class="containerinfo">...</div>
<!-- Bắt đầu đoạn mã mới-->
<div class="containerForm">
<h2>Gửi Lời Nhắn</h2>
<div class="formBox">
<div class="inputBox w50">
<input type="text" name="" required>
<span>Họ</span>
</div>
<div class="inputBox w50">
<input type="text" name="" required>
<span>Tên</span>
</div>
<div class="inputBox w50">
<input type="text" name="" required>
<span>Email</span>
</div>
<div class="inputBox w50">
<input type="text" name="" required>
<span>Số Điện Thoại</span>
</div>
<div class="inputBox w100">
<textarea name="" required></textarea>
<span>Lời Nhắn Của Bạn</span>
</div>
<div class="inputBox w100">
<input type="submit" value="Gửi">
</div>
</div>
</div>
<!-- Kết thúc đoạn mã mới-->
</div>
</section>
Chúng ta sẽ sử dụng CSS để thiết lập lại vị trí cũng như độ rộng của các ô input bằng đoạn mã CSS sau nhé:
CSS
section .container .containerForm{
position: absolute;
padding: 70px 50px;
background: #fff;
margin-left: 150px;
padding-left: 250px;
width: calc(100% - 150px);
height: 100%;
box-shadow: 0 50px 50px rgba(0,0,0,0.5);
}
section .container .containerForm h2{
color: #0f3959;
font-size: 24px;
font-weight: 500;
}
section .container .containerForm .formBox{
position: relative;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding-top: 30px;
}
section .container .containerForm .formBox .inputBox{
position: relative;
margin: 0 0 35px 0;
}
section .container .containerForm .formBox .inputBox.w50{
width: 47%;
}
section .container .containerForm .formBox .inputBox.w100{
width: 100%;
}
Và kết quả của hai đoạn code bạn xem ở bên dưới nhé:
Thiết Lập Style Cho Thẻ Input Trong Contact Form
Phần này chúng ta sẽ đi vào thiết lập style cho thẻ input trong contact form thông qua đoạn mã sau nhé:
CSS
section .container .containerForm .formBox .inputBox input,
section .container .containerForm .formBox .inputBox textarea{
width: 100%;
padding: 5px 0;
resize: none;
font-size: 18px;
font-weight: 400;
color: #333;
border: none;
border-bottom: 1px solid #777;
outline: none;
}
section .container .containerForm .formBox .inputBox textarea{
min-height: 120px;
}
section .container .containerForm .formBox .inputBox input[type="submit"]{
position: relative;
cursor: pointer;
background: #0f3959;
color: #fff;
border: none;
max-width: 150px;
padding: 12px;
}
section .container .containerForm .formBox .inputBox input[type="submit"]:hover{
background: #ff568c;
}
Và kết quả bạn xem ở dưới đây nhé:
Thiết Lập Chuyển Động Label Cho Thẻ Input
Phần cuối cùng chúng ta sẽ đi vào thiết lập hiệu ứng chuyển động label cho thẻ input thông qua đoạn mã CSS sau nhé:
CSS
section .container .containerForm .formBox .inputBox span{
position: absolute;
left: 0;
padding: 5px 0;
font-size: 18px;
font-weight: 400;
color: #333;
transition: 0.5s;
pointer-events: none;
}
section .container .containerForm .formBox .inputBox input:focus ~ span,
section .container .containerForm .formBox .inputBox textarea:focus ~ span,
section .container .containerForm .formBox .inputBox input:valid ~ span,
section .container .containerForm .formBox .inputBox textarea:valid ~ span{
transform: translateY(-20px);
font-size: 12px;
font-weight: 400;
letter-spacing: 1px;
color: #ff568c
}
Kết quả cuối cùng bạn xem video bên dưới nhé:
Nguồn Tham Khảo https://www.youtube.com/watch?v=kdx_TGjvsMg&ab_channel=OnlineTutorials
Nếu bạn muốn xem contact form này trên codepen thì có thể truy cập ở đây nhé!
Nếu bạn muốn thao khảo về các loại contact form khác thì truy cập ở đây nha.
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn cách tạo Contact Form hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!
