Wordpress
สร้าง แบบฟอร์ม ใน WordPress ง่ายนิดเดียว
ในวีดีโอนี้ เราจะมาพูดถึงการ สร้างแบบฟอร์มง่ายๆ ใน WordPress กันนะครับ ลองมาดูกันเลย
ให้เราไปที่เมนู Plugins แล้วก็ เลือกไปที่ Add New ได้เลย
จากนั้นค้นหาคำว่า Form แล้วเรามาดูกันว่า ฟอร์มไหนน่าใช้กว่ากัน ลองดูที่ อันดับ 1 และ 2 ครับคนใช้เยอะที่สุด
ปลั๊กอินยอดฮิตในการสร้างแบบฟอร์มใน WordPress
Contact Form 7
ผู้ใช้เยอะที่สุดในโลกเพราะว่า นักพัฒนานิยม Bundle ไปกับธีม และ มี Extension ค่อนข้างเยอะกว่าเจ้าอื่น
Ninja Forms
ผู้ใช้เยอะในลำดับต่อมา เพราะว่า มันช่วยให้เราสร้างฟอร์มได้ง่ายจริงๆ สำหรับผู้เริ่มต้น
ในวีดีโอนี้เราจะมาใช้เจ้า Ninja Forms กันนี่แหล่ะครับ สำหรับสร้างฟอร์ม เพราะมันง่ายสุดๆไปเลยครับ ว่าแล้ว เราก็กด Install กันได้เลย
จากนั้นกด Activate ครับ เมื่อกด Activate แล้ว เจ้า Ninja Form จะถามว่า ขอเก็บข้อมูลการใช้งานหน่อย เพื่อที่จะไปปรับปรุงข้อมูล ถ้าเราโอเคเราก็ตอบ Yes ได้เลย แต่ถ้าไม่ OK เราก็ตอบ No ในที่นี้ ตอบ No ไปก็ได้ครับ
ในครั้งแรกเลยเจ้า Ninja Forms จะสร้างฟอร์มตัวอย่างมาให้เรา 1 ฟอร์มครับ แต่เดี๋ยวเราจะไปสร้างใหม่กันดีกว่าครับ
ให้เราไปที่ Add New แล้ว เจ้า Ninja Forms จะมีให้เลือกว่า ใช้ Template ไหน เราก็เลือกเป็น Blank คือ ว่างเปล่า สร้างตั้งแต่แรกเลย
Ninja Forms ก็จะโหลด ตัวสร้างฟอร์ม ขึ้นมาให้เราสร้างได้เลย เราเริ่มสร้างได้จากการลากตัว กล่องข้อความมาใส่ในพื้นที่สร้างได้เลย
เริ่มสร้าง Field หรือ กล่องข้อมูลใน Form
Single Line Text
เริ่มจากข้อความแบบ 1 แถวก่อน จากนั้น ปรับแต่ง Label หรือ ชื่อ Field และ ตำแหน่งของ Label ก่อน
ต่อมาให้เราดูว่า Field นี้ต้องระบุหรือไม่
และ ต้องจำกัดขนาดของ Field นี้หรือเปล่า จากนั้นให้เราระบุ Help Text และ คำอธิบาย ข้อแตกต่างระหว่าง Help Text และ คำอธิบายก็คือ คำอธิบาย จะแสดงตลอด แต่ Help Text เราต้องเอาเมาส์ไปชี้ก่อน
จากนั้นเรามาดูที่ Advance กัน เราจะสามารถระบุค่าเริ่มต้น และ Place Holder คือค่าที่แสดงให้เราเห็นเป็นตัวอย่างนั้นเอง
ที่ Administration เราต้องระบุให้ชัดเจน ปกติ Ninja Forms จะเอา Label ของเรามาสร้าง แต่มันไม่สามารถใช้ภาษาไทยได้เลยเป็นแบบนี้ครับ เราต้องพิมพ์ เพิ่มเข้าไปเองเป็น ภาษาอังกฤษ นะครับ
ต่อมาเราพิมพ์ที่ admin label ต่อครับ เพื่อเอาไว้ใช้ใน report ครับ
จากนั้น click ที่ done เราก็ได้ 1 Field แล้วครับ
Email Field
เรามาสร้าง field ต่อมากันครับ เป็น Field Email ให้เราลาก Field อีเมลล์มาใส่เลย แล้วก็ปรับแต่งนิดหน่อยครับ
จากนั้นเราก็ตกแต่งแบบเมื่อกี้เลยครับ โดยเริ่มจาก การปรับแต่ง Label ตามด้วย Display, Advanced และ Administrator ตามลำดับครับ
Select Field
สำหรับ Field ต่อมาผมจะสร้าง Field Select ต่อครับ จะสร้างเป็นเรื่องที่ต้องการติดต่อครับ
เราก็ตกแต่งได้เหมือน Field ก่อนหน้านี้เลย แต่สำหรับ Select Field เราสามารถที่จะ เพิ่มตัวเลือกลงไปได้ครับ ในส่วนของ Options เริ่มต้น เค้าจะมีให้เราสามตัว เราสามารถใส่ค่าลงไปได้เลย
ตัว Calc Value คือค่าที่นำไปใช้คำนวณ เราจะยังไม่ได้ใช้ในส่วนนี้ครับ
ส่วนตัวเครื่องหมายถูก หมายความว่า ตั้งให้เป็นค่าเริ่มต้นของตัวเลือกครับ
Paragraph Text Field
Field นี้เราจะใช้เป็น Field ข้อความ ที่ผู้ติดต่อจะเข้ามาติดต่อเราครับ เราสามารถตกแต่งได้เหมือน Field อื่นๆ แต่จะแตกต่างกับ Field อื่น ตรง Display ครับว่า จะให้แสดงเป็น Rich Text Editor ได้ หรือ กล่องที่ให้ใส่รูปแบบข้อความได้ครับ
Submit Button
เมื่อสร้างเสร็จแล้ว ก็อย่าลืมปุ่ม Submit Button นะครับ เพื่อให้คนคลิก Submit เพียงเท่านี้ ก็สร้างฟอร์มเสร็จเรียบร้อยแล้วครับ
ตั้งค่า แบบฟอร์มของเรา ให้ส่ง Email
Email & Action
เมื่อเราสร้างเสร็จแล้ว ใน Ninja Form จะมีคำสั่งว่า Emails & Action ให้เราตั้งค่าอยู่ครับ ซึ่งเราสามารถตั้งค่าได้เลยครับ
Success Message
เริ่มจากการตั้งค่า Success Message ก่อนครับว่า เมื่อทำการสร้างฟอร์มสำเร็จแล้ว เราจะให้แสดงว่าอะไร
เราสามารถตั้งค่าได้ครับว่า เราจะส่งไปให้ใคร และ สามารถตั้งค่าหัวข้อได้ครับว่า เราต้องการส่งเมลล์เป็น Subject อะไร นอกจากนั้น Email Message เราสามารถ เพิ่มเติมได้ครับว่า เราอยากใส่ข้อความเป็นอย่างไร ซึ่งโดยค่าเริ่มต้นจะเป็น ตารางค่าของทุก Field ใน Form ของเราครับ
นอกจากนั้น ที่ Advance เรายังสามารถกำหนดให้มี CC และ BCC ได้อีกด้วย
Store Submissions
ต้องการให้เก็บค่า Record ในระบบหรือไม่ เราสามารถเลือกเปิดปิดได้ครับว่า เราต้องการให้เก็บหรือไม่ ซึ่งอันที่จริงแล้ว เราสามารถที่จะเปิดปิดได้ทุกๆ Action ครับ
การตั้งค่าชั้นสูง
Advanced
ลองมาดูตรง Advance กันนิดนึงครับ ในแท็บ Advance เราจะเห็นว่า มี Display Settings , Restriction และ Calculations
เรามาดูตรง Display Settings กันก่อนครับ ตรงนี้เราควรที่จะพิมพ์ Form Title ลงไปครับ เพื่อเวลาที่เรากลับมาแก้ไขฟอร์มเราจะได้เห็น Form Title ครับ นอกจากนั้น จะมี Options ให้เราเลือกอีกด้วยเช่น
– Show Form Title คือ การให้แสดงชื่อฟอร์ม
– Clear Form คือการล้างค่าฟอร์มหลังจากที่ผู้ใช้ คลิกส่งข้อมูลแล้ว
– Hide Form คือการซ่อนฟอร์มหลังจากที่ผู้ใช้ คลิกส่งข้อมูลแล้ว
ในแถบ Advance Display Settings ก็จะเป็นการกำหนดค่า เริ่มต้นของ Label ทั้งหมด และ การแปล Message ต่างๆ
มาดูตรง Restriction กันบ้างครับ ตรงนี้ ถ้าเราเลือก Options ให้เก็บค่าในระบบ Ninja Form จะรู้ได้ครับว่าซ้ำหรือไม่ซ้ำ
นอกจากนั้น เรายังสามารถเลือก ให้คนที่ Login แล้วเท่านั้นเห็นฟอร์มได้ หรือ ถ้าไม่เลือกตรงนี้จะให้ใครเห็นฟอร์มก็ได้ครับ
LIMIT Submission เราสามารถกำหนด ได้ว่า ให้ Submit Form หรือ ส่งค่าฟอร์มได้กี่ครั้งครับ และ สามารถที่จะตั้งค่าข้อความได้ด้วยถ้า Submit เกิน Limit ครับ
Preview Form
เมื่อเราทำการสร้าง แบบฟอร์มเสร็จเรียบร้อยแล้ว เรายังสามารถพรีวิวฟอร์มได้อีกด้วย เมื่อคลิกที่พรีวิวเราจะสามารถดูตัวอย่างได้ทันที
Manage Form
เมื่อเราออกจากตัวสร้างฟอร์ม หรือเข้ามาที่ Ninja Form ครั้งแรก เราสามารถคลิกที่รูปเฟืองของฟอร์มที่เราสร้าง เพื่อทำการแก้ไข ทำซ้ำ หรือ ลบ หรือดูว่ามีคนส่งข้อความมาหาเราแล้วหรือยังได้เลยครับ
ติดตั้งฟอร์ม บนหน้าเว็บไซต์ของเรา
วิธีการติดตั้งฟอร์มบนเว็บไซต์ของเรา ง่ายแสนง่ายครับ ให้เราไปที่หน้า แล้วคลิกไปที่ฟอร์ม จากนั้นเลือกฟอร์มที่เราต้องการจะติดตั้ง Ninja Form จะวาง Short Code ที่ใช้สร้างฟอร์ม เวลาที่เราดูหน้าเว็บมาให้ จากนั้นเราสามารถ Save หน้านี้ แล้วก็ทดลองส่งข้อความได้เลยครับ
เมื่อเราทำลองเสร็จแล้ว เราก็สามารถที่จะ มาดูว่า ข้อความที่เราได้รับ เป็นอย่างไรในระบบหลังบ้านได้เลย
สรุป
เพียงเท่านี้เราก็สามารถ สร้างและติดตั้งแบบฟอร์ม บน WordPress ได้อย่างง่ายๆแล้วครับ
ช่วยสอนวิธีสร้างรายงาน หน่อยครับ และวิธีแก้ไขลบข้อมูล
ถ้ามีโอกาสจะทำวีดีโอสอนนะครับ 🙂
ดึงข้อมูลเป็นรายงานอย่างไรบ้างค่ะ
Export Submission ได้เลยครับผม
ผมลองใช้ ninja form แล้วครับ อยากรบกวนขอคำแนะนำให้ ninjaform สามารถส่งเมล์ได้ต้องทำอย่างไรครับ
ปกติมันส่งอีเมลล์ได้อยู่แล้วครับ โดยตั้งค่าที่ Form Actions ครับ แต่ถ้าตั้งแล้วส่งไม่ได้แปลว่า Webhosting ของเรา Block Mail จาก PHP ครับ
Webhosting ของเรา Block Mail จาก PHP เราจะแก้ไขได้ยังไงบ้างครับ
ใช้ postman post smtp plugin ครับ ตั้งค่ายากหน่อย แต่ว่าได้ผลครับ
ติดตั้ง ninja form ทำไมขึ้นอัปเดตล้มเหลวคะ
ติดตั้งใหม่ดูหรือยังครับ 🙂
ฟอร์มนี้ สามารถสร้างพวกฟอร์มรับสมัครงานต่างๆ ได้มั้ยครับ
ได้ครับ
สอบถามค่ะ เราสามารถกำหนดได้ไหมว่าไม่ใช้กรอกชื่อ นามสกุล และอีเมล์ซ้ำ
ไปที่ Form ของเรา แล้วไปที่ Advanced ครับ จะมี คำว่า Restriction อยู่ ให้เราตั้งค่า Unique Field ครับผม
ผมจะดึงค่า submission ออกมาแสดงใน page ได้มั้ยครับ
ต้องใช้ version โปรครับ แต่แนะนำเป็น formidable pro ดีกว่าครับ
สวัสดีค่ะ เมื่อเราสร้าง website เสร็จแล้ว เราจะ active website ยังไงค่ะ
ตอนนี้สร้างอยู่บนโฮสหรือ เครื่อง ตัวเองครับ
สวัสดีครับ ปลั๊กอินนี้มันสามารถ กำหนดเวลา เปิด-ปิดในการตอบแบบฟอร์มอัตโนมัติได้ไหมครับ เช่นผมอยากให้ user เข้ามาตอบแบบฟอร์มตั้งแต่วันที่ 1-3 พอหมดวันที่ 3 แล้ว user จะไม่สามารถตอบแบบฟอร์มได้อีกอ่ะครับ
ตัวนี้ไม่ได้ครับ ลองดู Fluent Form มีสอนที่นี่ครับ https://palamike.com/fluentform-ep1/
ปลั๊กอินนี้สามารถแจ้งเตือนไปที่ไลน์ได้ไหมคะ
แจ้งไม่ได้ครับผม ยังไม่มี LINE Extension ครับ
สามารถนำ username มาใส่ที่ช่อง name ในฟอร์มได้เลยไหมครับ
ถ้า user นั้น login อยู่ทำเป็น default value ได้ครับ