Cách tạo contact form bằng plugin – P1: Dùng Contact Form 7

Contact form là một trong những yếu tố không thể thiếu của một trang web chuyên nghiệp. Nó mang lại nhiều lợi ích và cũng không khó để tạo và thiết lập nếu bạn sử dụng các plugin chuyên dụng. Để giúp người dùng tạo contact form bằng plugin một cách dễ dàng và nhanh chóng, chúng mình đã tổng hợp và viết các hướng dẫn về cách dùng các plugin tạo contact form phổ biến nhất.

Trong bài viết đầu tiên của series tạo contact form bằng plugin, chúng ta cùng tìm hiểu:

  • Contact form là gì?
  • Lợi ích của contact form
  • Cách dùng plugin Contact Form 7 để tạo 1 form theo mẫu

Contact form là gì? Lợi ích của contact form

Contact form là gì?

Contact form hay biểu mẫu liên hệ là một thuật ngữ khá quen thuộc với marketer. Dùng contact form, người dùng có thể gửi mail và liên hệ với bạn ngay trên website mà không cần biết địa chỉ email của bạn là gì.

Một contact form thường có nhiều field để người dùng điền các thông tin được yêu cầu như email, số điện thoại, tên, nội dung email, … và thường được đặt ở trang Contact hoặc những nơi cần lấy thông tin liên hệ của khách hàng. Ví dụ như sau:

Dùng contact form, người dùng có thể gửi mail và liên hệ với bạn ngay trên website WordPress

Lợi ích của contact form

Bởi người dùng có thể dùng contact form để gửi thông tin cho chủ trang web (để lại liên hệ, gửi yêu cầu hỗ trợ, hay các yêu cầu khác, …) ngay trên trang web đó, nên nó giúp việc liên hệ này thuận tiện và nhanh chóng hơn rất nhiều.

Ngoài ra, dùng contact form giúp giữ kín email của bạn, giảm tỉ lệ spam và các mối đe dọa về bảo mật. Như vậy, bạn sẽ không cần phải đối mặt với thùng thư rác đầy ắp mỗi ngày.

Việc dùng loại contact form này cũng giúp bạn thu thập thông tin người dùng dễ dàng hơn bởi họ sẽ phải điền thông tin bạn yêu cầu vào form. Đây là một trong những chiến lược để thu hút lead (lead generation) tốt hơn.

Ngoài ra còn nhiều lợi ích khác nữa. Nhìn chung, để có một trang web chuyên nghiệp thì bạn rất nên sử dụng contact form.

Cách tạo contact form

Bạn có thể dùng code để tạo các custom field và form theo ý muốn. Tuy nhiên nếu bạn không phải là coder thì việc này là không thể. Hoặc bạn phải mất một khoản tiền thuê một coder chuyên nghiệp làm việc này.

Giải pháp hữu ích nhất để tạo contact form cho người dùng không chuyên về công nghệ, hoặc thậm chí với những developer (để tiết kiệm thời gian và công sức) là dùng plugin. Hiện nay có rất nhiều các plugin hỗ trợ tạo contact form vừa đơn giản, dễ dàng, nhanh chóng, lại miễn phí. Vậy thì không có lý do gì mà bạn không sử dụng chúng để tạo contact form cả đúng không?

Giải pháp hữu ích nhất để tạo contact form cho người dùng không chuyên về công nghệ, hoặc thậm chí với những developer (để tiết kiệm thời gian và công sức) là dùng plugin. Hiện nay có rất nhiều các plugin hỗ trợ tạo contact form vừa đơn giản, dễ dàng, nhanh chóng, lại miễn phí. Vậy thì không có lý do gì mà bạn không sử dụng chúng để tạo contact form cả đúng không?

Trong tất cả các bài của series tạo contact form bằng plugin, mình sẽ hướng dẫn các bạn tạo form theo mẫu đăng ký của một trường đại học như sau:

tạo biểu mẫu đăng ký của một trường đại học bằng plugin contact form 7

Dùng plugin Contact Form 7 để tạo form

Bài viết khai màn của series hôm nay sẽ sử dụng plugin Contact Form 7 – một trong những plugin để tạo contact form miễn phí phổ biến nhất hiện nay.

Trước hết, các bạn tải và cài đặt plugin này từ kho plugin của wordpress.org, hoặc vào Dashboard > Plugin > Add New, tìm và cài đặt, kích hoạt nó nhé.

Sau đây là hướng dẫn cụ thể.

Giao diện

Bạn truy cập vào Dashboard > Contact > Add New để tạo mới một contact form. Sau đây là giao diện bạn sẽ làm việc:

Giao diện của plugin contact form 7 trong back end của website WordPress

(1): Điền tên của contact form
(2): Các tab để tạo và thiết lập contact form, gồm:

  • Tab Form: tạo các field cho contact form
  • Tab Mail: thiết lập email bạn nhận được từ contact form
  • Tab Message: các thông báo người dùng nhận được khi điền form bị lỗi, form không gửi được, gửi form thành công, …
  • Tab Additional Settings: cài đặt thêm các yếu tố khác cho contact form.

Tạo field cho contact form

Như mình đã đề cập, một contact form sẽ gồm các field để người dùng nhập thông tin hoặc tương tác. Dưới đây là tab Form bạn dùng để tạo các field đó:

Tạo field cho contact form

(1) gồm các loại field để thêm vào form như tên, email, số, nút gửi, … Bạn muốn thêm field nào thì click vào button với tên field tương ứng.

(2) là khu vực hiển thị cấu trúc form ở dạng HTML. Khi tạo mới 1 contact form, bạn sẽ có sẵn cú pháp cho các field cơ bản gồm email, tên, subject, nút submit. Bạn có thể dùng luôn form này hoặc dựa trên đó để tạo form mới.

Hướng dẫn chung cho các field

Sau khi chọn field bạn muốn nhập, một popup sẽ xuất hiện để bạn điền các thông tin cần thiết cho field. Mỗi field sẽ yêu cầu các thông số khác nhau, nhưng nhìn chung chúng đều có các mục sau:

Name: thuộc tính name của field
Default value: giá trị mặc định của field
Id attribute: ID của field tùy theo ý muốn
Class attribute: tên class của field tùy theo ý muốn.

Lưu ý Id attributeClass attribute là phần tùy chọn. Nếu bạn muốn ở các bước sau sẽ style cho contact form dễ dàng hơn thì nên điền 2 phần này.

Sau khi điền xong các thông tin cần thiết, bạn sẽ thấy Tag của field vừa tạo ở cuối hộp này. Click Insert Tag để chèn field này vào đoạn HTML của form.

chèn field vào đoạn HTML của contact form.

Thường Tag của mỗi field trong một contact form được tạo bằng Contact Form 7 sẽ có cấu trúc như sau:

[field* thuoc_tinh_name_cua_field id:id_của_field class:class_của_field "giá trị mặc định điền sẵn trong field"]

Trong đó field* là loại field bạn chọn. Đây là phần quan trọng nhất và không thể thiếu của một field. Dấu * có nghĩa là field này bắt buộc phải điền. Nếu không muốn bắt buộc thì bạn bỏ dấu * đi.

Để hiểu hơn về cấu trúc của 1 thẻ field trong Contact Form 7, bạn đọc hướng dẫn này nhé. Hiểu về ý nghĩa và cấu trúc HTML của contact form sẽ giúp bạn chỉnh sửa, tạo và thêm mới các field bằng code dễ dàng hơn. Đặc biệt với các coder, họ có thể viết đoạn code HTML luôn để tạo form theo cú pháp trên. Tuy nhiên với non-coder thì sẽ thấy khó nên mình khuyên nên làm theo các bước mình hướng dẫn ở dưới đây.

Theo như mẫu contact form của series này, mình cần chọn các field như sau:

Tên fieldLoại field
Your nametext
Your phone numbernumber
Your emailemail
Location to studydrop-down menu
Majordrop-down menu
Register tocheck box
Submitsubmit

Mỗi field đều có các thao tác và thông tin cơ bản cần làm và điền như mình đã nói ở trên. Vậy nên mình chỉ hướng dẫn những phần đặc biệt của từng field thôi nhé.

Dưới đây là hướng dẫn chi tiết cho từng field.

Tạo field để điền tên

Bạn chọn field text và điền các thông tin cơ bản cho field vào hộp:

Tạo field để sinh viên điền tên trong contact form

Ở phần Field type bạn có thể chọn require để field này bắt buộc điền (cái này tùy bạn chọn nhé).

Lưu ý là ở phần Default value bạn chọn Use this text as the placeholder of the field để hiển thị nội dung này lên field trước khi người dùng nhập dữ liệu. Bạn nên để chế độ này để giải thích cho người dùng họ cần điền gì vào field.

Phần Akismet liên quan đến plugin Akismet – plugin chống spam. Nếu bạn không plugin này thì không cần quan tâm đến mục này đâu.

Tạo field điền số điện thoại

Chọn field number và điền các thông tin cơ bản cho field.

Tạo field điền số điện thoại

Field type, bạn chọn kiểu cho field này. Có 2 kiểu field là Spinbox Slider.

Slider sẽ hiển thị một thang chọn số như sau:

Slider sẽ hiển thị một thang chọn số trong contact form

Kiểu này thích hợp dùng khi chấm điểm, chọn số dựa trên 1 thang điểm có sẵn.

