Cách tạo form WordPress có bộ chọn ngày (4 bước)

Mục lục

Bạn có muốn tạo một form WordPress có chức năng chọn ngày không?

Trường chọn ngày là một cách thuận tiện để nắm bắt thông tin liên quan đến ngày trên form WordPress của bạn. Ví dụ, bạn có thể cần biết ngày sinh của người dùng hoặc bạn muốn họ dễ dàng lên lịch cuộc hẹn cho các dịch vụ của bạn thông qua form của bạn.

Trong bài viết này, WPBeginner Việt Nam sẽ chỉ cho bạn cách dễ dàng tạo form WordPress bằng công cụ chọn ngày.

Cách tạo form WordPress có bộ chọn ngày

Tại sao nên tạo form WordPress có chức năng chọn ngày?

Trường chọn ngày trong form WordPress hữu ích khi bạn muốn người dùng nhập ngày. Các ví dụ phổ biến bao gồm:

  • Biểu mẫu đăng ký yêu cầu người dùng nhập ngày sinh.
  • Biểu mẫu đặt hàng để chọn ngày và giờ giao hàng cho đơn hàng.
  • Biểu mẫu cho thuê để chọn ngày nhận hoặc trả đồ cho thuê.
  • Biểu mẫu yêu cầu gọi lại cho phép người dùng cho bạn biết khi nào họ muốn được liên hệ về sản phẩm hoặc dịch vụ của bạn.
  • Mẫu đơn xin nghỉ phép cho phép nhân viên nhập ngày bắt đầu và ngày kết thúc thời gian nghỉ của mình.
  • Biểu mẫu đặt chỗ hoặc hẹn trước cho các website cung cấp dịch vụ hoặc chỗ ở.

Trường nhập ngày tháng là cách dễ dàng hơn nhiều để người dùng chèn ngày tháng so với việc nhập thủ công. Nó đảm bảo định dạng ngày tháng vẫn nhất quán trên tất cả các lần gửi form, giảm lỗi và cải thiện trải nghiệm của người dùng.

Nói như vậy, chúng ta hãy xem cách dễ dàng tạo form WordPress với trình chọn ngày. Bạn có thể sử dụng các link nhanh này để điều hướng qua bài viết này:

Bước 1: Cài đặt Plugin WPForms và Chọn Mẫu

Bước đầu tiên là cài đặt Biểu mẫu WP. Đây là plugin tạo form liên hệ WordPress tốt nhất trên thị trường giúp bạn dễ dàng tạo mọi loại form trên trang WordPress của mình, bao gồm cả form có trường chọn ngày.

Để biết hướng dẫn chi tiết, bạn có thể xem hướng dẫn từng bước của WPBeginner Việt Nam về cách cài đặt plugin WordPress.

Ghi chú: Đối với hướng dẫn này, bạn cần sử dụng phiên bản cao cấp của WPFormsvì đó là nơi có trường chọn ngày. Tuy nhiên, nếu bạn sử dụng phiếu giảm giá WPForms của WPBeginner Việt Nam, bạn có thể được giảm giá 50% so với giá thông thường.

Bạn có thể xem bài đánh giá WPForms đầy đủ của WPBeginner Việt Nam để biết thêm chi tiết.

Sau khi kích hoạt, hãy đến WPForms » Thêm mới trang từ dashboard WordPress của bạn.

Nhấp vào Thêm mới trong WPForms bên trong bảng quản trị WordPress

Thao tác này sẽ chuyển hướng bạn đến trang ‘Chọn mẫu’.

Trước khi chọn mẫu, bạn nên đặt tên cho form WordPress của mình để có thể dễ dàng nhận dạng sau này.

Đặt tên cho một form mới trong WPForms

Cuộn xuống, bạn sẽ thấy một loạt các mẫu form được tạo sẵn tại đây, nhiều mẫu trong số đó đã bao gồm trường phạm vi ngày.

Ví dụ, chúng ta sẽ sử dụng mẫu Simple Contact Form và sau đó thêm trường chọn ngày vào đó. Nhưng bạn có thể thoải mái chọn mẫu phù hợp nhất với mình.

Sau khi đã lựa chọn, bạn chỉ cần nhấp vào nút ‘Sử dụng mẫu’.

Nhấp vào nút Sử dụng mẫu trong WPForms

Bước 2: Thêm trường chọn ngày vào form WordPress của bạn

Bây giờ, bạn sẽ đến trình tạo form WPForms. Bạn sẽ thấy các option trường ở cột bên trái và bản xem trước form ở bên phải màn hình.

Theo mặc định, mẫu Biểu mẫu liên hệ đơn giản chỉ có trường tên, địa chỉ email và nhận xét được thêm vào form.

Để minh họa, WPBeginner Việt Nam sẽ chỉ cho bạn cách thêm trường ngày vào form WordPress của bạn. Nhưng nếu mẫu của bạn đã có trường này, thì bạn có thể bỏ qua phần chỉnh sửa của bước này.

Những gì bạn cần làm là cuộn xuống phần Trường ưa thích ở cột bên trái, nơi bạn sẽ thấy trường ‘Ngày/Giờ’.

Chỉ cần kéo và thả trường đó đến nơi bạn muốn trên form của mình. Trong hướng dẫn này, WPBeginner Việt Nam đã đặt nó ngay bên dưới trường Email.

Kéo và thả trường Ngày giờ vào trình tạo form trong WPForms

Sau khi thực hiện xong, hãy nhấp vào trường ‘Ngày/Giờ’ để chỉnh sửa. Thao tác này sẽ mở tab ‘Tùy chọn trường’ ở phía bên trái màn hình của bạn.

Từ đây, bạn có thể thay đổi nhãn của trường, mặc định là ‘Ngày/Giờ’. Chúng ta sẽ sử dụng ‘Thời gian ưu tiên cho cuộc gọi điện thoại’ cho trường này.

Bạn cũng có thể thay đổi định dạng ngày của trường bằng cách sử dụng dropdown menu Định dạng. Các option là Ngày và giờ, Ngày hoặc Chỉ giờ. Điều này có thể hữu ích nếu bạn chỉ muốn sử dụng ngày không có trường giờ để thu thập ngày sinh của người dùng.

Ngoài ra, bạn có thể điền thêm phần mô tả để cung cấp thêm ngữ cảnh về những thông tin mà người dùng cần nhập vào trường.

Cuối cùng, bạn có thể chọn hộp ‘Bắt ​​buộc’ nếu bạn muốn biến đây thành trường bắt buộc. Điều này có nghĩa là người dùng sẽ phải chọn ngày và giờ trước khi họ có thể gửi form.

Sau khi thực hiện xong, chỉ cần nhấp vào nút ‘Lưu’ ở trên cùng để lưu cài đặt form của bạn.

Cấu hình cài đặt chung của form trong WPForms

Mẹo chuyên nghiệp: Nếu bạn điều hành một website lưu trú và muốn người dùng nhập ngày cụ thể cho thời gian lưu trú của họ, thì bạn có thể sử dụng Mẫu đặt phòng khách sạn mẫu. Nó bao gồm hai trường chọn ngày: một cho ngày đến và một cho ngày khởi hành.

Bước 3: Cấu hình Tùy chọn nâng cao cho Bộ chọn ngày giờ

Theo mặc định, trường chọn phạm vi ngày trên form WordPress của bạn sẽ là một lịch có dropdown menu thời gian bên cạnh.

Ngày hiện tại sẽ được chọn, nhưng người dùng có thể thay đổi để chọn ngày khác. Định dạng ngày là tháng/ngày/năm.

Lịch chọn Ngày Giờ mặc định trong WPForms

Trong khi đó, dropdown menu thời gian mặc định là đồng hồ 12 giờ với khoảng thời gian 30 phút.

Sau đó, người dùng có thể chọn khung thời gian phù hợp nhất với mình.

