Cách tạo contact form trong WordPress bằng plugin – P2: Dùng WPForms

Trong phần một của series “Cách tạo contact form bằng plugin”, chúng ta đã cùng tìm hiểu về contact form và cách dùng plugin Contact Form 7. Như đã hứa, mình sẽ hướng dẫn tạo contact form bằng plugin contact form khác, đó là WPForms.

WPForms là một plugin freemium dùng để thêm contact form với giao diện kéo thả đơn giản và tính năng real-time preview (giúp bạn theo dõi mọi thay đổi trên contact form ngay trong khi chỉnh sửa). Theo cảm nhận cá nhân của mình thì WPForms rất tiện lợi, đơn giản và dễ sử dụng.

Trước khi bắt tay vào tạo contact form bằng WPForms, cùng xem lại mẫu contact form mà mình đã tạo ở phần một. Trong bài viết này, chúng ta cũng sẽ tạo một contact form y hệt như vậy:

mẫu contact form mà mình đã tạo ở phần một bằng plugin contact form 7

Bước 1: Cài đặt và kích hoạt plugin WPForms

Plugin này miễn phí và có sẵn trên wordpress.org, vậy nên bạn chỉ cần cài đặt và kích hoạt plugin ngay trên Admin Dashboard. Bạn vào Plugin > Add New, tìm tên WPForms, sau đó chọn Install rồi Activate là được.

Bước 2: Tạo một contact form mới và chọn một template

Trên thanh Admin Dashboard, tìm tới mục WPForms > Add New.

Tạo một contact form mới và chọn một template trong back end của website WordPress

Giao diện của plugin sẽ hiện ra như dưới đây:

Giao diện của plugin WPForms

Trên thanh sidebar bên trái, bạn có thể thấy 5 phần với các chức năng tương ứng như sau:

  1. Setup: Đặt tên cho contact form và chọn template (contact form mẫu).
  2. Fields: Thêm và tùy chỉnh các trường thông tin (field) cho contact form.
  3. Settings: Tùy chỉnh email thông báo tới admin khi có người dùng điền vào contact form (notifications), tin nhắn xác nhận gửi tới người dùng khi đã nộp contact form thành công (confirmations) và một số cài đặt chung khác.
  4. Marketing: Liên kết với các công cụ giúp chạy chiến dịch email marketing như Constant Contact, Campaign Monitor, Mailchimp, …
  5. Payments: Thêm các lựa chọn thanh toán như PayPal Standard, Stripe, Authorize.Net.

Lưu ý: Trong ví dụ này, mình không cần chạy chiến dịch email marketing và cũng không yêu cầu người dùng phải nhập vào thông tin thanh toán. Do đó chúng ta có thể bỏ qua 2 mục là Marketing Payments.

Trong phần Setup, hãy nhập vào tên contact form và chọn template mà bạn muốn:

nhập vào tên contact form và chọn template

WPForms cung cấp cho bạn 4 template mặc định là:

  • Simple Contact Form: Form mẫu đơn giản chứa các trường thông tin cơ bản mà contact form nào cũng sẽ cần.
  • Newsletter Signup Form: Form mẫu dùng để đăng ký newsletter.
  • Suggestion Form: Form mẫu dùng để trưng cầu ý kiến người dùng bằng cách yêu cầu họ trả lời một số câu hỏi.
  • Blank Form: Form trống hoàn toàn, bạn phải tạo lại từ a – z.

Ngoại trừ Blank Form, các template còn lại đều chứa những field được thêm và điền thông tin sẵn. Bạn có thể tận dụng chúng để tiết kiệm thời gian và công sức trong việc tạo contact form. Ngoài ra, bạn cũng có thể cài đặt các addon của WPForms (trả phí) để có thêm nhiều template khác.

Trong bài viết này, mình sẽ chọn Blank Form để xây dựng một contact form từ a đến z. Làm vậy sẽ dễ hiểu và chi tiết hơn nhiều so với việc dùng contact form có sẵn để hướng dẫn.

chọn Blank Form để xây dựng một contact form từ a đến z

Bước 3: Tạo các field cho contact form

Tạo field cho contact form

Sau khi chọn template ở bước 2, bạn sẽ được chuyển tới phần Fields.

Tạo field cho contact form

Để thêm field vào contact form, hãy kéo field mong muốn trong tab Add Fields rồi thả vào contact form của bạn.

kéo field mong muốn trong tab Add Fields rồi thả vào contact form

