Contact Form 7 ติดตั้งและตั้งค่าบน WordPress

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

Contact Form 7 คืออะไร และทำไมต้องใช้

Contact Form 7 คือ Plugin WordPress ที่ช่วยให้คุณสร้างฟอร์มติดต่อบนเว็บไซต์ได้ง่ายโดยไม่ต้องเขียนโค้ด PHP หรือ HTML เองตั้งแต่ต้น Plugin นี้รองรับฟิลด์หลายประเภท เช่น ช่องข้อความ, email, ตัวเลือก, checkbox, radio button, และไฟล์แนบ นอกจากนี้ยังรองรับการต่อเชื่อมกับ reCAPTCHA เพื่อป้องกัน Spam และสามารถกำหนดอีเมลปลายทางได้อย่างยืดหยุ่น

จุดเด่นของ Contact Form 7 เมื่อเทียบกับ Plugin อื่น ได้แก่ ฟรีทั้งหมด ไม่มีค่าสมาชิก, ขนาดเบา ไม่กิน Resource Hosting มาก, รองรับ Multi-step form ผ่าน Extension เสริม, และมี Community และเอกสารประกอบครบถ้วน

ขั้นตอนที่ 1: ติดตั้ง Contact Form 7

การติดตั้งผ่าน WordPress Admin Panel ทำได้ง่ายมาก เพียงไม่กี่คลิก:

1. เข้าสู่ WordPress Admin Panel ที่ yoursite.com/wp-admin
2. ไปที่เมนู Plugins > Add New Plugin
3. พิมพ์ "Contact Form 7" ในช่องค้นหา
4. คลิก Install Now บน Plugin ที่พัฒนาโดย Takayuki Miyoshi
5. รอการติดตั้งเสร็จสิ้น แล้วคลิก Activate

หลังจาก Activate สำเร็จ จะมีเมนู Contact ปรากฏขึ้นในแถบด้านซ้ายของ Admin Panel พร้อมฟอร์มตัวอย่างชื่อ "Contact form 1" ให้ใช้งานได้ทันที

ขั้นตอนที่ 2: สร้างและปรับแต่งฟอร์มติดต่อ

คลิกที่ Contact > Contact Forms จากนั้นคลิก Add New เพื่อสร้างฟอร์มใหม่ หรือคลิก Edit บนฟอร์มที่มีอยู่แล้ว หน้าตั้งค่าฟอร์มจะมีแท็บสำคัญดังนี้:

แท็บ Form (โครงสร้างฟอร์ม)

ในแท็บนี้คุณจะเห็น Tag Generator ที่ช่วยสร้าง Shortcode สำหรับฟิลด์ต่าง ๆ ตัวอย่างโค้ดฟอร์มพื้นฐานที่พร้อมใช้งาน:

<label>ชื่อ-นามสกุล</label>
[text* your-name placeholder "กรอกชื่อ-นามสกุล"]

<label>อีเมล</label>
[email* your-email placeholder "[email protected]"]

<label>หัวข้อ</label>
[text* your-subject placeholder "หัวข้อที่ต้องการติดต่อ"]

<label>ข้อความ</label>
[textarea your-message placeholder "รายละเอียดที่ต้องการสอบถาม"]

[submit "ส่งข้อความ"]

สัญลักษณ์ * หลังชื่อ Tag หมายถึงฟิลด์นั้นเป็น Required (จำเป็นต้องกรอก) หากไม่ใส่ * จะเป็นฟิลด์ Optional

แท็บ Mail (การตั้งค่าอีเมล)

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

• To: อีเมลปลายทาง (ของคุณ) เช่น [email protected]
• From: ใส่ [your-name] <[email protected]>
• Subject: ใส่ [your-subject] เพื่อดึงหัวข้อจากฟอร์ม
• Additional headers: ใส่ Reply-To: [your-email] เพื่อ Reply กลับหาผู้ส่งได้โดยตรง
• Message body: ปรับเนื้อหาอีเมลตามต้องการ

ขั้นตอนที่ 3: ฝังฟอร์มลงในหน้าเว็บ

หลังบันทึกฟอร์มแล้ว ระบบจะสร้าง Shortcode ให้โดยอัตโนมัติ เช่น [contact-form-7 id="123" title="Contact form 1"] นำ Shortcode นี้ไปวางในหน้าที่ต้องการ โดย:

1. ไปที่ Pages > Add New Page (หรือแก้ไขหน้าที่มีอยู่)
2. คลิก + เพื่อเพิ่ม Block ใหม่ แล้วเลือก Shortcode
3. วาง Shortcode ของฟอร์มลงไป
4. คลิก Publish หรือ Update

ขั้นตอนที่ 4: ตั้งค่า reCAPTCHA ป้องกัน Spam

reCAPTCHA คือระบบจาก Google ที่ช่วยแยกแยะว่าผู้ส่งฟอร์มเป็นมนุษย์จริงหรือ Bot ขั้นตอนการตั้งค่า:

1. ไปที่ google.com/recaptcha/admin และล็อกอินด้วย Google Account
2. คลิก + เพื่อสร้าง Site ใหม่
3. เลือก reCAPTCHA v3 (แนะนำ ไม่ต้องกด Checkbox)
4. ใส่โดเมนของเว็บไซต์ เช่น yoursite.com
5. คัดลอก Site Key และ Secret Key ที่ได้รับ
6. กลับไปที่ WordPress Admin เลือก Contact > Integration
7. หัวข้อ reCAPTCHA คลิก Setup Integration Key
8. วาง Site Key และ Secret Key ที่คัดลอกมา แล้วคลิก Save Changes

หลังจากนั้นให้เพิ่ม [recaptcha] ลงในแท็บ Form ของฟอร์มที่ต้องการ

ขั้นตอนที่ 5: แก้ปัญหาอีเมลไม่ส่ง ด้วย SMTP

ปัญหาที่พบบ่อยที่สุดกับ Contact Form 7 คืออีเมลไม่ส่งหรือไปตกที่ Spam สาเหตุหลักคือ WordPress ใช้ฟังก์ชัน wp_mail() ที่อาศัย PHP Mail ของ Server ซึ่ง Hosting ส่วนใหญ่ไม่รองรับหรือถูก Block แนะนำให้ใช้ Plugin WP Mail SMTP ร่วมกันดังนี้:

1. ติดตั้ง Plugin WP Mail SMTP จาก WordPress Plugin Directory
2. ไปที่ WP Mail SMTP > Settings
3. ส่วน From Email ใส่อีเมลที่ต้องการส่ง เช่น [email protected]
4. เลือก Mailer เป็น Other SMTP
5. กรอกข้อมูล SMTP ที่ได้รับจาก Hosting Provider:

SMTP Host: mail.yoursite.com
SMTP Port: 587 (STARTTLS) หรือ 465 (SSL)
Encryption: STARTTLS
Username: [email protected]
Password: [รหัสผ่านอีเมล]

ข้อมูล SMTP สามารถหาได้จาก cPanel > Email Accounts ของ Hosting ที่ใช้อยู่ โดยทั่วไปค่า SMTP Host จะเป็น mail.yourdomain.com

ขั้นตอนที่ 6: ปรับแต่งสไตล์ฟอร์มให้เข้ากับเว็บไซต์

Contact Form 7 ไม่มี Style ตายตัว ฟอร์มจะใช้ CSS จาก Theme ของเว็บไซต์เป็นหลัก หากต้องการปรับแต่งเพิ่มเติม สามารถเพิ่ม CSS ที่ Appearance > Customize > Additional CSS ตัวอย่าง:

/* ปรับสไตล์ Contact Form 7 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 15px;
    margin-bottom: 12px;
    font-family: inherit;
}

.wpcf7-form input[type="submit"] {
    background: #16a34a;
    color: #fff;
    padding: 12px 28px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
}

.wpcf7-form input[type="submit"]:hover {
    background: #15803d;
}

ตรวจสอบว่า Contact Form 7 ทำงานถูกต้อง

หลังตั้งค่าครบแล้ว ให้ทดสอบการทำงานด้วยขั้นตอนต่อไปนี้:

# 1. ทดสอบส่งฟอร์มจากหน้าเว็บจริง กรอกข้อมูลครบและคลิก Submit
#    ควรเห็นข้อความ "ส่งข้อความสำเร็จแล้ว" (ข้อความปรับได้ในแท็บ Messages)

# 2. ตรวจสอบ Inbox อีเมลปลายทางที่ตั้งค่าไว้ใน Mail > To:
#    ควรได้รับภายใน 1-2 นาที หากไม่ได้รับให้ตรวจ Spam/Junk folder

# 3. ตรวจสอบ Log ใน WP Mail SMTP (ถ้าติดตั้ง)
#    ไปที่ WP Mail SMTP > Email Log แล้วดูว่า Status เป็น "Sent" หรือ "Failed"

# 4. ทดสอบ reCAPTCHA โดยดูที่มุมล่างขวาของเพจ
#    ควรเห็น Badge "Protected by reCAPTCHA" แสดงอยู่

# 5. ตรวจสอบ Required Fields โดยส่งฟอร์มโดยไม่กรอกข้อมูล
#    ควรเห็น Error message แจ้งเตือนฟิลด์ที่ขาด

แก้ปัญหาที่พบบ่อย

Error: "Failed to send your message. Please try later."

ข้อความนี้บอกว่าอีเมลถูกส่งแล้วแต่ WordPress ไม่สามารถส่งอีเมลออกได้ สาเหตุหลักคือ PHP Mail ถูก Disable หรือ SMTP ไม่ได้ตั้งค่า วิธีแก้คือติดตั้ง WP Mail SMTP และกรอกข้อมูล SMTP ของ Hosting ให้ครบถ้วน จากนั้นทดสอบด้วยฟีเจอร์ Email Test ใน Plugin

Error: "There was an error trying to send your message. Please try again later."

แตกต่างจาก Error แรกตรงที่นี่คือ reCAPTCHA ตรวจสอบไม่ผ่าน หรือ API Key ไม่ถูกต้อง ให้ตรวจสอบดังนี้:

• ไปที่ Contact > Integration > reCAPTCHA แล้วตรวจสอบ Site Key และ Secret Key ว่าตรงกับที่ได้จาก Google
• ตรวจสอบว่าได้เพิ่มโดเมนของเว็บไซต์ใน reCAPTCHA Admin Console แล้ว
• ถ้าทดสอบบน localhost ต้องเพิ่ม localhost ในรายการโดเมนด้วย

Error: ฟอร์มแสดงผลไม่สมบูรณ์หรือ CSS เพี้ยน

เกิดจาก Theme หรือ Plugin อื่นมี CSS ทับซ้อน ให้เปิด Browser DevTools (F12) แล้วดู Element ของฟอร์ม หากพบว่า Style ถูก Override ให้เพิ่ม CSS ที่มี Specificity สูงกว่าใน Additional CSS:

/* เพิ่ม Specificity ด้วย ID selector */
#page .wpcf7-form input[type="text"] {
    box-sizing: border-box !important;
    width: 100% !important;
}

Error: ได้รับอีเมล Spam จำนวนมาก

หากเปิดใช้งาน reCAPTCHA แล้วยังได้รับ Spam ให้ลองเพิ่มมาตรการเสริม เช่น ติดตั้ง Plugin Akismet Anti-Spam ซึ่งทำงานร่วมกับ Contact Form 7 ได้ดี หรือปรับค่า Score threshold ของ reCAPTCHA v3 ให้เข้มงวดขึ้น

Error: ฟอร์มไม่แสดงปุ่ม Submit หลัง reCAPTCHA

เกิดจาก JavaScript ของ reCAPTCHA โหลดไม่สำเร็จ ตรวจสอบว่าไม่มี Plugin อื่นบล็อก Script จาก Google หรือดูใน Console ว่ามี Error อะไรบ้าง นอกจากนี้ควรตรวจสอบว่า Theme ของคุณมี wp_footer() ใน footer.php เพราะ Plugin ต้องการ hook ตัวนี้ในการโหลด Script

คำถามที่พบบ่อย

Contact Form 7 ใช้ฟรีไหม มีค่าใช้จ่ายซ่อนอยู่ไหม?

Contact Form 7 ฟรี 100% ไม่มีค่าใช้จ่ายใด ๆ ทั้งในตอนติดตั้งและใช้งานระยะยาว Plugin นี้เป็น Open Source ภายใต้ GPL License นักพัฒนาอาจมี Donation แต่ไม่บังคับ ฟีเจอร์ทั้งหมดพร้อมใช้งานได้ฟรีทันทีหลังติดตั้ง

สามารถสร้างฟอร์มหลายอันในเว็บเดียวกันได้ไหม?

ได้เลย Contact Form 7 รองรับการสร้างฟอร์มได้ไม่จำกัดจำนวน แต่ละฟอร์มจะมี Shortcode เฉพาะของตัวเอง เช่น [contact-form-7 id="123"] คุณสามารถสร้างฟอร์มสำหรับ "ติดต่อทั่วไป", "สั่งซื้อสินค้า", "สมัครงาน" แยกกัน และฝังแต่ละฟอร์มในหน้าที่ต้องการได้อิสระ

Contact Form 7 รองรับการแนบไฟล์ได้ไหม?

รองรับผ่าน Tag [file] ในแท็บ Form โดยสามารถกำหนดประเภทไฟล์และขนาดสูงสุดได้ เช่น [file your-file filetypes:pdf|doc|docx limit:5mb] และต้องเปิดใช้งานตัวเลือก File Attachments ในแท็บ Mail ด้วย ทั้งนี้ขนาดสูงสุดที่อัปโหลดได้ขึ้นอยู่กับค่า upload_max_filesize ที่ Hosting กำหนด ซึ่งสามารถปรับได้ผ่าน cPanel