วิธีใช้ปลั๊กอิน Forminator สร้างฟอร์ม WordPress แบบ Drag & Drop

• แชร์
• ทวีต
• ไลน์

ปลั๊กอินสำหรับสร้างฟอร์มใน WordPress มีหลายตัวที่นิยม เช่น Contact Form 7, Gravity Form, Ninja Form ฯลฯ แต่ละตัวมีฟีเจอร์แตกต่างกันไป ส่วนตัวผมเองหลังๆ ชอบใช้ Ninja Form ยืดหยุ่นและใช้งานง่าย (อ่านวิธีใช้ Ninja Form)

ล่าสุดพี่เม่นพูดถึงปลั๊กอิน Forminator ในกลุ่ม ผมเลยลองไปติดตั้งเล่นๆ ปรากฏว่าฟีเจอร์ที่ให้มาว้าวมากสำหรับตัวฟรี มันเป็น “Form Builder” ที่ใช้งานง่าย ฟีเจอร์หลากหลาย และที่ชอบที่สุดคือ มันปรับเรื่องดีไซน์ได้ด้วย ในบทความนี้เรามาเรียนรู้ วิธีใช้ปลั๊กอิน Forminator ไปด้วยกันครับ

ติดตั้งปลั๊กอินก่อนเริ่มใช้งาน

• ลิงค์ปลั๊กอิน Forminator
• วิธีติดตั้งปลั๊กอิน WordPress

วิธีสร้างฟอร์มอย่างไวด้วย Templates [Fields]

• Forminator > Forms > Create

Forminator มีฟอร์มเทมเพลตสำเร็จรูปให้เราเลือกสร้างอย่างรวดเร็ว มี Contact Form, Quote Request, Newsletter, User Registration, Login, Create Post

คลิกที่ Bank หากต้องการสร้างขึ้นมาเองทั้งหมด แต่ถ้าอยากสร้างแบบไวๆ ให้คลิกที่ Contact Form แล้วกด Continue

ระบบจะสร้างฟิลด์ให้เราอัตโนมัติ First Name, Email Address, Phone Number และ Message ถ้าต้องการแก้ไขการตั้งค่าของแต่ละฟิลด์ แค่คลิกบนฟิลด์แล้วจะมี PopUP การตั้งค่าเด้งขึ้นมา ซึ่งจุดที่คิดว่าจะมีการแก้ไขบ่อยๆ มีดังนี้

• Labels : ชื่อฟิลด์ที่แสดง
• Placeholder : ข้อความตัวอย่างหรือคำอธิบายที่ใส่ช่องฟิลด์
• Description : คำอธิบายฟิลด์
• Require : บังคับกรอก / ไม่บังคับกรอก และสามารถใส่ข้อความ Error Message แจ้งเตือนกรณีลืมกรอก
• Validate (มีเฉพาะ Phone, Email) : บังคับให้กรอกรูปแบบที่ถูกต้อง, สำหรับเบอร์โทร สามารถเลือกประเทศได้
• Default Value (บางฟิลด์) : ค่าตั้งต้น

ถ้าต้องการเพิ่มช่อฟิลด์เพิ่มเติม สามารถคลิกปุ่ม “Insert Fields” สำหรับตัวฟรี มีตัวเลือกฟิลด์ให้เราเลือกได้ถึง 25 รูปแบบ ซึ่งผมว่าน่าเพียงพอแล้วสำหรับการสร้างฟอร์มทั่วไป

ตั้งค่าเสร็จอยากดูตัวอย่างก็คลิกที่ปุ่ม “Peview” และบันทึกโดยการกด “Update“

ระบบจะเชื่อม Form กับ Email ของแอดมินอัตโนมัติ จะได้รับการแจ้งเตือนเมื่อมีคนกรอกแบบฟอร์ม เพียงเท่านี้ฟอร์มก็พร้อมใช้งานแล้วครับ

ปรับแต่งดีไซน์ของฟอร์มให้สวยขึ้น [Appearance]

จุดที่ทำให้ปลั๊กอิน Forminator น่าใช้มากยิ่งขึ้น ก็ตรงที่มันสามารถปรับแต่งดีไซน์ของฟอร์มได้ด้วย ทำให้ไม่ต้องไปเขียนโค้ด CSS ให้เสียเวลา จุดที่มันสามารถปรับแต่งได้มีดังนี้

• Design Style : รูปแบบของฟอร์ม จะมีให้เลือก Default, Flat, Bold, Material, None เพื่อนๆ ลองจิ้มดูครับ มันจะมีตัวอย่างแสดงด้านล่างเลย
• Colors : “คลิก Custom” ปรับสีได้แบบโคตรละเอียด
• Fonts : “คลิก Custom” เลือกฟ้อนต์จาก Google font โดยตรง และยังสามารถปรับ Font Size, Font Weight
• Form Container : สามารถปรับระยะห่าง Padding, เส้นขอบ Border, ระยะห่าง Spacing แต่ละฟิลด์
• Custom CSS : ถ้าสิ่งที่ปลั๊กอินให้มาแล้วยังไม่พอใจ เขียน Custom CSS ซะเลย มันยังให้ Selectors ให้เราจิ้มง่ายๆ ประหยัดเวลานิดหน่อย

การตั้งค่าการส่งข้อมูล [Submission Behaviour]