Tiếp theo, nếu muốn tùy chỉnh field nào, bạn chỉ cần click chuột vào nó và chỉnh các thông số trong tab Fields Options.

click chuột vào field và chỉnh các thông số trong tab Fields Options.

Bên cạnh đó, bạn có thể xóa hoặc tạo thêm một bản sao của field (duplicate) bằng cách trỏ chuột vào field rồi click vào các biểu tượng như trong hình.

xóa hoặc tạo thêm một bản sao của field (duplicate) trong WPForms

Trong ví dụ này, mình sẽ cần thêm các field như sau:

Tên fieldLoại field
Your NameSingle Line Text
Your Phone NumberNumbers
Your EmailEmail
Location to StudyDropdown
MajorDropdown
Register toCheckboxes

Bạn cần thêm các field và tùy chỉnh chúng để tạo thành một contact form hoàn chỉnh theo hướng dẫn dưới đây.

Tùy chỉnh các thông số chung cho từng field

Thông thường, các tùy chọn để tùy chỉnh field được chia làm 2 loại:

Basic options (Các tùy chọn cơ bản): tất cả field đều chứa những tùy chọn này và bạn cần điền chúng để giúp cho contact form trở nên rõ ràng và dễ hiểu.

  • Label: Điền vào tên field mà bạn muốn hiển thị
  • Description: Đây là đoạn văn bản hiển thị bên dưới field để hướng dẫn người dùng phải làm gì (Ví dụ: Hãy điền vào email của bạn).
  • Required: Ô này là tùy chọn. Bạn có thể tick vào nó để yêu cầu người dùng buộc phải điền vào field.

Lưu ý là ở các bước tiếp theo, khi mình đề cập đến việc “điền vào các thông tin cơ bản” nghĩa là bạn cần nhập vào giá trị cho các tùy chọn này.

Advanced options (Các tùy chọn nâng cao): Phần này sẽ chứa một vài tùy chọn nâng cao, và các tùy chọn này sẽ khác nhau tùy từng field. Bạn có thể điền hoặc không, tuy nhiên cần chú ý tới một số tùy chọn sau:

  • Placeholder text: Đây là phần chữ hiển thị sẵn trong field trước khi người dùng nhập thông tin. Nó có thể được dùng để hướng dẫn hoặc dùng làm ví dụ giúp người dùng biết được họ cần phải làm gì. Ví dụ bạn có thể đặt Placeholder text của field email là emailcuaban@gmail.com.
  • Default value: Đây là giá trị mặc định của field. Trong trường hợp nhiều người có cùng một câu trả lời, bạn có thể đặt giá trị mặc định là câu trả lời phổ biến nhất để tiết kiệm thời gian cho người điền form. Ví dụ như bạn đang tạo một form cho dân cư sống tại thành phố Hà Nội, vậy thì giá trị mặc định của field “Tỉnh/Thành phố” nên để là “Hà Nội”.
  • CSS Classes: Bạn có thể nhập vào các đoạn mã CSS trong phần này để style lại field cho đẹp mắt. Mình cũng sẽ làm như vậy ở bước 6.

Lưu ý:

  • Trong Contact Form 7, bạn có thể sử dụng giá trị mặc định làm placeholder text. Còn WPForms thì tiện lợi hơn bởi bạn có phần Placeholder Text riêng. Bên cạnh đó, WPForms có phần Description giúp hiển thị một đoạn văn bản ở dưới field, hiển thị như vậy có vẻ thẩm mỹ hơn nên mình sẽ điền hướng dẫn vào trong mục này thay vì placeholder text.
WPForms tiện lợi hơn bởi có phần Placeholder Text riêng
  • Bạn có thể click vào dấu hỏi chấm bên cạnh các tùy chọn / field để đọc phần hướng dẫn của WPForms như hình dưới.
click vào dấu hỏi chấm bên cạnh các tùy chọn / field để đọc phần hướng dẫn của WPForms

Ngoài ra, còn một vài tùy chọn khác tùy từng field, hãy cùng mình đi tìm hiểu chi tiết ngay sau đây nhé!

Tùy chỉnh field “Your Name”

Chọn field Simple Line Text và điền vào các thông tin cơ bản sau:

Chọn field Simple Line Text và điền vào các thông tin cơ bả

