Vài điều hay ho về WS Form

Cập nhật: 04/11/2019

Hướng dẫn một số điều cơ bản và hay ho về WS Form, plugin tạo form liên hệ cho WordPress.

Bài viết chỉ hướng dẫn nhanh, và không đi sâu vào chi tiết. Nhưng vẫn đảm bảo bạn có thể hiểu (chỉ cần cài đặt plugin, đối chiếu thứ tự các mục của plugin và nội dung bài viết này).

1. WS Form có gì hay?

Mình biết đến WS Form vài ngày trước, nhờ giới thiệu của một thành viên trong nhóm Beaver Builders.

Plugin này chỉ có 100 lượt kích hoạt trên WordPress.Org, nhưng có nhiều tính năng khá hay ho, và triển vọng sẽ nhiều người sử dụng trong thời gian tới.

Vài nét chính về plugin

Đủ các trường (field) cơ bản như: Text, Text Area, Number, Phone, URL, Email, Select, Checkbox, Radio, Submit

Chèn được nhiều nội dung (ảnh, video…) vào form:

  • Với trường Text Editor, cho phép bạn thêm nội dung như ảnh, video, bảng…vào form mà không cần đụng một dòng code.
  • Với trường Divider, Spacer: cho phép bạn tạo ra các khoảng trống, đường ngăn cách giữa các mục trong form.

Giao diện kéo thả và chia cột: Giao diện kéo thả tương tự nhiều plugin khác như Caldera Forms, WP Form,…

  • Chia cột dễ dàng: bạn có thể kéo qua trái, qua phải để chia form thành nhiều cột, hoặc tăng giảm chiều rộng các trường. Điều mình ấn tượng là khi kéo như vậy, form sẽ hiển thị 12 nền mờ mờ, để bạn biết chính xác cột đang kéo rộng bao nhiêu.

Giới hạn kí tự & định dạng

  • Bạn có thể giới hạn trường này chỉ được phép điền tối đa – tối thiểu bao nhiêu từ/bao nhiêu kí tự..
  • Bạn có thể giới hạn trường kia chỉ được phép điền theo định dạng ngày sinh, theo 9 số, 10 số điện thoại... Tính năng này gọi là Input Mask

Chia tab: Plugin cho phép chia form thành nhiều tab khác nhau. Nó giống các tab trên trình duyệt đó

Quản lí dữ liệu linh hoạt:

  • Dữ liệu ai đó điền form sẽ được gửi về trang quản lí WP Admin
  • Dữ liệu ở đây được bố trí như phần viết bài, nên có thể lọc theo thời gian, bảng chữ cái…

Nhập – Xuất: Bạn có thể xuất form ở web này để cài vào web khác!

Ẩn/Hiện trường gửi về Email: Bạn có thể thiết ẩn các trường mà bạn không muốn gửi về email

Nhiều tiện ích mở rộng với giá rẻ: Đây là tính năng mình thích nhất của plugin. WS Form bán nhiều tiện ích mở rộng với mức giá chỉ từ $20.

Đây là mức giá rẻ rất nhiều so với các plugin khác như Caldera Forms, Gravity Form, Formidable,…

Giá trị động: Hơi khó diễn tả. Ví dụ khi bạn chèn một form liên hệ có 2 trường: tên bài viết, link bài viết, nút gửi vào bài viết ABC bất kỳ. Form có thể tự động điền giá trị ABC và link bài viết vào 2 trường đó.

Form đặt ở bài nào, thì nó sẽ hiện ra tên bài, link tương ứng bài viết đó.

WS Form hỗ trợ rất nhiều giá trị động kiểu này.

Sửa được màu sắc: Sửa được màu sắc, viền, font chữ của Form!

Và còn rất nhiều thứ hay ho khác bạn có thể khám phá thêm.

Và cuối cùng giới thiệu, bạn có thể thử Demo Form (bản Pro) tại đây.

2. Cài đặt WS Form như nào?

Truy cập vào Plugin > Cài mới > Gõ “WS Form” vào ô Tìm kiếm gói mở rộng (bên phải) > Bấm Enter > Bấm Cài đặt (ở chỗ WS Form ở kết quả tìm kiếm) > Kích hoạt.

3. Thiết lập Email nhận Form

Mặc định, thông tin điền vào Form sẽ gửi về

  • Email quản lí (tại Cài đặt > Tổng quan > Địa chỉ Email)
  • và ở trang quản lí WS Form (WS Form > Submissions > Select Form > Chọn Form của bạn).

Bạn có thể đổi email nhận, bằng cách sửa Form > Bấm vào biểu tượng Tia chớp (góc phải phía trên) > Bấm vào Bánh răng (bên phải Send Email) > Kéo xuống mục To.

Bạn sẽ thấy 2 cái là:

  • Email Address: #blog_admin_email (email này xem tại Cài đặt > Tổng quan > Địa chỉ email)
  • Display Name: #blog_name (Đây là tên website, xem tại Cài đặt > Tổng quan > Tên website)

Bạn có thể sửa #blog_admin_email và #blog_name bằng email/tên cụ thể, ví dụ: [email protected], Blog của Linh.

Nếu bạn muốn thông tin form gửi về cho nhiều người nhận, thì bấm vào Dấu cộng, ngay dưới Display Name một tí.

Sau đó gõ thêm Email/Tên người nhận thôi! Bạn thêm bao nhiêu cũng được.

Lưu ý là form chỉ gửi về email, nếu hosting không chặn email (hỏi hosting để biết chặn hay không, nếu bị chặn thì cài đặt SMTP, Google rất nhiều hướng dẫn)

4. Sửa thông báo Tiếng Anh

Một số thông báo mà bạn có thể sửa được là:

Thank you for your inquiry (xuất hiện khi bấm nút gửi form) Bấm vào biểu tượng Tia chớp (góc phải phía trên) > Bấm vào Bánh răng (bên phải Show Message) > Kéo xuống gần dưới, bạn sẽ thấy khung soạn thảo có ghi từ “Thank you for your inquire”.

Sửa lại bằng lời nhắn Việt rồi bấm Save (phía dưới khung đó).

Please provide a valid…: Di chuột vào từng trường cần sửa > Bấm bánh răng > Bấm tab Advanced > Kéo xuống Validation > Gõ vào khung bên dưới Invalid Feedback Text.

5. Chuyển hướng form sau khi điền

Bấm vào biểu tượng Tia chớp (góc phải phía trên) > Bấm vào Dấu cộng > Xóa từ New Action và gõ lại Redirect > Tại Action: chọn Redirect > Điền liên kết cần chuyển hướng vào URL.

6. Ẩn các trường để không gửi về Email

Nếu có trường nào đó, bạn không muốn gửi về email. Chỉ cần di chuột vào Trường (Filed) cần sửa > Bấm vào bánh răng ngay bên phải đó > Kéo xuống dưới cùng của khung bên phải web > Đánh dấu vào Exclude from emails

7. Giới hạn số kí tự/từ tối thiểu tối đa

Chỉ có một số trường hỗ trợ cái này thôi, tiêu biểu là Text, Text Area…(và một số khác bạn có thể tự khám phá).

Di chuột vào trường cần giới hạn > Bấm bánh răng bên phải đó > Bấm vào tab Advanced của khung hiện ra bên phải web > Kéo xuống mục Restrictions

  • Minimum/Maximum Characters: Số kí tự tối thiểu/tối đa
  • Minimum/Maximum Words: Số từ tối thiểu/tối đa

8. Thiết lập định dạng (ngày sinh, số điện thoại)

Chỉ một số trường hỗ trợ điều này, điển hình là Text, Phone, Text Area và Password.

Di chuột vào trường cần giới hạn > Bấm bánh răng bên phải đó > Bấm vào tab Advanced của khung hiện ra bên phải web > Kéo xuống mục Input Mask.

Quy tắc

  • a: được phép điền chữ cái in thường (a tới z) hoặc in hoa (A tới Z)
  • A: chỉ được phép điền chữ in hoa (A tới Z)
  • 9: chỉ được phép điền số (0 – 9)
  • *: được phép điền số và chữ (a – z, A – Z, 0 – 9)
  • &: được phép điền số và chữ in hoa (A – Z, 0 – 9)

Ví dụ:

  • 999-999-9999: chỉ được phép điền tối đa 10 số, với dấu gạch giữa ở giữa các số
  • AA-999: chỉ được phép điền tối đa 2 chữ cái in hoa và 3 số
  • … tự khám phá thêm nhá

Bạn có thể kết hợp thêm việc giới hạn số kí tự/từ tối thiểu/tối đa để tăng sức mạnh của việc định dạng!

9. Thêm Class CSS vào form

WS Form cho phép bạn thêm Class cho Trường, và thẻ cha của trường.

Di chuột vào trường > Bấm bánh răng > Bấm tab Advanced > Classes > và điền Class thôi.

10. Thêm ảnh, video

WS Form cho phép chèn trường Text Editor vào Form. Với trường này bạn có thể thêm ảnh, video, bảng,…hoặc bất cứ nội dung gì vào Form, như đang viết bài ấy.

Quá hay, chứ thấy form miễn phí nào có chức năng này như WS Form!

Chèn Text Editor > Bấm bánh răng > Nhìn khung bên phải > Thêm nội dung > Lưu lại (Save)

