Giới thiệu
Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách tối ưu hóa CSS cho scrollbar và nút gửi (submit) trong form của web, cụ thể là các biểu mẫu được xây dựng bằng WPForms. Tối ưu hóa CSS không chỉ giúp giao diện đẹp mắt hơn mà còn tăng trải nghiệm người dùng (UX) và cải thiện hiệu suất trang web. Hãy cùng đi vào chi tiết từng phần.
1. Tối Ưu Hóa Scrollbar
Scrollbar là một phần quan trọng giúp người dùng dễ dàng cuộn nội dung trong các khối có chiều dài vượt quá kích thước cố định. Việc tùy chỉnh scrollbar giúp giao diện web trở nên chuyên nghiệp hơn. Dưới đây là đoạn CSS được tối ưu hóa:
.wpforms-field-subgroup.wpforms-subgroup-inline {
width: 100%;
height: 115px;
overflow-y: auto;
overflow-x: hidden;
}
/* Tùy chỉnh giao diện của scrollbar */
.wpforms-field-subgroup.wpforms-subgroup-inline::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
.wpforms-field-subgroup.wpforms-subgroup-inline::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
.wpforms-field-subgroup.wpforms-subgroup-inline::-webkit-scrollbar-thumb {
border-radius: 10px;
background-image: linear-gradient(to top, #00ad8d 44%, #109ca2 72%, #218cba 86%);
}
Giải thích:
- overflow-y: auto: Tự động hiển thị scrollbar dọc khi nội dung vượt quá chiều cao 115px.
- Scrollbar track: Thiết lập bóng đổ (shadow) và bo góc để tạo cảm giác mềm mại hơn.
- Scrollbar thumb: Sử dụng gradient để tạo hiệu ứng màu sắc đẹp mắt.
2. Tối Ưu Nút Gửi Form
Nút gửi form là một yếu tố quan trọng trong trải nghiệm người dùng. Một nút có thiết kế đẹp mắt, dễ nhìn và hiệu ứng tương tác tốt sẽ giúp tăng tỷ lệ chuyển đổi (conversion rate). Đây là đoạn CSS tối ưu cho nút gửi:
div.wpforms-container-full .wpforms-form button[type=submit] {
background-color: #F15A29;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
div.wpforms-container-full .wpforms-form button[type=submit]:hover {
background-color: #d45022;
}
Giải thích:
- background-color: Sử dụng màu cam (#F15A29) nổi bật, dễ nhận diện.
- transition: Thêm hiệu ứng chuyển đổi mượt mà khi người dùng hover.
- hover effect: Đổi màu nền khi hover để tạo điểm nhấn.
3. Tối Ưu Hóa Layout Form Với Grid Và Flexbox
Việc sử dụng grid và flexbox sẽ giúp bố cục biểu mẫu linh hoạt hơn, dễ dàng điều chỉnh kích thước và vị trí các thành phần.
._form .wpforms-field-subgroup {
display: grid;
}
.buoc {
font-size: 16px;
color: #2688C2;
font-weight: 600;
}
.buoc1:before, .buoc2:before, .buoc3:before {
content: attr(data-step);
padding: 3px 10px;
background: #2688C2;
border-radius: 99%;
color: #fff;
font-weight: bold;
font-size: 18px;
margin-right: 5px;
}
._form .wpforms-field-option {
padding: 6px;
background: #dfdfdf;
margin: 2px;
color: #0a3d62;
display: inline-block;
font-size: 12px;
}
._form .chosen-container {
width: inherit !important;
}
._form .wpforms-field-label {
width: 33% !important;
float: left !important;
}
._form .wpforms-field-group {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.wpforms-form-fields-wrapper .wpforms-field-group .wpforms-field-subgroup,
.wpforms-form-fields-wrapper .wpforms-field-group > .wpforms-select-wrapper,
.wpforms-form-fields-wrapper .wpforms-field-group > input,
.wpforms-form-fields-wrapper .wpforms-field-group > textarea {
flex-basis: 100% !important;
max-width: 100% !important;
}
4. Tối Ưu Cho Màn Hình Di Động
Khi thiết kế biểu mẫu cho màn hình di động, việc điều chỉnh bố cục sao cho thân thiện là rất quan trọng. Dưới đây là đoạn CSS để tối ưu giao diện form khi hiển thị trên màn hình nhỏ:
@media only screen and (max-width: 767px) {
._form .wpforms-field-type-checkbox.wpforms-field-group {
width: auto;
height: 100px;
overflow-y: scroll;
overflow-x: hidden;
}
._form .wpforms-field-type-checkbox::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
._form .wpforms-field-type-checkbox::-webkit-scrollbar-thumb {
border-radius: 10px;
background-image: linear-gradient(to top, #7A99D9 44%, #497DBD 72%, #1C3A94 86%);
}
._form .wpforms-field-type-checkbox::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
._form .wpforms-field-option {
flex-basis: 100% !important;
}
._form .wpforms-field-group:not(.wpforms-field-type-upload) .wpforms-field:not(.wpforms-select-wrapper) {
width: 66% !important;
}
._form .wpforms-field-label {
width: 40% !important;
float: left !important;
}
.wpforms-form-fields-wrapper .wpforms-field-group .wpforms-field-subgroup,
.wpforms-form-fields-wrapper .wpforms-field-group > .wpforms-select-wrapper,
.wpforms-form-fields-wrapper .wpforms-field-group > input,
.wpforms-form-fields-wrapper .wpforms-field-group > textarea {
max-width: 60% !important;
}
}
5. Tổng Kết
Bằng cách tối ưu hóa CSS cho scrollbar và nút gửi form, bạn sẽ tạo ra một giao diện web chuyên nghiệp, thân thiện với người dùng. Hãy thử áp dụng ngay để cải thiện chất lượng trang web của bạn.
Hy vọng bài viết này hữu ích cho bạn. Nếu có thắc mắc hoặc cần hỗ trợ, đừng ngần ngại để lại bình luận bên dưới!