สำหรับผู้ที่มีเว็บไซต์เป็นของตัวเอง ก็จำเป็นต้องมีฟอร์ม เพื่อเอาใว้ผู้ที่เข้ามาชม โดยปกติถ้าเป็นเว็บไซต์ที่ไม่ใช่  WordPress ต้องมาเขียน Form ยุ่งยากจัดเก็บอีก ไหนจะต้องทำ Validate เพื่อความปลอดภัยกันผู้ไม่ประสงค์ดีอีก แต่สำหรับ WordPress คุณ  Takayuki Miyoshi ได้สร้าง Plugin Contact Form 7 ขึ้นมา มีมานานมากๆ แล้ว แต่ยังอัพเดทอยู่เรื่อยๆ และการันตีด้วยยอดดาวน์โหลดมากกว่า 5 ล้านครั้ง ซึ่งไม่ธรรมดาเลยสำหรับปลั๊กอินตัวนี้

ความสามารถของปลั๊กอิน Contact Form 7

  1. สามารถสร้างฟอร์มสำหรับไว้ให้ผู้ใช้งานเข้ามาติดต่อได้อย่างไม่จำกัด
  2. สามารถจัดการรายละเอียดของฟอร์มทั้งหมดได้
  3. สามารถส่งข้อมูลจากหน้าเว็บเข้าอีเมลล์ได้
  4. ติดตั้งส่วนเสริมไม่ว่าจะเป็น reCAPTCHA(Google), Akismet(Automattic) เพื่อเพิ่มความปลอดภัยให้ฟอร์มได้
  5. สามารถลงปลั๊กอิน Contact Form 7 Database เพื่อเชื่อมต่อให้ข้อมูลที่ส่งแสดงอยู่ภายใต้หลังบ้าน

 

การติดตั้งใช้งาน

  1. ให้ดาวน์โหลดจากระบบหลังบ้านเข้าไปที่ Plugins -> Add New แล้วก็พิมพ์ในช่อง Search Plugins … หาปลั๊กอินที่ชื่อว่า “Contact Form 7″ เลือก Install แล้วก็ Activate
  2. ให้เข้าไปที่ลิงค์นี้ Click หลังจากนั้นดาวน์โหลดมาเป็นไฟล์ zip แล้วก็เข้าไปที่ Plugins -> Add New แล้วเลือก Upload Plugins ก็เลือกไฟล์ที่ดาวน์โหลดมาเข้าไป
  3. ใหเข้าไปที่ลิงค์นี้ Click หลังจากนั้นดาวน์โหลดมาเป็นไฟล์ zip แล้วก็แตกไฟล์หลังจากนั้นใช้โปรแกรมสำหรับอัพโหลดไฟล์ อาจจะใช้ filezilla ก็ได้ เอาไปวางไว้ที่ Path rootpath/wp-content/plugin เอาวางไว้ที่นี้แล้วหลังจากนั้นก็เข้าไป Activate ที่หลังบ้าน

ให้เลือกทำวิธีใดวิธีหนึ่งนะครับ ปกติวิธีที่ 1, 2 สามารถทำได้ก็จะง่ายเลย ส่วนวิธีสุดท้ายจะค่อนข้างเฉพาะพอสมควร

 

การตั้งค่า

หลังจากติดตั้งแล้วจะมีเมนูด้านซ้ายเพิ่มขึ้นมาชื่อว่า Contact นี่คือเมนูที่เอาไว้จัดการฟอร์มของเรา ให้เข้าไปที่เมนูนั้นเลย หลังจากเข้ามาจะพบกับ เมนูย่อยๆ 3 เมนูด้วยกันคือ Contact Forms, Add New, Integration

 

เมนู Contact Forms 

จะเป็นเมนูที่แสดงว่าตอนนี้เรามีฟอร์มอะไรบ้าง โดยค่าเริ่มต้นหลังจาก ดาวน์โหลดมาติดตั้งจะมีเพียง ฟอร์มเดียวที่ชื่อว่า Contact Form 1 ฟอร์มนี้จะเป็นตัวอย่างการสร้างนะครับหลักๆ เมนูนี้จะลิสรายการฟอร์มมาแสดงให้เราดูเหมือนเป็นหน้าหลักของปลั๊กอินตัวนี้

 

