Hướng dẫn sử dụng Contact Form 7 từ A đến Z

Contact Form 7 là một plugin hỗ trợ tạo form cho các website WordPress. Nếu như bạn đang cần 1 plugin tạo form có thể tùy biến sâu và hoàn toàn miễn phí, Contact Form 7 sẽ là một plugin vô cùng phù hợp với bạn. Contact Form 7 phổ biến đến mức hầu hết các bài viết giới thiệu plugin tạo form liên hệ đều nhắc đến tên của Contact Form 7. Chính vì sự nổi tiếng của mình, có rất nhiều nhà phát triển thứ 3 đã tạo ra thêm những tính năng khác để hỗ trợ cho Contact Form 7, đến cả những page builder mạnh mẽ, họ cũng hỗ trợ tích hợp sẵn một khối block riêng cho Contact Form 7.

Hướng dẫn cài đặt Contact Form 7

Để có thể sử dụng Contact Form 7, trước tiên chúng ta sẽ cần phải cài đặt Contact Form 7. Quá trình cài đặt plugin Contact Form 7 rất đơn giản, bạn chỉ cần theo dõi những bước sau đây:

Bước 1: đăng nhập vào WordPress Dashboard => Plugins => Add New

Bước 2: gõ từ khóa Contact Form 7 vào ô tìm kiếm trong Add Plugins sau đó bấm tìm/ Enter.

Bước 3: bấm vào Install => Active để cài đặt và kích hoạt Contact Form 7.

Sau khi cài đặt xong, bạn có thể tìm thấy plugin Contact Form 7 ngay trên menu dọc của WordPress tại Contact.

Cách tạo một Contact Form mới

Sau khi đã cài đặt xong, bạn bấm vào Contact, bạn sẽ thấy có 1 form có tên Contact form 1 được tạo sẵn và cấu hình mẫu thông tin sẵn.

Bạn có thể bấm vào xem thử form Contact form 1 và khám phá nội dung bên trong nếu bạn không thể ngăn được sự tò mò. Nếu không, trong phần setup tiếp theo, Tino Group sẽ hướng dẫn bạn cách để điều chỉnh các thông tin nhé!

Để tạo mới form trong Contact Form 7 bạn thực hiện thao tác đơn giản như sau: Contact => Add New.

Bạn có thể để Contact Form 7 tự động tạo tên cho form. Nhưng tốt nhất, bạn nên đặt tên riêng cho từng form để tránh trường hợp nhầm lẫn khi bạn phải quản lý nhiều form nhé!

Vậy là bạn đã tạo mới 1 form rồi đấy! Quá trình cực kỳ đơn giản đúng không nào!

Hướng dẫn setup Contact Form 7

Sau khi tạo mới fom, bạn sẽ thấy nội dung của form được tạo sẵn như sau:

Nhà phát triển không tự nhiên “thêm vào cho vui”, bạn có thể thấy trong form chính là những thông tin phổ biến nhất đấy! Trong đó:

• Your name: tên của người gửi form
• Your email: địa chỉ email của người điền form
• Subject: tiêu đề của form
• Your message: nội dung của form

Thông tin khi người dùng điền vào form sẽ được gửi trực tiếp đến email của bạn. Vì thế, nhà phát triển gắn những thông tin cơ bản nhất giống 1 email để bạn có thể sử dụng ngay nếu không biết bắt đầu từ đâu.

Để thêm các thông tin như số điện thoại, hộp checkbox để tùy chọn nội dung hay khoảng thời gian form gửi đến, bạn có thêm vào bằng các Tag-generator Tools được cấu hình sẵn => Thay đổi thông tin hiển thị trên form. Vậy là bạn đã có 1 mẫu form hoàn chỉnh rồi đấy!

Mỗi thông tin sẽ là 1 label, bạn chỉ cần đảm bảo không xóa đi dấu đóng mở ngoặc nào để tránh form bị lỗi.

Cài đặt email cho Contact Form 7

Để đảm bảo rằng mỗi khi người dùng điền form, bạn sẽ có 1 email thông báo, bạn sẽ cần đến 1 plugin cho phương thức SMTP.

Nếu bạn chưa biết cách để cấu hình SMTP hãy yên tâm, Tino Group sẽ hướng dẫn bạn! Trong trường hợp bạn đã biết, bạn có thể xem phần cấu hình mail trong Contact Form 7 và chuyển sang để tìm hiểu về cách chèn form Contact Form 7 nhé!

Cấu hình mail trong Contact Form 7

Để cấu hình mail trong Contact Form 7, bạn chuyển từ tab Form => tab Mail để thực hiện. Sau đây sẽ là cấu hình mặc định của Contact Form 7:

Trong đó, bạn sẽ thấy:

• To: đây là địa chỉ email để bạn nhận thông báo khi có người điền form.
• From: dùng để hiển thị nội dung email người gửi trong form. [your-name]: là một trường dùng để hiển thị tên người gửi.
• Subject: là chủ đề của form gửi đến
• Additional: đây là nơi bạn có cấu hình thêm một số nội dung như: CC hay BCC thư đến một email thứ 3. Bạn có thể sử dụng mail-tags để thực hiện gửi mail đến email khác trong ô này.
• Message: đây là nội dung bạn sẽ nhìn thấy trong email của mình không phải của người gửi.

Cấu hình SMTP

Để đảm bảo email gửi được, các bạn cần cấu hình SMTP cho web. Cách làm các bạn xem chi tiết tại bài viết sau:

Cách để chèn Contact Form 7

Cách để chèn form trong Contact Form 7 vào bài viết, trang hay widget đều rất đơn giản, bạn có thể thực hiện theo 1 trong 2 cách như sau:

Cách 1: Copy shortcode và dán vào vị trí bạn muốn trong trang, bài viết hay widget bất kỳ.

 

Cách 2: sử dụng khối block Contact Form 7 được tạo sẵn trong Block Editor.

 

Vậy là chúng tôi đã hướng dẫn bạn cách sử dụng Contact Form 7 từ A đến Z rồi! Trong quá trình thiết lập bạn gặp những rắc rối hay những thắc mắc, bạn có theo dõi tài liệu hỗ trợ chính thức của Contact Form 7 và nhờ sự trợ giúp của cộng đồng đấy! Chúc bạn sử dụng Contact Form 7 thật tốt cho website của mình!