Tạo Form đặt món ăn trực tuyến

Đây là câu hỏi từ bạn Bùi Đức Quang trong Cộng đồng WordPress Việt Nam

“Hiện mình muốn làm 1 cái form đặt món ăn.
From này sẽ tích hợp tính năng chọn địa chỉ đặt món. Và admin gần địa chị của khách nhất sẽ nhận dc thông tin.
Ví dụ: mình có 2 quán cơm. 1 quán ở hà nội và 1 quán ở sài gòn.
Mình sẽ tạo 1 cái form. Khi họ điền thông tin là hà nội thì email của admin quán cơm ở hà nội sẽ nhận dc và sẽ giao hàng cho khách.
Và admin ở quán cơm sài gòn muốn nhận dc thì khách phải chọn là sài gòn.
Và nếu khách chọn ở vị trí mình ko cung cấp dịch vụ, hệ thống sẽ tự thông báo “xin lỗi chúng tôi chưa thể giao hàng trong khu vực này.”

Tóm tắt vấn đề

Chúng ta cần tạo Form đặt món ăn đơn giản, nhưng có các tính năng sau:

  • Khách điền địa chỉ ở Hà Nội > Quán cơm ở Hà Nội sẽ nhận được thông tin
  • Khách điền địa chỉ ở Sài Gòn > Quán cơm ở Sài Gòn sẽ nhận được thông tin
  • Khách điền địa chỉ khác > Hiển thị thông báo: Xin lỗi chúng tôi chưa thể giao hàng trong khu vực này!

Giải pháp

Chúng ta sẽ sử dụng Condition và Processor trong Cadera Forms Free để giải quyết vấn đề này.

Hướng dẫn thực hiện

1. Tạo form đặt món ăn

Bạn cần tạo một form đặt món ăn với các trường cơ bản sau

  • Single Line Text – Họ tên
  • Phone Number (Basic) – Số điện thoại
  • Radio – Tỉnh thành, với 3 lựa chọn là Hà Nội, Sài Gòn, và Khác
  • Single Line Text – Địa chỉ cụ thể của khách hàng
  • Button – Đặt ngay

Slug bạn điền là gì cũng được, nhưng nên điền không dấu, ví dụ: ho_ten, so_dien_thoai, tinh_thanh, dia_chi, dat_ngay

Đây là ví dụ, nên chúng ta sẽ tạo form đơn giản thế thôi! Cái cốt lõi là bạn tạo được cái chức năng như đầu bài đã đưa ra!

form-dat-mon-an1-min

2. Thiết lập Processor

Bạn cần tạo 2 ProcessorConditional Recipient. Bấm vào Processors > Add Processor > Use Processor tại Conditional Recipient.

recipient-processor1-min

Điền địa chỉ email của 2 vùng miền Bắc và Nam. Sau đó bấm Conditions để thiết lập điều kiện cho từng vùng.

form-dat-mon-an2-min

Bấm vào Use > Add Conditional Group > If (tỉnh thành) is Hà Nội > Bấm Save Form

Tương tự cho Processor Sài Gòn

form-dat-mon-an4-min

3. Thiết lập thông báo

Vậy còn nếu khách ở Tỉnh khác, thì xử lí thế nào?

Bạn cần tạo thêm một Trường HTML nữa với tên: Thông báo

  • HTML Field – Thông báo – Slug: thong_bao – Nội dung: Xin lỗi chúng tôi chưa thể giao hàng trong khu vực này

Nó có thể nằm ở đâu trong form cũng được, nhưng tốt nhất là dưới mục Địa chỉ, nhìn ổn hơn.

form-dat-mon-an5-min

Và thiết lập điều kiện hiển thị thông báo.

Bấm vào Conditions > Add Conditional Group > Đặt tên (tên gì cũng được, như hình: Hiển thị thông báo) > Chọn Show (tại Type) > Bấm Add Conditional Line > If (tỉnh thành) is Khác > Bấm vào Thông báo > bấm Save Form

Thiết lập này để khi ai đó chọn Tỉnh thành là Khác, nó sẽ hiện ra thông báo lỗi luôn.

form-dat-mon-an7-min

Ngoài ra một số thiết lập khác như cấu hình Form Email, tùy chỉnh thông báo, cách tạo form đơn giản như nào thì bạn tự tìm hiểu thêm nhá.

Ảnh đại diện: Pixabay