เมนู Add New

เมนูนี้จะเป็นการสร้างฟอร์ม จากตัวอย่างในรูป (ในรูปจะเป็นการแก้ไขปลั๊กอินนะครับ ซึ่งมีหน้าตาเดียวกัน)

contact form addnew
contact form addnew

กล่องด้านบน Enter Title Here จะเป็นตัวตั้งชื่อฟอร์มเรานะครับว่าอยากใช้ชื่อว่าอะไร ส่วนกล่องสำหรับใส่ข้อมูล จะแบ่งเป็น 4 แท็บแบ่งเป็น Form, Mail, Messages, Additional Settings

 

แท็บ Form

จะเป็นการเลือกฟิลด์ที่เราต้องการว่าจะมีอะไรบ้าง เราต้องการช่องที่จะไปแสดงในหน้าบ้านให้มีข้อมูลอะไรบ้างสามารถเลือกได้เลย ซึ่งเราสามารถเขียนเป็น HTML Tag ได้ที่หน้านี้เลย ส่วนประการสร้าง ฟิลด์แต่หล่ะฟิลด์ผมจะอธิบายดังนี้ การสร้างฟิลด์เราต้อง Click เพื่อเลือกฟิลด์ที่ต้องการเช่น Text หลังจากนั้นจะมี popup เด้งขึ้นมาเป็นหน้าตาดังนี้

contact form
contact form

เราสามารถเลือกได้ว่า จำเป็นต้องระบุไหมถ้าจำเป็นก็ติ๊กตรงช่อง Required Field, ชื่ออะไร, ค่าเริ่มต้นอะไร, ใช้ Akismet ใหม และเพิ่มเติมสามารถใส่ id และ class ได้ด้วย ถ้าเป็น โปรแกรมเมอร์เราสามารถตกแต่งฟอร์มได้ที่นี่เลย

หลังจากนั้นเลือก Insert Tag เราจะได้เป็น Shotcode ขึ้นมา 1 ตัวเราสามารถตกแต่ง ฟอร์มของเราเองได้เลย จะเพิ่มกี่ฟิลด์ก็ได้ครับ หลังจากจุดนี้ลองทดลองสร้างฟิลด์ขึ้นมาด้วยตัวท่านเองดู

 

แท็บ Mail

ส่วนนี้จะเป็นการตั้งค่า Email ต่างๆ ค่าปกติเราจะสามารถตั้งค่าเมลล์ที่ส่งกลับไป และสามารถสร้างเมลล์เพื่อส่งต่อไปได้อีกที เราสามารถใส่คำพูดได้เลยว่า ต้องการแบบไหน

editor screen mail tab
editor screen mail tab

โดยจากภาพจะบอกว่า Shotcode ตัวไหนเป็นอะไร  [your-name]  คือชื่อ , [your-email] คือ Email , [your-subject] คือหัวข้อ , [your-message] คือข้อความ เราก็กำหนดตามตั้งค่าเมลล์ได้เลย และเมื่อเลื่อนลงมาจะเจอ ช่องให้ติ๊กว่าจะเพิ่มการส่งเมลล์อีกที่ไหม ถ้าเราติ๊กที่ช่อง Mail (2) จะมีมาให้ตั้งค่าเมลล์เพิ่มขึ้นอีก เราสามารถส่งเมลล์ต่อไปอีกได้ครับ

 

แท็บ Messages

เป็นตัวกำหนดข้อความแต่หล่ะสถานะว่าเมื่อส่งเสร็จแล้วให้ขึ้นว่าอะไร ถ้าส่งไม่สำเร็จให้ขึ้นมาว่าอะไร โดยแยกเป็นแต่หล่ะบรรทัดตามนี้

