การตั้งค่าฟอร์มด้วย Forminator
ระบบ Sales Page นั้น แนะนำให้ใช้ร่วมกับปลั๊กอิน Forminator เพื่อเก็บข้อมูลการสั่งซื้อต่างๆ และสามารถตั้งค่าได้อิสระ เชื่อมต่อกับระบบอื่นๆ ได้หลากหลาย
Install Plugin
ติดตั้งปลั๊กอินจาก https://wordpress.org/plugins/forminator/ ใช้เวอร์ชั่นฟรีก็ครอบคลุมการทำงานทั้งหมด
Import Demo Form
หากใช้วิธี ติดตั้งตัวอย่างเว็บไซต์ จะไม่จำเป็นต้อง Import
แต่ถ้าหากต้องการลองใช้ฟอร์มที่เตรียมไว้ให้ สามารถไปที่ Forminator → Forms คลิก IMPORT
ระบบจะแสดงกล่องข้อความให้เรานำโค้ดไปใส่ สามารถคัดลอกโค้ดโดยคลิกที่ปุ่มขวาบนของกล่อง
{ "type": "form", "data": { "fields": [ { "id": "textarea-1", "element_id": "textarea-1", "form_id": "wrapper-263-7126", "type": "textarea", "options": [], "cols": 12, "conditions": [], "wrapper_id": "wrapper-263-7126", "input_type": "line", "limit_type": "characters", "field_label": "รายการสั่งซื้อ", "placeholder": "", "required": false, "required_message": "กรุณาเลือกสินค้า", "default-height": "0", "custom-class": "order_summary", "condition_action": "show", "condition_rule": "any" }, { "id": "number-1", "element_id": "number-1", "form_id": "wrapper-3571-6493", "type": "number", "options": [], "cols": 12, "conditions": [], "wrapper_id": "wrapper-3571-6493", "calculations": "true", "limit_min": "", "limit_max": "", "field_label": "ยอดรวม", "placeholder": "", "required": false, "required_message": "กรุณาเลือกสินค้า", "limit_message": "false", "condition_rule": "any", "condition_action": "show", "custom-class": "order_total" }, { "id": "html-1", "element_id": "html-1", "form_id": "wrapper-4643-5046", "type": "html", "options": [], "cols": 12, "conditions": [], "wrapper_id": "wrapper-4643-5046", "field_label": "", "variations": "<h2>2. เลือกวิธีชำระเงิน</h2>" }, { "id": "radio-1", "element_id": "radio-1", "form_id": "wrapper-4682-5313", "type": "radio", "options": [ { "label": "โอนเงินเข้าบัญชี", "value": "BANK", "key": "4802-5057", "default": true }, { "label": "เก็บเงินปลายทาง", "value": "COD", "key": "7473-2941", "default": false } ], "cols": 12, "conditions": [], "wrapper_id": "wrapper-4682-5313", "value_type": "radio", "field_label": "เลือกวิธีชำระเงิน", "layout": "vertical", "required": true, "required_message": "กรุณาเลือกวิธีชำระเงิน", "custom-class": "order_payment", "options_bulk_editor": "โอนเงินเข้าบัญชี; bank; 1\nเก็บเงินปลายทาง; cod; 0", "options_expanded": true }, { "id": "upload-1", "element_id": "upload-1", "form_id": "wrapper-6890-2256", "type": "upload", "options": [], "cols": 12, "conditions": [{ "element_id": "radio-1", "rule": "is", "value": "BANK" }], "wrapper_id": "wrapper-6890-2256", "field_label": "โอนเงินแล้วอัปโหลดสลิป", "filetypes": [ "heic", "all-image", "jpg|jpeg|jpe", "all-image", "gif", "all-image", "png", "all-image", "bmp", "all-image", "tiff|tif", "all-image", "ico", "all-image", "psd", "all-image", "xcf", "pdf" ], "file-type": "multiple", "file-limit": "custom", "upload-limit": 8, "filesize": "MB", "required": true, "custom-files": false, "required_message": "กรุณาแนบสลิปโอนเงิน", "file-limit-input": "5" }, { "id": "html-2", "element_id": "html-2", "form_id": "wrapper-7338-6448", "type": "html", "options": [], "cols": 12, "conditions": [], "wrapper_id": "wrapper-7338-6448", "field_label": "", "variations": "<h2>3. ข้อมูลการจัดส่ง</h2>", "formid": "wrapper-3972-583" }, { "id": "name-1", "element_id": "name-1", "form_id": "wrapper-1511347711918-1669", "type": "name", "cols": 4, "required": "true", "field_label": "ชื่อ", "placeholder": "", "prefix_label": "Prefix", "fname_label": "First Name", "fname_placeholder": "E.g., John", "mname_label": "Middle Name", "mname_placeholder": "E.g., Smith", "lname_label": "Last Name", "lname_placeholder": "E.g., Doe", "wrapper_id": "wrapper-1511347711918-1669", "conditions": [], "required_message": "กรุณากรอกชื่อ", "custom-class": "customer_name" }, { "id": "email-1", "element_id": "email-1", "form_id": "wrapper-1511347711918-1669", "type": "email", "cols": 4, "required": false, "field_label": "อีเมล", "placeholder": "", "validation": true, "validation_text": "", "wrapper_id": "wrapper-1511347711918-1669", "conditions": [], "required_message": "กรุณากรอกอีเมล", "validation_message": "อีเมลของคุณไม่ถูกต้อง" }, { "id": "phone-1", "element_id": "phone-1", "form_id": "wrapper-1511347711918-1669", "type": "phone", "options": [], "cols": 4, "conditions": [], "wrapper_id": "wrapper-1511347711918-1669", "required": true, "limit": 10, "limit_type": "characters", "validation": "none", "field_label": "เบอร์มือถือ", "placeholder": "", "required_message": "กรุณากรอกเบอร์มือถือ", "phone_international_country": "TH" }, { "id": "textarea-2", "element_id": "textarea-2", "form_id": "wrapper-1988247712118-9871", "type": "textarea", "cols": 12, "required": true, "field_label": "ที่อยู่", "placeholder": "", "input_type": "paragraph", "limit": "", "limit_type": "characters", "wrapper_id": "wrapper-1988247712118-9871", "conditions": [], "required_message": "กรุณากรอกที่อยู่", "default-height": "80" } ], "settings": { "pagination-header": "nav", "paginationData": { "pagination-header-design": "show", "pagination-header": "nav" }, "formName": "Product Form", "version": "1.15.2", "form-border-style": "none", "form-padding": "", "form-border": "", "fields-style": "open", "validation": "on_submit", "form-style": "none", "enable-ajax": "true", "autoclose": "", "submission-indicator": "show", "indicator-label": "กำลังส่งข้อความ...", "form-type": "default", "submission-behaviour": "behaviour-hide", "thankyou-message": "<p>ขอบคุณสำหรับคำสั่งซื้อ ทีมงานจะตรวจสอบและยืนยันโดยเร็วที่สุด</p>", "submitData": { "custom-submit-text": "สั่งซื้อสินค้า", "custom-invalid-form-message": "ข้อมูลไม่ถูกต้อง หรือไม่ได้เลือกสินค้า กรุณาตรวจสอบอีกครั้ง", "conditions": [] }, "validation-inline": "1", "form-expire": "no_expire", "form-padding-top": "0", "form-padding-right": "0", "form-padding-bottom": "0", "form-padding-left": "0", "form-border-width": "0", "form-border-radius": "0", "cform-label-font-family": "Roboto", "cform-label-custom-family": "", "cform-label-font-size": "12", "cform-label-font-weight": "bold", "cform-title-font-family": "Roboto", "cform-title-custom-family": "", "cform-title-font-size": "45", "cform-title-font-weight": "normal", "cform-title-text-align": "left", "cform-subtitle-font-family": "Roboto", "cform-subtitle-custom-font": "", "cform-subtitle-font-size": "18", "cform-subtitle-font-weight": "normal", "cform-subtitle-text-align": "left", "cform-input-font-family": "Roboto", "cform-input-custom-font": "", "cform-input-font-size": "16", "cform-input-font-weight": "normal", "cform-radio-font-family": "Roboto", "cform-radio-custom-font": "", "cform-radio-font-size": "14", "cform-radio-font-weight": "normal", "cform-select-font-family": "Roboto", "cform-select-custom-family": "", "cform-select-font-size": "16", "cform-select-font-weight": "normal", "cform-multiselect-font-family": "Roboto", "cform-multiselect-custom-font": "", "cform-multiselect-font-size": "16", "cform-multiselect-font-weight": "normal", "cform-dropdown-font-family": "Roboto", "cform-dropdown-custom-font": "", "cform-dropdown-font-size": "16", "cform-dropdown-font-weight": "normal", "cform-calendar-font-family": "Roboto", "cform-calendar-custom-font": "", "cform-calendar-font-size": "13", "cform-calendar-font-weight": "normal", "cform-button-font-family": "Roboto", "cform-button-custom-font": "", "cform-button-font-size": "14", "cform-button-font-weight": "500", "cform-timeline-font-family": "Roboto", "cform-timeline-custom-font": "", "cform-timeline-font-size": "12", "cform-timeline-font-weight": "normal", "cform-pagination-font-family": "", "cform-pagination-custom-font": "", "cform-pagination-font-size": "16", "cform-pagination-font-weight": "normal", "payment_require_ssl": "", "submission-file": "delete", "form_name": "Product Form", "form_status": "publish", "honeypot": "1", "use_ajax_load": "1", "use_donotcachepage": "1", "enable-submissions-retention": "false", "akismet-protection": 0 }, "client_id": null, "notifications": [ { "slug": "notification-1234-4567", "label": "Admin Email", "email-recipients": "default", "recipients": "noreply@local", "email-subject": "มีคำสั่งซื้อใหม่จาก {form_name} รหัส {submission_id}", "email-editor": "You have a new website form submission: <br/> {all_fields} <br/>---<br/> This message was sent from {site_url}.", "email-attachment": "true", "conditions": [] }, { "slug": "notification-5030-6942", "label": "Customer", "email-subject": "ขอบคุณคุณ {name-1} สำหรับการสั่งซื้อ", "email-editor": "<p>ขอบคุณสำหรับรายการสั่งซื้อ</p>\n<p>{textarea-1}</p>\n<p>ส่งที่</p>\n<p>{name-1} โทร {phone-1}<br />{textarea-2}<br /><br />ทำรายการจาก {embed_url} IP: {user_ip}</p>", "email-attachment": "false", "recipients": " {email-1}", "email-recipients": "default", "routing": [], "conditions": [] } ] }, "status": "publish", "version": "1.15.2"}
แล้วคลิก IMPORT ก็จะได้ฟอร์มที่ต้องการ นำไปแก้ไขต่อได้เลย
ซึ่งสิ่งสำคัญที่ต้องตรวจสอบ คือเมนู Email Notifications ให้ตั้งค่าเป็นอีเมลของผู้ดูแล เพื่อจะได้รับเมลแจ้งเตือนเวลามีคนกรอกฟอร์ม
Create Form
หากต้องการสร้างฟอร์มเอง สามารถสร้างได้อิสระ แต่เงื่อนไขคือ ต้องสร้าง 2 ฟีลด์เพิ่ม ระบบจะซ่อนค่าไว้ เวลามีการส่งฟอร์ม จะได้เห็นว่ารายการสั่งซื้อมีอะไรบ้าง
1. Order Summary
เพิ่มฟีลด์ Textarea ตั้งชื่ออะไรก็ได้ แต่ให้ตั้งคลาสว่า order_summary เพื่อเก็บข้อมูลการสั่งซื้อ
2. Order Total
เพิ่มฟีลด์ Number ตั้งชื่ออะไรก็ได้ แต่ให้ตั้งคลาสว่า order_total
ข้อ 1-2 เมี่อเปิดใช้ฟอร์มร่วมกับหน้า Sales Page ระบบจะหาฟีลด์เหล่านี้ เพื่อเก็บข้อมูลการสั่งซื้อลงในฟอร์ม
3. Other Fields
ส่วนฟีลด์อื่นๆ สามารถตั้งค่าได้โดยอิสระ เช่น ชื่อ ที่อยู่ เบอร์ติดต่อ ฯลฯ