Trong khi đó, Spinbox cho phép bạn điền số, dãy số bất kì vào field như số điện thoại, số thẻ, số chứng minh thư, … Vậy nên trong ví dụ này mình chọn Spinbox.

Mục Range cho bạn chọn giới hạn cho số cần điền. Nội dung field mình cần làm không cần dùng đến phần này nên không cần điền nhé.

Tạo field chọn ngành học và địa điểm học

Với field này, bạn chọn drop-down menu.

Tạo field chọn ngành học và địa điểm học với field drop-down

Bây giờ, bạn điền các lựa chọn cho ngành học và địa điểm học vào phần Option, lưu ý mỗi lựa chọn là 1 dòng.

Nếu muốn cho phép user chọn nhiều option 1 lúc, bạn click vào Allow multiple selections.

Tạo field để chọn mục đích đăng ký

Chọn field checkbox.

Tạo field checkbox để chọn mục đích đăng ký

Phần Option tương tự như phần này của field drop-down menu ở trên. Ngoài ra, bạn có thêm tùy chọn cho checkbox như sau

  • Put a label first, a checkbox last: đặt option trước checkbox
  • Wrap each item with label element: đặt checkbox trước option
  • Make checkboxes exclusive: chỉ cho phép chọn 1 option

Tạo nút gửi

Cuối cùng, bạn chọn field submit và chỉ cần điền các thông tin như yêu cầu sau (lưu ý Label là từ sẽ hiển thị trên nút này, ví dụ như “Gửi”, “Đăng ký”, “Xác nhận”).

chọn field submit để tạo nút gửi trong contact form

Hoặc nếu bạn để ý thì khi tạo mới 1 form, plugin này đã tự động tạo một field submit sẵn rồi. Bạn có thể tận dụng luôn field này cũng được.

Thêm label cho các field

Vậy là bạn đã hoàn thành việc tạo field cho form rồi. Tuy nhiên lúc này, các field của bạn chưa có tên để hiển thị lên contact form như sau:

Thêm label cho các field của contact form

Vậy nên bạn cần thêm label cho field bằng cách chèn cấu trúc code sau vào phần HTML của form:

<label> Field Label
[Tag của field bạn tạo] </label>

Bạn điền label của field vào phần Field Label nhé. Sau khi điền xong hết các thông tin trên thì click Save để lưu form.

Sau khi tạo các field, contact form của mình có cấu trúc code như sau, lưu ý là mình đã sắp xếp các field để hiển thị theo vị trí như ý muốn ở ngoài front end:

<label> Your Name (required)
    [text* your-name "enter your name"] </label> 

<label> Your Phone Number
[number phone placeholder "enter your phone number"] </label> <label> Your Email (required)
    [email* your-email "enter your email"] </label>

<label> Major
 [select* major "Computer science" "Linguistics" "Agriculture" "Engineering" "eCommerce"] </label>
<label> Location to study 
[select* Location-to-study "New York" "Chicago" "Los Angeles" "Washington D.C" "Houston" "Philadelphia"] </label>

</label> Register to
[checkbox* register label_first "Study" "Take a tour" "Consult"] </label>

[submit "Submit"]

Lúc này contact form của bạn vẫn chưa hiển thị ra trang web đâu. Bạn vẫn cần phải thiết lập thêm và cần một số thao tác để hiển thị nó ra ngoài front end.

Thiết lập cho contact form

Thiết lập email

Tab Mail cho phép tùy chỉnh nội dung của email bạn sẽ nhận khi 1 contact form được người dùng gửi đến. Điều bạn cần làm để thiết lập phần này là chèn mail-tag của các field có trong contact form bạn vừa tạo. Sau đây là ví dụ mà mình làm:

Thiết lập cho contact form

Trong đó:

  • To: bạn chọn email của người đảm nhiệm việc check contact form
  • From Subject: bạn nên đặt một cái tên nào đấy vào đây để phân biệt được nguồn gửi của contact này.
  • Message Body: thêm mail-tags vào đây để đảm bảo khi bạn nhận mail từ contact form, nó sẽ hiển thị tất cả thông tin bạn yêu cầu người dùng điền.

Cài đặt khác

Tab Message
Cài đặt tab Message của plugin contact form 7

Bạn điền thông điệp được sử dụng ở các tình huống như được hướng dẫn ở trong tab. Ví dụ như sau khi người dùng gửi form thành công hay bị lỗi, bạn nên thêm một thông báo để cho người dùng biết việc này. Hoặc khi người đọc bỏ quên một field bắt buộc nào đó, bạn cũng nên thêm một thông báo để người dùng quay lại điền vào field. Dù là những chi tiết nhỏ nhưng bạn nên để ý để nâng cao trải nghiệm người dùng nhé.

Tab Additional Settings
Cài đặt tab Additional Settings của plugin contact form 7

