Hướng dẫn javascript contact form - biểu mẫu liên hệ javascript
|
Contact form hay form liên hệ là một phần không thể thiếu trong bất kì loại website nào từ website tin tức đến website bán hàng hay cả những blog cá nhân. Việc sử dụng contact form sẽ liên kết người dùng với chủ doanh nghiệp một cách rất hiệu quả. Để xây dựng được một contact form, các bạn cần phải biết khá nhiều kiến thức về PHP để gửi và nhận dữ liệu từ người dùng. Tuy nhiên trong bài này, mình sẽ chỉ hướng dẫn các bạn xây dựng phần giao diện hiển thị của một contact form, các bạn xem hình ảnh dưới đây:  Cùng tiến hành nhé ! 1.Xây dựng giao diệnĐầu tiên chúng ta sẽ xây dựng các thành phần, các bạn tạo file index.html và dán đoạn mã sau vào trong thẻ body: Code
Trong ứng dụng này chúng ta sẽ tạo ra một form bao gồm một số thẻ input lấy thông tin cơ bản như Tên, Email, Số điện thoại ... OK giờ chuyển qua bước tiếp theo. 2.Thêm CSS cho giao diệnChúng ta đã có thành phần hiển thị rồi giờ sử dụng CSS để định dạng cho chúng, các bạn đặt đoạn CSS dưới đây vào bên trong thẻ style: .container {
width: 30%;
margin: auto;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
input[type=text] {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}Các đoạn mã trên đều rất cơ bản, các bạn có thể tuỳ chỉnh theo ý thích sao cho phù hợp nhất với website của mình. Giờ các bạn chạy file index.html để xem thành quả mình vừa tạo ra nhé! 3.Lời kếtNhư vậy, qua bài viết này mình đã cùng các bạn tạo contact form đơn giản với CSS. Hi vọng nó sẽ giúp các có thêm sự lựa chọn trong quá trình xây dựng website, nếu có bất cứ thắc mắc nào các bạn có thể để lại trong phần bình luận, hẹn gặp lại trong các bài viết tiếp theo trên freetuts.net. Tham khảo: w3schools.com Contact Form 7 (CF7) là plugin form rất phổ biến, chắc nhiều anh chị em đang dùng, tuy nhiên nó có nhược điểm về mặt hiệu suất, tốc độ đó là chèn CSS và JS trên tất cả các post, page dù trang đó có nhúng form hay không!chèn CSS và JS trên tất cả các post, page dù trang đó có nhúng form hay
không! Nếu trang web của bạn có cài CF7 thì để kiểm tra vấn đề này bạn làm như sau. Bạn tạm thời vô hiệu hóa tính năng gộp (combine) và minify JS và CSS (ví dụ của các plugin cache như LiteSpeed, WP-Rocket hoặc Autoptimize), việc này giúp bạn nhận diện các file dễ dàng hơn. Tiếp đó trên trình duyệt Chrome, bạn vào một trang không có form của CF7, nhấn Ctrl + Shift + I > Network > Disable cache > JS rồi tải lại trang. Bạn sẽ thấy tất cả các file JS mà trang phải tải về. Di chuột qua từng file JS bạn sẽ nhanh chóng nhận ra trang tải JS của CF7 về: Nó nằm ở đường dẫn: và nặng khoảng 14KB. Tương tự, CSS cũng vậy, nhưng may mắn hơn là CSS rất nhẹ chưa đến 1KB. Vậy làm sao để loại được CSS và JS dư thừa này? Cách đỡ tốn kém nhất là sử dụng plugin khác có cách chèn mã thông minh hơn (tức là chỉ chèn CSS & JS vào trang nào có form). Ví dụ như WPform. Cách thứ hai, nếu vì lý do nào đó bạn vẫn phải xài Contact Form 7 thì có thể dùng plugin kiểu như Perfmatters để vô hiệu hóa CF7 trên các trang không liên quan. Nên dùng tính năng vô hiệu hóa trên tất cả các trang (Disable > Everywhere) và chỉ bật trên những trang nào cần dùng bằng câu lệnh Regex. Tính năng này sẽ tiện vì đa số chúng ta chỉ dùng form trên vài trang mà thôi. Cách làm như sau: Trong đó page1 và page2 là đường dẫn (URL slug) của trang, ví dụ như: (\/contact-us\/) Tuy nhiên Perfmatters là plugin có phí. Anh chị em nào có giải pháp miễn phí với Contanct Form 7 không (mà không phải dùng plugin form khác)? PS: tôi đăng câu hỏi lên nhóm WordPress Việt Nam, có người trả lời luôn, bạn nào không muốn dùng plugin để chặn JS & CSS của CF7 tải trên tất cả các trang có thể dùng giải pháp này: https://contactform7.com/loading-javascript-and-stylesheet-only-when-it-is-necessary/ |
