Hướng dẫn cài đặt, sử dụng, cấu hình Contact Form 7 đầy đủ nhất

Contact Form 7 có lẽ không quá xa lạ với các bạn dùng WordPress. Đây là plugin tạo form cho wordpress số 1 hiện nay với hơn 5 triệu lượt cài đặt (tính tới June 2021 ). Bài viết này Huy Hòa sẽ hướng dẫn các bạn sử dụng plugin này cũng như giải quyết một số trường hợp hay gặp phải trong quá trình sử dụng nhé.

Bài viết này mình hướng dẫn chung về Contact Form 7 khi tạo Form liên hệ, các form khác các bạn có thể áp dụng tương tự. Nếu gặp bất kỳ vấn đề gì thì có thể liên hệ mình để được hướng dẫn và trợ giúp nhé.

Contact form 7 là gì?

Contact form 7 là một plugin rất nổi tiếng sử dụng cho WordPress dùng để tạo các form liên hệ, form đặt hàng hoặc bất cứ form nào cần tương tác giữa người sử dụng web với quản trị của trang web mà không cần biết đến code.

Contact Form 7 là plugin tạo form liên hệ lâu đời và phổ biến số 1 cho WordPress

Contact Form 7 là plugin tạo form liên hệ lâu đời và phổ biến số 1 cho WordPress

Cài đặt Contact Form 7:

Để cài đặt Contact Form 7, các bạn truy cập vào menu Plugin trong Admin Dashboard của WordPress, sau đó chọn Thêm Gói Mở Rộng (Add New). Một trang mới mở ra các bạn nhập vào ô tìm kiếm ngay cạnh mục từ khóa: contact form 7. Chờ một chút để hệ thống tìm kiếm và sẽ trả về danh sách Plugins, bạn nhấn vào nút Cài đặt (Install) bên cạnh Plugin Contact Form 7 ( có biểu tượng quả núi như hình bên dưới đây).

 

Cài đặt Contact Form 7

Cài đặt Contact Form 7

Sau khi cài đặt thành công thì các bạn nhấn Active để kích hoạt plugin này lên.  Nếu thành công, bạn sẽ nhìn thấy có thêm 1 menu: Contact (Form liên hệ) ở cột bên trái trong Admin Dashboard của bạn.

Cấu hình Contact Form 7:

Để sử dụng được Contact Form 7, chúng ta cần phải tạo form và cấu hình gửi mail cho form liên hệ. Các bước lần lượt là tạo form, cấu hình gửi email cho form,  cài đặt thông báo, và chèn shortcode vào nơi muốn hiển thị form.

Tạo mới Form liên hệ

Đầu tiên đăng nhập vào khu vực quản trị WordPress Dashboard, sau đó di chuột đến Form liên hệ nhấn vào 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 phần presets các bạn có thể thấy 3 mẫu để bạn copy nhanh sang phần Form là: Simple contact form, Newsletter Form Horizontal, Newsletter Form Vertical.

Hướng dẫn tạo mới Contact Form 7

Hướng dẫn tạo mới Contact Form 7

Tại Tab 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]: 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ệ

Những mục được đánh dấu * thì nó sẽ là bắt buộc khách hàng nhập vào. Bạn có thể thêm nhiều trường dữ liệu khác nếu muốn.

Các trường dữ liệu được Contact Form 7 hỗ trợ là:

  • Text – Trường dữ liêu input text, có thể dùng cho tên, họ, tiêu đề, các dữ liệu khác mà nhập dạng text ngắn, không yêu cầu xuống dòng hoặc chấm câu, thường dưới 255 ký tự.
  • Email – Tạo trường dữ liệu nhập địa chỉ email
  • URL – Tạo trường dữ liệu dạng địa chỉ website, url
  • Tel – Trường dữ liệu số điện thoại
  • Number – Trường dữ liệu dạng input number, tức chỉ nhận giá trị là số nguyên không thể nhập chữ cái hoặc các ký tự lạ khác
  • Date – Trường dùng lựa chọn ngày tháng. Có thể giới hạn ngày trong tương lai, ngày trong quá khứ hoặc ngày trong một khoảng thời gian nào đó.
  • Text Area – Trường dùng để nhập văn bản, giống với dạng Input text nhưng có thể lưu nhiều dữ liệu, có thể xuống dòng.
  • Drop-down Menu – Nút dạng drop-down menu, dùng để lựa chọn giá trị. Có thể lựa chọn một hoặc nhiều giá trị.
  • Checkboxes – Nút dạng checkboxes, có thể chọn 1 hoặc nhiều lựa chọn.
  • Radio Buttons – Nút dạng Radio (nút tròn) – chỉ cho phép chọn 1 trong các lựa chọn.
  • Acceptance – Nút checkbox để chấp nhận điều khoản nào đó.
  • Quiz – Trường dữ liệu dạng câu hỏi – trả lời.
  • File – Trường dữ liệu để tải tệp tin lên.
  • Submit – Nút dùng để nhấn gửi thông tin đi.

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.

Cơ bản, khi cần thêm trường dữ liệu gì, các bạn chỉ cần nhấn vào trường dữ liệu tương ứng, nhập các thông tin cần thiết rồi nhán Insert là dữ liệu sẽ được thêm vào form của bạn.

Cấu hình gửi Email

Sau khi thiết kế xong phần Form thì chúng ta sẽ chuyển sang mục cấu hình mail ở tab Cấu hình Mail để cấu hình gửi mail khi có khách nhấn Submit Form.

Các thông tin về các ô nhập liệu ở tab cấu hình mail như sau:

  • Mail nhận: Địa chỉ email nhận thư liên hệ. Đây là địa chỉ email sẽ nhận dữ liệu của form khi khách nhấn Submit thành công. Nên dùng email bạn hay sử dụng nhất để có thể nhận form ngay khi khách nhấn Submit thành công.
  • Mail gửi: Địa chỉ email  dùng để gửi đi. Phần này bắt buộc phải sử dụng email theo tên miền đang cấu hình. Ví dụ trên site của huyhoa.net thì email gửi đi mình để là [email protected]
  • Tiêu đề: Tiêu đề của email. Ví dụ: Form liên hệ từ huyhoa.net. Nếu ngoài form bạn có để subject thì có thể kết hợp dữ liệu đó vào đây. Chẳng hạn như của huyhoa.net là [_site_title]“[your-subject]”
  • 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 ở Form tại Bước 1 để có thể nhận đủ dữ liệu khách hàng gửi đi.
    Lưu ý: tại đây, bạn có thể dụng ngôn ngữ HTML để thiết kế nội dung Email nhận đẹp hơn. Nếu dùng HTML thì bạn phải tích vào ô Use HTML content type ở bên dưới để sử dụng được chức năng này. 

Để 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.

Cài đặt Message

Mặc định, các thông báo được hiển thị khi có lỗi hoặc khi đã gửi thành công. Ví dụ khi người dùng quên nhập tên hay số điện thoại mà trường đó lại bắt buộc nhập dữ liệu thì sau khi nhấn Submit, Form sẽ không được gửi đi mà sẽ hiện thông báo. Để tùy biến các thông báo này, bạn vào tab Message để tùy biến.

Tùy biến Contact Form 7 Message

Tùy biến Contact Form 7 Message

Ví dụ, các bạn muốn đổi thông báo Thank you for your message. It has been sent., bạn chỉ cần sửa nó thành câu thông báo mà bạn muốn. Chẳng hạn như đổi thành: “Cảm ơn bạn, tin nhắn của bạn đã được gửi tới huy Hòa. Chúng mình sẽ cố gắng trả lời bạn trong thời gian sớm nhất. Thường là trong vòng 24 giờ. Nếu bạn không nhận được mail trả lời của bọn mình thì hãy kiểm tra cả mục Spam/ junk mail nữa nhé

Sau đó, bạn chọn “Lưu” để lưu lại Form liên hệ.

Chèn Form vào trang muốn hiển thị

Sau khi đã hoàn tất bước tạo Form liên hệ mới và cấu hình gửi mail, bạn sao chép đoạn shortcode  ở ngay bên dưới ô Edit Contact Form (bên dưới dòng Copy this shortcode and paste it into your post, page, or text widget content:).

Sau đó dán đoạn shortcode đó vào vị trí mà bạn muốn form được hiện.

Chèn shortcode Contact Form 7

Chèn shortcode Contact Form 7

Hướng Dẫn Contact Form 7:

Contact Form 7 không gửi được mail

Thường thì lỗi Contact Form 7 không gửi được mail thì sẽ hiện lên thông báo: there was an error trying to send your message. please try again later. 

Lúc này chúng ta còn phải xem tiếp xem màu  lỗi hiển thị là gì. Có 2 trường hợp xảy ra. Nếu đường viền dòng thông báo lỗi là màu đỏ thì có nghĩa là hosting / server của bạn không hỗ trợ gửi mail bằng phương pháp bạn đã cấu hình gửi mail.

Nếu dòng thông báo có đường viền màu cam  thì có nghĩa là email bị đánh  giá là spam bởi plugin chống spam trên web của bạn (ví dụ như Askimet …)

Cách xử lý:

Nếu thông báo màu đỏ, nghĩa là server / hosting không gửi được mail thì bạn phải kiểm tra lại cấu hình gửi mail và đảm bảo là chức năng gửi mail hoạt động bình thường sau đó thử lại. Huy Hòa khuyên bạn nên dùng SMTP để gửi mail cho dễ dàng và tránh bị đánh giá spam. Có rất nhiều nhà cung cấp dịch vụ SMTP miễn phí hoặc trả phí tùy theo nhu cầu của bạn như: Sendgrid, Sendinblue, Pepipost, Google SMTP, Amazon SES, Mailgun…

Các bạn có thể cài đặt một số plugin SMTP Mail cho wordpress như WP Mail SMTP,  WP Mail SMTP by WPForms, Easy WP SMTP. Để xem chi tiết hơn, các bạn có thể đọc bài về cách cấu hình SMTP cho WordPress

Nếu thông báo màu cam, nghĩa là email bị đánh spam hoặc là có conflict giữa Contact Form 7 và Google reCAPTCHA module. Trường hợp này bạn có thể dùng Flamingo plugin để kiểm tra chính xác xem plugin chống Spam nào đang block việc gửi mail của Contact Form 7.

Theo kinh nghiệm của mình thì đa số là do các bạn tích hợp Google reCAPTCHA module vào website và sẽ xung đột với Contact Form 7, gây ra lỗi Contact Form 7 không gửi được mail và hiện thông báo: there was an error trying to send your message. please try again later.

Cách xử lý lỗi ở trường hợp này là các bạn phải tích hợp Google reCAPTCHA vào Contact Form 7 bằng cách vào menu Contact / Intergration  (Integration with External API)
Sau đó chọn Setup Integration trong mục reCAPTCHA. Một màn hình mới hiện ra thì các bạn điền Site Key và Secret Key vào 2 ô tương ứng sau đó nhấn Save Change.

Nếu bạn đã có tích hợp rồi nhưng dùng reCAPTCHA V2 hoặc V1 thì các bạn cần phải đăng ký Key với V3 để tích hợp lại. Trường hợp bạn chưa có reCAPTCHA Key thì làm theo hướng dẫn bên dưới đây:

Bước 1: Login vào email gmail của bạn, sau đó truy cập vào website https://www.google.com/recaptcha/admin/create

Bước 2: Điền các thông tin cần thiết như hình bên dưới

get reCATPCHA key v3

Bước 3: Nhấn Next để chuyển sang bước tiếp theo để nhận reCATPCHA key

get reCATPCHA key

get reCATPCHA v3 key

Bước 4: Cuối cùng nhập thông tin Site Key và Secret Key vào mục Intergration của Contact Form 7

insert these keys into reCAPTCHA module of contactform7 and save changes

Cuối cùng nhấn Save Change sau đó xóa mọi loại cache như DNS Cache, Plugin Cache, php-fpm cgi cache nếu có rồi ra ngoài thử lại contact form.

Ngăn việc Submit gửi nhiều lần

Một số bạn than phiền rằng khi dùng Contact Form 7 bằng shortcode hiển thị ở các khu vực khác nhau thì có hiện tượng khách nhấn submit rất nhiều lần. Việc này làm cho dữ liệu bị gửi đi rất nhiều lần.  Bạn có thể ngăn chặn việc đó chỉ với đoạn code đơn giản bên dưới đây. Lưu ý cho đoạn code này vào dưới cùng của file functions.php (ngay trước ?> nếu có )

Contact Form 7 Placeholder

Để thêm placeholder vào các field của Contact Form 7 thì có 2 cách.

Cách 1: Sửa trực tiếp ở trong Tab Form của Contact Form 7

Bước 1: Thêm mới hoặc sửa Form bạn cần thêm placeholder.

Nhìn trong Tab Form, mỗi một field đều bắt đầu bằng dấu [ và kết thúc bằng dấu ]. Để thêm placeholder vào field nào thì mình chỉ cần thêm đoạn code này:

vào ngay trước dấu ]

Trong đó bạn cần thay đổi đoạn Enter your name cho phù hợp với field đó.

Bước 2: Nhấn Save để lưu lại. 

Cách 2: Thêm placeholder sử dụng CF7 Form-tag Generator

Bước 1: Cũng thêm mới hoặc sửa Form bạn cần thêm placeholder

Lúc này ở trong tab Form, sẽ có danh sách các field mà Contact Form 7 hỗ trợ để thêm vào. Chúng ta click vào 1 field ta cần thêm, sau đó sẽ hiện ra một bảng Form-tag Generator:

Bước 2: Tích vào ô Use this text as the placeholder of the field

Để thêm place holder, ta điền giá trị muốn làm placeholder vào phần Default Value sau đó tích vào ô Use this text as the placeholder of the field.

Chọn Insert Tag

Lặp lại với các field các bạn muốn thêm placeholder. 

Contact Form 7 dùng để làm gì?
Contact Form 7 là plugin tạo form dành cho wordpress. Plugin này có thể tạo bất kỳ form nào như form liên hệ, form đặt hàng, form nhận báo giá, form nhận tin tức Newsletter... Bạn không cần biết code mà vẫn có thể tạo được các khung liên hệ khi sử dụng plugin này.
Đánh giá
Share.
About Author