Cách tạo form liên hệ trong website WordPress

Là chủ sở hữu website, bạn chắc chắn nên tìm hiểu cách thêm form liên hệ vào WordPress. Website của bạn không phải là một thực thể ẩn danh. Hầu hết mọi người muốn biết và đôi khi tương tác với bất cứ ai đứng sau nội dung họ đọc.

Vì lý do đó,  chúng ta sẽ tìm hiểu cách thêm form liên hệ vào website WordPress của mình.

Tại sao bạn nên sử dụng form liên hệ trên website WordPress của mình?

From liên hệ để sử dụng làm một hình thức liên lạc trên website

Có nhiều lý do tốt để sử dụng một hình thức liên lạc trên website của bạn thay vì đăng trực tiếp địa chỉ email của bạn chẳng hạn.

  • Bảo vệ khỏi thư rác – Thư rác là dịch hại. Điều kẻ gửi thư rác làm là tự động quét website để tìm địa chỉ email không được bảo vệ để họ thêm chúng vào danh sách gửi thư. Form liên hệ giữ điều đó xảy ra bằng cách cho khách truy cập cơ hội liên lạc mà không công bố địa chỉ trực tuyến.
  • Hỏi thông tin chính xác – Những người liên lạc với bạn không phải luôn gửi tất cả thông tin bạn cần. Nó cũng cung cấp đến bạn cách để lọc yêu cầu, ví dụ như theo loại.
  • Thông báo đến khách hàng của bạn – Ngược lại, form liên hệ cũng có khả năng đóng vai trò là điểm thông tin đầu tiên. Bao gồm thông tin đến người gọi để cho họ biết về thời gian phản hồi dự kiến ​​cùng các bước họ có khả năng thực hiện trước để giải quyết yêu cầu của họ. Điều này làm giảm khả năng nhiều email từ cùng một người thiếu kiên nhẫn.

Thuyết phục rằng các hình thức liên lạc là hữu ích? Sau đó, hãy đến phần thực tế của hướng dẫn này.

Cách thêm một mẫu liên hệ trong WordPress với mẫu liên hệ 7

Có vô số plugin WordPress để thêm hình thức liên lạc vào website của bạn, cả miễn phí và cao cấp. Với hướng dẫn sau, chúng tôi sẽ sử dụng Contact Form 7.

Plugin có sẵn miễn phí trong thư mục WordPress và luôn nằm trong số các plugin phổ biến nhất mọi thời đại (trên thực tế, tại thời điểm viết bài này, nó ở vị trí đầu tiên). Ngoài ra, nó dễ sử dụng, có một danh sách tính năng đẹp và các tiện ích bổ sung hợp lý.

Đó là lý do tại sao chúng tôi chọn nó để dạy bạn cách thêm form liên hệ trong WordPress.

Bước 1. Cài đặt Plugin Contact Form 7

Cài đặt Plugin Contact Form 7

Cài đặt Contact Form 7 dễ dàng như mọi plugin WordPress khác. Chỉ cần đăng nhập vào website, đi đến Plugins > Add New và nhập tên nó vào hộp tìm kiếm.

Nó sẽ xuất hiện ở nơi đầu tiên. Nhấp Cài đặt ngay để tải xuống trên website bạn. Khi xong, bấm Kích hoạt để bắt đầu sử dụng plugin.

Bước 2. Tạo mẫu liên hệ mới của bạn

them-form-lien-he-vao-website-wordpress-cua-ban
Tạo mẫu liên hệ mới của bạn

Khi đã cài đặt, bạn sẽ tìm thấy mục menu mới có tên Contact ở thanh bên WordPress của bạn. Nhấp vào nó sẽ đến màn hình này.

Bạn sẽ nhận được vài chú giải công cụ để khiến form liên hệ của bạn tốt hơn như sử dụng chức năng chống spam.

Bạn cũng sẽ tìm thấy danh sách mọi hình thức liên lạc ở website bạn. Gồm mẫu mà về mặt lý thuyết, bạn có khả năng sử dụng ngay. Nhấp vào nó để bắt đầu chỉnh sửa hoặc nhấn Add New ở đầu màn hình.

