Hướng Dẫn Cấu Hình Contact Form 7 Để Tạo Form Liên Hệ 2026 Themevip

Contact Form 7 là plugin tạo form liên hệ lâu đời và phổ biến nhất trên WordPress. Tuy nhiên, việc cài đặt sao cho “chuẩn” để mail không bị vào spam vẫn là thử thách với nhiều người.

Trong bài viết này, Themevip sẽ hướng dẫn bạn cách cài đặt và làm chủ Contact Form 7 từ A-Z một cách đơn giản nhất.

1. Lưu ý quan trọng: Cấu hình SMTP trước khi bắt đầu

Thông thường, WordPress gửi mail qua hàm mail() của PHP. Cách này không yêu cầu xác thực nên email gửi đi rất dễ bị đánh dấu là “Blacklist”, dẫn đến việc bạn không nhận được thư khách hàng.

Để đảm bảo 100% nhận được mail, bạn bắt buộc phải cấu hình SMTP cho website.

Xem thêm: Hướng dẫn cài đặt gửi Email SMTP cho WordPress tại đây

2. Cách cài đặt Contact Form 7

Vào WordPress Dashboard → Plugin → Cài mới (Add New).
Nhập từ khóa: “Contact Form 7”.
Nhấn Cài đặt ngay → Kích hoạt.

3. Thiết kế và cấu hình gửi mail

Bước 1: Tạo khung liên hệ mới

Truy cập Dashboard → Form liên hệ → Tạo form mới.

Tên form: Đặt tên dễ quản lý (Ví dụ: Form Tư Vấn).
Nội dung form: Nơi chứa các ô nhập liệu.

Các giá trị mặc định cần lưu ý:

[your-name]: Họ tên khách hàng.
[your-email]: Email khách hàng.
[submit]: Nút gửi (Bắt buộc phải có).

Bước 2: Cấu hình gửi Email (Tab Mail)

Đây là phần quan trọng nhất để xác định mail sẽ gửi về đâu.

Mail nhận: Điền email bạn muốn nhận thông báo (Ví dụ: cua-hang@gmail.com).
Mail gửi: Phải dùng email theo tên miền (Ví dụ: wordpress@tenmien.com).
Message body: Nội dung bạn sẽ nhận được trong email.

4. Chèn Form vào website

Sau khi nhấn Lưu, bạn copy đoạn Shortcode và dán vào Bài viết hoặc Trang muốn hiển thị.

5. Video hướng dẫn nâng cao

Gửi dữ liệu về Google Sheet:

Cấu hình SMTP chuẩn:

6. Bí kíp thiết kế Form chuyên nghiệp (CSS)

Để form trông hiện đại hơn, bạn có thể sử dụng đoạn mã mẫu này.

Cấu trúc HTML (Dán vào nội dung form)

HTML

<div class="form-container">
  <h2>Liên Hệ Với Chúng Tôi</h2>
  <div class="form-group">
    <label>Họ và Tên</label>
    [text* your-name placeholder "Nhập họ và tên của bạn"]
  </div>

  <div class="form-group">
    <label>Email</label>
    [email* your-email placeholder "Nhập email của bạn"]
  </div>

  <div class="form-group">
    <label>Lời nhắn</label>
    [textarea your-message x5 placeholder "Viết lời nhắn của bạn tại đây"]
  </div>

  [submit "Gửi Liên Hệ"]
</div>

Trang trí bằng CSS (Dán vào mục Giao diện -> Tùy biến -> CSS bổ sung)

CSS

/* Thiết lập khung bao quanh */
.form-container {
  max-width: 500px;
  margin: 30px auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  font-family: 'Segoe UI', sans-serif;
}

/* Tiêu đề */
.form-container h2 { text-align: center; color: #333; margin-bottom: 25px; }

/* Khoảng cách các ô */
.form-group { margin-bottom: 20px; }

/* Nhãn và Ô nhập liệu */
.form-container label { display: block; margin-bottom: 8px; font-weight: 600; color: #555; }

.form-container input, .form-container textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  transition: 0.3s;
}

/* Hiệu ứng khi click vào ô */
.form-container input:focus, .form-container textarea:focus {
  border-color: #007BFF;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
  outline: none;
}

/* Nút bấm */
.wpcf7-submit {
  width: 100%;
  padding: 12px;
  background-color: #007BFF !important;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.wpcf7-submit:hover { background-color: #0056b3 !important; }

Tại sao các thay đổi này hiệu quả?

Đổ bóng (Box-shadow): Tạo chiều sâu, giúp form nổi bật.
Bo góc (Border-radius): Tạo cảm giác thân thiện, hiện đại.
Hiệu ứng Focus: Giúp người dùng biết họ đang nhập liệu ở đâu (tăng trải nghiệm UX).

Chúc bạn thành công!

Xem thêm: