Sale Page Payment Form ตั้งค่าฟอร์มแจ้งชำระเงิน

ธีม Plant เวอร์ชั่น 2.3 เป็นต้นไป มาพร้อมกับระบบ Sale Page ซึ่งจะดึงฟอร์มสั่งซื้อมาแสดงอัตโนมัติ

เราแนะนำให้ใช้ปลั๊กอิน Forminator เพราะฟรี และสามารถตั้งค่าที่ซับซ้อนได้

การ Import ตัวอย่างฟอร์ม

1. ไปที่ Forminator → Forms คลิก IMPORT

2. ระบบจะแสดงกล่อง Modal ให้เรานำโค้ดไปใส่ แล้วคลิก IMPORT ก็จะได้ฟอร์มที่ต้องการ นำไปแก้ไขต่อได้เลย

3. โดยสิ่งสำคัญที่ต้องตรวจสอบ คือเมนู Email Notifications ให้ตั้งค่าเป็นอีเมลของผู้ดูแล

ทีมงานได้ทำตัวอย่างฟอร์มไว้ให้ดังนี้

1. ตัวอย่างฟอร์มสั่งซื้อสินค้า

ตัวอย่างที่ https://plant.seeddemo.com/sale-page-product/

โค้ดแบบฟอร์ม

{"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":"[email protected]","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"}

2. ตัวอย่างฟอร์มลงทะเบียนบริการ

ตัวอย่างที่ https://plant.seeddemo.com/sale-page-service/

โค้ดแบบฟอร์ม