Để làm việc, hình thức liên lạc của bạn cần các trường. Các trường là nơi khách truy cập nhập tên, địa chỉ email hoặc tin nhắn họ muốn gửi cho bạn hoặc bất cứ điều gì khác mà bạn có khả năng muốn họ thêm vào.

Contact Form 7 tạo ra những thứ có chút HTML cộng với thẻ tùy chỉnh. Tất cả mọi thứ giữa <label>…</label> biểu thị trường của form liên hệ của bạn cộng với mô tả văn bản thuộc về nó. Các trường thực tế được tạo bởi những gì giữa dấu ngoặc vuông.

Điều đó có nghĩa là để tạo hình thức liên lạc, bạn cần học ngôn ngữ lập trình? plugin đi kèm công cụ để tạo ra chúng tự động.

Bước 3. Cấu hình biểu mẫu của bạn

them-form-lien-he-vao-website-wordpress-cua-ban
Cấu hình biểu mẫu của bạn

Hiện tại, biểu mẫu mặc định chúng tôi có ở phía sau sẽ trông như thế này trên trang.

Giả sử bạn muốn thêm menu thả xuống để chọn mục đích liên lạc với bạn. Bằng cách đó, bạn có khả năng thấy ngay những thông điệp cần ưu tiên.

Để làm như vậy, trước tiên bạn cần đặt con trỏ ở nơi bạn muốn menu xuất hiện trong form liên hệ.

Nhấp vào menu thả xuống trên thanh công cụ trên cùng.

Đây là cách điền vào các trường khác nhau:

  • Field type – Chọn xem trường có bắt buộc phải gửi form liên hệ hay không.
  • Name – Điều này biểu thị tên được sử dụng trong thẻ. Nó sẽ không xuất hiện cho khách truy cập nhưng giúp bạn dễ nhớ mục đích của thẻ hơn và cũng định cấu hình email được gửi đến tài khoản của bạn sau này.
  • Options – Nhập các tùy chọn khả dụng cho khách truy cập bằng menu thả xuống.
  • Id/Class attribute – Ở nơi này, bạn có khả năng gán một lớp CSS hoặc id cho trường. Điều này rất hữu ích cho phong cách tùy chỉnh. Chúng ta sẽ nói về nó sau.

Khi bạn hài lòng, nhấp vào Insert Tag để đặt nó vào biểu mẫu.

Bây giờ tất cả những gì còn lại là thêm nhãn. Đó là văn bản đi kèm trường mẫu liên hệ để giải thích những gì nó làm. Chỉ cần sao chép và dán mã hiện có từ các trường khác và sau đó điều chỉnh nó theo nhu cầu của bạn.

Bước 4. Chỉnh sửa cài đặt email

Tiếp theo, bạn phải định cấu hình email được gửi cho bạn từ form liên hệ. Không có gì đáng ngạc nhiên, bạn làm điều này dưới tab Mail ở trên cùng.

Bạn sẽ tìm thấy các trường được điền sẵn các thẻ tương tự như form liên hệ trước đó. Nó cũng cung cấp cho bạn các thẻ trường có sẵn bao gồm bất kỳ thẻ mới nào bạn đã tạo trước đó (nếu bạn đã lưu biểu mẫu). Bạn có khả năng sử dụng chúng để tùy chỉnh cách bạn sẽ nhận được tin nhắn từ form liên hệ của bạn.

Chỉnh sửa cài đặt email

Dưới đây là ý nghĩa của từng lĩnh vực:

  • To – Địa chỉ email mà tin nhắn sẽ được gửi. Bạn thường có khả năng để điều này là như vậy.
  • From – Người gửi email. Theo mặc định, nó được đặt thành tên của người sử dụng form liên hệ của bạn.
  • Additional Headers – Không gian cho các trường tiêu đề thư bổ sung.
  • Message Body– Phần thân của email bạn sẽ nhận được.
  • Exclude lines with blank mail-tags from output– Khi bạn kiểm tra điều này, nếu bất kỳ thẻ nào được sử dụng đều trống, plugin sẽ loại trừ chúng khỏi thư.
  • Use HTML content type– Theo mặc định, tin nhắn được gửi bằng văn bản thuần túy. Chọn hộp này để sử dụng HTML thay thế.
  • File Attachments – Nếu biểu mẫu của bạn cho phép tải lên tệp, các thẻ cho các tệp này thuộc về đây. Bạn cũng có khả năng sử dụng nó để đính kèm các tập tin được lưu trữ trên máy chủ của bạn .
  • Mail (2) – Một mẫu thư bổ sung thường được sử dụng làm thư trả lời tự động. Kiểm tra để kích hoạt.

Các tùy chọn tiêu chuẩn là khá tốt.

Sử dụng định dạng trên, giờ đây bạn có khả năng cài đặt bộ lọc trong chương trình thư của mình để sắp xếp thư theo dòng chủ đề, ưu tiên cho các yêu cầu kinh doanh. Đó là tất cả về cài đặt thư bây giờ.

Bước 5. Thêm một tin nhắn mẫu

Tiếp theo là tab Messages. Bạn có khả năng định cấu hình thư mà khách truy cập của bạn có khả năng gặp trong khi sử dụng biểu mẫu.

them-form-lien-he-vao-website-wordpress-cua-ban
Tab Messages của contac from 7

Đây là các thông báo lỗi, thông báo thành công hoặc chỉ là gợi ý về cách sử dụng biểu mẫu một cách chính xác.

Bước 6. Tùy chỉnh cài đặt bổ sung

them-form-lien-he-vao-website-wordpress-cua-ban
Tùy chỉnh cài đặt bổ sung

Cuối cùng, bạn có được các cài đặt bổ sung.

Theo mặc định, đây là trống. Bạn có khả năng làm những việc khác nhau – từ việc giới hạn khả năng chỉ những người đã đăng nhập mới gửi form liên hệ để đặt biểu mẫu thành chế độ demo cho mục đích thử nghiệm.

Xem thêm: 8 Plugins diễn đàn tốt nhất WordPress 2020

Bước 7. Thêm biểu mẫu vào website của bạn

Bây giờ bạn đã hoàn tất việc định cấu hình biểu mẫu, đã đến lúc tải nó lên website của bạn. Điều đầu tiên bạn cần làm là lưu biểu mẫu thông qua nút cùng tên.

Trước khi bạn làm điều đó, bạn có khả năng muốn thêm một tên vào đầu. Điều này sẽ khiến biểu mẫu dễ phân biệt hơn trong trường hợp bạn tạo một vài cái.

Khi bạn đã lưu biểu mẫu, mã ngắn sẽ xuất hiện trên màn hình:

Bạn sử dụng nó để đặt mẫu bất cứ nơi nào bạn muốn. Điều đầu tiên bạn cần  làm là đánh dấu rồi sao chép nó. Khi đã xong, đi đến trang mà bạn muốn đặt biểu mẫu. Ví dụ: bạn có khả năng chỉ cần tạo trang mới rồi đặt tên là Contact. Dán shortcode vào trình soạn thảo WordPress.

Khi bạn xuất bản trang và đi đến giao diện người dùng sẽ thấy biểu mẫu xuất hiện.

Bước 8. Bao gồm một hình thức liên lạc trong một thanh bên (Tùy chọn)

Thêm tiện ích văn bản vào bất kỳ đâu bạn muốn form liên hệ xuất hiện và dán mã ngắn

Không có gì dễ dàng hơn việc đặt form liên hệ ở thanh bên. Chỉ cần đi đến Appearance > Widgets. Thêm tiện ích văn bản vào bất kỳ khu vực phụ tùng nào bạn muốn form liên hệ xuất hiện và dán mã ngắn.

Lưu widget!

Form liên hệ trong WordPress – Các bước tiếp theo

Khi bạn có biểu mẫu trên website, công việc sẽ không kết thúc. Vẫn còn điều quan trọng cần quan tâm, ví dụ như tạo kiểu cho biểu mẫu, bảo vệ nó khỏi những kẻ gửi thư rác rồi thực hiện các biện pháp bảo vệ dữ liệu cá nhân:

Thay đổi thiết kế mẫu

Lý tưởng nhất, không cần phải thay đổi kiểu dáng của mẫu liên hệ của bạn.

 

Như đã đề cập, Contact Form 7 có đánh dấu HTML tiêu chuẩn. Bạn có khả năng chỉ cần thay đổi CSS được liên kết và do đó giao diện của biểu mẫu. Chỉ cần lưu ý rằng điều này cũng có hậu quả đối với các trường đầu vào khác trên website của bạn có cùng đánh dấu.

Ngoài ra, mọi hình thức được tạo bằng Contact Form 7 đều đi kèm với một mã dành riêng cho plugin. Bạn sẽ tìm mã bằng cách sử dụng các công cụ dành cho nhà phát triển trong trình duyệt của mình.

Nếu bạn muốn nhận được cụ thể hơn nữa và chỉ thay đổi kiểu dáng cho các hình thức cụ thể, mọi Contact Form 7 đều có id CSS riêng.

Bạn có khả năng sử dụng điều này để nhắm mục tiêu yếu tố trên cơ sở mỗi hình thức. Ngoài ra, có khả năng cung cấp cho thành phần trên biểu mẫu các lớp và id CSS của riêng chúng.

Nói tóm lại, bất cứ điều gì bạn muốn thay đổi thiết kế biểu mẫu, bạn đều có mọi công cụ để làm điều đó.

Thực hiện bảo vệ thư rác

Spam là vấn đề lớn khi nói đến web hay website nói chung. Nếu bạn để địa chỉ email không được bảo vệ trên website bạn, có vô số chương trình tự động sẽ nhận chúng rồi bắt đầu gửi cho bạn ưu đãi không mong muốn, email giới thiệu vv….

Thật không may, điều tương tự cũng đúng với hình thức liên lạc. Trừ khi bạn đặt biện pháp tại chỗ để ngăn chặn nó, còn có chương trình có khả năng gửi cho bạn thư rác thông qua hình thức liên lạc.

Chống spam Contact Form 7

Contact Form 7 cung cấp những cách dễ dàng để ngăn chặn điều này. Một trong số đó rất đơn giản: bao gồm một quiz vào biểu mẫu của bạn mà bots không thể trả lời, giống như một phương trình đơn giản.

Bên cạnh đó, còn có reCAPTCHA. Đây là dịch vụ của Google để chống thư rác. Bạn cần một khóa API và tích hợp nó với Contact Form 7. Tuy nhiên điều này có khả năng có hậu quả để bảo vệ thông tin cá nhân.

Bạn có khả năng sử dụng thẻ reCAPTCHA để thêm nó vào biểu mẫu của bạn. Nhà sản xuất Contact Form 7 cũng có một plugin Captcha có tên là  Very Simple CAPTCHA mà bạn có khả năng sử dụng cho cùng một mục đích.

Bạn cũng có khả năng sử dụng plugin bên thứ ba để chống spam. Tất nhiên, nổi tiếng nhất là Akismet và Contact Form 7.

Có những thứ khác, ví dụ như  Contact Form 7 Honeypot hoặc WPBruiser. Đối với phần sau, bạn cần một tiện ích mở rộng phải trả tiền để nó hoạt động với Contact Form 7. Ngoài ra còn có nhiều tùy chọn khác mà bạn có khả năng tìm thấy dễ dàng.

Lưu ý quan trọng: Form liên hệ và GDPR

Lưu ý quan trọng Form liên hệ và GDPR

Bạn có khả năng biết rằng gần đây đã có thay đổi đối với luật riêng tư Internet ở châu Âu. Vào ngày 25 tháng 5 năm 2018, Quy định bảo vệ dữ liệu chung (GDPR) có hiệu lực.

Nó mang lại thay đổi cho luật liên quan đến việc sử dụng thông tin cá nhân trực tuyến. Nó cũng đe dọa tiền phạt nặng cho bất kỳ ai vi phạm quy định.

Tại sao điều đó quan trọng? Contact Forms thu thập dữ liệu cá nhân. Vì lý do đó, bạn cần chú ý đến vài điều:

Dưới đây, bạn sẽ tìm thấy vài mẹo về cách khiến Contact Forms tuân thủ GDPR.

Mẹo để làm cho mẫu liên hệ của bạn tuân thủ GDPR

Dưới đây là cách xây dựng các form liên hệ có ý thức bảo mật:

  • Không thu thập dữ liệu bạn không cần – Form liên hệ cung cấp lựa chọn bao gồm các trường. Nếu có bất kỳ dữ liệu nào bạn không thực sự cần, hãy ngừng thu thập nó.
  • Vô hiệu hóa bất kỳ theo dõi nào – Nếu bạn đang sử dụng form liên hệ theo dõi cookie, tác nhân người dùng và/hoặc IP người dùng, bạn cần phải tắt tính năng này để tuân thủ GDPR. Contact Form 7 dường như không có, vì vậy không có gì để làm. Kiểm tra hình thức liên lạc của bạn lựa chọn nếu bạn sử dụng bất cứ điều gì khác.
  • Có được sự đồng ý tuyệt đối – Thêm vào biểu mẫu của bạn để mọi người đồng ý cho bạn thu thập dữ liệu của họ.
  • Có chính sách bảo mật tại chỗ – Nói về điều đó, theo GDPR, mọi website chuyên nghiệp cần hiển thị chính sách bảo mật giải thích dữ liệu họ thu thập và cách họ sử dụng dữ liệu đó. Bạn cũng cần cung cấp cho khách truy cập khả năng yêu cầu dữ liệu cá nhân của họ và xóa dữ liệu đó. Đây là một chủ đề phức tạp hơn chúng ta có khả năng đề cập ở đây. Sử dụng liên kết dưới đây để tìm thêm thông tin.
  • Triển khai HTTPS – Sử dụng SSL / HTTPS mã hóa việc trao đổi dữ liệu giữa trình duyệt và máy chủ. Điều này rất quan trọng đối với các hình thức liên lạc để giữ an toàn cho dữ liệu cá nhân. Nó cũng được coi là thực tế phổ biến bây giờ.

Các plugin Contact Form tuyệt vời khác cho WordPress

Ngoài Contact Form 7, còn có rất nhiều plugin khác để tạo các mẫu liên hệ trong WordPress. Dưới đây là một vài ứng cử viên tốt khác.

Jetpack Forms  (miễn phí)

Jetpack là bộ plugin mạnh mẽ được sản xuất bởi WordPress.com

Jetpack là bộ plugin mạnh mẽ được sản xuất bởi WordPress.com (xem phần so sánh của chúng tôi về WordPress.org và WordPress.com ). Chúng bao gồm một mô-đun để tạo các hình thức liên lạc. Khi bạn bật nó, bạn có khả năng bắt đầu nhập biểu mẫu vào website WordPress của mình ngay từ trình chỉnh sửa bài đăng và trang.

Dưới đây là một số tính năng nổi bật:

  • Nhanh chóng và dễ dàng để sử dụng
  • Thông báo qua email để cho bạn biết về việc gửi biểu mẫu
  • Thực hiện bất kỳ điều chỉnh nào từ bên trong trình chỉnh sửa WordPress
  • Một giải pháp tuyệt vời để tạo các hình thức đơn giản

Khi bạn sử dụng biểu mẫu Jetpack, hãy đảm bảo thực hiện một số loại bảo vệ chống spam.

HappyForms (miễn phí)

HappyForms là một plugin contact from tương đối mới trên thị trường

Logo HappyForms tương đối mới trên thị trường. Nó tích hợp với WordPress Customizer, giúp bắt đầu thực sự dễ dàng. Bên cạnh đó, nó có các tính năng sau:

  • Nhẹ và nhanh
  • Hoàn toàn miễn phí để sử dụng (nhưng đi kèm với thương hiệu)
  • Cho phép bạn tạo biểu mẫu thông qua kéo và thả
  • Hiển thị các lần gửi biểu mẫu trong bảng điều khiển WordPress
  • Đi kèm với bảo vệ thư rác tích hợp