Bộ chọn dropdown thời gian mặc định trong WPForms

Trong một số trường hợp, bạn có thể muốn thay đổi cài đặt bộ chọn ngày. Ví dụ, có thể quốc gia của bạn theo định dạng ngày/tháng/năm hoặc ngày và giờ 24 giờ thay vì định dạng mặc định.

Để thực hiện việc này, bạn sẽ phải chuyển sang tab ‘Nâng cao’ ở đầu dashboard bên trái.

Tại đây, bạn có thể điều chỉnh kích thước của trường chọn ngày. Sau đó, trong phần Ngày, bạn có thể thay đổi phạm vi ngày từ lịch sang dropdown menu ngày.

Chọn loại Ngày dropdown trong WPForms

Việc chuyển công cụ chọn lịch ngày sang dropdown menu ngày là một ý tưởng hay nếu form có không gian hạn chế và lịch trông khá nhỏ.

Dưới đây là giao diện của dropdown menu ngày:

Một ví dụ về dropdown menu ngày của WPForms

Bên dưới, bạn có thể thay đổi định dạng ngày từ tháng/ngày/năm (31/1/2024) thành ngày/tháng/năm (31/1/2024) hoặc Tháng Ngày, Năm (31 tháng 1 năm 2024).

Nếu bạn chọn trình chọn ngày theo lịch, thì bạn cũng có thể chèn văn bản giữ chỗ vào trường ‘Ngày’. Bạn có thể điền định dạng ngày của mình vào đó để cho người dùng biết bạn đang sử dụng định dạng nào để họ không bị nhầm lẫn.

Cấu hình cài đặt nâng cao của trình chọn ngày trong WPForms

Ngoài ra, bạn có thể bật công tắc ‘Giới hạn ngày’ để điều chỉnh phạm vi ngày có thể chọn. Điều này sẽ hữu ích nếu bạn chỉ chạy dịch vụ của mình vào các ngày trong tuần.

Bạn cũng có thể vô hiệu hóa các ngày trong quá khứ để ngăn không cho các ngày trước đó được chọn.

Cài đặt Giới hạn ngày và Vô hiệu hóa ngày đã qua cho trường Ngày giờ trong WPForms

Tiếp theo, chúng ta hãy di chuyển xuống phần ‘Thời gian’ để thay đổi bộ chọn thời gian.

Tại đây, bạn có thể thay đổi khoảng thời gian thành 15 phút hoặc 1 giờ thay vì 30 phút. Bạn cũng nên nhập văn bản giữ chỗ ở đây để hiển thị định dạng thời gian bạn đang sử dụng.

Bộ chọn thời gian mặc định là đồng hồ 12 giờ, nhưng bạn có thể chuyển sang đồng hồ 24 giờ nếu muốn.

Ngoài ra, hãy thoải mái bật cài đặt ‘Giới hạn giờ’ để chỉ định thời gian bắt đầu và kết thúc dịch vụ của bạn. Theo cách này, người dùng không thể đặt lịch hẹn ngoài giờ làm việc của bạn.

Ngoài ra, bạn có thể nhập tên lớp CSS cho trường phạm vi ngày. Đây là tính năng nâng cao và option, nhưng bạn có thể sử dụng tính năng này để ghi đè kiểu form bằng code sau.

Cuối cùng nhưng không kém phần quan trọng, bạn có thể ẩn nhãn trường form và/hoặc nhãn phụ nếu cần.

Khi đã hài lòng với form mới, bạn có thể lưu form đó bằng cách nhấp vào nút ‘Lưu’ ở góc trên bên phải màn hình.

Cấu hình các thiết lập nâng cao của trường chọn thời gian trong WPForms

Bước 4: Nhúng form WordPress vào website của bạn

Bây giờ bạn đã sẵn sàng thêm form mới của mình bằng trình chọn ngày vào website WordPress của bạn. Để thực hiện việc này, chỉ cần nhấp vào nút ‘Nhúng’ ở phần trên cùng của trình tạo form.

