คู่มือ Contact Form 7 สร้างฟอร์มติดต่อบน WordPress 2026

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

Contact Form 7 คืออะไร และทำไมถึงนิยม

Contact Form 7 (CF7) เป็น Plugin สร้างฟอร์มสำหรับ WordPress ที่พัฒนาโดย Takayuki Miyoshi ตั้งแต่ปี 2007 ด้วยความที่เป็น Open Source และฟรีโดยสมบูรณ์ จึงกลายเป็นตัวเลือกแรกสำหรับเจ้าของเว็บไซต์ทั่วโลก จุดเด่นสำคัญของ CF7 คือการใช้ Shortcode ในการสร้างฟอร์ม ทำให้แทรกฟอร์มลงในหน้าไหนก็ได้ด้วยโค้ดสั้นๆ เพียงบรรทัดเดียว

ความยืดหยุ่นของ CF7 ทำให้นักพัฒนาเว็บสามารถปรับแต่งและขยายความสามารถได้ไม่มีสิ้นสุด ผ่าน Hooks และ Filters ของ WordPress นอกจากนี้ยังมี Add-on เสริมจากบุคคลที่สาม เช่น CF7 Honeypot (ป้องกัน Spam), Conditional Fields CF7 (แสดงฟิลด์ตามเงื่อนไข), CF7 to Zapier (เชื่อมต่อบริการอื่น) และอีกมากมาย

CF7 รองรับ Multi-step Form ผ่าน Add-on, Payment Form ผ่านการเชื่อมต่อ PayPal และ Stripe, File Upload ในตัว, reCAPTCHA v3 ป้องกัน Spam Bot รวมถึง AJAX Submission ที่ทำให้ฟอร์มส่งได้โดยไม่ต้องโหลดหน้าใหม่ ทำให้ประสบการณ์ผู้ใช้ดีขึ้นมาก

วิธีติดตั้ง Contact Form 7

การติดตั้ง CF7 ทำได้สองวิธีหลัก วิธีแรกคือผ่าน WordPress Dashboard โดยตรง ซึ่งเป็นวิธีที่ง่ายและแนะนำสำหรับผู้ใช้ทั่วไป

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

วิธีที่สองคือดาวน์โหลดไฟล์ ZIP จาก WordPress.org Repository แล้วอัพโหลดผ่าน Plugins > Add New Plugin > Upload Plugin ซึ่งเหมาะสำหรับกรณีที่ Hosting ไม่อนุญาตให้ติดตั้ง Plugin โดยตรงจาก Dashboard

การสร้างฟอร์มใหม่และ Form Tags

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

หัวใจของ CF7 คือ "Form Tags" ซึ่งเป็นโค้ดพิเศษที่สร้าง HTML Input ต่างๆ โดยอัตโนมัติ Form Tags หลักๆ ที่ควรรู้จัก ได้แก่:

• [text your-name] — ช่องกรอกข้อความธรรมดา เช่น ชื่อผู้ส่ง
• [email your-email] — ช่องกรอกอีเมล มีการตรวจสอบรูปแบบอัตโนมัติ
• [tel your-phone] — ช่องกรอกเบอร์โทรศัพท์
• [textarea your-message] — กล่องข้อความหลายบรรทัด
• [select your-subject] — dropdown เลือกตัวเลือก
• [checkbox your-checkbox] — checkbox สำหรับเลือกหลายตัวเลือก
• [radio your-radio] — radio button สำหรับเลือกตัวเลือกเดียว
• [file your-file] — อัพโหลดไฟล์แนบ
• [date your-date] — เลือกวันที่
• [submit "ส่งข้อความ"] — ปุ่ม Submit
• [recaptcha] — Google reCAPTCHA (ต้องตั้งค่าก่อน)

ตัวอย่างโค้ดฟอร์มติดต่อพื้นฐาน

<label> ชื่อของคุณ (จำเป็น)
    [text* your-name] </label>

<label> อีเมลของคุณ (จำเป็น)
    [email* your-email] </label>

<label> หัวข้อ
    [text your-subject] </label>

<label> ข้อความ (จำเป็น)
    [textarea* your-message] </label>

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

สังเกตว่าเครื่องหมาย * หลังชื่อ Tag หมายความว่าฟิลด์นั้น "จำเป็นต้องกรอก" (Required) ถ้าผู้ใช้ปล่อยว่างจะแสดง Error Message อัตโนมัติ

การตั้งค่า Mail Tab — ส่งอีเมลแจ้งเตือน

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

ที่หน้าแก้ไขฟอร์ม ให้คลิกแท็บ Mail จะพบฟิลด์ต่างๆ ดังนี้:

• To: อีเมลผู้รับ เช่น [email protected] สามารถใส่หลายอีเมลโดยคั่นด้วยจุลภาค
• From: อีเมลผู้ส่ง ควรใช้อีเมลจาก Domain เดียวกับเว็บ เช่น [email protected]
• Subject: หัวข้ออีเมล สามารถใช้ Mail Tags ได้ เช่น [your-subject]
• Additional Headers: ส่วนหัวเพิ่มเติม เช่น Reply-To: [your-email] เพื่อให้ตอบกลับไปหาคนที่ส่งฟอร์มได้โดยตรง
• Message Body: เนื้อหาอีเมล ใช้ Mail Tags เช่น [your-name], [your-email], [your-message] เพื่อแทรกข้อมูลที่ผู้ใช้กรอก

ตัวอย่าง Message Body ที่ดี

จาก: [your-name] <[your-email]>
หัวข้อ: [your-subject]

ข้อความ:
[your-message]

---
ส่งจากฟอร์มติดต่อที่ https://yourwebsite.com/contact/
IP Address: [_remote_ip]
วันที่: [_date] เวลา [_time]

Mail 2 — อีเมลยืนยันถึงผู้ส่งฟอร์ม

CF7 มีตัวเลือก Mail 2 ที่ช่วยส่งอีเมลยืนยันอัตโนมัติไปยังคนที่กรอกฟอร์ม เช่น "ขอบคุณที่ติดต่อเรา เราจะตอบกลับภายใน 24 ชั่วโมง" เพื่อเปิดใช้งาน ให้ทำเครื่องหมายที่ช่อง Use Mail 2 แล้วตั้งค่าในลักษณะเดียวกับ Mail แรก แต่เปลี่ยน To เป็น [your-email] (อีเมลของผู้กรอกฟอร์ม)

การเพิ่ม reCAPTCHA v3 ป้องกัน Spam

reCAPTCHA v3 ช่วยกรอง Spam Bot โดยทำงานเบื้องหลังโดยไม่รบกวนผู้ใช้ ต่างจาก reCAPTCHA v2 ที่ต้องคลิก Checkbox "ฉันไม่ใช่หุ่นยนต์"

ขั้นตอนการตั้งค่า:

1. ไปที่ Google reCAPTCHA Admin Console (google.com/recaptcha/admin)
2. สร้าง Site ใหม่ เลือกประเภท reCAPTCHA v3
3. เพิ่ม Domain ของเว็บไซต์คุณ แล้วกด Submit
4. คัดลอก Site Key และ Secret Key
5. กลับมาที่ WordPress ไปที่ Contact > Integration
6. ใส่ Site Key และ Secret Key แล้วกด Save Changes
7. ในฟอร์ม ให้เพิ่ม [recaptcha] ก่อนปุ่ม Submit

การตั้งค่า SMTP ให้อีเมลถึงแน่นอน

ปัญหาที่พบบ่อยที่สุดของ CF7 คือ "อีเมลไม่ถึง" สาเหตุเพราะ WordPress ใช้ PHP mail() function ซึ่ง Hosting หลายรายบล็อกหรือ ISP กรองออกเป็น Spam โดยอัตโนมัติ

การแก้ไขที่ดีที่สุดคือใช้ SMTP (Simple Mail Transfer Protocol) ผ่าน Plugin เสริม ที่นิยมใช้คู่กับ CF7 ได้แก่:

• WP Mail SMTP — ยอดนิยมที่สุด รองรับ Gmail, Outlook, SendGrid, Mailgun, Amazon SES และ SMTP ทั่วไป
• FluentSMTP — ฟรีและครบฟีเจอร์ รองรับ Provider หลายราย มี Log การส่งอีเมลในตัว
• Easy WP SMTP — เรียบง่าย ติดตั้งง่าย เหมาะสำหรับผู้เริ่มต้น

วิธีตั้งค่า WP Mail SMTP กับ Gmail

1. ติดตั้งและ Activate Plugin WP Mail SMTP
2. ไปที่ WP Mail SMTP > Settings
3. ใส่ From Email และ From Name
4. เลือก Mailer เป็น Google / Gmail
5. สร้าง Google App Password สำหรับบัญชี Gmail ที่จะใช้ส่ง
6. ใส่ Client ID และ Client Secret จาก Google Cloud Console
7. กด Save แล้วทำ OAuth Authorization
8. ทดสอบส่งอีเมลผ่าน WP Mail SMTP > Email Test

การ Validate และ Custom Error Messages

CF7 มีระบบ Validation ในตัวที่ตรวจสอบข้อมูลก่อนส่ง โดยสามารถปรับแต่ง Error Message ได้ที่แท็บ Messages ในหน้าแก้ไขฟอร์ม ข้อความต่างๆ ที่ปรับได้ ได้แก่:

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

การปรับแต่ง Style ของฟอร์ม

CF7 ใช้ CSS ของ Theme ที่ใช้งานอยู่เป็นหลัก แต่คุณสามารถปรับแต่งเพิ่มเติมได้ผ่าน Custom CSS โดยเพิ่มใน Appearance > Customize > Additional CSS หรือในไฟล์ style.css ของ Child Theme

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

.wpcf7 input[type="submit"] {
    background: #059669;
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 5px;
    font-size: 15px;
    cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
    background: #047857;
}

การใช้ Conditional Fields ด้วย Add-on

บางครั้งเราต้องการให้ฟิลด์บางตัวแสดงหรือซ่อนตามการเลือกของผู้ใช้ เช่น ถ้าเลือก "ต้องการใบเสนอราคา" จะแสดงฟิลด์ "ประเภทสินค้า" เพิ่มขึ้นมา สิ่งนี้ทำได้ผ่าน Plugin เสริม เช่น Conditional Fields for Contact Form 7

หลังติดตั้ง Add-on จะมีแท็บ Conditions เพิ่มขึ้นในหน้าแก้ไขฟอร์ม ให้ตั้งเงื่อนไขได้ว่าเมื่อ Field A มีค่าเป็น X ให้แสดง Field B เป็นต้น

การแทรกฟอร์มในหน้าเว็บ

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

• Gutenberg Block: ค้นหา Block ชื่อ "Shortcode" แล้ววาง Shortcode ลงไป
• Page Builder: Elementor, Divi, Beaver Builder มี Widget/Module สำหรับ CF7 โดยเฉพาะ
• Classic Editor: วาง Shortcode ในเนื้อหาได้โดยตรง
• Widget Area: เพิ่ม Shortcode Widget แล้ววาง Shortcode ในแถบด้านข้าง
• PHP Code: ใช้ <?php echo do_shortcode('[contact-form-7 id="123"]'); ?> ใน Template File

การตั้งค่า File Upload

CF7 รองรับการอัพโหลดไฟล์แนบในฟอร์มด้วย Form Tag [file your-file] ซึ่งสามารถกำหนดประเภทไฟล์และขนาดสูงสุดได้:

[file your-file limit:5mb filetypes:jpg|png|pdf]

ในตัวอย่างนี้กำหนดให้อัพโหลดไฟล์ได้สูงสุด 5MB และรับเฉพาะนามสกุล jpg, png และ pdf เมื่อส่งฟอร์มสำเร็จ ไฟล์จะถูกแนบไปกับอีเมลแจ้งเตือน แนะนำให้เพิ่มข้อจำกัดประเภทไฟล์เสมอเพื่อความปลอดภัย

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

ปัญหา: อีเมลไม่ถึงกล่องขาเข้า

นี่คือปัญหาที่พบบ่อยที่สุด สาเหตุและวิธีแก้:

• PHP mail() ถูกบล็อก: ติดตั้ง SMTP Plugin เช่น WP Mail SMTP หรือ FluentSMTP แล้วตั้งค่าให้ส่งผ่าน SMTP จริง
• อีเมลเข้า Spam: ตรวจสอบ SPF, DKIM และ DMARC Records ของโดเมน ตั้งค่า From Email ให้ใช้อีเมลของโดเมนตัวเอง
• From Email ไม่ถูกต้อง: ใช้อีเมลของโดเมนเดียวกับเว็บ เช่น [email protected]
• Hosting บล็อก PHP mail(): สอบถาม Hosting ให้เปิดใช้งาน หรือใช้ SMTP แทน

ปัญหา: ฟอร์มส่งไม่ได้ แสดง "Spam Detected"

อาจเกิดจาก Akismet Plugin กรองข้อความออก ลองปิด Akismet ชั่วคราวเพื่อทดสอบ หรือเพิ่ม Akismet Integration ใน CF7 Settings เพื่อปรับเกณฑ์การตรวจจับ Spam

ปัญหา: หน้าเว็บช้าลงหลังติดตั้ง CF7

CF7 โหลด CSS และ JavaScript ในทุกหน้าโดยค่าเริ่มต้น แม้หน้านั้นจะไม่มีฟอร์ม แก้ไขได้โดยเพิ่มโค้ดใน functions.php ของ Child Theme:

add_filter('wpcf7_load_js', '__return_false');
add_filter('wpcf7_load_css', '__return_false');

แล้วโหลด Script และ Style เฉพาะหน้าที่มีฟอร์มด้วย wpcf7_enqueue_scripts() และ wpcf7_enqueue_styles() เอง

ปัญหา: ฟอร์มส่งแล้วหน้า Reload ทันที (ไม่ใช่ AJAX)

ตรวจสอบว่าเว็บไม่ได้บล็อก jQuery หรือ JavaScript บางส่วน ลองปิด Plugin อื่นๆ ทีละตัวเพื่อหาตัวที่ขัดแย้ง นอกจากนี้ให้ตรวจสอบ Console ของ Browser เพื่อดู JavaScript Error

Add-on ยอดนิยมที่ใช้คู่กับ Contact Form 7

CF7 vs WPForms — เปรียบเทียบเบื้องต้น

หลายคนสงสัยว่าระหว่าง Contact Form 7 กับ WPForms ควรเลือกใช้ตัวไหน ขึ้นอยู่กับความต้องการ CF7 เหมาะสำหรับผู้ที่คุ้นเคยกับ Code สามารถปรับแต่งได้อิสระ และต้องการ Plugin น้ำหนักเบา ในขณะที่ WPForms มี Drag & Drop Builder ที่ใช้งานง่ายกว่า เหมาะกับผู้เริ่มต้นที่ไม่ต้องการแตะ Code

ในแง่ประสิทธิภาพ CF7 โหลดเร็วกว่า WPForms เล็กน้อยเพราะ Code น้อยกว่า แต่ WPForms มีฟีเจอร์ในตัวมากกว่า เช่น Form Analytics, Entry Management, Conditional Logic โดยไม่ต้องติดตั้ง Add-on เพิ่ม

เคล็ดลับ Code Snippets ที่มีประโยชน์

เปลี่ยน Redirect หลังส่งฟอร์มสำเร็จ

add_action('wpcf7_mail_sent', 'my_wpcf7_redirect');
function my_wpcf7_redirect($contact_form) {
    wp_redirect('/thank-you/');
    exit;
}

เพิ่มข้อมูลเพิ่มเติมใน Email

add_filter('wpcf7_special_mail_tags', 'my_special_mail_tags', 10, 3);
function my_special_mail_tags($output, $name, $html) {
    if ($name === '_user_agent') {
        $output = $_SERVER['HTTP_USER_AGENT'];
    }
    return $output;
}