Contact Form 7 (miễn phí)

Contact Form 7 giúp bạn quản lý nhiều form liên hệ khác nhau với giao diện cơ bản

Với Contact Form 7, bạn có khả năng quản lý nhiều form liên hệ khác nhau với giao diện cơ bản dễ sử dụng. Họ cũng có một phiên bản cao cấp, nhưng nó có nghĩa là một đóng góp. Phí bảo hiểm không thực sự làm hoặc cung cấp bất cứ điều gì (ngoài hoạt hình tải chuột mới).

  • Nhanh chóng và dễ dàng để sử dụng
  • Bạn có khả năng điều chỉnh bên trong WordPress
  • Logic điều kiện cho các hình thức liên lạc
  • Tùy chọn miễn phí tuyệt vời.

Ninja Forms  (freemium)

them-form-lien-he-vao-website-wordpress-cua-ban
Plugin Ninja Froms xây dựng biểu mẫu thông qua giao diện thân thiện với người dùng

Plugin này đồng ý bạn xây dựng biểu mẫu thông qua giao diện thân thiện với người dùng. Nó có phiên bản miễn phí nhưng cũng cung cấp phiên bản cao cấp với tính năng bổ sung, tiện ích bổ sung, hỗ trợ, bố cục vv… Bao gồm:

  • Dễ dàng kết nối với các dịch vụ tiếp thị email phổ biến
  • Khả năng chấp nhận thanh toán thông qua các hình thức của bạn
  • Đồng bộ hóa các biểu mẫu với CRM như Salesforce

Tư cách thành viên cho Ninja Forms có giá $ 99 / năm trở lên.

Gravity Forms (cao cấp)

them-form-lien-he-vao-website-wordpress-cua-ban
Gravity Forms có giao diện người dùng tốt và hệ thống hỗ trợ tuyệt vời

Gravity Forms có lẽ là giải pháp cao cấp phổ biến nhất. Nó khá tiên tiến, có giao diện người dùng tốt và hệ thống hỗ trợ tuyệt vời. Không giống như các mục khác trong danh sách này, plugin này chỉ là phí bảo hiểm, nhưng bạn nhận được rất nhiều tiền của mình.

  • Hơn 30 loại trường biểu mẫu
  • Một loạt các tiện ích bổ sung
  • Tải lên tập tin
  • Khả năng gửi của người dùng xuất hiện ở mặt trước
  • Biểu mẫu nhiều trang
  • Logic có điều kiện và tính toán nâng cao

Nếu bạn quan tâm đến Gravity Forms, kế hoạch của họ bắt đầu ở mức $59/ năm.

Caldera Forms  (freemium)

them-form-lien-he-vao-website-wordpress-cua-ban
Bạn có thể tạo biểu mẫu với giao diện đồ họa bằng plugin Caldera Forms

Mục cuối cùng ở danh sách này cũng đồng ý bạn tạo biểu mẫu với giao diện đồ họa. Bên cạnh đó, nó có tính năng sau:

  • Cung cấp cho khách truy cập khả năng gửi bài viết của riêng họ
  • Trả lời tự động
  • Tính năng chống thư rác
  • Các hình thức web hoàn toàn đáp ứng

Bên cạnh phiên bản miễn phí, còn có phiên bản khởi động với giá khởi điểm 6,24 đô la / tháng – 74,99 đô la/năm.

Tạo form liên hệ WordPress một cách ngắn gọn

Học cách thêm hình thức liên lạc vào WordPress là điều cần làm khi Thiết kế Website. Đó là cách quan trọng nhất để mọi người liên lạc với bạn. Hình thức liên lạc giúp website trông chuyên nghiệp hơn, bảo vệ bạn khỏi những kẻ gửi thư rác, đảm bảo bạn có thông tin bạn cần.

Viết một bình luận

0 Shares
Share
Tweet
Pin