Một popup sẽ xuất hiện yêu cầu bạn chọn một trang hiện có để thêm form vào hoặc tạo một trang mới cho form từ đầu. Cả hai option đều sử dụng trình chỉnh sửa block, do đó các bước khá giống nhau.

Cửa sổ bật lên Nhúng trong WPForms

Thêm Khối WPForms vào Trang Hiện tại hoặc Trang Mới

Để chèn form vào trang hiện có, hãy nhấp vào nút ‘Chọn trang hiện có’. Sau đó, chọn một trong các trang bạn đã có trên blog hoặc website WordPress của mình và nhấp vào ‘Bắt ​​đầu!’

Chọn một trang hiện có để thêm form WPForms vào

Nếu bạn muốn thêm form vào trang mới, chỉ cần nhấp vào nút ‘Tạo trang mới’.

Sau đó, đặt tên cho trang mới của bạn và nhấp vào “Bắt đầu!”

Tạo một trang mới để chèn form WPForms vào

Cả hai phương pháp này đều đưa bạn đến trình chỉnh sửa block, tại đó bạn sẽ thấy một số hướng dẫn về cách thêm block WPForms.

Đầu tiên, nhấp vào nút thêm block ‘+’.

Nhấp vào nút thêm block trong trình chỉnh sửa block để chèn block WPForms

Sau đó, nhập ‘WPForms’ vào thanh tìm kiếm block.

Chỉ cần kéo và thả block vào bất cứ vị trí nào trông đẹp nhất trên trang.

Tìm kiếm block WPForms trong trình chỉnh sửa block

Bây giờ tất cả những gì bạn cần làm là nhấp vào dropdown menu.

Sau đó, chọn form bạn vừa tạo.

Chọn form WPForms để chèn vào trình chỉnh sửa block

Trong sidebar Cài đặt block, bạn có thể custom kiểu trường form, nhãn và nút để chúng trông đẹp hơn với theme WordPress của bạn.

Bạn có thể thay đổi kích thước, bán kính đường viền và màu sắc của từng phần tử.

Thanh bên cài đặt block WPForms trong trình chỉnh sửa block

Bây giờ bạn có thể nhấp vào nút ‘Cập nhật’ hoặc ‘Xuất bản’ để đưa form lên website của mình.

Nó sẽ trông giống thế này trên website WordPress của bạn:

Một ví dụ về form liên hệ có bộ chọn ngày được tạo bằng WPForms

Nếu bạn muốn chèn tiện ích form vào bài đăng thay vì trang, thì bạn có thể tạo bài đăng mới hoặc mở bài đăng hiện có trong trình chỉnh sửa block.

Sau đó, chỉ cần làm theo các bước tương tự để thêm block WPForms vào trang như trong phương pháp này.

Thêm Khối WPForms vào Khu vực Sẵn sàng cho Tiện ích

Nếu bạn sử dụng theme WordPress cổ điển, thì bạn có thể muốn hiển thị form của mình trong header trang, chân trang hoặc sidebar có sẵn tiện ích. Đây có thể là một ý tưởng hay nếu form của bạn khá ngắn và không chiếm quá nhiều không gian.

Ghi chú: Nếu bạn đang sử dụng theme block thì phương pháp này sẽ không hiệu quả với website của bạn.

Để làm điều này, chỉ cần đi đến Vẻ bề ngoài “ Tiện ích từ khu vực quản trị WordPress. Sau đó, điều hướng đến khu vực tiện ích mong muốn của bạn và nhấp vào nút ‘+’ màu trắng thêm block bên trong đó. Sau đó, bạn có thể tìm kiếm block WPForms.

Nếu bạn thấy hai option, bạn có thể chọn một trong hai vì cả hai đều có chức năng giống nhau.

Thêm block WPForms vào vùng sẵn sàng cho tiện ích

