Hướng dẫn tạo Form liên hệ trong WordPress dễ dàng với WPForms

Hướng dẫn tạo Form liên hệ trong WordPress với WPForms

Nếu không sử dụng Contact Form 7 thì bạn có thể sử dụng plugin nào để tạo Form liên hệ trong WordPress? Đây là một plugin khác sẽ giúp bạn trong việc này.

Như bạn đã biết, tạo Form liên hệ là một bước rất quan trọng khi bạn xây dựng một Blog hay website. Nó giúp đọc giả có thể gửi cho bạn các thông tin trao đổi, thắc mắc hay một yêu cầu hợp tác nào đó, từ đó giúp bạn và đọc giả trở nên gắn kết với nhau hơn.

Khi tạo Form liên hệ trong WordPress, chắc chắn bạn sẽ được “giới thiệu” đến plugin Contact Form 7. Tuy nhiên, nếu gặp lỗi khi sử dụng plugin này thì sao? Mình sẽ đưa ra một ví dụ và cũng là lý do mà mình không sử dụng plugin Contact Form 7.

Khi mình tạo Form liên hệ sử dụng plugin này và gắn nó vào Footer thì vô tình màu nền của nút “Gửi” lại trùng với màu của Footer, khiến mình không thấy nút “Gửi” đâu cả. Mò một lúc không được, bực mình quá nên mình quyết định tìm kiếm một plugin khác để tạo Form liên hệ.

Và mình tìm thấy một plugin khác, đó là WPForms.

Do đó, trong bài viết này, mình sẽ giới thiệu và hướng dẫn bạn cách cài đặt cũng như sử dụng plugin WPForms để tạo Form liên hệ trong WordPress.

Giới thiệu đôi chút về WPForms

WPForms là một plugin khá mạnh mẽ trong việc tạo Form liên hệ trong WordPress.

Plugin này có giao diện khá trực quan và rất dễ sử dụng.

Chỉ với các thao tác kéo thả và sắp xếp các trường thì bạn sẽ có được một Form liên hệ theo ý muốn. Điều này rất thích hợp cho những bạn không rành về code.

WPForms cũng được đội ngũ xây dựng nên plugin này đảm bảo là sẽ tương thích trên các thiết bị di động và cũng được tối ưu hóa về mặt tốc độ.

Để biết thêm nhiều tính năng và chi tiết hơn về plugin WPForms thì bạn có thể truy cập tại Đây.

Hướng dẫn tạo Form liên hệ trong WordPress với WPForms

Cài đặt plugin WPForms vào WordPress

Như bạn đã biết, để sử dụng được một plugin trên WordPress thì chúng ta cần phải cài đặt và kích hoạt nó.

WPForms cũng sẽ được cài đặt và kích hoạt tương tự như cách mà bạn đã làm với các plugin khác.

Nếu quên cách làm thì bạn có thể xem lại tại bài viết này:

Xem thêm: 02 cách cài đặt plugin WordPress chi tiết nhất

Còn đây là logo của plugin WPForms:

WPForms - Plugin tạo Form liên hệ trong WordPress
WPForms – Plugin tạo Form liên hệ trong WordPress

Tạo Form liên hệ

Sau khi cài đặt và kích hoạt thì bạn sẽ thấy nó nằm ngay trên cột tùy chọn trên trang quản trị của bạn.

Để tạo Form liên hệ mới, bạn hãy rê chuột vào phần WPForms và chọn “Add new“:

Chọn tạo Form liên hệ mới

Bạn có thể tạo một Form trống bằng cách chọn phần “Blank Form“. Với phần này thì bạn sẽ được một…form trống, sau đó thì bạn tự thêm vào các trường như là Tên, địa chỉ email, nút Gửi form,…

Hoặc chọn một template có sẵn (bạn lưu ý template có sẵn thì mình vẫn có thể thêm vào hay bỏ đi một số trường nhé)

Trong bài viết này thì mình sẽ hướng dẫn bạn tạo Form qua template có sẵn, vì mình thấy nó khá đầy đủ và cơ bản cho một Form liên hệ.

Bạn di chuyển chuột vào phần “Simple Contact Form” thì sẽ thấy hiện ra một nút “Create a simple Contact Form“, bạn nhấn vào để sử dụng template mẫu nhé.

Sử dụng template mẫu của WPForms để tạo Form liên hệ
Sử dụng template mẫu của WPForms để tạo Form liên hệ

Sau đó bạn sẽ được chuyển đến trang xây dựng Form. Như đã giới thiệu, bạn có thể thấy giao diện rất trực quan.

Bạn có thể thấy có một Form liên hệ mẫu nằm ở bên phải và các tùy chỉnh sẽ nằm ở bên trái, bạn sẽ sử dụng các tùy chỉnh này để tạo ra một Form liên hệ hoàn chỉnh.

Các tùy chỉnh này sẽ rất đơn giản nên bạn đừng lo nhé.

Giao diện trang tạo Form liên hệ với WPForms
Giao diện Form Builder trên WPForms

Bạn thấy trên Form liên hệ mẫu rất đầy đủ các trường cơ bản của một Form liên hệ.

Tuy nhiên, các trường này được viết bằng tiếng Anh (Name, first, last,…). Bạn có thể chuyển nó về tiếng Việt bằng cách chuyển sang tab “Field Options”, sau đó thay đổi sang tiếng Việt cho các trường tương ứng ở phần “Label”.

Ví dụ mình đổi trường “Name” thành “Tên của bạn”, và bạn có thể thấy nó đã được thay đổi ở bên Form mẫu:

Tùy chỉnh tiếng Việt cho các trường trong Form liên hệ
Tùy chỉnh tiếng Việt cho các trường trong Form liên hệ

Bạn cũng làm tương tự với các trường còn lại nhé.

Một điểm mình thấy hơi “dư thừa” ở form mẫu là Tên liên hệ được chia thành phần họ và phần tên. Thường thì người ta sẽ muốn điền nhanh một Form, điều này sẽ phần nào khiến họ cảm thấy “khó chịu” và “mất thời gian”

Do đó, bạn có thể gộp hai phần này lại thành một.

Để làm điều này, bạn cũng chuyển sang tab “Field Options” và chọn trường “Name” (mình đã Việt hóa nó thành “Tên của bạn”).

Ở phần “Format“, bạn chọn “Simple” là nó sẽ gộp Tên và Họ thành một trường duy nhất.

Gộp trường First name và Last name trên Form liên hệ
Gộp trường First name và Last name trên Form liên hệ

Đối với mỗi trường sẽ có thuộc tính “Required” (như số 2 ở hình bên trên), nếu bạn muốn trường đó bắt buộc người điền form phải điền vào thì tick vào thuộc tính này, còn nếu là tùy chọn thì bạn có thể tick bỏ nó.

Bên trên là những tùy chỉnh mà bạn có thể thực hiện với các trường mà người dùng sẽ điền vào.

Tiếp theo, chúng ta sẽ tùy chỉnh tên của Form liên hệ và nút Submit nhé.

Bạn hãy chuyển sang phần “Setting“, ở tab “General“:

  • Form Name: bạn có thể thay đổi tên của Form liên hệ ở trường này
  • Form Description: phần mô tả form liên hệ
  • Submit button text: thay đổi tên của nút Submit, ví dụ mình đổi nó thành “Gửi”
  • Submit button Processing Text: thông báo khi bạn nhấn nút “Gửi”, ví dụ “đang gửi” hay “đang xử lý” như mình đã điền như hình dưới:
Tùy chỉnh nút Submit trên Form liên hệ
Tùy chỉnh nút Submit trên Form liên hệ

Tiếp đến là một phần cực kỳ quan trọng khi tạo Form liên hệ.

Ở bước này, bạn sẽ phải điền vào email liên hệ của bạn mà khi đọc giả gửi form, nó sẽ chạy vào email này. Do đó bạn không được điền sai nhé.

Bạn chuyển sang tab “Notifications”điền email liên hệ vào phần “Send To Email Address”.

Đối với phần “Email Subject” sẽ là tiêu đề mail khi đọc giả liên hệ với bạn hay khi bạn phản hồi mail đến đọc giả.

Còn những phần khác thì bạn không cần quan tâm đâu.

Tùy chỉnh email nhận form liên hệ
Tùy chỉnh email nhận form liên hệ

Cuối cùng là phần thông báo khi người dùng gửi Form thành công.

Bạn chuyển sang tab “Confirmation“, chọn Confirmation Type là “Message“, sau đó điền thông tin xác nhận gửi Form thành công.

Bạn có thể xem mẫu bên dưới nhé.

Tùy chỉnh phần thông báo khi gửi Form thành công
Tùy chỉnh phần thông báo khi gửi Form thành công

Sau khi hoàn thành các thay đổi, bạn tiến hành lưu lại Form bằng cách nhấn nút “Save” ở góc phải bên trên giao diện tạo Form.

Việc tiếp theo cần làm là nhúng nó vào nơi mà bạn sẽ đặt Form.

Hướng dẫn nhúng Form liên hệ vào nơi cần đặt Form

Mình sẽ ví dụ bằng cách đặt nó vào trang Liên hệ trên Blog, đây là một trang cần thiết khi bạn xây dựng một Blog.

Đầu tiên, bạn cần lấy mã nhúng của Form liên hệ đã tạo ở bước trên bằng cách click vào nút “EMBED” phía trên bên phải của trang tạo Form (kế bên nút Save)

Lưu Form liên hệ đã tạo với WPForms
Lưu Form liên hệ đã tạo với WPForms

Đây là mã nhúng (shortcode) của Form liên hệ mà bạn đã tạo.

Bạn hãy copy đoạn shortcode này để sử dụng cho bước tiếp theo nhé.

Lấy shortcode Form liên hệ trên WPForms
Lấy mã nhúng Form liên hệ trên WPForms

Ok, như đã nói, mình sẽ tạo một Form liên hệ ở trang Liên hệ trên Blog.

Giờ thì bạn vào phần chỉnh sửa trang này, dán đoạn shortcode vừa copy vào nơi bạn cần đặt Form.

ví dụ mình đặt cuối trang:

Nhúng Form liên hệ đã tạo với WPForms vào trang Liên hệ
Nhúng Form liên hệ đã tạo với WPForms vào trang Liên hệ

Vậy là xong, bạn đã hoàn thành các bước để tạo Form liên hệ trong WordPress sử dụng plugin WPForms rồi đó.

Rất dễ dàng đúng không?

Lời kết

Như vậy, ngoài việc sử dụng Contact Form 7 thì bạn có thể sử dụng plugin WPForms để tạo Form liên hệ trong WordPress.

Bạn thấy plugin này như thế nào? Có dễ sử dụng hơn Contact Form 7 hay không?

Hãy nêu ý kiến của bạn ở phần comment bên dưới và chia sẻ nếu thấy bài viết này hữu ích nhé.

Chúc bạn thành công!

 

Chia sẻ với mọi người nào!
Share on Facebook
Facebook
Pin on Pinterest
Pinterest
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

Leave a Reply

avatar
  Subscribe  
Notify of