11. Xem dữ liệu gửi về ở đâu

Như đã nói ở mục 3, dữ liệu form gửi về cả Email, và phần quản lí WS Form.

Để xem dữ liệu gửi về phần quản lý, truy cập vào WS Form > Submissions > Chọn form từ Select Form > Bạn sẽ thấy danh sách các dữ liệu.

12. Sửa màu sắc form ở đâu

Truy cập vào Giao diện > Tùy biến > WS Form > Bạn sẽ thấy các tùy chọn

  • Colors (màu sắc)
  • Typography (font chữ)
  • Borders (viền)
  • Transition
  • Advanced (Nâng cao): Bản free chỉ cho phép sửa khoảng cách các trường (Gutter)

Tự đổi từng cái, và xem phần xem trước form bên phải, để biết chúng có nghĩa là gì nhá!

13. Giá trị động

Như đã nói ở phần giới thiệu (1), thì giá trị động tạo ra sức mạnh cho nhiều plugin Form hiện nay, và WS Form hỗ trợ rất nhiều giá trị.

Xem danh sách các giá trị tại đây

Để chèn các giá trị vào trường, di chuột vào trường bất kỳ > Bấm bánh răng > Nhìn khung bên phải, và kéo chuột lên xuống, một số mục sẽ xuất hiện biểu tượng Hamburger (3 gạch song song) > Bấm vào đó bạn sẽ chèn được các giá trị này.

Các giá trị động này bằng đầu bằng dấu #, và có hơn 30 giá trị khác nhau. Bạn tự khám phá từng cái nhá.

14. Import – Export

Sửa form cần xuất khỏi web > Bấm vào biểu tượng tải (mũi tên trỏ xuống, ở góc phải phía trên)

Để nhập một form đã xuất vào web khác > Bấm vào biểu tượng mũi tên trỏ lên (nằm bên trái mũi tên trỏ xuống)

15. Di chuyển tên Trường, xuống dưới mục Nhập

Ví dụ trường Họ tên thì Họ tên (nằm trên) – Ô nhập (nằm dưới).

Nếu bạn muốn đảo lại thứ tự này > Sửa trường > Bấm bánh răng > Bấm tab Basic > Kéo xuống Label Position > Chọn Bottom > Save lại.

16. Tiện ích bổ sung

WS Form có rất nhiều tiện ích bổ sung, giá rẻ, và rất hay ho. Mình xin giới thiệu một vài tiện ích mà mình nghĩ có lẽ bạn sẽ cần.

Zendesk ($20): Gửi dữ liệu form về Zendesk và chuyển thành Ticket

Zapier ($10): Kết nối Zapier với WS Form.

Với Zapier bạn sẽ làm một đống thứ hay ho với web, ví dụ đẩy dữ liệu từ Form về Google Sheet. Zapier free cho phép tạo 5 Zap.

User Management ($20): Tạo form đăng kí, đăng nhập cho thành viên. Nếu bạn sử dụng Caldera Forms, Gravity, Formidable, bạn sẽ phải trả ít nhất 75$ để có chức năng này.

WooCommerce ($49): Tùy chỉnh sản phẩm WooCommerce với WS Form.

Nhìn demo của nó thấy cực kỳ hấp dẫn luôn!!!

Post Management ($20): Tạo form đăng bài cho WordPress.

MailChimp ($20): Sau khi bấm nút gửi form, sẽ tự động đăng ký email của người điền vào Mailchimp luôn.

PayPal Checkout ($30): Tạo form có chức năng thanh toán với PayPal.

Google Sheets ($20): Gửi dữ liệu form về Google Sheets. Nhìn ngon hơn Contact Form hoặc Caldera Forms.

Và một tá tiện ích khác.

17. Tìm hỗ trợ

Plugin này đang ít người xài nên hơi khó tìm hỗ trợ. Bạn có thể tìm thấy hỗ trợ từ các nguồn sau

  • WSForm.com: rất nhiều bài viết hướng dẫn có sẵn
  • Ticket: bạn cũng có thể gửi yêu cầu hỗ trợ cho WS Form. Tuy nhiên mình không chắc là bản free có được hỗ trợ không. Nhưng cứ thử gửi đi, mình từng gửi, họ vẫn trả lời á.
  • Fanpage: Fanpage chính thức của blog. Mình đang sử dụng WSForm cho một số web, nên vẫn sẽ hỗ trợ được cho bạn.
  • Bình luận: Hãy bình luận vấn đề bên dưới, mình sẽ giải đáp trong 1 – vài ngày.

Đặt câu hỏi nào!!!

avatar
  Nhận thông báo  
Thông báo về