Giống như phương pháp trước, chỉ cần chọn form bạn vừa tạo trước đó. Trong sidebar Cài đặt block, bạn có thể cấu hình thiết kế sao cho phù hợp hơn với theme WordPress của mình.

Khi bạn đã hài lòng với chỉnh sửa, chỉ cần nhấp vào nút ‘Cập nhật’.

Thanh bên cài đặt tiện ích WPForms

Đó là nó!

Đây là hình ảnh form của WPBeginner Việt Nam ở cuối bài đăng trên blog WordPress:

Một ví dụ về tiện ích form WPForms có trường chọn ngày

Nhúng form WordPress của bạn bằng shortcode

Nếu block hoặc tiện ích WPForms không hoạt động, bạn cũng có thể thêm form WordPress bằng shortcode.

Trong popup ‘Nhúng vào Trang’, chỉ cần nhấp vào link ‘sử dụng shortcode’. Sau đó, bạn sẽ thấy một shortcode mà bạn có thể sao chép và dán vào trang, bài đăng hoặc khu vực sẵn sàng cho tiện ích.

Nhấp vào link sử dụng shortcode trong popup nhúng WPForms

Để biết thêm thông tin về cách sử dụng shortcode, hãy đọc bài viết của WPBeginner Việt Nam về cách thêm shortcode vào WordPress.

Mẹo tối ưu để tối ưu hóa form WordPress của bạn

Bây giờ bạn đã biết cách thêm trường chọn ngày vào form, chúng ta hãy cùng tìm hiểu những mẹo hay nhất để nâng cao hiệu quả form của bạn:

  • Gửi email xác nhận đến người gửi form của bạn – Bằng cách này, người dùng sẽ nhận được thông báo rằng bạn đã nhận được thông tin tham gia của họ thành công và họ sẽ không quên ngày hoặc giờ họ đã chọn.
  • Chấp nhận thanh toán trực tuyến trong form của bạn – WPForms hỗ trợ các cổng thanh toán phổ biến như Stripe, PayPal, Square và Authorize.net. Bạn có thể thu tiền một lần hoặc định kỳ và không có phí giao dịch bổ sung.
  • Làm cho các hình thức dài hơn của bạn trở thành cuộc trò chuyện – Nếu bạn có sự kiện hoặc form đăng ký người dùng cần thu thập nhiều thông tin thì việc biến nó thành content đàm thoại có thể tăng tỷ lệ hoàn thành form.
  • Ngăn chặn thư rác form liên hệ – Bạn có thể bật tính năng chống thư rác tích hợp của WPForms và hộp kiểm reCAPTCHA để lọc các mục nhập form thư rác.
  • Thực hiện theo danh sách các phương pháp thiết kế form liên hệ tốt nhất của WPBeginner Việt Nam – Hướng dẫn này có thể hướng dẫn bạn cách thiết kế form WordPress tốt nhất để chuyển đổi người dùng thường xuyên thành khách hàng tiềm năng hoặc khách hàng thực sự.
  • Đọc hướng dẫn chuyên gia của WPBeginner Việt Nam về cách tạo form tương tác – Nhà đồng sáng lập WPForms, Jared Atchison, sẽ đưa ra cho bạn những lời khuyên về cách làm cho form hấp dẫn hơn, từ việc sử dụng logic có điều kiện đến việc thêm content đa phương tiện.

Chúng tôi hy vọng bài viết này giúp bạn học cách tạo form WordPress với trình chọn ngày. Bạn cũng có thể muốn xem bài viết của WPBeginner Việt Nam về cách tạo form nhiều trang trong WordPress và danh sách cuối cùng của WPBeginner Việt Nam về các plugin khảo sát WordPress tốt nhất.

Nếu bạn thích bài viết này, vui lòng đăng ký theo dõi WPBeginner Việt Nam Kênh Youtube cho các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy WPBeginner Việt Nam trên TwitterFacebook.

5/5 - (196 bình chọn)
Facebook
Twitter
LinkedIn
Telegram
Email
Đội Ngũ Biên Tập