ปลั๊กอินแบบฟอร์มติดต่อ WordPress: Contact Form 7 (เพิ่มแบบฟอร์มออนไลน์)

ไม่ว่าคุณจะเป็นบล็อกส่วนตัว เว็บไซต์บริษัท หรือแพลตฟอร์มอีคอมเมิร์ซ ต่างก็ต้องการ “แบบฟอร์มติดต่อ” เพื่อให้ผู้เข้าชมสามารถส่งข้อความถึงคุณได้อย่างสะดวก (เช่น สอบถามปัญหา ส่งความต้องการ เสนอความคิดเห็น)แบบฟอร์มติดต่อ 7 เป็นปลั๊กอินแบบฟอร์มที่เก่าแก่ที่สุดของ WordPress (มีการติดตั้งมากกว่า 5 ล้านครั้ง) ให้บริการฟรี ยืดหยุ่น และมีประสิทธิภาพสูง สามารถช่วยคุณสร้างแบบฟอร์มได้หลากหลาย (แบบฟอร์มติดต่อ แบบฟอร์มลงทะเบียน แบบฟอร์มข้อเสนอแนะ ฯลฯ) ผู้เริ่มต้นเพียงแค่ตั้งค่าอย่างง่ายก็สามารถใช้งานได้

หนึ่ง. ทำไมต้องมีแบบฟอร์มติดต่อ? ใส่อีเมล/เบอร์โทรศัพท์โดยตรงไม่ได้หรือ?

การใส่เพียงอีเมลหรือเบอร์โทรศัพท์อาจดูง่าย แต่มีข้อเสียชัดเจน 3 ประการ:

• ผู้เข้าชมเว็บรู้สึกยุ่งยาก: ต้องคัดลอกอีเมล เปิดโปรแกรมอีเมลเพื่อส่ง หลายคนอาจล้มเลิกกลางคัน;
• ถูกสแปมได้ง่าย：อีเมลที่เปิดเผยต่อสาธารณะจะถูกเก็บรวบรวมโดยบอท ทำให้ได้รับอีเมลขยะจำนวนมาก；
• ข้อมูลไม่เป็นระเบียบ：ผู้เยี่ยมชมอาจละเว้นข้อมูลสำคัญ (เช่น เมื่อสอบถามเกี่ยวกับผลิตภัณฑ์ ไม่ได้ระบุความต้องการอย่างชัดเจน) ทำให้ประสิทธิภาพในการตอบกลับต่ำ。

และแบบฟอร์มติดต่อสามารถแก้ไขปัญหาเหล่านี้ได้:

• ผู้เยี่ยมชมกรอกและส่งข้อมูลภายในเว็บไซต์โดยตรง ทำเสร็จในขั้นตอนเดียว
• ที่อยู่อีเมลถูกซ่อนไว้ในแบ็กเอนด์ หลีกเลี่ยงการถูกสแปมจดหมาย
• สามารถกำหนดฟิลด์ที่ต้องการกรอกได้เอง (เช่น ชื่อ เบอร์โทรศัพท์ ประเภทความต้องการ) เพื่อให้มั่นใจว่าข้อมูลครบถ้วน

สอง. การติดตั้ง Contact Form 7 และการสร้างฟอร์มแรก

ขั้นตอนที่ 1: ติดตั้งและเปิดใช้งานปลั๊กอิน

1. ในแถบหลังบ้าน【ปลั๊กอิน】→【ติดตั้งปลั๊กอิน】，ค้นหา “Contact Form 7”；
2. คลิก【ติดตั้งตอนนี้】，หลังจากเสร็จแล้วคลิก【เปิดใช้งาน】。
3. หลังจากเปิดใช้งาน，ตัวเลือก【ติดต่อ】จะปรากฏในเมนูด้านซ้าย

ขั้นตอนที่ 2: สร้างฟอร์มติดต่อเริ่มต้น (แนะนำสำหรับผู้เริ่มต้น，ใช้งานได้ทันที)

