Hướng dẫn tạo form liên hệ bằng HTML, CSS – Dịch Vụ Bách khoa Sửa Chữa Chuyên nghiệp

Posted on by mtoplistChuyên mục:Top List

Hướng dẫn tạo form liên hệ bằng HTML, CSS

Form liên hệ là một công dụng không hề thiếu cho blog, website. Thông qua Form fan hâm mộ, người mua hoàn toàn có thể nhu yếu admin trợ giúp một yếu tố gì đó. Với website tự code trọn vẹn hay sử dụng CMS như WordPress đều cần tới Contact Form. Vậy những bước triển khai như thế nào mời bạn liên tục theo dõi ngay sau đây .Một Form liên hệ sẽ có những trường như :

  • Họ tên
  • Địa chỉ Email
  • Nội dung Yêu cầu
  • Button submit

Bước 1: Dựng khung HTML cho Form

Khi chưa có CSS trông khá đơn điệu

Bạn đang đọc: Hướng dẫn tạo form liên hệ bằng HTML, CSS

form-lien-he

Bước 2: Style bằng mã CSS

Kiểu 1

body {
background:rgb(30,30,40);
}
.form {
text-align: center;
margin-top: 40px;
max-width:420px;
margin:50px auto;
}
#form1 input[type=text] {
color:white;
font-family: sans-serif;
font-weight:500;
font-size: 18px;
border-radius: 5px;
line-height: 22px;
background-color: transparent;
border:2px solid #CC6666;
transition: all 0.3s;
padding: 13px;
margin-bottom: 15px;
width:100%;
box-sizing: border-box;
outline:0;
}

#form1 #fcontent {
height: 100px;
}
#form1 input[type=submit] {
color:white;
font-family: sans-serif;
font-weight:500;
font-size: 18px;
border-radius: 5px;
line-height: 22px;
background-color: #CC6666;
border:2px solid #CC6666;
transition: all 0.3s;
padding: 13px;
margin-bottom: 15px;
width:100%;
box-sizing: border-box;
outline:0;
}
#form1 input[type="submit"]:hover {
background:#CC4949;
}

contact-form-1

Kiểu 2:

/* Mã CSS */
.form {
text-align: center;
}
#form1 {
width: 600px;
background: #fff;
margin: 0 auto;
}
#form1 input[type=text] {
width: 100%;
box-sizing: border-box;
font-size: 18px;
color: #555;
display: block;
line-height: 1.2;
background-color: #fff;
border-radius: 20px;
margin-bottom: 10px;
height: 50px;
padding: 0 20px 0 23px;
border: 0;
box-shadow: 0 5px 20px 0 rgb(0 0 0 / 5%);
-moz-box-shadow: 0 5px 20px 0 rgba(0,0,0,.05);
-webkit-box-shadow: 0 5px 20px 0 rgb(0 0 0 / 5%);
-o-box-shadow: 0 5px 20px 0 rgba(0,0,0,.05);
-ms-box-shadow: 0 5px 20px 0 rgba(0,0,0,.05);
}
#form1 input[type=text]:focus{
border: 0;
outline: none;
box-shadow: 0 5px 20px 0 rgb(250 66 81 / 10%);
-moz-box-shadow: 0 5px 20px 0 rgba(250,66,81,.1);
-webkit-box-shadow: 0 5px 20px 0 rgb(250 66 81 / 10%);
-o-box-shadow: 0 5px 20px 0 rgba(250,66,81,.1);
-ms-box-shadow: 0 5px 20px 0 rgba(250,66,81,.1);
}
#form1 #fcontent {
outline: none;
min-height: 150px;
}
#form1 input[type=submit] {
background-color: #bd59d4;
height: 42px;
padding: 5px 20px;
border-radius: 21px;
font-size: 14px;
text-tranforms: uppercase;
color: #fff;
border: 0;
box-shadow: 0 10px 30px 0 rgb(189 89 212 / 50%);
-moz-box-shadow: 0 10px 30px 0 rgba(189,89,212,.5);
-webkit-box-shadow: 0 10px 30px 0 rgb(189 89 212 / 50%);
-o-box-shadow: 0 10px 30px 0 rgba(189,89,212,.5);
-ms-box-shadow: 0 10px 30px 0 rgba(189,89,212,.5);
}
#form1 input[type="submit"]:hover {
background:#CC4949;
}

form-lien-he-2

Khá đơn thuần phải không nào. Để tạo ra một Form liên hệ dùng HTML thì điều quan trọng đó là cách bạn sử dụng CSS. Chẳng hạn như sử dụng Padding, box-shadow, border-radius … Sau khi đọc xong bạn trọn vẹn tự tạo cho mình một Contact Form đẹp cho riêng mình rồi đấy.

mtoplist