---
title: "Tạo biểu mẫu liên hệ WordPress với Contact Form 7"
description: "Tạo biểu mẫu liên hệ cho WordPress bằng shortcode của Contact Form 7, cấu hình email thông báo, chèn vào trang và thêm giao diện khi theme thiếu."
---

> Documentation Index
> Fetch the complete documentation index at: https://cuongthach.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Tạo biểu mẫu liên hệ WordPress với Contact Form 7

Với hơn 10 triệu lượt cài đặt, Contact Form 7 là plugin tạo form phổ biến nhất cho WordPress. Theme mua trên các chợ thường cài sẵn nó cho bạn.

Contact Form 7 miễn phí và hoạt động theo cơ chế **gửi email thông báo, không lưu trữ dữ liệu**. Plugin không tạo bảng nào trong database, nên rất nhẹ và ổn định trong thời gian dài. Đổi lại, nó không trực quan: form viết bằng shortcode, người mới sẽ thấy hơi khó hiểu lúc đầu.

## Bạn cần chuẩn bị gì?

- **Plugin Contact Form 7** đã cài trên website WordPress.
- **SMTP cho website**, để email thông báo vào hộp thư chứ không vào spam, ví dụ [Resend](/docs/vi/content-system/resources/website-tools/software/resend). Không có SMTP thì nhớ kiểm tra hộp thư spam.
- **Một hộp thư để trả lời khách**, như Gmail, Gsuite hay Office365: bạn phản hồi bằng cách trả lời email thông báo.

## Contact Form 7 xử lý một lần gửi form thế nào?

![Contact Form 7 xử lý một lần gửi form thế nào?](/docs/_astro/illus-docs-cf7-chuyen-tin.CDMO_gNZ_ZTKTiY.svg "Site chỉ chuyển tin, không lưu gì")

Quy trình chỉ có ba bước. Khách điền form trên site. Bạn nhận một email thông báo, gửi vào hộp thư của bạn chứ không phải của khách. Bạn bấm **Trả lời** trong hộp thư, và email trả lời tự đi tới địa chỉ khách đã điền trong form.

Site chỉ làm nhiệm vụ tạo form và quản lý form. Thông tin khách gửi không lưu trên site, nên email thông báo là bản ghi duy nhất của mỗi lần gửi.

## Tạo biểu mẫu liên hệ với Contact Form 7

1. **Tạo biểu mẫu bằng shortcode**

   Vào Contact Form 7, bấm tạo form mới và đặt tên, ví dụ "Form liên hệ 2". Contact Form 7 luôn tạo sẵn mẫu `shortcode` mặc định:

   ```text
   <label> Tên của bạn
       [text* your-name autocomplete:name] </label>

   <label> Email của bạn
       [email* your-email autocomplete:email] </label>

   <label> Tiêu đề:
       [text* your-subject] </label>

   <label> Tin nhắn của bạn (không bắt buộc)
       [textarea your-message] </label>

   [submit "Gửi"]
   ```

   Cường thường bỏ nhãn cho form gọn, thay bằng chữ gợi ý `placeholder` ở cuối mỗi trường:

   ```text
   [text* your-name autocomplete:name placeholder "Tên"]

   [email* your-email autocomplete:email placeholder "Email"]

   [text* your-subject placeholder "Chủ đề"]

   [textarea your-message placeholder "Tin nhắn"]

   [submit "Gửi đi"]
   ```

   Mỗi trường là một shortcode, mở và đóng bằng dấu ngoặc vuông:

   - `text`, `email`, `textarea`, `submit` là loại trường.
   - `*` nghĩa là trường bắt buộc.
   - `your-name`, `your-email`, `your-subject` là tên trường, dùng lại trong email thông báo ở bước 2, cũng dưới dạng shortcode.
   - `placeholder "Tên"`, `placeholder "Email"`, `placeholder "Chủ đề"` là văn bản thay cho nhãn của trường.
2. **Cấu hình email thông báo**

   Email thông báo là cách bạn nhận nội dung form, vì plugin không lưu gì trên site. Mở thẻ cấu hình email của form. Ô người nhận mặc định là email quản trị trong **Cài đặt** > **Tổng quan**: không dùng email đó thì điền email bạn muốn nhận. Tiêu đề email:

   ```text
   [_site_title] "[your-subject]"
   ```

   Nội dung email, mỗi tên trường trong ngoặc vuông được thay bằng thông tin khách điền:

   ```text
   Gửi đến từ: [your-name] [your-email]
   Tiêu đề: [your-subject]

   Nội dung thông điệp:
   [your-message]

   -- 
   Đây là thông báo cho biết một biểu mẫu liên hệ đã được gửi trên trang web của bạn ([_site_title] [_site_url]).
   ```

   Email thông báo nên để đơn giản như vậy, vì nó chỉ để báo tin.
3. **Chèn biểu mẫu vào trang liên hệ**

   Tạo trang liên hệ, rồi chèn form theo một trong 2 cách:

   - **Block:** dùng WordPress Block Editor thì chọn Block Contact Form 7 rồi chọn biểu mẫu đã tạo.
   - **Shortcode:** dùng trình dựng trang như Elementor hay tương tự thì dán shortcode của biểu mẫu, lấy ở trang danh sách form, có dạng:

   ```text
   [contact-form-7 id="e6050c6" title="Form liên hệ 2"]
   ```

   Xuất bản trang và mở ra xem: form hiện với các trường bạn đã khai báo.

## Biểu mẫu Contact Form 7 trông thế nào trên theme của bạn?

Contact Form 7 không chèn thêm code giao diện nào vào site. Đó là khuyết điểm, cũng là ưu điểm: form nhẹ, nhưng trông đẹp hay không tùy theme.

Theme có sẵn giao diện biểu mẫu tích hợp, như Blocksy, thì bạn không cần tùy chỉnh gì: chèn form vào là đẹp ngay. Cường khuyên dùng những theme tiêu chuẩn như vậy.

Theme mặc định của WordPress như Twenty Twenty-Five đã rút gọn gần hết phần giao diện form, nên form hiện rất thô. Bạn mất thêm một bước: thêm style cho biểu mẫu qua HTML block hoặc thẻ `head`:

```html
<style>
/* Form Container */
.wpcf7 {
    text-align: left;
    font-size: 17px;
}

/* Input Fields */
.wpcf7-text,
.wpcf7-textarea {
    width: 100%;
    padding-left: 10px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    color: #777;
    font-size: 17px;
}

.wpcf7-text {
    height: 50px;
}

/* Input Wrapper */
.wpcf7-form-control-wrap {
    display: block;
    padding-top: 10px;
}

/* Focus States */
.wpcf7-text:focus,
.wpcf7-textarea:focus {
    border-color: #8f8f8f;
    outline: none;
}

/* Submit Button */
.wpcf7-submit {
    width: 100%;
    padding: 20px;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    background-color: #1d2731;
    border: 1px solid #fff;
    border-radius: 4px;
    cursor: pointer;
}

/* Response Messages */
.wpcf7-response-output {
    margin-bottom: 30px;
}
</style>
```

Source: https://cuongthach.com/docs/vi/content-system/resources/website-tools/wordpress/contact-form-7/index.mdx