Contact Form 7 มาพร้อมกับเทมเพลตฟอร์มติดต่อที่กำหนดไว้ล่วงหน้า ซึ่งประกอบด้วยฟิลด์ที่ใช้กันทั่วไป (ชื่อ, อีเมล, หัวข้อ, เนื้อหาข้อความ) ผู้เริ่มต้นสามารถใช้งานได้ทันที:

1. คลิกที่ [ติดต่อ] → [เพิ่มใหม่] ทางด้านซ้าย เพื่อเข้าสู่หน้าตกแต่งฟอร์ม
2. ปลั๊กอินจะสร้างชื่อฟอร์มโดยอัตโนมัติ (เช่น “ฟอร์มติดต่อ 1”) ซึ่งสามารถแก้ไขเป็น “ฟอร์มติดต่อเว็บไซต์” (เพื่อให้จดจำได้ง่าย)
3. พื้นที่ “ฟอร์ม” ด้านล่างคือโค้ดของฟอร์ม (ไม่จำเป็นต้องเข้าใจโค้ด ให้คงค่าเริ่มต้นไว้) โดยค่าเริ่มต้นประกอบด้วย 4 ฟิลด์:
   • ชื่อ (กล่องข้อความ);
   • อีเมล (กล่องอีเมลที่มีการตรวจสอบ, เพื่อให้แน่ใจว่ารูปแบบถูกต้อง);
   • หัวข้อ (กล่องข้อความ, เพื่อให้คุณเข้าใจหัวข้อของข้อความได้อย่างรวดเร็ว);
   • ข้อความ (กล่องข้อความหลายบรรทัด, กรอกรายละเอียดเนื้อหา).

ขั้นตอนที่ 3: ตั้งค่า “ข้อเสนอแนะ” และ “การรับอีเมล” หลังจากส่งแบบฟอร์ม”

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

1. ตั้งค่าที่อยู่ “อีเมล” สำหรับรับ (สำคัญ! ต้องแน่ใจว่าได้รับข้อความ)

• ในหน้าแก้ไขแบบฟอร์ม ให้เลื่อนลงไปที่ส่วน “อีเมล”;
• ค้นหา “กล่องป้อนข้อมูลผู้รับ” และกรอกอีเมลที่คุณใช้บ่อย (เช่น contact@你的域名.com）；
• ปล่อยตัวเลือกอื่น ๆ ไว้ตามค่าเริ่มต้น (“ผู้ส่ง” “หัวข้อ” ฯลฯ จะเติมเนื้อหาแบบฟอร์มโดยอัตโนมัติ)

2. ตั้งค่า “ข้อความ” แจ้งเตือน (บอกผู้เยี่ยมชมเกี่ยวกับผลการส่ง)

• เลื่อนลงไปที่พื้นที่ “ข้อความ” และปรับแต่งข้อความแจ้งเตือนได้:
  • “ส่งข้อความสำเร็จ”: เช่น “ขอบคุณสำหรับข้อความของคุณ เราจะตอบกลับโดยเร็วที่สุด!”
  • “ข้อความแสดงข้อผิดพลาดในการตรวจสอบ”: เช่น “โปรดตรวจสอบว่าข้อมูลที่กรอกถูกต้องหรือไม่ (เช่น รูปแบบอีเมล)”

ขั้นตอนที่ 4: บันทึกแบบฟอร์มและรับ “รหัสสั้น”

1. คลิก【บันทึก】ที่มุมขวาบนของหน้า การสร้างแบบฟอร์มเสร็จสิ้น;
2. หลังจากบันทึกแล้ว ด้านบนของหน้าจะแสดง “รหัสสั้น” (เช่น [contact-form-7 id="123" title="网站联系表单"]) คัดลอกรหัสนี้ (จะใช้ในภายหลัง)

สาม. เพิ่มฟอร์มลงในหน้า “ติดต่อเรา”

หลังจากสร้างฟอร์มเสร็จแล้ว ต้องนำไปวางในหน้า “ติดต่อเรา” ของเว็บไซต์ (หรือหน้าอื่นที่ต้องการ) เพื่อให้ผู้เข้าชมสามารถเห็นได้:

1. เข้าไปที่ [หน้า] → [เพิ่มใหม่] (หรือแก้ไขหน้า “ติดต่อเรา” ที่มีอยู่)
2. ในตัวแก้ไข ให้เลื่อนเคอร์เซอร์ไปยังตำแหน่งที่ต้องการแสดงฟอร์ม
3. วางรหัสสั้นที่คัดลอกมา (เช่น [contact-form-7 id="123" title="网站联系表单"]）；
4. คลิก [เผยแพร่] หรือ [อัปเดต] แล้วไปที่หน้าเพื่อดูฟอร์ม

สี่. แบบฟอร์มที่กำหนดเอง: เพิ่ม/ลบฟิลด์ (ปรับตามความต้องการ)

หากแบบฟอร์มเริ่มต้นไม่ตรงกับความต้องการ (เช่น ต้องการเพิ่มฟิลด์ “เบอร์โทรศัพท์” “ชื่อบริษัท”) สามารถแก้ไขแบบกำหนดเองได้:

ตัวอย่าง: เพิ่มฟิลด์ “เบอร์โทรศัพท์” ในแบบฟอร์ม

1. เข้าไปที่ [ติดต่อ] ค้นหาแบบฟอร์มที่คุณสร้างขึ้น คลิก [แก้ไข];
2. ในพื้นที่แก้ไข “แบบฟอร์ม” ให้ค้นหาด้านล่างช่อง “อีเมล” แล้วคลิกที่แถบเครื่องมือ 【แทรกแท็ก】→【ข้อความ】
3. ในหน้าต่างที่ปรากฏขึ้น:
   • “ชื่อ” ให้กรอก “tel” (ตัวระบุภายใน ภาษาอังกฤษตัวพิมพ์เล็ก)
   • “แท็ก” ให้กรอก “โทรศัพท์” (ข้อความที่แสดงให้ผู้เยี่ยมชมดู)
   • เลือก “ช่องที่ต้องกรอก” (เพื่อให้แน่ใจว่าผู้เยี่ยมชมต้องกรอกข้อมูล)
   • คลิก【แทรกแท็ก】จะสร้างโค้ดหนึ่งบรรทัดโดยอัตโนมัติ (เช่น [text* tel placeholder "请输入您的电话"]）；
4. คลิก【บันทึก】หลังจากอัปเดตหน้าเว็บ ฟอร์มจะมีช่อง “โทรศัพท์” เพิ่มขึ้น

ประเภทช่องข้อมูลที่ใช้บ่อย (เลือกตามความต้องการ)

• ช่องข้อความเหมาะสำหรับกรอกเนื้อหาสั้น ๆ เช่น ชื่อ เบอร์โทรศัพท์ ชื่อบริษัท เป็นต้น
• ช่องอีเมลออกแบบมาเฉพาะสำหรับกรอกอีเมล จะตรวจสอบรูปแบบโดยอัตโนมัติ
• พื้นที่ข้อความ: เหมาะสำหรับกรอกเนื้อหายาว (เช่น ข้อความแสดงความคิดเห็น, คำอธิบายความต้องการ);
• เมนูแบบเลื่อนลง: เหมาะสำหรับให้ผู้เยี่ยมชมเลือกตัวเลือก (เช่น “ประเภทการให้คำปรึกษา: การให้คำปรึกษาผลิตภัณฑ์ / ปัญหาหลังการขาย / การเจรจาความร่วมมือ”);
• ช่องทำเครื่องหมายเหมาะสำหรับการเลือกหลายตัวเลือก (เช่น “บริการที่สนใจ: การสร้างเว็บไซต์ / การเพิ่มประสิทธิภาพ SEO / การออกแบบแบรนด์”)

ห้า. ปัญหาที่พบบ่อยสำหรับมือใหม่

1. หลังจากส่งแบบฟอร์มแล้วไม่ได้รับอีเมล?นี่เป็นปัญหาที่พบบ่อยที่สุด วิธีแก้ไข:
   • ตรวจสอบที่อยู่อีเมล “ผู้รับ” ในการตั้งค่า “อีเมล์” ว่าถูกต้องหรือไม่ (อย่าใส่ผิดนะ!)
   • ตรวจสอบโฟลเดอร์ “อีเมลขยะ” ของกล่องจดหมาย (อีเมลจากฟอร์มอาจถูกระบุผิดว่าเป็นสแปม)
   • หากยังไม่ได้รับ ให้ติดตั้งปลั๊กอิน “WP Mail SMTP” (เพื่อซ่อมแซมฟังก์ชันการส่งอีเมลของ WordPress สำหรับมือใหม่สามารถตั้งค่าตามคำแนะนำของปลั๊กอินได้)
2. จะแก้ไขสไตล์ของฟอร์มได้อย่างไร (เช่น ฟอนต์ สี ความกว้าง)?Contact Form 7 ไม่รองรับการเปลี่ยนสไตล์แบบเห็นภาพโดยตรง ต้องใช้โค้ด CSS ง่ายๆ:
   • วิธีที่ 1: ในตั้งค่าธีม หา “CSS กำหนดเอง” (มักอยู่ที่ 【รูปลักษณ์】→【กำหนดเอง】→【CSS เพิ่มเติม】); วิธีที่ 2: ตัวอย่าง: ทำให้ช่องป้อนข้อมูลกว้าง 80% เพิ่มโค้ด:
   .wpcf7 input, .wpcf7 textarea { width: 80%; padding: 10px; margin-bottom: 15px; }
3. (ถ้าเขียน CSS ไม่เป็น ให้ค้นหา “โค้ดสไตล์ Contact Form 7” แล้วคัดลอกโค้ดที่มีอยู่มาดัดแปลงได้)
4. หลังจากส่งแบบฟอร์มแล้ว สามารถบันทึกลงในระบบหลังบ้านอัตโนมัติได้ไหม?รุ่นฟรีไม่รองรับ ข้อความที่ส่งจะถูกส่งผ่านอีเมลเท่านั้น หากต้องการบันทึกลงในระบบหลังบ้าน (เพื่อป้องกันการสูญหายของอีเมล) สามารถติดตั้งปลั๊กอิน “Flamingo” (ปลั๊กอินที่พัฒนาขึ้นโดยผู้พัฒนา Contact Form 7 โดยเฉพาะสำหรับการบันทึกข้อมูลแบบฟอร์ม)
5. จะป้องกันไม่ให้บอทยื่นข้อความสแปมได้อย่างไร?เปิดใช้งานฟังก์ชัน “ต่อต้านสแปม”:
   • แก้ไขแบบฟอร์ม เพิ่มโค้ดหนึ่งบรรทัดในส่วน “แบบฟอร์ม” [recaptcha](Google reCAPTCHA);
   • เข้าสู่ [ติดต่อ] → [การผสานรวม] และเชื่อมต่อ Google reCAPTCHA ตามคำแนะนำ (ต้องลงทะเบียนเพื่อรับคีย์ API ฟรี และทำตามขั้นตอนในวิซาร์ด)

สรุป: ฟอร์มติดต่อคือ “ระยะสุดท้ายของการแปลง”

สำหรับผู้เยี่ยมชม ฟอร์มติดต่อคือ “วิธีที่เร็วที่สุดในการแสดงความต้องการ”; สำหรับผู้ดำเนินการเว็บไซต์ มันคือ “ช่องทางสำคัญในการรับลูกค้าที่มีศักยภาพ”

Contact Form 7 แม้จะต้องเขียน shortcode และปรับเปลี่ยนฟิลด์ด้วยตนเอง แต่ฟรี ยืดหยุ่น และเสถียร หลังจากเรียนรู้การใช้งานพื้นฐานแล้ว สามารถตอบสนองความต้องการฟอร์มต่างๆ ตั้งแต่แบบง่ายไปจนถึงซับซ้อน จำไว้ว่า: อย่าทำให้ฟอร์มซับซ้อนเกินไป (ยิ่งมีฟิลด์มาก ผู้เข้าชมยิ่งมีแนวโน้มที่จะละทิ้ง) รักษาข้อมูลหลัก (ชื่อ, ข้อมูลติดต่อ, ความต้องการ) ก็พอ เพื่อลดอุปสรรคในการสื่อสารให้เหลือน้อยที่สุด