Tab này giúp bạn thêm các code snippets để cài đặt các phần sau:

  • Subscribers-only mode
  • Demo mode
  • Skipping mail
  • Acceptance as validation
  • Flamingo settings
  • Suppressing message storage
  • JavaScript code

Trong đó có một số phần khá hữu ích mà bạn nên dùng như:

  • Subscribers-only mode: chế độ này cho phép chỉ người dùng đã log-in vào trang web của bạn mới có thể gửi contact form. Điều này giúp loại bỏ thư spam và chỉ dành cho những ai thực sự muốn liên hệ với bạn.
  • Acceptance as validation: hỗ trợ thêm tính năng hiển thị thông báo cho Acceptance checkbox khi người dùng không tích vào ô này mà đã chuyển sang field khác. Bời vì mặc định thì nếu người dùng không chọn ô Acceptance checkbox, thông báo lỗi chỉ hiển thị ra sau khi bạn đã gửi form mà thôi. Acceptance checkbox này thường được ứng dụng để tạo các field như “tôi đồng ý với các điều khoản của trang web” nhưng trong trường hợp bạn tạo các kiểu nội dung khác, bạn có thể sẽ cần thêm Acceptance as validation.

Để tìm hiểu thêm về các tính năng khác ở tab Additional Settings, bạn có thể đọc thêm ở đây.

Hiển thị contact form lên website

Cuối cùng là bước hiển thị contact form vừa tạo lên trang web.

Vẫn ở giao diện tạo mới một form, bạn copy phần shortcode và dán vào trang (page) hay bài viết (post) bạn muốn hiển thị (Tham khảo thêm cách phân biệt page, post tại đây).

Hiển thị contact form lên website WordPress

Sau đây là kết quả cuối cùng của mình:

Contact form hiển thị ngoài front end của WordPress website

Tuy nhiên contact form của mình nhìn vẫn chưa được đẹp mắt lắm nên mình cần style lại nó một chút.

Nếu bạn muốn style lại để contact form giống với mẫu mà mình đưa ra ở đầu bài viết, bạn cần sửa đoạn HTML của form như sau để dễ style hơn:

<div class="form__field form__full-width">
    <label>Your Name (required)
        [text* your-name placeholder "enter your name"]
    </label> 
</div>
<div class="form__field">
    <label>Your Phone Number
        [number phone placeholder "enter your phone number"] 
    </label>
</div>
<div class="form__field">
    <label>Your Email (required)
        [email* your-email placeholder "enter your email"]
    </label>
</div>
<div class="form__field">
    <label>Major
        [select* major "Computer science" "Linguistics" "Agriculture" "Engineering" "eCommerce"]
    </label>
</div>
<div class="form__field">
    <label>Location to study 
        [select* Location-to-study "New York" "Chicago" "Los Angeles" "Washington D.C" "Houston" "Philadelphia"]
    </label>
</div>
<div class="form__field form__full-width">
    <label>Register to
        [checkbox* register use_label_element "Study" "Take a tour" "Consult"]
    </label>
</div>
<div class="form__field form__full-width">
[submit "Submit"]</div>

Sau đó vào Customizer của theme > Additional CSS và dán đoạn code sau vào:

#wpcf7-f330-p104-o1 .wpcf7-form {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
	padding: 20px;
	background: #eeeeee;
}
.form__field {
	width: 50%;
	padding: 0 15px;
	margin-bottom: 20px;
}
.form__field.form__full-width {
	width: 100%;
}
.form__field input:focus::placeholder {
	opacity: 0;
}
.form__field input,
.form__field select {
	width: 100%;
	color: #77818e;
	font-style: italic;
}
.form__field input::placeholder,
.form__field select::placeholder {
	color: #77818e;
}
.form__field input[type="submit"] {
	color: #4299e1;
	width: auto;
	background: #fff;
	border: 1px solid #4299e1;
}
.form__field span.wpcf7-list-item {
	margin: 10px 20px 0 0;
	display: block;
}
.form__field span.wpcf7-list-item input {
	width: auto;
}
.wpcf7-checkbox {
	display: flex;
	justify-content: space-between;
}

Click Publish để lưu nữa nhé.

Ấn Publish để lưu lại contact form

Lời cuối

Lần đầu sử dụng Contact Form 7, có thể bạn sẽ thấy không quen với các đoạn HTML nếu không phải là coder. Tuy nhiên, sau khi đọc xong bài hướng dẫn này, mình nghĩ mọi thứ đã trở nên dễ dàng hơn rồi đúng không?

Nếu bạn muốn thử tạo contact form với một số công cụ khác, thì hãy đón chờ bài viết tiếp theo của mình trong series tạo contact form bằng plugin này nhé. Bạn muốn đề xuất plugin nào, hãy comment cho chúng mình biết.

Để lại bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *