Categories WordPress

Hướng dẫn sử dụng Contact Form 7 (có video)

Contact Form 7

Các form liên hệ là một trong những thành phần cơ bản của hầu hết website. Người ghé thăm website dùng nó để liên hệ với bạn nhằm thực hiện một tác vụ nào đó như:

  • Liên lạc thông thường (với một đề nghị nào đấy)
  • Mua một sản phẩm (nếu bạn bán hàng & nhận đơn hàng qua form)

Mặc dù các trường thông tin cần điền như họ tên, email, nội dung liên hệ giữa form và phần comment (bình luận) đều giống nhau nhưng phần bình luận vẫn không thể thay thế nhiệm vụ của form được.

Sở dĩ như vậy vì form bảo đảm tính bảo mật thông tin, bản chất của phần bình luận là công khai, trong khi nội dung trong form là riêng tư, và theo mặc định chỉ có người gửi và người nhận được quyền xem mà thôi.

Ngoài ra, quả thực form có một số chức năng mà phần comment không có, thí dụ như các tùy chọn trường dữ liệu như check boxes, radio button, ngày tháng, số, vân vân.

Hôm nay chúng ta sẽ học cách sử dụng plugin Contact Form 7, một trong các công cụ miễn phí phổ biến nhất để tạo form. (Địa chỉ cài đặt: https://wordpress.org/plugins/contact-form-7/)


Các khái niệm cơ bản

Để nội dung bài viết này dễ hiểu, bạn cần biết rõ một số thuật ngữ được sử dụng thường xuyên trong bài viết này.

Ví dụ đây là một Form điển hình:

Form điển hình

Các thông tin như Your Name (required), Your Email (required), Subject, Your Message được gọi là các nhãn. Nó là tên tương ứng cho các trường nhập liệu (trường thông tin), là các hình chữ nhật ngay bên dưới. Các trường nhập liệu này là nơi mà người dùng nhập thông tin vào.

Cuối cùng là nút gửi thông tin Form, ở đây chính là nút Send ở dưới cùng.


Cách thêm form vào bài viết

Sau khi cài đặt Contact Form 7 (CF7), bạn vào khu vực này chứa các thiết lập dành riêng cho nó:

Contact Form 7

Contact Form 7 sẽ tạo cho bạn một form mặc định như dưới đây:

form mặc định của Contact Form 7

Điều bạn cần chú ý là đoạn mã trong khung màu vàng này, bạn cần copy nó đầy đủ.

OK, sau đó bạn vào một bài viết mà bạn muốn thêm form, rồi đến phần nào bạn muốn chèn liên hệ và paste nó vào đó là xong.

Giả dụ như thế này:

thêm đoạn mã của Contact Form 7 vào bài

Cuối cùng nhấn lưu là OK, kết quả sẽ như sau:

kết quả sau khi chèn form liên hệ

Điều mấu chốt bạn cần hiểu ở đây là:

Contact Form 7 thêm form liên hệ thông qua một đoạn mã ngắn gọi là shortcode, và bạn phải copy chính xác đoạn mã đó và đưa vào bài bạn muốn có form liên hệ.

Video hướng dẫn ngắn:


Cách sửa nhãn, Việt hóa form

Bạn có thể thấy các nhãn của form mặc định là tiếng Anh như Your Name (required), Your Email (required). Bạn có thể muốn Việt hóa các nhãn này.

Cách làm như sau. Ở Form tương ứng bạn muốn chỉnh sửa, bạn click vào Edit:

chỉnh sửa Form

Bạn sẽ thấy nội dung kiểu như dưới đây:

đoạn mã Form

Bạn không động đến phần dấu ngoặc vuông. Bạn chỉ thực hiện chỉnh sửa nội dung sau chữ <label> và trước dấu [

Đó chính là phần này:

phần dùng để sửa nhãn

Ví dụ tôi Việt hóa nó như sau:

sửa nhãn form

Kết quả:

Form được Việt hóa

Tạo một form mới trong Contact Form 7 như thế nào?

Để tạo một form mới bạn nhấn vào Add New:

tạo mới form

Nó sẽ chuyển sang giao diện tạo form. Đầu tiên bạn cần nhập tiêu đề form:

nhập tiêu đề form

Tiếp theo, ngay bên dưới, bạn sẽ thấy các trường (ở dạng nút nhấn) bạn có thể thêm vào form:

các kiểu trường khác nhau

Chúng bao gồm:

  • text: dùng để tạo các trường thông tin ngắn dạng văn bản, như tên người, tên chủ đề
  • email: dùng để nhập địa chỉ email
  • URL: dùng để nhập địa chỉ trang web
  • tel: dùng để nhập số điện thoại
  • number: dùng để nhập số thuần túy
  • date: dùng để nhập thông tin ngày tháng
  • text area: tương tự như text nhưng được dùng để nhập khối văn bản dài
  • drop-down menu: danh sách dạng xổ xuống, và thường người dùng chọn một trong các tùy chọn xổ xuống này. Ví dụ như size quần áo S, M, L. Thường người dùng sẽ chỉ chọn một size áo phù hợp với họ
  • checkboxes: danh sách lựa chọn, cho phép chọn nhiều tùy chọn cùng lúc, hiển thị hết ra bên ngoài. Ví dụ checkboxes trong giao hàng có thể là chuyển phát nhanh, gói dạng quà tặng. Cả hai tùy chọn này đều có khả năng tick chọn cùng lúc
  • radio buttons: gần giống drop-down menu, nhưng ở đây các tùy chọn đều hiển thị ra ngoài thay vì dạng xổ xuống như drop-down menu
  • acceptance: khi bạn yêu cầu người dùng cần phải chấp nhận điều gì đó thì mới được gửi thông tin thì bạn sử dụng tùy chọn này. Thí dụ như điều khoản sử dụng, thỏa thuận khi giao hàng, vân vân
  • quiz: dạng câu hỏi thử thách, người dùng phải trả lời đúng câu hỏi thì nội dung mới được gửi đi
  • reCAPTCHA: mã CAPTCHA, nếu form của bạn thường xuyên bị spam, form bị điền tự động liên tục thì nên dùng cái này. Còn nếu không bị spam thì không nên dùng, đỡ gây phiền toái cho người dùng thực
  • file: dùng để nhập thông tin file, như file văn bản, hình ảnh
  • submit: đây chính là nút gửi

Đặc điểm của các trường thông tin này là nó sẽ chỉ cho phép gửi nếu người gửi nhập đúng kiểu thông tin. Thí dụ, nếu người dùng điền vào trường email không đúng địa chỉ email như thiếu @ chẳng hạn nó sẽ thông báo lỗi, hay ở trường number, nếu nhập chữ mà không phải là số nó cũng sẽ thông báo lỗi.

Mặc định khi tạo mới form, Contact Form 7 tạo sẵn cho bạn 4 trường là:

  • Tên (Your name)
  • Email (Your email)
  • Chủ đề (Subject)
  • Thông điệp (Your message)

Nếu bạn muốn thêm trường nhập liệu nào thì chỉ cần nhấn vào nút tương ứng ở trên. Dưới đây là video hướng dẫn:


Cách thêm một số trường dữ liệu đặc biệt

Một số trường dữ liệu khá dễ khi thêm vào, như trường text, số điện thoại. Tuy nhiên cũng có một số trường khá phức tạp, và bạn cần học một chút nếu muốn thêm chính xác.

Trường số (number)

trường số

Trường số có 3 phần cần chú ý là:

  • Spinbox/Slider: cái này dùng để điều chỉnh dạng nhập số bằng cách gõ vào từ bàn phím/hoặc kéo thành slide.
  • Default value: cái này là giá trị mặc định. Nếu bạn điền giá trị mặc định vào thì sẽ xuất hiện một giá trị có sẵn khi người dùng điền form.
  • Range (Min – Max): đây là khoảng giá trị. Tức là giá trị nhỏ nhất, lớn nhất được phép. Trong đó Min là nhỏ nhất. Max là lớn nhất.

Trường ngày tháng (date)

khoảng ngày tháng

Phần đáng chú ý ở đây là khoảng ngày tháng. Với Min là ngày tháng nhỏ nhất được phép. Max là ngày tháng lớn nhất được phép.

Checkbox & radio buttons

checkbox - các tùy chọn

Cả checkbox và checkbox* đều đại diện cho nhóm checkboxes (<input type="checkbox"> trong HTML). checkbox* yêu cầu người dùng check ít nhất một tùy chọn trong nhóm.

radio là đại diện cho một nhóm radio buttons (<input type="radio"> trong HTML). Lưu ý là không cần thiết phiên bản radio*. Lý do Contact Form 7 không cung cấp tùy chọn radio* là vì mặc định radio button đã yêu cầu người dùng phải tick chọn ít nhất một cái.

Các tùy chọn cho checkboxes và radio:

TÙY CHỌN VÍ DỤ MÔ TẢ
id:(id) id:foo id giá trị thuộc tính id của phần tử bao bên ngoài
class:(class) class:bar class giá trị thuộc tính class của phần tử bao bên ngoài. Để thiết lập cho hai hoặc nhiều class, bạn có thể sử dụng tùy chọn class:
default:(num) default:2
default:1_2_3
Các tùy chọn check trước. Các số theo sau default: là vị trí theo thứ tự bên trong danh mục. 1 là vị trí đầu tiên. Nếu bạn muốn hai hoặc nhiều mục được lựa chọn, nối các số nguyên bằng dấu gạch dưới (_), thí dụ default:1_2_3.
label_first   Theo mặc định, checkbox hoặc radio button sẽ được đưa lên đầu và label (nhãn) ở cuối. Bằng cách thêm tùy chọn label_first bạn có thể đảo ngược mặc định này.
use_label_element   Bao checkbox và radio button bằng thẻ <label>.
exclusive   Nếu bạn sử dụng tùy chọn này thì chỉ một lựa chọn sẽ được chọn. Ý tôi là, khi bạn tick 1 cái trong một nhóm checkbox, những cái khác sẽ không được tick nữa. Nói cách khác hoặc không check bất cứ cái nào, hoặc là chỉ check được duy nhất 1 cái. Tính năng này cần JavaScript.
free_text   Nối văn bản nhập tự do vào cuối danh mục.
data:(name) data:countries Lấy các giá trị từ Listo. Một danh sách gồm hơn 200 quốc gia.

Ví dụ:

[checkbox your-country “China” “India” “Vietnam”]

Select (drop-down menu)

các tùy chọn của Select

Cả select và select* đều đại diện cho drop-down menu (<select> trong HTML). select* yêu cầu người dùng phải chọn ít nhất một tùy chọn từ menu.

Các tùy chọn:

TÙY CHỌN VÍ DỤ MÔ TẢ
id:(id) id:foo id giá trị thuộc tính id của phần tử select.
class:(class) class:bar class giá trị thuộc tính class của phần tử select. Để thiết lập hai hoặc nhiều class, bạn có thể sử dụng nhiều tùy chọn class:
default:(num) default:2
default:1_2_3
Các tùy chọn check trước. Các số theo sau default: là vị trí theo thứ tự bên trong danh mục. 1 là vị trí đầu tiên. Nếu bạn muốn hai hoặc nhiều mục được lựa chọn, nối các số nguyên bằng dấu gạch dưới (_), thí dụ default:1_2_3.
multiple   Mặc định drop-down menu chỉ cho phép một lựa chọn. Khi tick vào tùy chọn này bạn cho phép người dùng được chọn nhiều lựa chọn cùng lúc
include_blank   Chèn mục trống (blank) vào vị trí đầu của các lựa chọn của drop-down menu này.
first_as_label   Sử dụng giá trị đầu tiên làm nhãn
data:(name) data:countries Lấy các giá trị từ Listo.

Ví dụ:

[select your-country “China” “India” “Vietnam”]


Khi có người điền Form bạn sẽ nhận được thông tin ở đâu?

Mặc định thì Contact Form 7 không lưu thông tin mà người dùng điền vào form vào CSDL (cơ sở dữ liệu) mà sẽ gửi thông tin tới Email của bạn. Mặc định là email admin khởi tạo WordPress.

Bạn hoàn toàn có quyền chỉnh sửa lại email nhận thông tin liên hệ (chẳng hạn bạn muốn lập riêng một email khác chỉ chuyên nhận thông tin liên hệ).

Cách chỉnh sửa như sau, bạn chuyển sang tab Mail và ở mục To bạn chuyển sang email khác:

đổi địa chỉ email nhận thông tin

Có một điểm rất quan trọng ở phần này, nó ở khu vực Message Body, đây là nội dung bạn nhận được trong email. Mặc định nó trông giống như thế này:

thông tin mặc định được gửi đi

Nó có một vấn đề là ngay cả khi bạn đã thêm các trường nhập liệu như số điện thoại, ngày tháng, radio buttons, vân vân thì thông tin đó không được tự động thêm vào thông điệp gửi đi! (điều này có thể làm bạn bối rối không rõ mình thao tác sai ở đâu)

Để khắc phục, bạn sẽ phải chủ động thêm ở phần này. Ví dụ với trường hợp của tôi, tôi bổ sung như sau:

bổ sung thông tin

Bạn có thể thắc mắc tự hỏi, các thông tin như [tel-351], [radio-263] và [date-101] ở đâu ra? Nó chính là tên của các trường thông tin. Các tên này cung cấp ở ngay phần đầu của tab Mail để bạn dễ nhận biết:

thông tin các trường nhập liệu

Sau khi điều chỉnh xong, bạn nhấn Save để lưu.

Chỉ khi ấy, khi người dùng gửi thông tin, thì nội dung đầy đủ được gửi đi mới đến hòm thư của bạn được:

nội dung thư gửi đến đầy đủ

Sử dụng plugin Flamingo để lưu giữ thông tin form

Khi bạn nhận thông tin người dùng gửi thông qua email có một số nhược điểm sau:

  • Có thể có vấn đề nào đó với email server nên thư không được chuyển đi
  • Bạn thiết lập thiếu/sai khu vực mail dẫn đến thông tin gửi đến không đầy đủ

Flamingo sẽ khắc phục nhược điểm này, nó lưu thông tin liên hệ vào CSDL (cơ sở dữ liệu) của WordPress nên bạn lúc nào cũng có được thông tin người gửi khi họ đã nhấn nút send.

Bạn không phải làm thao tác gì để kết nối Flamingo với Contact Form 7 cả. Chỉ việc cài đặt Flamingo là xong, nó sẽ tự động lưu thông tin vào CSDL khi có ai đó dùng form của CF7 để liên hệ với bạn.

Để kiểm tra liên hệ bạn truy cập vào Flamingo, tiếp đó vào Inbound Messages:

flamingo

Nó sẽ hiện ra các liên hệ hiện có:

các liên hệ hiện có

Bạn click vào đường link dưới Subject (chủ đề / ở đây là Mua 1 bộ quần áo) để xem thông tin:

nội dung thư

Nó sẽ hiện đầy đủ thông tin cho bạn.

Cái menu-773 là tên của trường thông tin, nó chính là cái nằm trong dấu ngoặc vuông. Để thông tin biểu thị rõ ràng hơn, có thể bạn muốn sửa nội dung này, nếu đúng là như vậy, bạn có thể làm điều đó ở phần chỉnh sửa form:

<label>
Chọn size quần áo
[select menu-773 “Size A” “Size B” “Size C”]</label>

Thí dụ tôi sẽ sửa thành như thế này:

<label>
Chọn size quần áo
[select size-quan-ao “Size A” “Size B” “Size C”]</label>

Hoặc khi bạn tạo mới một trường thông tin, thì tên trường thông tin nó nằm ở đây (mặc định thì chương trình sẽ tạo một tên theo kiểu chức năng-số ngẫu nhiên, thí dụ như tel-123, khi bạn muốn sửa nhớ chọn tên không dấu, viết liền):

tên trường thông tin

Thay đổi, Việt hóa các thông báo

Bạn đã biết cách chỉnh sửa, Việt hóa các nhãn. Nhưng Form còn có các thông báo khác chẳng hạn khi người dùng nhập sai thông tin, thiếu dữ liệu, vân vân. Các thông báo này mặc định là tiếng Anh. Bạn có thể chỉnh sửa, Việt hóa cho thân thiện với người dùng Việt Nam.

Phần đó, bạn thực hiện ở tab Messages:

thông điệp của Form trong những thứ liên quan đến xác nhận

Ý nghĩa:

  • Thank you for your message. It has been sent. Thông báo này xuất hiện khi người dùng gửi thông điệp thành công. Nghĩa tiếng Việt: Cảm ơn, thông điệp của bạn đã được gửi thành công…Bạn có thể điều chỉnh tùy theo tình huống. Nếu đây là đơn đặt hàng, bạn có thể viết là: Cảm ơn, bạn đã đặt hàng thành công.
  • There was an error trying to send your message. Please try again later. Thông báo này xuất hiện khi không thể gửi được thông điệp đi. Nghĩa tiếng Việt: Có lỗi khi chúng tôi cố gửi thông điệp của bạn. Hãy thử lại sau.
  • One or more fields have an error. Please check and try again. Thông báo này xuất hiện nếu có trường thông tin nào đó không điền dữ liệu chuẩn. Thí dụ trường email nhưng lại điền sai email, trường số điện thoại nhưng lại điền chữ. Nghĩa tiếng Việt: Một hoặc nhiều trường có lỗi. Hãy kiểm tra và thử lại sau.
  • There was an error trying to send your message. Please try again later. Thông báo này xuất hiện trong trường hợp thông điệp gửi đi bị nghi ngờ là SPAM. Nghĩa tiếng Việt: Có lỗi khi chúng tôi cố gửi thông điệp của bạn. Hãy thử lại sau.
  • You must accept the terms and conditions before sending your message. Thông báo này xuất hiện trong trường hợp người dùng chưa chấp nhận một số điều khoản khi gửi thông điệp. Nghĩa tiếng Việt: Bạn phải chấp nhận một số điều khoản và quy định trước khi thông điệp được gửi đi.
  • The field is required. Thông báo này xuất hiện khi trường dữ liệu bắt buộc điền nhưng bị bỏ trống. Nghĩa tiếng Việt: Trường thông tin này bắt buộc phải điền.
  • The field is too long. Thông báo này xuất hiện khi dữ liệu nhập vào quá dài, vượt dung lượng tối đa cho phép. Nghĩa tiếng Việt: Trường dữ liệu nhập vào quá dài.
  • The field is too short. Thông báo này xuất hiện khi dữ liệu nhập vào quá ngắn, dưới ngưỡng thấp nhất cho phép. Nghĩa tiếng Việt: Trường dữ liệu nhập vào quá ngắn.
  • The date format is incorrect. Thông báo này xuất hiện khi dữ liệu ngày tháng nhập vào không chính xác. Nghĩa tiếng Việt: Định dạng ngày tháng không chính xác.
  • The date is before the earliest one allowed. Thông báo này xuất hiện khi ngày tháng nhập vào sớm hơn ngày tháng tối thiểu được phép. Nghĩa tiếng Việt: Ngày bạn nhập vào quá sớm.
  • The date is after the latest one allowed. Thông báo này xuất hiện khi ngày tháng nhập vào muộn hơn ngày tháng tối đa được phép. Nghĩa tiếng Việt: Ngày bạn nhập vào quá muộn.
  • There was an unknown error uploading the file. Thông báo này xuất hiện khi xuất hiện lỗi trong khi tải file lên. Nghĩa tiếng Việt: Có lỗi không rõ khi tải file lên.
  • You are not allowed to upload files of this type. Thông báo này xuất hiện khi định dạng file tải lên không được phép. Nghĩa tiếng Việt: Định dạng file tải lên không được phép.
  • The file is too big. Thông báo này xuất hiện khi dung lượng file tải lên quá lớn. Nghĩa tiếng Việt: Dung lượng file tải lên quá lớn.
  • There was an error uploading the file. Thông báo này xuất hiện khi việc up file lên có lỗi. Nghĩa tiếng Việt: Có lỗi khi tải file lên.
  • The number format is invalid. Thông báo này xuất hiện khi thông tin người dùng nhập vào không phải là số. Nghĩa tiếng Việt: Thông tin bạn nhập vào không phải là số.
  • The number is smaller than the minimum allowed. Thông báo này xuất hiện khi giá trị người dùng nhập vào nhỏ hơn giá trị số tối thiểu cho phép. Nghĩa tiếng Việt: Số bạn nhập vào nhỏ hơn số tối thiểu được phép.
  • The number is larger than the maximum allowed. Thông báo này xuất hiện khi giá trị người dùng nhập vào lớn hơn giá trị lớn nhất cho phép. Nghĩa tiếng Việt: Số bạn nhập vào lớn hơn giá trị lớn nhất được phép.
  • The answer to the quiz is incorrect. Thông báo này xuất hiện khi câu trả lời người dùng nhập vào không chính xác. Nghĩa tiếng Việt: Câu trả lời của bạn không chính xác.
  • The e-mail address entered is invalid. Thông báo này xuất hiện khi email người dùng nhập vào không đạt chuẩn dữ liệu (ví dụ như thiếu @). Nghĩa tiếng Việt: Địa chỉ email bạn nhập vào không chính xác.
  •  The URL is invalid. Thông báo này xuất hiện khi URL người dùng nhập vào không chuẩn xác. Nghĩa tiếng Việt: Địa chỉ URL không hợp lệ.
  • The telephone number is invalid. Thông báo này xuất hiện khi số điện thoại người dùng nhập vào không hợp lệ. Nghĩa tiếng Việt: Số điện thoại không hợp lệ.

Thông tin thêm

Hóa ra Contact Form 7 đã được Việt hóa cách đây khoảng 1 năm rồi.

Ngoài Contact Form 7, bạn có thể sử dụng các công cụ sau để tạo form liên hệ:

Riêng cái Google Forms áp dụng được cho mọi website chứ không chỉ riêng WordPress.

Comments are closed.

Back to Top