Các hình thức đặt phòng có thể phục vụ rất nhiều mục đích trên một trang web. Bạn có thể sử dụng chúng để cho phép khách truy cập đặt phòng khách sạn hoặc vé tham dự một sự kiện nổi tiếng. Chúng cũng có thể được sử dụng cho những việc khác như đặt lịch hẹn với khách hàng
Chúng là một cách tuyệt vời để mọi người chỉ cần cung cấp cho bạn tất cả thông tin cần thiết về kỳ nghỉ hoặc chuyến thăm của họ và kiểm tra tình trạng phòng trống vào một ngày cụ thể. Điều này tiết kiệm cho cả bạn và khách hàng của bạn rất nhiều rắc rối
Tạo biểu mẫu liên hệ JavaScript với Khung biểu mẫu thông minh
Monty Shokeen
31 Tháng năm 2019
Biểu mẫu JavaScript tốt nhất năm 2022
Monty Shokeen
17 Th04 2019
Xác thực biểu mẫu dễ dàng với jQuery
Monty Shokeen
09 Th07 2021
Tạo biểu mẫu JavaScript và HTML5 miễn phí
Monty Shokeen
12 tháng 4 năm 2022
Có rất nhiều plugin và tập lệnh có sẵn để bạn thêm các hình thức đặt phòng vào trang web của mình. Lựa chọn phù hợp cho trường hợp của bạn tùy thuộc vào các tính năng bạn đang tìm kiếm cũng như các yếu tố như tính dễ sử dụng và ngân sách. Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách tạo biểu mẫu đăng ký cho trang web của bạn bằng cách sử dụng tập lệnh Biểu mẫu thông minh từ CodeCanyon [không còn khả dụng]
Tại sao nên sử dụng biểu mẫu thông minh?
Trước khi chúng ta bắt đầu tìm hiểu sâu hơn về chủ đề này, tôi muốn giải thích lý do tại sao tôi chọn Biểu mẫu thông minh cho nhiệm vụ này
Một trong những điều đầu tiên mà bạn sẽ chú ý trên trang mô tả của Smart Forms là nó cung cấp rất nhiều tính năng và cho phép bạn tạo tất cả các loại biểu mẫu. Rất có thể trang web bạn đang tạo sẽ cần ít nhất một vài loại biểu mẫu khác nhau, chẳng hạn như biểu mẫu liên hệ hoặc biểu mẫu nhận xét. Với Biểu mẫu thông minh, bạn sẽ có thể tạo tất cả những thứ này trong thời gian rất ngắn
Bạn cũng có nhiều tùy chọn khi nói đến tùy chỉnh và tính năng. Tập lệnh được cập nhật thường xuyên và liên tục nhận được các tính năng mới. Nó cũng cung cấp một số lượng lớn các mẫu dành cho người mới bắt đầu với các hình thức khác nhau theo ba kiểu và cách phối màu độc đáo. Bằng cách này, bạn có thể chắc chắn rằng bất kỳ biểu mẫu nào bạn tạo đều kết hợp hoàn hảo với phần còn lại của trang web của bạn
Những gì chúng ta sẽ xây dựng
Hãy tạo giao diện người dùng của biểu mẫu đặt phòng bằng Biểu mẫu thông minh. Chúng ta sẽ tạo form đặt phòng khách sạn. Các nguyên tắc tương tự sẽ được áp dụng để tạo biểu mẫu đăng ký cho một sự kiện hoặc bất kỳ loại biểu mẫu nào khác. Bạn chỉ cần thực hiện các thay đổi thích hợp cho các trường nhập liệu
Đây là những gì chúng ta sẽ làm
Bắt đầu
Nếu bạn chưa có, bước đầu tiên là mua tập lệnh từ CodeCanyon. Bạn sẽ có thể tải xuống các tệp sau khi mua tập lệnh và bạn cũng sẽ được hưởng các bản cập nhật và hỗ trợ miễn phí trọn đời trong sáu tháng
Sau khi bạn giải nén đã tải xuống. zip, bạn sẽ nhận thấy rằng nó đã chứa rất nhiều mẫu cho mọi thứ, từ biểu mẫu nhận xét và liên hệ đơn giản đến một số biểu mẫu nhiều bước. Bạn có thể chỉ cần bắt đầu sử dụng bất kỳ mẫu nào trong số các mẫu này trong các dự án của mình và sẵn sàng sử dụng sau mười đến mười lăm phút
Để giúp bạn hiểu tất cả những điều cơ bản, chúng tôi sẽ tạo mẫu đặt phòng từ đầu
Tạo mẫu đặt phòng
Phần đánh dấu của trang mẫu đặt phòng sẽ giống như thế này ngay từ đầu
Booking Form - XYZ Hotels
Biểu mẫu thông minh dựa vào Phông chữ tuyệt vời để thêm tất cả các biểu tượng vào biểu mẫu, do đó bạn phải tải cả hai tệp CSS
Bây giờ, chúng tôi sẽ chuyển sang nội dung của mẫu đặt phòng của chúng tôi. Khung Smart Forms chia biểu mẫu thành ba phần. tiêu đề biểu mẫu, nội dung biểu mẫu và chân trang biểu mẫu
Phần tiêu đề biểu mẫu ở trên cùng được sử dụng để hiển thị tiêu đề biểu mẫu theo cách có thể trình bày được. Đối với biểu mẫu đặt phòng, bạn có thể nói điều gì đó như Đặt phòng trực tuyến hoặc Đặt phòng trong vài phút
Nội dung biểu mẫu sẽ chứa một loạt các yếu tố mà khách truy cập đã điền vào. Bạn có thể hỏi bất kỳ thông tin liên quan nào tại đây, chẳng hạn như số lượng khách người lớn và số lượng trẻ em đi cùng họ. Tương tự, bạn có thể hỏi thời gian lưu trú, thông tin liên lạc và các chi tiết cần thiết khác của họ.
Phần chân trang của biểu mẫu chứa các nút để gửi hoặc hủy biểu mẫu. Nó được hiển thị nổi bật ở cuối biểu mẫu
Thêm bảng soạn sẵn biểu mẫu thông minh
Đây là đánh dấu biểu mẫu mà chúng tôi cần thêm vào bên trong phần nội dung của trang web để hiển thị biểu mẫu đặt phòng của chúng tôi
Make Room Reservations in Minutes
Confirm Booking Cancel
Với tất cả các đánh dấu mà chúng tôi đã thêm vào trang của mình cho đến nay, bạn sẽ nhận được một cái gì đó tương tự như hình ảnh bên dưới
Xây dựng các thành phần biểu mẫu
Hãy thêm các thành phần biểu mẫu thực tế của chúng ta vào biểu mẫu đặt phòng ngay bây giờ. Đây là đánh dấu mà bạn cần phải làm như vậy. Nó sẽ đi vào bên trong thẻ
3 với lớpMake Room Reservations in Minutes
Confirm Booking Cancel
4Make Room Reservations in Minutes
Confirm Booking Cancel
Please Enter Your NameEmail AddressTelephone / MobileNumber of AdultsNumber of ChildrenCheck-in DateCheck-out DatePlease answer these questions for a pleasant stayWill you be bringing a pet?Do you need us to pick you up?Anything else we should know about? Please: Be as descriptive as possible
Với tất cả các đánh dấu được thêm vào biểu mẫu, bây giờ nó sẽ trông giống như hình bên dưới
Bây giờ có vẻ như có rất nhiều mã, nhưng bạn có thể sao chép hầu hết mã từ các mẫu khởi động khác nhau. Sau đó, bạn chỉ cần thực hiện một số thay đổi nhỏ đối với phần đánh dấu để tùy chỉnh nó. Ví dụ: bạn có thể dễ dàng thay đổi lớp biểu tượng Phông chữ tuyệt vời để thể hiện chính xác hơn các trường nhập liệu
Điều quan trọng cần nhớ là bạn nên cẩn thận khi thực hiện các thay đổi đối với một số thuộc tính của các phần tử biểu mẫu vì điều này sẽ ảnh hưởng đến hình thức hoặc hành vi tổng thể của biểu mẫu. Chẳng hạn, bạn có thể thay đổi độ rộng của các phần tử khác nhau bằng cách thay đổi các lớp
5. Khi hai phần tử đầu vào liên tiếp có các lớpMake Room Reservations in Minutes
Confirm Booking Cancel
6 vàMake Room Reservations in Minutes
Confirm Booking Cancel
7, chiều rộng của chúng sẽ theo tỷ lệ 2. 1. Nếu tổng các chữ số không bằng 12, bạn cũng sẽ thấy một khoảng trống trong hàng đóMake Room Reservations in Minutes
Confirm Booking Cancel
Bất cứ khi nào bạn thay đổi giá trị của thuộc tính
8 của một trường ở giao diện người dùng, hãy đảm bảo thay đổi các giá trị tương ứng trong tệp PHP ở mặt sau. Bằng cách này, bạn sẽ không mất bất kỳ dữ liệu biểu mẫu nào mà người dùng đã cung cấpMake Room Reservations in Minutes
Confirm Booking Cancel
Thêm xác thực vào mẫu đặt phòng của chúng tôi
Khung Smart Forms dựa trên jQuery cốt lõi và nhiều plugin liên quan đến jQuery khác để cung cấp cho bạn các tính năng khác nhau như bộ chọn tháng và thời gian hoặc khả năng kéo và thả tệp. Có tổng cộng 22 tệp JavaScript khác nhau mà bạn có thể sử dụng để nâng cao chức năng của biểu mẫu
Đảm bảo rằng bạn chỉ bao gồm các tệp cần thiết để biểu mẫu cụ thể của bạn hoạt động. Chức năng của từng tệp này được đề cập trong tài liệu. Trong trường hợp của chúng tôi, chúng tôi sẽ cần bao gồm tệp jQuery lõi, tệp giao diện người dùng jQuery và tệp xác thực biểu mẫu
Bạn chỉ cần thêm đoạn mã sau vào trang web của mình để bao gồm tất cả các tệp JavaScript. Bạn có thể đặt nó ở phần đầu của tài liệu hoặc ngay trước phần cuối của phần thân
Khi bạn đã thêm các tệp, bạn cần thêm một số mã có thể bắt đầu quá trình xác thực hoặc thêm các thành phần khác như bộ chọn phạm vi ngày vào giao diện người dùng biểu mẫu. Đây là mã mà bạn cần thêm
0Make Room Reservations in Minutes
Confirm Booking Cancel
Bạn sẽ phải thay thế
9 bằng id mà bạn đã đặt cho biểu mẫu của mình và nó sẽ tự động bắt đầu xác thực các trường. Hình ảnh bên dưới hiển thị cách các thông báo lỗi hiển thị theo mặc định sau khi bạn bắt đầu xác thựcMake Room Reservations in Minutes
Confirm Booking Cancel
Bạn có thể vượt qua một số tùy chọn khi khởi tạo bộ chọn ngày. Họ sẽ xác định giao diện người dùng của lịch, chẳng hạn như số tháng sẽ hiển thị hoặc ngày mà lịch sẽ được hiển thị. Ví dụ: đặt
0 thànhPlease Enter Your NameEmail AddressTelephone / MobileNumber of AdultsNumber of ChildrenCheck-in DateCheck-out DatePlease answer these questions for a pleasant stayWill you be bringing a pet?Do you need us to pick you up?Anything else we should know about? Please: Be as descriptive as possible
1 sẽ mở lịch 100 tuần trong tương laiPlease Enter Your NameEmail AddressTelephone / MobileNumber of AdultsNumber of ChildrenCheck-in DateCheck-out DatePlease answer these questions for a pleasant stayWill you be bringing a pet?Do you need us to pick you up?Anything else we should know about? Please: Be as descriptive as possible
Một điều đáng chú ý nữa là sau khi bạn chọn ngày, lịch nhận phòng sẽ đặt ngày tối thiểu cho lịch trả phòng là ngày đã chọn. Điều này được thực hiện bởi chức năng gọi lại được đính kèm với sự kiện
2. Lịch thanh toán thực hiện tương tự, nhưng nó đặt ngày tối đa cho lịch nhận phòngPlease Enter Your NameEmail AddressTelephone / MobileNumber of AdultsNumber of ChildrenCheck-in DateCheck-out DatePlease answer these questions for a pleasant stayWill you be bringing a pet?Do you need us to pick you up?Anything else we should know about? Please: Be as descriptive as possible
Sử dụng một chủ đề khác
Một trong những ưu điểm của việc sử dụng tập lệnh Biểu mẫu thông minh là nó cho phép bạn nhanh chóng thay đổi chủ đề cho bất kỳ biểu mẫu nào bạn tạo bằng cách chỉ cần bao gồm tệp chủ đề có liên quan và thêm một lớp CSS thích hợp vào các thành phần khác nhau. Tôi sẽ giải thích quá trình ở đây từng bước
1. Bao gồm tệp chủ đề CSS
Các tệp chủ đề được đặt trong thư mục css/smart-themes. Bạn có thể chọn một trong những tệp đó và đưa nó vào trang mẫu đặt phòng. Chúng tôi sẽ sử dụng màu đỏ. css cho ví dụ này. Mã HTML của bạn nơi bạn đã thêm các tệp CSS ban đầu sẽ trông giống như đoạn mã sau
5Make Room Reservations in Minutes
Confirm Booking Cancel
2. Thêm các lớp phù hợp
Tải lại trang bây giờ sẽ không hiển thị cho bạn bất kỳ thay đổi rõ ràng nào về giao diện hoặc bảng màu. Tuy nhiên, bạn có thể nhấp vào công cụ chọn ngày để thấy rằng tên của tháng thực sự có màu đỏ. Điều này xác nhận rằng CSS đã được tải đúng cách
Bạn có thể thay đổi tiêu đề thành màu đỏ bằng cách thay thế
6Make Room Reservations in Minutes
Confirm Booking Cancel
với HTML sau
7Make Room Reservations in Minutes
Confirm Booking Cancel
Tương tự, bạn có thể thay đổi màu sắc của các thành phần biểu tượng và thời điểm chúng hoạt động bằng cách thêm lớp
3 bên cạnhPlease Enter Your NameEmail AddressTelephone / MobileNumber of AdultsNumber of ChildrenCheck-in DateCheck-out DatePlease answer these questions for a pleasant stayWill you be bringing a pet?Do you need us to pick you up?Anything else we should know about? Please: Be as descriptive as possible
4. Đây là một ví dụMake Room Reservations in Minutes
Confirm Booking Cancel
0Make Room Reservations in Minutes
Confirm Booking Cancel
Cuối cùng, bạn có thể thay đổi màu của các phần tử còn lại như nút, tùy chọn [hộp kiểm và nút radio] và công tắc bằng cách sử dụng các lớp
5,Please Enter Your NameEmail AddressTelephone / MobileNumber of AdultsNumber of ChildrenCheck-in DateCheck-out DatePlease answer these questions for a pleasant stayWill you be bringing a pet?Do you need us to pick you up?Anything else we should know about? Please: Be as descriptive as possible
6 vàPlease Enter Your NameEmail AddressTelephone / MobileNumber of AdultsNumber of ChildrenCheck-in DateCheck-out DatePlease answer these questions for a pleasant stayWill you be bringing a pet?Do you need us to pick you up?Anything else we should know about? Please: Be as descriptive as possible
7 tương ứngPlease Enter Your NameEmail AddressTelephone / MobileNumber of AdultsNumber of ChildrenCheck-in DateCheck-out DatePlease answer these questions for a pleasant stayWill you be bringing a pet?Do you need us to pick you up?Anything else we should know about? Please: Be as descriptive as possible
4Make Room Reservations in Minutes
Confirm Booking Cancel
Thêm CAPTCHA và xác thực các trường biểu mẫu
Bạn có thể thêm nhiều cải tiến hơn như xác thực biểu mẫu với thông báo lỗi tùy chỉnh và bảo vệ CAPTCHA cơ bản. Tất cả các tính năng này được tích hợp vào các tập lệnh biểu mẫu thông minh. Bạn chỉ cần tìm ra cách tích hợp chúng vào biểu mẫu của mình. Hy vọng, phần này sẽ giúp bạn hiểu toàn bộ quá trình tốt hơn một chút
Chức năng AJAX và CAPTCHA dựa trên việc sử dụng PHP và JavaScript cùng nhau, vì vậy bạn cần đảm bảo rằng biểu mẫu được đặt trên trang PHP. Giá trị của thuộc tính hành động trong biểu mẫu phải trỏ đến một tệp có tên là quy trình thông minh. php
0Make Room Reservations in Minutes
Confirm Booking Cancel
Bạn có thể thêm CAPTCHA vào biểu mẫu của mình bằng cách thêm mã HTML sau vào bất cứ nơi nào bạn muốn CAPTHCA xuất hiện
1Make Room Reservations in Minutes
Confirm Booking Cancel
Trang biểu mẫu được tải lại bây giờ sẽ chứa hình ảnh xác thực tương tự như hình ảnh bên dưới
Bạn cũng cần cập nhật JavaScript trong biểu mẫu của mình với phiên bản sau
2Make Room Reservations in Minutes
Confirm Booking Cancel
Điều này sẽ quan tâm đến việc hiển thị các thông báo lỗi hữu ích hơn ngay bên dưới các thành phần biểu mẫu được điền không đúng cách. Các yêu cầu cần được đáp ứng để đầu vào thành phần biểu mẫu được coi là hợp lệ được liệt kê trong
8 và các thông báo lỗi hiển thị cho người dùng được đặt bên trong đối tượngPlease Enter Your NameEmail AddressTelephone / MobileNumber of AdultsNumber of ChildrenCheck-in DateCheck-out DatePlease answer these questions for a pleasant stayWill you be bringing a pet?Do you need us to pick you up?Anything else we should know about? Please: Be as descriptive as possible
9Please Enter Your NameEmail AddressTelephone / MobileNumber of AdultsNumber of ChildrenCheck-in DateCheck-out DatePlease answer these questions for a pleasant stayWill you be bringing a pet?Do you need us to pick you up?Anything else we should know about? Please: Be as descriptive as possible
Hình ảnh sau đây cho thấy thông báo lỗi sẽ xuất hiện như thế nào nếu người dùng cố gắng gửi biểu mẫu có trường không hợp lệ
Suy nghĩ cuối cùng
Trong hướng dẫn này, chúng ta đã học cách tạo biểu mẫu đặt phòng bằng tập lệnh Biểu mẫu thông minh có sẵn trên CodeCanyon. Trong quá trình này, chúng tôi đã đề cập đến một số điều cơ bản để giúp bạn bắt đầu nhanh chóng và tạo các biểu mẫu độc đáo của riêng bạn. Như bạn có thể thấy, rất dễ dàng để tạo các biểu mẫu đẹp mắt với xác thực đầu vào và các cải tiến khác bằng Biểu mẫu thông minh
Bạn có thể tạo nhiều thứ hơn là chỉ các biểu mẫu đặt trước với khung Biểu mẫu thông minh. Quá trình tạo đánh dấu và thêm chức năng JavaScript sẽ vẫn tương tự như những gì chúng tôi đã đề cập ở đây. Nếu bạn cảm thấy bế tắc, tài liệu chi tiết sẽ giúp bạn giải quyết. Bạn cũng có quyền truy cập vào hỗ trợ miễn phí trong sáu tháng, vì vậy việc tìm ra cách làm cho một biểu mẫu hoạt động sẽ rất dễ dàng
Lời khuyên của tôi là bạn nên bắt đầu bằng cách thực hiện những thay đổi nhỏ đối với các mẫu ban đầu được cung cấp trong tệp tải xuống và sau đó bắt đầu tạo các biểu mẫu tùy chỉnh từ đầu