Hướng dẫn sử dụng biểu mẫu nâng cao

 

Contact Form 7 là một plugin phổ biến dành cho website WordPress, giúp người dùng dễ dàng tạo và quản lý các biểu mẫu liên hệ trên website tuy nhiên plugin này chỉ phù hợp cho lập trình viên hoặc người có nền tảng WordPress. Để giải quyết vấn đề này Mắt Bão WS đã cho ra mắt tính Biểu mẫu nâng cao giúp người dùng dễ dàng thao tác kéo thả một cách nhanh chóng và tiện lợi.

*Lưu ý: Hướng dẫn này chỉ áp dụng cho khách hàng đã mua tính năng Biểu mẫu nâng cao, xem chi tiết tính năng tại đây.

Các tính năng nổi bật của Biểu mẫu nâng cao

  • Kéo thả chỉ sửa form (không cần code)
  • Tự động cập nhật nội dung mail sau khi chỉnh sửa

Bước 1: Tạo form

Ở trang giao diện admin tìm menu Contact hoặc Form liên hệ sau đó click vào Add Contact Form

Bước 2: Đặt tên Form và lưu để tạo ID cho Form

*Lưu ý: Phải hoàn thành bước này đề tính năng Drag & Drop hoạt động bình thường

Bước 3: Thêm các trường thông tin

Click vào tab Drag & Drop Builder kéo thả các trường thông tin (Field) ở cột bên trái sang cột bên phải sau đó chỉnh sửa thông tin ở cột Field Settings

Bước 4: Chỉnh sửa các trường thông tin

Tại cột Field Settings thay đổi các trường thông tin sau:

  • Label/Text: Nhập tên nhãn của trường thông tin
  • Required Field?: Chọn nếu trường thông tin này là bắt buộc
  • Placeholder: Nhập thông tin mẫu (Không bắt buộc)

Làm tương tự với các trường thông tin khác

Rê chuột vào trường thông tin click chuột trái và giữ để kéo thả sắp xếp.

Cick vào biểu tượng cây bút để chỉnh sửa trường thông tin và click vào dấu X để xóa.

Đối với các trường thông tin như Drop-down, CheckboxesRadio Buttons phải nhập thêm các lựa chọn (Choices) cho trường thông tin đó (mỗi dòng là 1 lựa chọn).

Đối với CheckboxesRadio Buttons có thể lựa chọn kiểu hiển thị là Ngang hoặc dọc

Cuối cùng là thêm Submit button, đối với Submit button chỉ cần sửa Button Text không cần Label/Text

Bước 5: Lưu Form và kiểm tra cấu hình mail

Click vào Sync & Save Builder và tải lại trang

Click vào tab Mail và kiểm tra email và nội dung email đã chính xác chưa sau đó nhấp vào nút Lưu.

Bước 6: Hiển thị Form

Sao chép shortcode hiển thị bên dưới tên form

Dán shortcode vào nội dung trang hoặc bài viết bất kỳ và nhấn Cập nhật.

Cuối cùng ta được kết quả: