Contact Form 7 là plugin tạo form liên hệ miễn phí và phổ biến nhất cho WordPress, với hơn 5 triệu lượt cài đặt hoạt động. Được phát triển bởi Takayuki Miyoshi, Contact Form 7 cho phép bạn tạo và quản lý nhiều form liên hệ khác nhau một cách dễ dàng, linh hoạt và hoàn toàn miễn phí.
Plugin này hỗ trợ AJAX submission, CAPTCHA, Akismet spam filtering và có thể tùy biến cao với CSS và JavaScript. Contact Form 7 đã trở thành lựa chọn hàng đầu cho hàng triệu website WordPress trên toàn thế giới.
Tại sao nên sử dụng Contact Form 7?
Ưu điểm vượt trội
Miễn phí và mã nguồn mở: Contact Form 7 hoàn toàn miễn phí, không có phiên bản premium hay hidden costs.
Linh hoạt và tùy biến cao: Tạo form với bất kỳ trường nào bạn muốn - text, email, tel, textarea, dropdown, checkbox, radio buttons, file upload và nhiều hơn nữa.
AJAX-powered: Submit form không cần reload trang, mang lại trải nghiệm người dùng mượt mà.
Spam protection: Tích hợp sẵn với Akismet, reCAPTCHA và honeypot để chống spam hiệu quả.
Đa ngôn ngữ: Hỗ trợ hơn 50 ngôn ngữ, tương thích hoàn hảo với WPML và Polylang.
Developer-friendly: Nhiều hooks và filters cho phép customize sâu.
Các tính năng chính
- Tạo không giới hạn form
- Quản lý nhiều form dễ dàng
- Simple markup với shortcode
- Upload files an toàn
- Email notifications linh hoạt
- Validation messages tùy chỉnh
- Tương thích với mọi theme
- Responsive trên mọi thiết bị
- Database submission (với add-ons)
Cài đặt Contact Form 7
Phương pháp 1: Cài đặt từ WordPress Dashboard
- Đăng nhập WordPress Admin
- Vào Plugins → Add New
- Tìm kiếm "Contact Form 7"
- Click Install Now → Activate
Phương pháp 2: Upload thủ công
- Download plugin từ WordPress.org
- Giải nén file ZIP
- Upload folder
contact-form-7 vào /wp-content/plugins/
- Activate trong Plugins menu
Phương pháp 3: Cài đặt qua FTP
- Download plugin
- Giải nén và upload qua FTP client
- Đường dẫn:
/wp-content/plugins/contact-form-7/
- Kích hoạt trong WordPress Admin
Kiểm tra sau cài đặt
Sau khi activate, bạn sẽ thấy menu mới Contact trong WordPress Dashboard. Click vào để xem form mặc định đã được tạo sẵn.
Tạo Form liên hệ đầu tiên với Contact Form 7
Sử dụng form mặc định
Contact Form 7 tự động tạo một form mẫu khi cài đặt:
[contact-form-7 id="1234" title="Contact form 1"]
Copy shortcode này và paste vào bất kỳ page/post nào.
Tạo form mới từ đầu
Bước 1: Vào Contact → Add New
Bước 2: Nhập tên cho form (ví dụ: "Liên hệ chúng tôi")
Bước 3: Thêm các trường vào Form template:
<label> Tên của bạn
[text* your-name autocomplete:name] </label>
<label> Email
[email* your-email autocomplete:email] </label>
<label> Chủ đề
[text* your-subject] </label>
<label> Nội dung
[textarea your-message] </label>
[submit "Gửi"]
Bước 4: Cấu hình Mail settings
Bước 5: Save và copy shortcode
Bước 6: Paste shortcode vào page
Các loại field trong Contact Form 7
Text fields:
[text your-name]
[text* your-name] (required field)
Email:
[email* your-email]
Tel (số điện thoại):
[tel your-phone]
Textarea:
[textarea your-message]
Dropdown menu:
[select your-subject "Hỗ trợ" "Báo giá" "Khác"]
Checkboxes:
[checkbox your-services "Web Design" "SEO" "Marketing"]
Radio buttons:
[radio your-gender "Nam" "Nữ" "Khác"]
File upload:
[file your-file limit:5mb filetypes:jpg|png|pdf]
Date picker:
[date your-date]
Number:
[number your-number min:1 max:100]
Cấu hình Mail trong Contact Form 7
Mail tab - Cấu hình email gửi đi
To (Người nhận):
admin@yoursite.com
From (Người gửi):
[your-name] <[your-email]>
Subject (Tiêu đề):
Liên hệ mới từ [your-name]
Message Body (Nội dung):
Từ: [your-name] <[your-email]>
Chủ đề: [your-subject]
Nội dung:
[your-message]
--
Email này được gửi từ form liên hệ tại [_site_title] ([_site_url])
Mail (2) - Email xác nhận tự động
Enable tab Mail (2) để gửi email xác nhận cho người dùng:
To: [your-email]
Subject: Cảm ơn bạn đã liên hệ
Message Body:
Xin chào [your-name],
Cảm ơn bạn đã liên hệ với chúng tôi.
Chúng tôi đã nhận được tin nhắn của bạn và sẽ phản hồi trong thời gian sớm nhất.
Thông tin bạn đã gửi:
[your-message]
Trân trọng,
[_site_title]
Special mail-tags
Contact Form 7 cung cấp các special tags:
[_site_title] - Tên website[_site_url] - URL website[_site_admin_email] - Email admin[_invalid_fields] - Danh sách field lỗi[_serial_number] - Số thứ tự submission[_remote_ip] - IP người gửi[_user_agent] - Browser info[_date] - Ngày gửi[_time] - Giờ gửi
Chống Spam với Contact Form 7
Tích hợp Google reCAPTCHA
Bước 1: Đăng ký reCAPTCHA tại https://www.google.com/recaptcha/admin
Bước 2: Chọn reCAPTCHA v3 (recommended) hoặc v2
Bước 3: Lấy Site Key và Secret Key
Bước 4: Trong WordPress, vào Contact → Integration
Bước 5: Click Setup Integration cho reCAPTCHA
Bước 6: Paste Site Key và Secret Key
Bước 7: Save
reCAPTCHA sẽ tự động được thêm vào tất cả forms.
Sử dụng Akismet
Bước 1: Cài đặt và activate Akismet plugin
Bước 2: Lấy Akismet API key
Bước 3: Thêm Akismet support vào form fields:
[text* your-name akismet:author]
[email* your-email akismet:author_email]
[textarea your-message akismet:comment]
Honeypot technique
Thêm hidden field để bẫy spam bots:
[text your-website class:hidden]
CSS để ẩn field:
.hidden {
display: none !important;
}
Quiz questions
Thêm câu hỏi đơn giản:
[quiz quiz-123 "2+2=?|4"]
Tùy biến giao diện Contact Form 7 với CSS
Styling cơ bản
Thêm CSS vào theme của bạn:
/* Container */
.wpcf7 {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background: #f9f9f9;
border-radius: 8px;
}
/* Labels */
.wpcf7 label {
display: block;
margin-bottom: 5px;
font-weight: 600;
color: #333;
}
/* Input fields */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
margin-bottom: 15px;
transition: border-color 0.3s;
}
/* Focus state */
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 5px rgba(0,123,255,0.3);
}
/* Submit button */
.wpcf7 input[type="submit"] {
background: #007bff;
color: white;
padding: 12px 30px;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s;
}
.wpcf7 input[type="submit"]:hover {
background: #0056b3;
}
/* Success message */
.wpcf7-mail-sent-ok {
border: 2px solid #4caf50;
background: #e8f5e9;
color: #2e7d32;
padding: 15px;
border-radius: 4px;
}
/* Error message */
.wpcf7-validation-errors {
border: 2px solid #f44336;
background: #ffebee;
color: #c62828;
padding: 15px;
border-radius: 4px;
}
Layout hai cột
HTML template:
<div class="form-row">
<div class="form-col">
<label> Tên
[text* first-name] </label>
</div>
<div class="form-col">
<label> Họ
[text* last-name] </label>
</div>
</div>
CSS:
.form-row {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.form-col {
flex: 1;
}
@media (max-width: 768px) {
.form-row {
flex-direction: column;
}
}
Style cho validation errors
/* Field validation errors */
span.wpcf7-not-valid-tip {
color: #f44336;
font-size: 14px;
display: block;
margin-top: 5px;
}
/* Invalid field highlight */
.wpcf7-not-valid {
border-color: #f44336 !important;
}
Tích hợp Contact Form 7 với các công cụ khác
Mailchimp integration
Cài đặt addon: Contact Form 7 Mailchimp Extension
Cấu hình:
- Lấy Mailchimp API key
- Chọn list ID
- Map fields từ form sang Mailchimp
Google Sheets integration
Sử dụng plugin: CF7 Google Sheets Connector
Steps:
- Cài đặt plugin
- Authenticate với Google account
- Chọn spreadsheet
- Map form fields với columns
Zapier integration
Kết nối với 3000+ apps:
- Cài CF7 to Zapier
- Tạo Zap mới
- Trigger: New Contact Form 7 submission
- Action: Chọn app muốn kết nối
Database storage
Plugin recommended: Contact Form CFDB7
Features:
- Lưu submissions vào database
- Export to CSV
- View submissions trong admin
- Search và filter
Cài đặt:
Plugins → Add New → Search "Contact Form CFDB7"
Xử lý sự cố Contact Form 7
Form không gửi được email
Nguyên nhân: SMTP settings không đúng
Giải pháp:
- Cài đặt WP Mail SMTP plugin
- Configure với Gmail/SendGrid SMTP
- Test email delivery
Lỗi "Failed to send your message"
Kiểm tra:
- Email settings trong Mail tab
- Server có block email function không
- Check spam folder
- Verify recipient email address
Fix:
// Thêm vào functions.php
add_filter('wp_mail_from', function($email) {
return 'noreply@yourdomain.com';
});
add_filter('wp_mail_from_name', function($name) {
return 'Your Site Name';
});
Validation errors không hiển thị
Nguyên nhân: JavaScript conflict
Giải pháp:
- Disable plugins khác để test
- Check browser console for errors
- Update Contact Form 7 lên version mới nhất
File upload không hoạt động
Kiểm tra:
- PHP upload_max_filesize setting
- WordPress upload size limit
- File permissions trong wp-content/uploads
Fix trong wp-config.php:
@ini_set('upload_max_size', '64M');
@ini_set('post_max_size', '64M');
CAPTCHA không hiển thị
Nguyên nhân: reCAPTCHA keys không đúng
Giải pháp:
- Regenerate keys trong Google reCAPTCHA console
- Đảm bảo domain match
- Clear cache
Tối ưu hiệu suất Contact Form 7
Disable CSS/JS khi không cần
Nếu form chỉ có ở một page:
// Thêm vào functions.php
add_filter('wpcf7_load_js', '__return_false');
add_filter('wpcf7_load_css', '__return_false');
// Load chỉ trên contact page
function load_cf7_scripts_selectively() {
if (!is_page('contact')) {
wp_dequeue_style('contact-form-7');
wp_dequeue_script('contact-form-7');
}
}
add_action('wp_enqueue_scripts', 'load_cf7_scripts_selectively', 99);
Lazy load forms
// Load form khi scroll đến
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Load CF7 scripts
loadCF7Scripts();
}
});
});
observer.observe(document.querySelector('.wpcf7'));
Optimize validation
Reduce Ajax calls:
document.addEventListener('wpcf7mailsent', function(event) {
// Custom action sau khi gửi thành công
console.log('Form submitted successfully');
}, false);
Extensions và Add-ons cho Contact Form 7
Free add-ons hữu ích
Conditional Fields for CF7
- Show/hide fields based on conditions
- Complex logic support
Redirection for Contact Form 7
- Redirect sau khi submit thành công
- Pass data qua URL
CF7 Multi-Step Forms
- Chia form thành nhiều bước
- Progress bar
- Save draft
CF7 Database
- Lưu trữ submissions
- Export functionality
- Email resend
Premium extensions
Drag and Drop Multiple File Upload
- Upload nhiều files
- Drag and drop interface
- Progress bar
Conditional Fields Pro
- Advanced conditions
- Better UX
- Premium support
Signature Add-on
- Digital signature field
- Useful cho contracts
Best Practices khi sử dụng Contact Form 7
Security
✅ Luôn sử dụng CAPTCHA để chống spam
✅ Validate inputs đúng cách (email, phone, etc.)
✅ Limit file upload size và types
✅ Sanitize user inputs trong custom code
✅ Use nonces cho AJAX requests
User Experience
✅ Clear labels cho mọi field
✅ Helpful placeholders để hướng dẫn
✅ Appropriate field types (email, tel, date)
✅ Success messages rõ ràng và friendly
✅ Error messages cụ thể và hữu ích
Performance
✅ Load scripts chỉ khi cần
✅ Optimize CSS - chỉ style cần thiết
✅ Minimize fields - chỉ hỏi thông tin quan trọng
✅ Use AJAX để không reload page
✅ Cache forms nếu có thể
Email deliverability
✅ Configure SMTP thay vì PHP mail()
✅ Use valid From address của domain
✅ Test email delivery thường xuyên
✅ Monitor spam complaints
✅ Add SPF and DKIM records
Customize Contact Form 7 với Hooks
Action hooks
// Sau khi mail được gửi
add_action('wpcf7_mail_sent', function($contact_form) {
$submission = WPCF7_Submission::get_instance();
$posted_data = $submission->get_posted_data();
// Custom logic
// Ví dụ: lưu vào CRM
});
// Trước khi gửi mail
add_action('wpcf7_before_send_mail', function($contact_form) {
// Modify data trước khi gửi
});
Filter hooks
// Modify email content
add_filter('wpcf7_mail_components', function($components) {
$components['subject'] = 'Custom: ' . $components['subject'];
return $components;
});
// Thay đổi validation messages
add_filter('wpcf7_validate_text*', function($result, $tag) {
if ($tag->name == 'your-name') {
$value = isset($_POST['your-name']) ? trim($_POST['your-name']) : '';
if (strlen($value) < 3) {
$result->invalidate($tag, 'Tên phải có ít nhất 3 ký tự');
}
}
return $result;
}, 10, 2);
Contact Form 7 cho WooCommerce
Form sản phẩm inquiry
Tạo form cho từng sản phẩm:
<label> Tên sản phẩm
[text product-name readonly "Product Title"] </label>
<label> Số lượng
[number quantity min:1 max:100] </label>
<label> Yêu cầu đặc biệt
[textarea your-requirements] </label>
[hidden product-id default:shortcode_attr]
Shortcode với product ID:
[contact-form-7 id="123" product-id="456"]
Pre-fill form với product data
add_filter('wpcf7_form_tag', function($tag) {
if ($tag['name'] == 'product-name') {
$product_id = isset($_GET['product']) ? $_GET['product'] : 0;
if ($product_id) {
$product = wc_get_product($product_id);
$tag['values'] = array($product->get_name());
}
}
return $tag;
});
Kết luận
Contact Form 7 là plugin tạo form liên hệ mạnh mẽ, linh hoạt và hoàn toàn miễn phí cho WordPress. Với khả năng tùy biến cao, hỗ trợ nhiều loại field, tích hợp spam protection và developer-friendly, Contact Form 7 xứng đáng là lựa chọn hàng đầu cho mọi website WordPress.
Dù bạn cần một form liên hệ đơn giản hay một hệ thống form phức tạp với nhiều điều kiện, Contact Form 7 đều có thể đáp ứng. Kết hợp với các add-ons và extensions, bạn có thể mở rộng chức năng không giới hạn.
Hãy bắt đầu với form mặc định, sau đó tùy chỉnh theo nhu cầu của bạn. Đừng quên áp dụng các best practices về security, UX và performance để mang lại trải nghiệm tốt nhất cho người dùng!
FAQ - Câu hỏi thường gặp
Q: Contact Form 7 có miễn phí không?
A: Có, plugin hoàn toàn miễn phí và mã nguồn mở.
Q: Có thể tạo bao nhiêu form?
A: Không giới hạn số lượng form.
Q: Contact Form 7 có lưu submissions vào database không?
A: Không tự động, nhưng bạn có thể dùng add-on như CFDB7.
Q: Làm sao để chống spam?
A: Sử dụng reCAPTCHA, Akismet hoặc honeypot technique.
Q: Email không gửi được, phải làm sao?
A: Cài đặt WP Mail SMTP plugin và configure SMTP settings.
Q: Contact Form 7 có responsive không?
A: Có, forms tự động responsive trên mọi thiết bị.
Q: Có thể tùy chỉnh CSS không?
A: Có, bạn có thể style forms theo ý muốn.
Keywords liên quan: WordPress contact form, CF7 plugin, form builder WordPress, email form, lead generation form, contact form plugin, Ajax form, reCAPTCHA WordPress, form validation, WooCommerce inquiry form, custom contact form