เป็นการตั้งค่าสิ่งที่เกิดขึ้นหลังจากที่ผู้ใช้กดส่งข้อมูล ตั้งค่าความปลอดภัย ตั้งวันหมดอายุฟอร์ม และตั้งค่าการแสดงผล

• After submission : ข้อความขอบคุณหลังจากที่กดส่งข้อมูล, การสั่งให้ Redirect ไปยังหน้าที่ต้องการ และซ่อนฟอร์ม
• Method : ระหว่างประมวลผล ให้เลือก Ajax (ทันที) หรือ แบบรีโหลดหน้าใหม่
• Validation : การตรวจสอบความถูกต้องของการกรอก เช่น อีเมล์, เบอร์โทร On Submit (แบบ Ajax) ตรวจสอบทันทีที่กดส่ง หรือ Server Side ตรวจสอบหลังจากที่รีโหลดหลังกดส่งข้อมูล
• Submission Indicator : เลือกเปิด Show Loader หรือ ปิด แนะนำสำหรับฟอร์มยาวๆ เวลาส่งกดข้อมูลผู้ใช้จะได้ทราบทันทีว่า กำลังส่งข้อมูลให้นะ…

• Autofill : กรอกข้อมูลอัตโนมัติเมื่อ Log-in เช่น กรอก ชื่อ, อีเมล์ ของผู้ใช้ที่กำลังเข้าใช้งาน
• Security : สามารถเปิด Honeypot protection เพื่อป้องกัน Spam และตั้งเปิดฟอร์มเฉพาะสมาชิกเท่านั้น
• Lifespan : สามารถตั้งอายุของฟอร์มได้ ด้วยการตั้งวันที่ หรือ จำนวนครั้งการส่งข้อมูล
• Rendering : เปิด-ปิดการโหลดฟอร์มแบบ AJAX และ หลีกเลี่ยงการเก็บแคชได้

การตั้งค่าอีเมล์ [Email]

Email Notifications เป็นการตั้งค่าการแจ้งเตือนอีเมล์ของแอดมิน และแจ้งเตือนไปยังผู้ใช้ หลังจากที่กดส่งข้อมูลสำเร็จ

• Email : สามารถตั้งชื่อเมล์, หัวข้อ, และข้อมูลรายละเอียด
• Recipients : อีเมล์ผู้รับ ถ้ามีหลายอีเมล์ให้คั่นด้วย Comma
• Advanced : กรณีที่เราต้องการจะเซ็ต From Name, Email, Reply to Email, CC, BCC
• Conditions : สามารถตั้งเงื่อนไขพิเศษได้

วิธีเชื่อมต่อกับ Third party apps

เราสามารถเชื่อมต่อฟอร์มกับ 3rd Party app เช่น Zapier, Mailchimp, Google Sheets, Slack, Trello, HubSpot เป็นต้น

วิธีเช็คข้อมูลที่กรอกเข้ามา [Submissions]

เข้ามูลที่ถูกกรอกเข้ามาผ่านฟอร์ม จะถูกเก็บไว้ในฐานข้อมูล หรือ สามารถเช็คได้ที่

• Forminator > Submissions : และเลือกฟอร์มที่ต้องการ

แบ่งการกรอกเป็น Step หรือ Pagination

ฟีเจอร์นี้เหมาะมากๆ สำหรับฟอร์มยาวๆ ที่มีช่องกรอกเยอะ การทำ Pagination หรือการแบ่งหน้า ทำให้ผู้ใช้รู้สึกไม่เยอะมาก หรือ เราอาจจะแบ่งตามหัวข้อย่อยของฟอร์ม ตามหัวข้อเรื่อง

วิธีการทำง่ายมากครับ

• +Insert Fields > เลือกฟิลด์ Page Break ตามจำนวนหน้าที่ต้องการ

ถ้าต้องการแก้ไขชื่อของแต่ละ Step แค่คลิกที่ Pagination สามารถแก้ไขชื่อ Page และรูปแบบดีไซน์

ดูตัวอย่าง

วิธีนำฟอร์มไปใช้งาน [Shortcode]

วิธีเอา Shortcode ไปใช้งานมี 2 วิธี อันดับแรก หลังจากที่กดปุ่ม UPDATE ระบบจะแสดง Shortcode ทันทีที่บันทึก วิธีที่สองคือ คลิก Copy Shortcode ที่ด้านบนครับ

วิธีเชื่อมต่อกับ Google Sheets

การเชื่อม Google Sheets ผมว่าเป็นฟังก์ชันที่น่าสนใจ เพราะเวลาทำเว็บให้ลูกค้า บางคนไม่ได้อยากเข้าหลังบ้าน ต้องการแค่ดูรายการข้อมูลเฉยๆ การเชื่อม Google Sheets เป็นอะไรที่ตอบโจทย์มากๆ

วิธีการอาจจะมีขั้นตอนเยอะหน่อย อ่านตามคู่มือจาก wpmudev โดยตรงเลยครับ

สรุป

ปลั๊กอิน Forminator เป็นปลั๊กอินสร้างฟอร์ม WordPress ตัวฟรีน่าใช้ตัวนึงเลย มันเป็น “Form Builder” ที่ใช้งานง่าย ฟีเจอร์หลากหลาย ที่ชอบที่สุดคือ มันปรับเรื่องดีไซน์ได้ด้วย และอีกฟีเจอร์ที่น่าสนใจคือ เชื่อมกับ Google Sheets ได้ ทำให้

• แชร์
• ทวีต
• ไลน์