Skip to content

การตั้งค่าฟอร์มด้วย Forminator

This content is not available in your language yet.

ระบบ Sales Page นั้น แนะนำให้ใช้ร่วมกับปลั๊กอิน Forminator เพื่อเก็บข้อมูลการสั่งซื้อต่างๆ และสามารถตั้งค่าได้อิสระ เชื่อมต่อกับระบบอื่นๆ ได้หลากหลาย

Forminator Banner

Install Plugin

ติดตั้งปลั๊กอินจาก https://wordpress.org/plugins/forminator/ ใช้เวอร์ชั่นฟรีก็ครอบคลุมการทำงานทั้งหมด

Import Demo Form

หากใช้วิธี ติดตั้งตัวอย่างเว็บไซต์ จะไม่จำเป็นต้อง Import

แต่ถ้าหากต้องการลองใช้ฟอร์มที่เตรียมไว้ให้ สามารถไปที่ Forminator → Forms คลิก IMPORT

forminator 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"
}

forminator import code

แล้วคลิก IMPORT ก็จะได้ฟอร์มที่ต้องการ นำไปแก้ไขต่อได้เลย

ซึ่งสิ่งสำคัญที่ต้องตรวจสอบ คือเมนู Email Notifications ให้ตั้งค่าเป็นอีเมลของผู้ดูแล เพื่อจะได้รับเมลแจ้งเตือนเวลามีคนกรอกฟอร์ม

forminator email

Create Form

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

1. Order Summary

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

Order Summary

2. Order Total

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

Order Total

ข้อ 1-2 เมี่อเปิดใช้ฟอร์มร่วมกับหน้า Sales Page ระบบจะหาฟีลด์เหล่านี้ เพื่อเก็บข้อมูลการสั่งซื้อลงในฟอร์ม

3. Other Fields

ส่วนฟีลด์อื่นๆ สามารถตั้งค่าได้โดยอิสระ เช่น ชื่อ ที่อยู่ เบอร์ติดต่อ ฯลฯ