Trong field này, bạn sẽ có thêm 2 tùy chọn nâng cao trong mục Advanced Options:

  • Limit Length: Tick vào đây nếu bạn muốn giới hạn số ký tự tối đa mà người dùng được điền vào field.
  • Input Mask: Nhập vào các input mask để chuyển field về các định dạng đặc biệt. Bạn có thể tìm hiểu thêm về các input mask của WPForms tại đây.
2 tùy chọn nâng cao trong mục Advanced Options của field

Tùy chỉnh field “Your Phone Number”

Field này cũng không có gì đặc biệt, bạn chỉ cần chọn field Numbers và nhập vào các giá trị cơ bản:

Tùy chỉnh field “Your Phone Number”

Tùy chỉnh field “Your Email”

Chọn field Email và điền vào các thông tin cơ bản cho field:

Tùy chỉnh field “Your Email”

Field này sẽ có thêm một tùy chọn cơ bản là Enable Email Confirmation. Bạn có thể tick vào lựa chọn này để yêu cầu người dùng cung cấp địa chỉ email của họ 2 lần, đảm bảo rằng địa chỉ email đó là chính xác.

Tùy chỉnh các field “Location to Study” và “Major”

Đầu tiên, chọn field Dropdown. Trong mục Choices, điền vào các phương án mà người dùng sẽ chọn cho “Location to study” – địa điểm học và “Major” – chuyên ngành học. Bạn có thể click (+) (-) để thêm / xóa các lựa chọn.

Tùy chỉnh các field “Location to Study” và “Major”

Ngoài ra, bạn cũng có thể click vào nút Bulk Add để thêm nhiều lựa chọn cùng lúc. Hãy điền các lựa chọn vào ô Add Choices theo thứ tự mong muốn (mỗi lựa chọn là một hàng) sau đó click Add New Choices.

Thêm các lựa chọn cho field

Ngoài ra, trong field này cũng có 2 lựa chọn nâng cao là:

  • Style: Bạn có thể style lại menu drop-down (menu dạng kéo xuống) của mình với 2 kiểu: classic và modern. Kiểu modern sẽ cho phép tìm kiếm bằng từ khóa. Do đó, bạn nên chọn kiểu này trong trường hợp menu có nhiều lựa chọn (nhiều hơn 10).
  • Dynamic Choices: Các lựa chọn được chuyển thành các post typetaxonomy. Ví dụ, nếu bạn chọn Dynamic Post Type Source Posts, mỗi lựa chọn trong menu drop-down sẽ là một bài viết trên website.
Các lựa chọn nâng cao trong field drop-down

Tùy chỉnh field “Register to”

Chọn field Checkboxes và nhập vào các lựa chọn giống như ở field Dropdown.

Tùy chỉnh field “Register to”

Field này cũng có 2 tùy chọn nâng cao mà bạn nên chú ý, đó là:

  • Use image choices: Thêm hình ảnh để giúp các lựa chọn của bạn trở nên hấp dẫn và trực quan hơn.
  • Random Choices: Sắp xếp ngẫu nhiên các lựa chọn, tránh cho việc một số người dùng chọn bừa đáp án đầu tiên.

Bước 4: Tùy biến contact form

Sau khi tạo xong contact form, chúng ta sẽ cần phải tùy biến nó một chút. Bản miễn phí của WPForms cho phép bạn tùy biến contact form với 3 mục sau:

Tùy chỉnh phần General

Phần General bao gồm các thiết lập chung cho contact form. Plugin WPForms đã cung cấp hướng dẫn cụ thể cho các chức năng trong từng phần. Bạn nên bấm vào dấu hỏi chấm bên cạnh từng mục, đọc hướng dẫn cẩn thận và chú ý vào một số field sau đây:

  • Submit Button Text: Trong plugin Contact Form 7, bạn cần phải tạo field Submit. Còn đối với WPForms, nút Submit đã được tích hợp sẵn. Bạn có thể đổi tên nút này thành Đăng ký, Nộp, Gửi Email hoặc bất cứ thứ gì bạn muốn.
  • Enable anti-spam protection: Thỉnh thoảng bạn sẽ phải đối mặt với hàng đống form rác từ những kẻ phá hoại. Lúc đó, hãy bật tính năng chống spam này lên và mọi vấn đề sẽ được giải quyết êm đẹp.
Tùy biến contact form

Tùy chỉnh Notifications

Nếu bạn muốn nhận được thông báo mỗi khi có người dùng nộp form, hãy cài đặt trong phần Settings > Notifications.

