สร้าง แบบฟอร์ม ใน WordPress ง่ายนิดเดียว

สร้างแบบฟอร์ม ใน Wordpress ง่ายนิดเดียว
https://www.youtube.com/embed/bmQS0_r9FCM?feature=oembed&autoplay=1

ในวีดีโอนี้ เราจะมาพูดถึงการ สร้างแบบฟอร์มง่ายๆ ใน 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 ก่อนครับว่า เมื่อทำการสร้างฟอร์มสำเร็จแล้ว เราจะให้แสดงว่าอะไร

Email

เราสามารถตั้งค่าได้ครับว่า เราจะส่งไปให้ใคร และ สามารถตั้งค่าหัวข้อได้ครับว่า เราต้องการส่งเมลล์เป็น 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 ได้อย่างง่ายๆแล้วครับ

14 thoughts on “สร้าง แบบฟอร์ม ใน WordPress ง่ายนิดเดียว

  1. ณรงค์ชัย says:

    ผมลองใช้ ninja form แล้วครับ อยากรบกวนขอคำแนะนำให้ ninjaform สามารถส่งเมล์ได้ต้องทำอย่างไรครับ

    • พลากร สอนสร้างเว็บ says:

      ไปที่ Form ของเรา แล้วไปที่ Advanced ครับ จะมี คำว่า Restriction อยู่ ให้เราตั้งค่า Unique Field ครับผม

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *