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

Contact Form 7 là một trong những plugin phổ biến và lâu đời nhất giúp người dùng dễ dàng tạo khung liên hệ trên các website sử dụng WordPress. Tuy nhiên, không ít người vẫn gặp khó khăn trong việc cài đặt và sử dụng công cụ này.

Trong bài viết này, Themevip sẽ hướng dẫn bạn cách cài đặt và sử dụng Contact Form 7 một cách đơn giản và hiệu quả.

Cấu Hình Máy Chủ SMTP Để Gửi Email

Như bạn đã biết, hàm mail() của PHP gửi email mà không yêu cầu xác thực (không cần cung cấp địa chỉ gửi và xác thực mật khẩu SMTP). Điều này khiến hosting của bạn có nguy cơ bị các tổ chức chống spam quốc tế đưa vào danh sách đen (Blacklist), dẫn đến tình trạng không thể gửi hoặc nhận email.

Để đảm bảo việc gửi email an toàn và đáng tin cậy trên website, bạn cần cấu hình máy chủ gửi mail qua SMTP.

Xem thêm hướng dẫn Cài đặt gửi Email SMTP cho website WordPress Tại Đây

Cài đặt plugin Contact Form 7

Tại giao diện quản trị website – WordPress Dashboard → Plugin → Cài mới → Nhập từ khóa tìm kiếm “Contact Form 7”

Sau khi tìm được kết quả “Contact Form 7”, bạn Nhấn Cài đặt → Kích hoạt.

Thiết kế và cấu hình gửi mail với Contact Form 7

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

Bạn truy cập vào giao diện quản trị website – WordPress Dashboard → Form liên hệ → Tạo form mới

• Sau khi chọn vào “Tạo form mới“, bạn cần nhập tên form
• Tại Nội dung form bạn sẽ thấy các giá trị mặc định được tạo sẵn.

Tại đây, bạn sẽ thấy các giá trị như sau:

• [your-name]: Họ tên của khách hàng
• [your-email]: Email của khách hàng
• [your-subject]: Tiêu đề liên hệ
• [your-message]: Nội dung liên hệ
• [submit]: Nút gửi liên hệ (bạn không được xóa vùng này)

Ngoài ra bạn có thể cài đặt nâng cao bằng các công cụ tạo thẻ có sẵn, xem hướng dẫn chi tiết từ nhà cung cấp tại đây.

Như vậy, bạn đã hoàn tất quá trình thiết kế form liên hệ rồi, giờ tới bước tiếp theo.

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

Tiếp theo bạn chọn tab → Cấu hình Mail để cấu hình gửi mail

Tại đây, bạn sẽ thấy các trường sau:

• Mail nhận: Địa chỉ email nhận thư liên hệ.
  • Ví dụ: abc@gmail.com, abc@ten-mien-website
• Mail gửi: Địa chỉ email gửi.
  • Lưu ý: bạn phải sử dụng email theo tên miền
  • Ví dụ: wordpress@ten-mien-website
• Tiêu đề: Tiêu đề của email.
  • Ví dụ: Form liên hệ
• Additional headers: Chức năng này cho phép bạn Cc hoặc Bcc, xem hướng dẫn chi tiết từ nhà cung cập tại đây.
• Message body: Tại đây, bạn cần điền các giá trị khi khai báo ở Nội dung Form tại Bước 1.
  • Lưu ý: tại đây, bạn có thể dụng ngôn ngữ lập trình HTML để thiết kế nội dung Email nhận đẹp hơn.

Để cài đặt nâng cao, bạn có thể xem thêm hướng dẫn từ nhà cung cấp tại đây.

Bước 3: Cài đặt Thông báo

Tại đây bạn chọn tab → Thông báo và Chú ý để thay đổi nội dung thông báo cho người dùng trong quá trình gửi liên hệ.

Cuối cùng, bạn chọn “Lưu” để lưu lại Form liên hệ.

Chèn khung liên hệ vào website WordPress

Sau khi đã hoàn tất bước “Thiết kế và cấu hình gửi mail với Contact Form 7”, bạn sao chép đoạn shortcode dưới đây để gán vào Bài viết hoặc Trang để form liên hệ hiển thị.

Kiểm tra kết quả

Bạn tạo 1 Bài viết hoặc Trang, sau đó dán shortcode ở bước trên như hình bên dưới để kiểm tra

Và đây là thành quả của chúng ta:

Video hướng dẫn cài đặt nhận dữ liệu từ Contact Form 7 về Google Sheet

Hướng dẫn cấu hình gửi email Contact Form 7 bằng Plugin WP Mail SMTP

Cách trang trí cho Form đẹp

Để trang trí một form đẹp và chuyên nghiệp, bạn cần chú ý đến các yếu tố như màu sắc, bố cục, khoảng cách, kiểu chữ và hiệu ứng. Dưới đây là hướng dẫn cơ bản kết hợp HTML và CSS để làm đẹp một form:

Ví dụ Form Đẹp:

HTML:

<div class="form-container">
<h2>Liên Hệ Với Chúng Tôi</h2>
<form action="#" method="post">
<div class="form-group">
<label for="name">Họ và Tên</label>
<input type="text" id="name" name="name" placeholder="Nhập họ và tên của bạn">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Nhập email của bạn">
</div>
<div class="form-group">
<label for="message">Lời nhắn</label>
<textarea id="message" name="message" rows="5" placeholder="Viết lời nhắn của bạn tại đây"></textarea>
</div>
<div class="form-group">
<button type="submit">Gửi Liên Hệ</button>
</div>
</form>
</div>


---

CSS:

/* Tổng thể form */
.form-container {
max-width: 500px;
margin: 0 auto;
background: #f9f9f9;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-family: 'Arial', sans-serif;
}.form-container h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
}/* Nhóm form */
.form-group {
margin-bottom: 15px;
}.form-group label {
display: block;
margin-bottom: 5px;
color: #555;
font-weight: bold;
}.form-group input,
.form-group textarea {
width: 100%;
padding: 10px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
}.form-group input:focus,
.form-group textarea:focus {
border-color: #007BFF;
box-shadow: 0 0 4px rgba(0, 123, 255, 0.5);
}/* Nút gửi */
.form-group button {
width: 100%;
padding: 10px 15px;
font-size: 16px;
color: #fff;
background-color: #007BFF;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}.form-group button:hover {
background-color: #0056b3;
}

/* Hiệu ứng hover */
.form-group input:hover,
.form-group textarea:hover {
border-color: #007BFF;
}

---

Tính Năng & Hiệu Ứng:

1. Màu sắc hài hòa: Sử dụng màu nền dịu nhẹ như xám nhạt hoặc trắng, với điểm nhấn là màu nút bấm (xanh dương, cam…).
2. Bo góc mềm mại: Các góc của form và nút được bo tròn (border-radius).
3. Hiệu ứng hover & focus:
   • Khi di chuột qua, các trường input sẽ đổi màu viền.
   • Khi người dùng nhấp vào, viền sẽ sáng lên.
4. Bố cục thoáng: Sử dụng khoảng cách hợp lý giữa các trường thông qua margin và padding.
5. Bóng đổ: Thêm bóng cho form và nút để tạo cảm giác nổi bật (box-shadow).

Mẹo Nâng Cao:

• Sử dụng biểu tượng (icon): Thêm icon từ thư viện như Font Awesome để làm form bắt mắt hơn.
• Responsive: Đảm bảo form hiển thị tốt trên mọi thiết bị bằng cách thêm CSS media query.
• Hiệu ứng chuyển động: Dùng thêm CSS Animation để tạo cảm giác mượt mà

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