{"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":"upload-1","element_id":"upload-1","form_id":"wrapper-6890-2256","type":"upload","options":[],"cols":12,"conditions":[],"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":true,"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-2611-8456","type":"name","cols":6,"required":"true","field_label":"ชื่อ","placeholder":"","prefix_label":"Prefix","fname_label":"ชื่อ","fname_placeholder":"","mname_label":"Middle Name","mname_placeholder":"E.g., Smith","lname_label":"นามสกุล","lname_placeholder":"","wrapper_id":"wrapper-2611-8456","conditions":[],"required_message":"กรุณากรอกชื่อ","custom-class":"customer_firstname","multiple_name":"false","prefix":false,"fname":true,"lname":true,"fname_required":true,"fname_required_message":"กรุณากรอกชื่อ","lname_required":true,"lname_required_message":"กรุณากรอกนามสกุล"},{"id":"name-2","element_id":"name-2","form_id":"wrapper-2611-8456","type":"name","cols":6,"required":"true","field_label":"นามสกุล","placeholder":"","prefix_label":"Prefix","fname_label":"ชื่อ","fname_placeholder":"","mname_label":"Middle Name","mname_placeholder":"E.g., Smith","lname_label":"นามสกุล","lname_placeholder":"","wrapper_id":"wrapper-2611-8456","conditions":[],"required_message":"กรุณากรอกนามสกุล","custom-class":"customer_lastname","multiple_name":"false","prefix":false,"fname":true,"lname":true,"fname_required":true,"fname_required_message":"กรุณากรอกชื่อ","lname_required":true,"lname_required_message":"กรุณากรอกนามสกุล","formid":"wrapper-8506-8695"},{"id":"email-1","element_id":"email-1","form_id":"wrapper-1511347711918-1669","type":"email","cols":6,"required":"true","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":"number","options":[],"cols":6,"conditions":[],"wrapper_id":"wrapper-1511347711918-1669","calculations":"true","limit_min":"","limit_max":"","field_label":"เบอร์มือถือ","placeholder":"","limit_message":"false","required":true,"required_message":"กรุณากรอกเบอร์มือถือ","separators":"blank"},{"id":"html-3","element_id":"html-3","form_id":"wrapper-8300-3751","type":"html","options":[],"cols":12,"conditions":[],"wrapper_id":"wrapper-8300-3751","field_label":"","variations":"<h2>4. ข้อมูลอื่นๆ (ถ้ามี)</h2>","formid":"wrapper-6006-6746"},{"id":"textarea-2","element_id":"textarea-2","form_id":"wrapper-9886-3212","type":"textarea","cols":12,"required":false,"field_label":"หมายเหตุ","placeholder":"","input_type":"paragraph","limit":"","limit_type":"characters","wrapper_id":"wrapper-9886-3212","conditions":[],"required_message":"กรุณากรอกที่อยู่","default-height":"80","description":"หากลงทะเบียนมากกว่า 1 คน กรุณาระบุข้อมูลของผู้เรียนท่านอื่นๆ ตามข้อ 3"},{"id":"html-4","element_id":"html-4","form_id":"wrapper-3890-799","type":"html","options":[],"cols":12,"conditions":[],"wrapper_id":"wrapper-3890-799","field_label":"","variations":"<h2>5. ใบกำกับภาษี</h2>","formid":"wrapper-9886-3212"},{"id":"checkbox-1","element_id":"checkbox-1","form_id":"wrapper-7752-9885","type":"checkbox","options":[{"label":"ต้องการใบกำกับภาษี","value":"Tax-Invoice","key":"3077-2359"}],"cols":12,"conditions":[],"wrapper_id":"wrapper-7752-9885","value_type":"checkbox","field_label":"ใบกำกับภาษี","layout":"vertical","required":false,"required_message":""},{"id":"text-1","element_id":"text-1","form_id":"wrapper-2377-1947","type":"text","options":[],"cols":6,"conditions":[{"element_id":"checkbox-1","rule":"is","value":"Tax-Invoice"}],"wrapper_id":"wrapper-2377-1947","input_type":"line","limit_type":"characters","field_label":"ชื่อองค์กร","placeholder":"","required":true,"required_message":"กรุณากรอกชื่อองค์กร","condition_action":"show"},{"id":"number-3","element_id":"number-3","form_id":"wrapper-2377-1947","type":"number","options":[],"cols":6,"conditions":[{"element_id":"checkbox-1","rule":"is","value":"Tax-Invoice"}],"wrapper_id":"wrapper-2377-1947","calculations":"true","limit_min":"","limit_max":"","field_label":"เลขประจำตัวผู้เสียภาษี","placeholder":"","required":true,"required_message":"กรุณากรอกเลขผู้เสียภาษี"},{"id":"textarea-3","element_id":"textarea-3","form_id":"wrapper-2998-7958","type":"textarea","cols":12,"required":true,"field_label":"ที่อยู่องค์กร","placeholder":"","input_type":"paragraph","limit":"","limit_type":"characters","wrapper_id":"wrapper-2998-7958","conditions":[{"element_id":"checkbox-1","rule":"is","value":"Tax-Invoice"}],"required_message":"กรุณากรอกที่อยู่","default-height":"80","description":"","formid":"wrapper-5968-9495","condition_action":"show"}],"settings":{"pagination-header":"nav","paginationData":{"pagination-header-design":"show","pagination-header":"nav"},"formName":"Service Form","version":"1.14.9","form-border-style":"none","form-padding":"","form-border":"","fields-style":"open","validation":"on_submit","form-style":"flat","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":"service-form","form_status":"publish","honeypot":"1","use_ajax_load":"1","use_donotcachepage":"1","enable-submissions-retention":"false","use-custom-css":"1","custom_css":".forminator-button-submit {\n    font-size: 18px;\n    padding: 12px 20px;\n}"},"client_id":null,"notifications":[{"slug":"notification-1234-4567","label":"Admin Email","email-recipients":"default","recipients":"[email protected]","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":[]}]},"status":"publish","version":"1.14.9"}

การสร้างฟอร์มเอง

หากต้องการสร้างฟอร์มเอง สามารถสร้างได้อิสระ แต่เงื่อนไขคือ ต้องสร้าง 2 ฟีลด์เพิ่ม ระบบจะซ่อนค่าไว้ เวลามีการส่งฟอร์ม จะได้เห็นว่ารายการสั่งซื้อมีอะไรบ้าง

1. เพิ่มฟีลด์ Textarea ตั้งชื่ออะไรก็ได้ แต่ให้ตั้งคลาสว่า order_summary

2. เพิ่มฟีลด์ Number ตั้งชื่ออะไรก็ได้ แต่ให้ตั้งคลาสว่า order_total