เว็บไซต์สมัยนี้ ส่วนใหญ่แทบจะทุกเว็บไซต์ มีแบบฟอร์มติดต่อ แบบสอบถาม ฟอร์มโปรโมชั่น อย่างใดอย่างนึง ทำให้เราสามารถเก็บฐานข้อมูลลูกค้าได้ ซึ่งการสร้างฟอร์ม WordPress ด้วยปลั๊กอิน Ninja Form สามารถทำได้ง่ายๆ ด้วยระบบ Drag & Drop หรือ ลากๆ วางๆ
ผมเคยใช้ปลั๊กอินสร้างฟอร์มติดต่อมาหลายตัว เช่น Contact Form7, Gravity Form, Ninja Form แต่ละตัวก็มีจุดเด่น จุดด้อยที่ต่างกัน เช่น Contact Form7 เบา ใช้ง่าย แต่ฟังก์ชันพื้นฐานเท่านั้น หลังๆ นี้ผมมาปักหลักที่ตัว Ninja Form เพราะ ฟังก์ชันเยอะ ใช้งานง่าย และยังสามารถทำ แบบฟอร์มขั้นสูงได้ด้วย
วิธีสร้างฟอร์ม WordPress ด้วย Ninja Form
1. ดาว์นโหลด และติดตั้งปลั๊กอิน
ไปที่เมนู Plugins > Add New : กรอกชื่อปลั๊กอินในช่องค้นหาว่า “Ninja form”
คลิกติดตั้งตอนนี้ และกดใช้งาน ถ้าติดตั้งถูกต้อง ก็จะมีเมนูด้านซ้ายมือชื่อ “Ninja Forms”
ในหน้าแรกของปลั๊กอิน Ninja Forms เราจะเห็นแบบฟอร์มทั้งหมดที่เรามี เราสามารถคลิก “ADD NEW” หรือ กดแก้ไขแบบฟอร์มเดิม
ในกรณีที่เราคลิก ADD NEW เราสามารถคลิกเลือกสร้างฟอร์มอย่างไวด้วย Template ตัวอย่างได้เลย ทำให้งานของเราง่ายขึ้นไปอีก
Template ตัวอย่างที่ Ninja Forms เตรียมให้เรา มีดังนี้
- ฟอร์มเปล่า (Blank Form)
- แบบฟอร์มรวบรวมความคิดเห็น (Collect Feedback)
- แบบฟอร์มติดต่อเรา (Contact Us)
- ลบ Data (Delete Data Request)
- แบบฟอร์มลงทะเบียนอีเวนต์ (Event Registration)
- ส่งออก Data (Export Data Request)
- แบบฟอร์มคำถามทั่วไป (General Enquiry)
- แบบฟอร์มใบสมัครงาน (Job Application)
- แบบสอบถาม (Questionnaire)
- แบบฟอร์มใบเสนอราคา (Quote Request)
- แบบฟอร์มสร้างโพส (Create a Post)
- ฟอร์มแก้ไขโปรไฟล์ (Edit User Profile)
- ไฟล์อัพโหลด (File Upload)
- ฟอร์ม MailChimp (MailChimp Signup)
- การชำระเงิน (PayPal Payment)
- ฟอร์มสมัครสมาชิก (Register a User)
- การชำระเงิน (Stripe Payment)
2. วิธีการสร้างและแก้ไขแบบฟอร์ม
- สร้างจากฟอร์มเปล่า
- สร้างจาก Templates ที่ปลั๊กอินเตรียมให้
วิธีการสร้างฟอร์ม ถ้าเราใช้งานจนคล่องแล้ว สามารถเลือกแบบ Blank Form ได้ แต่ถ้ามือใหม่ แนะนำให้สร้างจาก Template น่าจะไวที่สุด ผมจะทำตัวอย่างวิธีการสร้างฟอร์มติดต่อ
คลิก “ADD NEW” เลือก “แบบฟอร์มติดต่อเรา (Contact Us)”
- วิธีแก้ไข Field : เอาเมาส์ไปชี้ที่ “ไอคอนฟันเฟือง” ในช่องที่ต้องการแก้ไข จะมีไอคอน 2 ตัวโผล่ให้เห็น คือ สำหรับ Clone หรือ คัดลอก และ ไอคอนสำหรับลบ Field
- วิธีการเพิ่ม Field ใหม่ : คลิกไอคอน + เพื่อเลือก Field ที่ต้องการ
- วิธีแสดงผลด้วย Shortcode : คลิกที่ไอคอน “โซ่” ด้านบนขวา
- วิธีบันทึกเพื่อเผยแพร่ : คลิกปุ่ม “PUBLISH”
วิธีแก้ไข Field :
คลิกที่ Field ที่ต้องการแก้ไข แล้วมันจะมี กล่องการตั้งค่าโผล่มาด้านขวามือ สิ่งที่เราสามารถแก้ไขได้ มีดังนี้
- Label : ชื่อ Field
- Required Field : บังคับต้องกรอกหรือไม่
- Default Value : ค่าตั้งต้น กรณีที่เปิดขึ้นมาแล้ว อยากให้แสดงข้อความเลย
- Placeholder : เป็นคำอธิบายของช่องกรอก *เวลาแสดงผล จะมีข้อความจางๆ ให้เราเห็น
- Description : คำอธิบาย
แต่ละประเภท Field จะมีการตั้งค่าที่คล้ายๆ กัน จะเปลี่ยนไปเล็กน้อยถามประเภทช่องที่เราเลือก
หากแก้ไขเสร็จแล้ว คลิก “DONE”
วิธีการเพิ่ม Field ใหม่ :
คลิกไอคอน + ด้านขวาล่าง จะมีประเภท Field ให้เราเลือกเยอะมากๆ มีแทบจะทุกประเภท Field ให้เราได้เลือก
หากต้องการ Field ตัวไหน ก็สามารถ ลากไปวางด้านซ้ายมือได้เลย และยังสามารถลากขึ้น-ลง เพื่อสลับตำแหน่งของ Field
3. วิธีตั้งค่าอีเมล์
ใน Ninja Form เราสามารถตั้งค่าเรื่องอีเมล์ค่อนข้างละเอียดมากๆ ลองคลิกที่แท็บ “Emails & Actions”
ส่วนด้านซ้ายจะเป็นส่วน Actions ต่างๆ ที่เราต้องการ ว่าหลังจากที่คลิกปุ่ม Submit ส่งข้อมูลแล้ว จะให้ทำงานยังไงต่อ เช่น ส่งเข้าอีเมล์, ลิงค์ไปไหนสักแห่ง, เชื่อมต่อกับระบบ Payment, เชื่อมต่อกับระบบอื่นๆ
ส่วนด้ายขวา จะเห็นการตั้งค่าต่างๆ ตามที่เราคลิกจาก Action ด้านซ้ายมือ
โดยปกติระบบจะสร้าง Action ให้เรา 3 ชุด
- Store Submissoin : การเก็บข้อมูลเข้าหลังบ้านของเว็บไซต์
- Email : การตั้งค่าส่งข้อมูลไปยังอีเมล์ หลังจากกรอกแบบฟอร์ม
- Success Message : ข้อความที่แสดง หลังจากที่กรอกแบบฟอร์ม
การตั้งค่าอีเมล์
- Action Name : ชื่อเพื่อให้แอดมินเข้าใจเฉยๆ
- To : จะส่งแจ้งเตือนไปที่ E-mail ไหน (Default ส่งไปที่แอดมิน)
- Subject : ชื่อหัวข้ออีเมล์ เวลาได้รับเมล์
- Email Message : ต้องการส่งข้อมูลอะไรบ้าง ถ้าทั้งหมดที่กรอก ก็เลือกตามภาพ
เพื่อนๆ ลองปรับแก้กันดูครับ
4. วิธีบันทึกขั้นสุดท้าย
หากตั้งค่าทุกอย่งเรียบร้อย ขึ้นตอนสุดท้ายที่ต้องทำคือ การบันทึก มองไปที่บนขวาคลิกปุ่ม “Publish” แล้วคลิกปิดได้เลย “X”
5. วิธีนำ Shortcode ไปแสดงผล
วิธีการนำแบบฟอร์มที่เราสร้างไปแสดงผลไม่ยากครับ แค่คัดลอก “Shortcode” ของฟอร์มที่ต้องการ ไปวางใน Page / Page / Widget หรือ ตรงไหนก็ได้ที่จะแสดง
จุดเด่นของการสร้างฟอร์ม WordPress ด้วย Ninja Form
- สร้างฟอร์มง่ายๆ ด้วยวิธี Drag & Drop หรือ ลากๆ วางๆ
- สามารถสร้างแบบฟอร์มได้หลากหลายรูปแบบ
- ในขั้นสูงขึ้น เราสามารถเชื่อมต่อกับระบบอื่นๆ เชื่อมต่อกับ Api ต่างๆ
- หากต้องการฟีเจอร์ที่เจ๋งขึ้น สามารถหาซื้อปลั๊กอินเสริมได้ Add-ons – Ninja Forms
สรุป
การสร้างฟอร์ม WordPress ด้วย Ninja Form เป็นปลั๊กอินตัวนึงที่ผมใช้บ่อย สำหรับสร้างแบบฟอร์มติดต่อ ฟอร์มลงทะเบียน จุดเด่นของมันอยู่ที่ ออฟชั่นในตัวฟรีให้เยอะมาก แทบไม่ต้องซื้อตัวโปร ส่วนตัวเคยใช้ทั้ง Contact Form7, Gravity Form สุดท้ายมาจบที่ Ninja Form
