Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Contact Form Bằng HTML, CSS

Cách Tạo Contact Form Bằng HTML, CSS


Ngày 5 Tháng 10 Năm 2020

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tạo Contact Form</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</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é:

Tạo Contact Form Phần 1

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é:

Tạo Contact Form Phần 2

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é:

Tạo Contact Form Phần 3

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:

Tạo Contact Form Phần 4

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é:

Tạo Contact Form Phần 5

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 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é:

Tạo Contact Form Phần 6

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ẻ!