contact form Messages
contact form Messages
  • Sender’s message was sent successfully เมื่อส่งอีเมลล์สำเร็จแล้ว
  • Sender’s message failed to send เมื่อส่งไม่สำเร็จ
  • Validation errors occurred เมื่อตรวจแล้วข้อมูลไม่ครบ หรือไม่ผ่าน
  • Submission was referred to as spam เตือนข้อความเป็น Spam
  • There are terms that the sender must accept ระบุให้ช่องนั้นจำเป็นต้องยอมรับ
  • There is a field that the sender must fill in ระบุให้ช่องนั้นต้องกรอกข้อมูล
  • There is a field with input that is longer than the maximum allowed length ข้อมูลยาวเกินไป
  • There is a field with input that is shorter than the minimum allowed length ข้อมูลสั้นเกินไป
  • Date format that the sender entered is invalid รูปแบบเวลาไม่ถูกต้อง
  • Date is earlier than minimum limit เลือกวันที่ผ่านไปแล้ว
  • Date is later than maximum limit เลือกเกินวันที่ระบุ
  • Uploading a file fails for any reason อัพโหลดไฟล์ไม่ผ่านไม่ว่าจะเหตุผลอะไรก็ตาม
  • Uploaded file is not allowed for file type ไม่อนุญาติประเภทไฟล์ที่อัพโหลด
  • Uploaded file is too large ไฟล์ใหญ่เกินไป
  • Uploading a file fails for PHP error อัพโหลดไฟล์หลังบ้านไม่ผ่าน
  • Number format that the sender entered is invalid รูปแบบตัวเลขไม่ถูกต้อง
  • Number is smaller than minimum limit ตัวเลขจำนวนน้อยเกินไป
  • Number is larger than maximum limit ตัวเลขจำนวนมากเกินไป
  • Sender doesn’t enter the correct answer to the quiz ตอบปัญหาไม่ถูกต้อง
  • Email address that the sender entered is invalid รูปแบบอีเมลล์ไม่ถูกต้อง
  • URL that the sender entered is invalid รูปแบบ URL ไม่ถูกต้อง
  • Telephone number that the sender entered is invalid รูปแบบเบอร์โทรศัพท์ไม่ถูกต้อง

เราสามารถกำหนดเป็นภาษาที่ต้องการได้เลยนะครับ เพื่อการสื่อสารที่ถูกต้องกับผู้ใช้งานเว็บไซต์ด้วย

 

แท็บ Additional Settings

เป็นการตั้งค่าพิเศษนะครับ สามารถดูเพิ่มเติมได้ที่ Click

 

เมนู  Integration

เป็นเมนูการตั้งค่าส่วนเสริมนะครับ เช่น  reCAPTCHA ถ้าเราอยากจะใช้เพื่อเพิ่มความปลอดภัย เมื่อเราเข้าไปให้เลือก Configure Keys ได้เลย ระบบจะพาไปทำการ Request Auth จาก Google เองครับ สามารถตั้งค่าได้อย่างง่ายมากๆเลยครับ

 

การใช้งานครับ 

หลังจากที่เราตั้งค่า และสร้างฟอร์มสำเร็จแล้วจะพบว่า ฟอร์มแต่หล่ะตัว จะมี Shotcode อยู่จากภาพด้านบน ตัวอย่างเช่น [contact-form-7 id=”xxx” title=”xxx”] ให้เรา Copy ไปวางในส่วนของ Text Editor ได้เลยครับ เท่านี้เราก็จะได้ฟอร์มส่งข้อมูลแล้ว ครับ

 

Alternative Text

Parmarno (I-Makeweb.com)

ผมเป็น Web Developer ที่ยินดีให้คำแนะนำปรึกษาทั้ง Frontend และ Backend รวมถึง Server Network หากว่าผมช่วยให้คำแนะนำจนแก้ปัญหาได้ก็ดี ความรู้ที่มียินดีแบ่งปันให้นะครับ

Plugin Redis Object Cache จับเอา Redis มาทำ Cache

การจับ Redis มาใช้งานเป็นตัว Caching Object Cache โดยผ่าน Plugin Redis Object Cache มาลองดูตัวอย่างการใช้งานกันอย่างง่ายและไวมาก

เรื่องที่ควรจะให้ความสำคัญ ข้อมูลส่วนตัวในโลกออนไลน์

ความสำคัญของข้อมูลส่วนตัวในโลกออนไลน์ การอนุญาติให้ไปสามารถเอาไปใช้งาน ตัวอย่างเอาไปใช้อะไรได้บ้าง และการลบข้อมูลที่อนุญาติ

 
Loading...