Tại đây, bạn có thể tùy chỉnh email mà bạn nhận được khi có người dùng nộp form bằng ký tự hoặc các “smart tag”. Các smart tag này có thể thêm thông tin vào contact form của bạn một cách hoàn toàn tự động (chẳng hạn như tự điền vào email admin).

Dưới đây là ví dụ về phần cài đặt của mình:

Tùy chỉnh Notifications bằng plugin WPForms

Tùy chỉnh Confirmations

Trong phần Confirmation, bạn có thể tùy chỉnh tin nhắn thông báo được gửi tới người dùng để thông báo rằng họ đã nộp form thành công.

Tùy chỉnh Confirmations
 bằng plugin WPForms

Sau khi đã tùy chỉnh xong tất cả mọi thứ, đừng quên ấn Save để lưu lại các thay đổi.

Lưu lại các thay đổi của WPForms

Bước 5: Hiển thị form trên các page / post

Để hiển thị form trên các page / post, bạn có thể làm theo hai cách như sau:

Cách thứ nhất là click vào nút Embed để hiển thị form trên một page:

Hiển thị form trên các page / post

Sau đó, hãy nhúng contact form vào một page mới (Create New Page) hoặc page có sẵn trên website (Select Existing Page).

nhúng contact form vào một page mới trong website WordPress

Cách thứ hai là chèn shortcode của contact form vào trong page / post. Bạn nên sử dụng cách này bởi nó có thể hiển thị contact form trong cả page lẫn post. Để làm điều đó, hãy tìm tới mục WPForms > All Forms trên Admin Dashboard, tìm contact form của bạn, sau đó copy đoạn shortcode như trong hình dưới đây:

Copy đoạn shortcode của form đăng ký của trường đại học

Tiếp theo, hãy dán đoạn shortcode vào page / post mà bạn mong muốn.

dán đoạn shortcode vào page / post  trong website WordPress

Và đây là kết quả:

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

Tuy nhiên, bạn có thể thấy rằng form này không giống như form mẫu mà mình đã cho bạn xem ở phần đầu đúng không nào? Vậy nên mình sẽ cần style nó lại một chút.

Bước 6: Style form

Trên thanh Admin Dashboard, tìm tới WPForms > All Forms, tìm contact form của bạn sau đó nhấn Edit.

Style lại mẫu contact form đăng ký trường đại học

Tiếp theo, click vào từng field, tìm tới mục Advanced Options > CSS Classes và thêm vào các giá trị sau:

  1. Your NameRegister to: ip-100
  2. Your Phone Number, Email, Location to Study, Major: ip-50
Thêm vào các giá trị để style lại contact form

Sau đó, tìm tới mục Customizer > Additional CSS và thêm đoạn code sau vào:

.wpforms-field-container {
    display: flex;
    flex-wrap: wrap;
		justify-content: space-between
}

.ip-50 {
    width: 48%!important;
}

.ip-100{
		width: 100%!important;
}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
div.wpforms-container-full .wpforms-form select.wpforms-field-medium {
	max-width: 100%;
}

.ip-100 ul {
	display: flex;
	justify-content: space-between;
}

div.wpforms-container-full {
    margin-bottom: 24px;
    background: #eeeeee;
    padding: 20px;
}

Cuối cùng, click Publish để lưu lại style mới của contact form.

Và đây là kết quả cuối cùng:

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

Form này trông đẹp hơn rất nhiều, đúng không nào?

Vậy là chúng ta vừa hoàn thành bước cuối cùng có một contact form hoàn chỉnh tương tự như ví dụ ở đầu bài rồi đấy.

Lời cuối

Sau khi dùng thử, mình cảm thấy WPForms dễ sử dụng và tiết kiệm thời gian hơn so với Contact Form 7 vì nó có giao diện kéo thả đơn giản. Bên cạnh đó, nó có nút submit được tích hợp sẵn cùng với 2 tùy chọn mới khá hữu ích cho mình là Placeholder textDescription. Ngoài ra thì tính năng Live Preview cũng khá tiện lợn, nó cho phép mình theo dõi các thay đổi một cách trực quan và dễ dàng phát hiện ra lỗi trong khi tạo và tùy chỉnh form.

Để tìm hiểu thêm về cách sử dụng các plugin contact form khác thì bạn đừng quên theo dõi các bài viết sắp tới trong series này nhé! Ngoài ra, nếu bạn còn bất cứ thắc mắc hay câu hỏi nào liên quan tới WPForms hoặc các plugin contact form khác, đừng ngại chia sẻ ngay với chúng mình trong phần bình luận.

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