Contact Form 7 ปลั๊กอินสร้างฟอร์มสำหรับ WordPress
4
คะแนน

Contact Form 7 

คือปลั๊กอินสร้างฟอร์มผ่านเว็บไซต์ที่สามารถสร้างเป็น Contact Form หรือจะเป็นฟอร์มอื่นๆ ก็ได้ Contact Form 7 นั้นได้รับการพัฒนามาอย่างยาวนานและต่อเนื่อง เป็นปลั๊กอินที่มีผู้ใช้งานมากที่สุด เน้นการทำงานที่เรียบง่าย เบา เร็ว และยังคงคอนเซ็ปใช้  shordcode tag อยู่เหมือนเดิม แม้ว่าปลั๊กอินอื่นๆ จะพัฒนาไปเป็นแบบ Drag & Drop แล้ว แต่ Contact Form 7 ก็ยังได้รับแรงไม่ตก เพราะความเรียบง่ายและเบาสบายนี่เอง แถมปลั๊กอินฟรีตัวนี้ยังให้ฟิลด์มาเยอะมากๆ ถ้าเป็นตัวอื่นก็อาจจะต้องเสียเงินซื้อ Addons เพิ่ม และ Developer ยังนิยมนำไปพัฒนาต่อกันเยอะอีกต่างหาก

การใช้งาน Contact Form

หลังจากติดตั้งปลั๊กอินแล้ว ให้เราไปที่เมนู Contact > Contact Forms

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

การนำ Contact form ไปใช้ก็เพียงแค่วาง Shortcode ไว้ในหน้าและบริเวณที่เราต้องการให้แสดงฟอร์ม เราก็จะได้ Contact form ง่ายๆ ไว้ใช้งานแล้ว

การสร้างฟอร์มใหม่

คลิกที่เมนู Contact > Add New จากนั้นจะตั้งชื่อฟอร์ม ระบบจะสร้างฟิลด์พื้นฐานให้เราอัตโนมัติ เราสามารถที่จะเก็บตัวที่ใช้ไว้แล้วลบตัวที่ไม่ต้องการออก หรือลบทั้งหมดเริ่มใหม่เลยก็ได้

เราสามารถที่จะออกแบบฟอร์มด้วยการใช้โค้ด html ก็ได้ แต่ถ้าแบบง่ายๆ แบบตัวอย่างที่เขาทำไว้ก็จะใช้แค่แท็ก <label> ตามด้วยข้อความก่อนหน้าฟิลด์ แล้วบรรทัดถัดไปก็เป็นฟิลด์ที่เราต้องการจะใส่ แล้วปิดด้วย </label>

สิ่งที่เห็น และสิ่งที่ได้ก็จะเป็นประมาณรูปด้านล่างนี้

 

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

จากตัวอย่าง เราเลือกฟิลด์ชนิด drop-down menu ก็จะมีการกำหนดรายละเอียดดังรูป

Required field ที่ติ๊กไว้ หมายความว่า ต้องมีการเลือกตัวเลือกหรือต้องกรอกถ้าเป็น text field ไม่เช่นนั้นจะไม่สามารถส่งฟอร์มได้

Name ชื่อของฟิลด์นี้ จะถูกตั้งโดยอัตโนมัติ

Options คือตัวเลือกสำหรับ drop-down ใส่บรรทัดละตัวเลือก

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

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

ลักษณะของฟิลด์ที่ได้จากการตั้งค่าก่อนหน้านี้ก็จเป็นฟิลด์แบบ drop-down ที่มี 3 ตัวเลือกดังรูป

ตัวอย่างฟิลด์อื่นๆ

โดยเราต้องอย่าลืมว่า ด้านล่างสุดของฟอร์ม เราจะต้องใส่ฟิลด์ submit ทุกครั้ง เพื่อจะเป็นปุ่มส่งฟอร์มนั่นเอง

การแนบ File

หมายถึงการเพิ่มฟิลด์ File ให้ผู้ส่งสามารถส่งไฟล์จากฟอร์มของเราได้ เช่น ภาพประกอบ ทำได้ด้วยการคลิกแท็ก file

จากนั้นกำหนดค่าของฟิลด์ File size limit สำหรับจำกัดขนาดของไฟล์ที่สามารถแนบไปได้ ใส่ได้ทั้ง mb และ kb ส่วน Acceptable file type จำกัดนามสกุลไฟล์ที่สามารถอัพโหลดได้ เช่น jpg,png สำหรับไฟล์รูปภาพ หรือ pdf สำหรับเอกสาร เป็นต้น

เสร็จแล้วก็คลิกปุ่ม Insert Tag

ระบบก็จะสร้างแท็กโค้ดตามที่เรากำหนด เราสามารถนำไปวางไว้ตรงไหนก็ได้แล้วแต่การดีไซน์ฟอร์มของเรา

ฟอร์มที่ได้ก็จะมีลักษณะแบบนี้

เมลที่ได้รับเมื่อมีการแน

การตั้งค่าอีเมล

การตั้งค่าอีเมลคือการตั้งค่าเกี่ยวกับเมลที่จะส่งจาก WordPress ลักษณะของเมลที่จะได้รับและการตอบกลับอีเมล

คลิกที่แท็บ Mail แล้วกำหนดรายละเอียดต่างๆ ดังเช่นตัวอย่างด้านล่าง ซึ่งเหล่านี้จะเป็นข้อมูลสำหรับการรับส่งและตอบกลับเมล

ที่ด้านบนเราจะเห็นว่ามีแท็ก [your-name][your-email][your-subject][your-message] ซึ่งแท็กเหล่านี้คือแท็กที่เราสร้างจากขั้นตอนการเพิ่มฟิลด์นั่นเอง 

To กำหนดว่าต้องการส่งเมลที่ได้จากการ submit ฟอร์มนี้ไปที่อีเมลไหน

From ให้ระบุว่าส่งไปจากไหน คือจากเว็บของเรา เราเลยใส่เป็น WPThaiuser แล้วก็ตามด้วยอีเมล

Subject หัวข้อ อันนี้เราก็จะใช้แท็ก [your-subject] เพื่อดึงข้อมูลที่ผู้ส่งเขากรอกในช่อง Subject มา เนื่องจากเรากำหนดให้ฟิลด์นั้นจำเป็นต้องกรอก ถ้าหากเราไม่ได้กำหนดเป็น required ไว้ เราจะต้องใส่ข้อความบางอย่างก่อน เช่น Subject : [your-subject] หรือใส่เครื่องหมาย “” ครอบเฉยๆ ก็ได้ “[your-subject]” ที่เป็นเช่นนี้เพราะอีเมลทุกฉบับตั้งมีหัวเรื่อง และหากเราไม่กำหนดเป็น requried หัวเรื่องก็จะว่าง ซึ่งมันจะขัดกับความเป็นจริง ดังนั้นการบังคับกรอกก็อาจจะดีกว่าสำหรับหัวเรื่องหรือ Subject หรือเรากำหนดเป็นชื่อเรื่องตายตัวสำหรับแบบฟอร์มนี้เลยก็ได้

Additional Header คือ การตอบกลับ เราสามารถใส่ได้ทั้ง Reply-To: Cc: Bcc: ก็ได้ (คนละบรรทัด) ซึ่งก็จะตามด้วยอีเมลที่เราต้องการให้ส่งไปถึง อย่างในตัวอย่างเราใช้แค่ Reply-To: [your-email] คือเมื่อเราคลิกตอบกลับ (เราเปิดผู้รับและอ่านอีเมล) ระบบก็จะส่งตอบกลับไปยัง [your-email] ซึ่งก็คือแท็กที่เราไว้ให้ผู้ส่งเขากรอกอีเมลของเขานั่นเอง อย่าเข้าใจผิดว่าอันนี้คืออีเมลเรานะคะ แต่เป็นแท็กของฟิลด์อีเมลที่เราแทรกไว้ในฟอร์มค่ะ

Message Body เป็นการกำหนดลักษณะของอีเมลที่เราจะได้รับ เราอยากจะเขียนอะไรเติมลงไป อยากจะใช้แท็กที่มีอยู่มาใช้ก็ได้

ตัวอย่าง การสร้างฟอร์ม ตั้งค่าเมล และฟอร์มที่แสดงบนหน้าเว็บ

เมลที่จะได้รับจากคนที่กดส่งเมลจากข้อความด้านบนก็จะเป็นดังในรูปด้านล่าง

แต่หากเรามีการให้ผู้ส่งสามารถแนบไฟล์ไปกับฟอร์ด้วย ก็ต้องนำแท็กโค้ดของ file มาใส่ในช่อง File Attachment ด้วย

เวลารับเมลที่มีการแทรกภาพก็จะเป็นแบบนี้

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

การป้องกันสแปม

reCAPTCHA

Contact Form 7 นั้นปกติทำงานร่วมกับปลั๊กอิน Akismet ที่เป็นปลั๊กอินกรองสแปมอยู่แล้ว แต่ถ้าหากเราต้องการใช้ Googe reCAPTCHA ก็สามารถทำได้ง่ยๆ เช่นกัน

ไปที่เมนู Contact > Integration แล้วคลิกที่ลิงค์ เพื่อสร้าง sitekey, secret key จาก Google ก่อน

คลิกที่ปุ่ม Get reCAPTCHA ในหน้าของ Google ที่เปิดขึ้นมา แล้วกรอกรายละเอียดสำหรับเว็บของเราที่ต้องการ Register reCAPTCHA

ช่อง Label กรอกชื่อ อะไรก็ได้ เราใส่เป็น Contact แล้วเลือกประเภทของ reCAPTCHA V2 (จะเลือกแบบอื่นก็ได้) และกรอกโดเมนที่ต้องการใช้งานด้วย เสร็จแล้วก็อย่าลืมติ๊ก Accept the reCAPTCHA Terms of Service. นะคะ จากนั้นก็คลิกปุ่ม Register ได้เลย

เราจะได้รหัสมา 2 ชุด คือ Site key และ  Secret key สำหรับนำกลับมากรอกที่เว็บของเรา

ที่เว็บของเราให้คลิกที่ปุ่ม  Configure Keys

เสร็จแล้วนำรหัส Site key และ Secret key ที่เราได้มาก่อนหน้านี้มากรอกในช่องของมัน แล้วคลิก Save

ไปที่ฟอร์มที่เราใช้งาน ทำการแก้ไขฟอร์มด้วยการเพิ่มฟิลด์ recaptcha

ทำการตั้งค่า ในที่นี้เราใช้ค่าที่เขากำหนดไว้แล้ว คลิก Insert Tag และนำไปไว้บริเวณที่เราต้องการ (ส่วนใหญ่ก็ก่อนปุ่ม Submit) ก็เป็นอันเสร็จเรียบร้อย

ฟอร์มของเราก็จะมี reCAPTCHA แบบนี้

Comment Blacklist

นอกจากการใช้ reCaptcha จาก Google หรือปลั๊กอิน Akismet แล้ว Contact Form 7 ยังสามารถกรองสแปมได้ง่ายๆ โดยไม่ต้องใช้ปลั๊กอินเสริม โดยแค่กำหนดคำที่ต้องการให้เป็น Blacklist เท่านั้น ระบบก็จะกรองคำในเนื้อหาเหล่านั้นว่าเป็นสแปมโดยอัตโนมัติ โดยเราสามารถไปตั้งค่าใส่คำที่ต้องการให้เป็น Blacklist ได้ที่เมนู Settings > Discussion > Comment Blacklist

สำหรับการที่จะส่งข้อมูลไปยังอีเมลได้สำเร็จนั้น บางทีอาจจะต้องใช้ตัวช่วยอย่าง Postman SMTP เพื่อช่วยให้เราสามารถส่งฟอร์มผ่าน G00gle ด้วยการใช้บัญชี Gmail นอกจากจะทำให้ง่ายแล้ว ยังช่วยให้อีเมลไม่ค่อยลงถังขยะอีกด้วย

ข้อมูลเพิ่มเติม : https://contactform7.com/docs/

Contact Form 7
บทสรุป
เป็นปลั๊กอินที่เรียบง่าย เบาสบาย มีฟิลด์ค่อนข้างครบในตัวฟรี มีปลั๊กอินเสริมฟรีเพราะเป็นปลั๊กอินที่นักพัฒนานำไปต่อยอดมากที่สุด ถ้าไม่นับเรื่องที่ไม่มี Builder ในตัว ต้องก๊อปปีแท็กโค้ดเอง ก็นับว่าเป็นปลั๊กอินสร้างฟอร์มที่ครบถ้วนมากๆ ค่ะ
Customizability
Feature Availability
Easy to use
ข้อดี
ไม่หนักเว็บ
มีปลั๊กอินเสริมฟรีเยอะ
มี Field ให้ใช้เยอะและฟรี
ข้อเสีย
ต้องใช้เวลาทำความเข้าใจกับการใช้งานพอสมควร
ต้องใช้ Tag เป็นโค้ดซึ่งไม่ค่อยสะดวกเท่าไหร่
4
คะแนน