Cách định cấu hình Biểu mẫu liên hệ 7 cho Trang web WordPress của bạn

Vào năm 2022, giữ liên lạc với khán giả của bạn là rất quan trọng. Thiết lập danh sách email với một dịch vụ như MailChimp giúp bạn cung cấp nội dung trực tiếp cho người đăng ký của mình.

Danh sách email rất tuyệt, nhưng nếu một người đọc hoặc khách hàng tiềm năng muốn liên hệ trực tiếp với bạn thì sao? Đó là nơi các biểu mẫu liên hệ xuất hiện! Trong bài viết này, chúng tôi sẽ giới thiệu cách định cấu hình plugin Contact Form 7 phổ biến cho trang web WordPress của bạn.

Cách cài đặt Biểu mẫu liên hệ 7

Contact Form 7 đã xuất hiện từ năm 2009 và nó đã thu hút được hơn 5 triệu lượt tải xuống trong thập kỷ qua. Contact Form 7 có thể được cài đặt trực tiếp từ kho plugin WordPress. Nếu bạn tìm kiếm “contact form 7”, bạn sẽ có thể tìm thấy plugin cùng với nhiều tiện ích bổ sung.

Sau khi cài đặt plugin, bạn sẽ thấy một mục menu có nhãn “Liên hệ” trong thanh bên của bảng điều khiển WordPress của bạn. Đây là nơi có thể định cấu hình tất cả các cài đặt của Biểu mẫu liên hệ 7.

Ưu và nhược điểm của việc có một biểu mẫu liên hệ

Trước khi chúng tôi đi sâu vào cách định cấu hình Biểu mẫu liên hệ 7 cho trang web WordPress của bạn, hãy nhanh chóng xem qua một số ưu và nhược điểm của việc thêm biểu mẫu liên hệ vào trang web của bạn.

Ưu điểm của việc có một biểu mẫu liên hệ

1. Biểu mẫu liên hệ cho phép người đọc, khách hàng và người hâm mộ liên hệ trực tiếp với bạn. Tùy thuộc vào mục đích của trang web WordPress của bạn, khả năng giao tiếp với bạn của khách truy cập có thể rất quan trọng. Ví dụ: không thêm biểu mẫu liên hệ vào trang web thương mại điện tử có thể gây thiệt hại về tài chính cho doanh nghiệp của bạn vì các bên quan tâm sẽ không thể liên hệ với bạn nếu họ có câu hỏi về sản phẩm của bạn.
2. Biểu mẫu liên hệ bổ sung tính hợp pháp cho trang web hoặc doanh nghiệp WordPress của bạn. Nhiều người coi sự hiện diện của biểu mẫu liên hệ như một yếu tố đáng tin cậy. Ý tưởng có thể liên hệ với bạn, chủ sở hữu trang web, làm cho nội dung của bạn đáng tin cậy hơn.

Nhược điểm của việc có một biểu mẫu liên hệ

1. Spam có thể là một vấn đề đối với các hình thức công khai như hộp nhận xét và biểu mẫu liên hệ. May mắn thay với Biểu mẫu liên hệ 7, bạn có thể lọc thư rác bằng reCAPTCHA. Bạn thậm chí có thể định cấu hình quy tắc trang Cloudflare để bảo vệ chính mình hơn nữa. Chúng ta sẽ đi sâu vào cách thiết lập tính năng bảo vệ chống spam trong Biểu mẫu liên hệ 7 ở phần sau của bài viết.
2. Sau khi thêm biểu mẫu liên hệ vào trang web của bạn, có thể bạn sẽ cần dành thời gian để trả lời tin nhắn. Đây không hẳn là một điều xấu tùy thuộc vào cách bạn nhìn nhận nó. Một số người sợ hãi quá trình trả lời email, trong khi những người khác thực sự thích nó. Theo kinh nghiệm của chúng tôi, các mối quan hệ biểu hiện từ việc có một biểu mẫu liên hệ trên trang web của bạn thường lớn hơn chi phí kiểm duyệt, vì vậy, chúng tôi khuyên bạn nên sử dụng nó!

Tổng quan về Cài đặt Biểu mẫu Liên hệ 7

Tạo biểu mẫu liên hệ với plugin Biểu mẫu liên hệ 7 cực kỳ dễ dàng. Để bắt đầu, hãy nhấp vào Liên hệ> Biểu mẫu liên hệ trong thanh bên WordPress của bạn. Trên trang này, bạn có thể xem tất cả các biểu mẫu liên hệ của mình cùng với các chi tiết siêu dữ liệu liên quan của chúng.

Khi Contact Form 7 được cài đặt lần đầu tiên, nó cũng tạo ra một biểu mẫu ví dụ. Trước khi chúng ta tìm hiểu cách tạo biểu mẫu liên hệ tùy chỉnh, trước tiên chúng ta hãy xem qua biểu mẫu ví dụ để hiểu rõ hơn về cách hoạt động của Biểu mẫu liên hệ 7. Bấm vào Mẫu liên hệ 1 để xem cài đặt biểu mẫu.

Trang “Chỉnh sửa biểu mẫu liên hệ” được chia thành bốn phần.

1. Biểu mẫu – Tùy chỉnh mẫu biểu mẫu liên hệ HTML của bạn với nhiều tùy chọn trường như “văn bản”, “email”, “hộp kiểm”, v.v. Bạn cũng có thể viết HTML tùy chỉnh trong hộp tùy chỉnh biểu mẫu.
2. Thư – Tùy chỉnh mẫu email và cài đặt được sử dụng cho email thông báo.
3. Tin nhắn – Tùy chỉnh tin nhắn được hiển thị sau các hành động cụ thể. Ví dụ: bạn có thể đặt một thông báo duy nhất để hiển thị sau khi ai đó gửi biểu mẫu liên hệ.
4. Cài đặt bổ sung – Chỉ định các đoạn trích để bật các tính năng bổ sung như chế độ chỉ dành cho người đăng ký, chế độ demo và bỏ qua thư.

Bây giờ chúng ta hãy xem xét kỹ hơn từng phần và tạo một biểu mẫu liên hệ tùy chỉnh!

Cách tạo biểu mẫu liên hệ WordPress

Để tạo một biểu mẫu liên hệ mới, hãy nhấp vào Thêm mới bên cạnh “Biểu mẫu liên hệ”.

Đặt tên cho biểu mẫu liên hệ mới và nhấp vào “Lưu”.

Trong phần “Biểu mẫu”, hãy thêm HTML cần thiết cho biểu mẫu liên hệ của bạn. Bạn có thể sử dụng các nút đặt trước khác nhau để tạo mã ngắn cho các thẻ biểu mẫu phổ biến. Để làm cho mọi thứ dễ dàng hơn, hãy xem mô tả bên dưới để biết các thẻ biểu mẫu đặt trước đi kèm với Biểu mẫu liên hệ 7.

• Văn bản – Tạo thẻ biểu mẫu cho một dòng văn bản. Các trường văn bản hữu ích cho tên, họ và các đoạn trích dựa trên văn bản khác không yêu cầu nhiều dòng.
• Email – Tạo thẻ biểu mẫu cho một địa chỉ email.
• URL – Tạo thẻ biểu mẫu cho một URL.
• Tel – Tạo một thẻ biểu mẫu cho một số điện thoại.
• Số – Tạo thẻ biểu mẫu cho một số. Không giống như các trường đầu vào “văn bản” hoặc “vùng văn bản”, các trường “số” chỉ cho phép các chữ số.
• Ngày – Tạo thẻ biểu mẫu cho một ngày.
• Vùng văn bản – Tạo thẻ biểu mẫu cho vùng văn bản. Không giống như trường nhập “văn bản” thông thường, trường “vùng văn bản” cho phép nhiều dòng văn bản. Chúng lý tưởng để nhập nội dung của thư.
• Menu thả xuống – Tạo thẻ biểu mẫu cho menu thả xuống.
• Hộp kiểm – Tạo thẻ biểu mẫu cho các hộp kiểm.
• Nút radio – Tạo thẻ biểu mẫu cho các nút radio.
• Chấp nhận – Tạo thẻ biểu mẫu cho hộp kiểm chấp nhận.
• Câu đố – Tạo một thẻ biểu mẫu cho một cặp câu hỏi – câu trả lời.
• Tệp – Tạo thẻ biểu mẫu cho trường tải tệp lên.
• Gửi – Tạo thẻ biểu mẫu cho nút gửi.

Bây giờ chúng ta hãy tiếp tục và tùy chỉnh một biểu mẫu liên hệ. Để hoàn thiện, chúng tôi sẽ tạo một biểu mẫu liên hệ sử dụng tất cả các thẻ biểu mẫu đặt trước trong Biểu mẫu liên hệ 7.

Thẻ biểu mẫu “Văn bản”

Khi bạn nhấp vào thẻ biểu mẫu đặt trước trong Biểu mẫu liên hệ 7, bạn sẽ thấy một menu bật lên giống như bên dưới. Trong menu này, bạn có thể định cấu hình cài đặt của thẻ biểu mẫu. Ở dưới cùng, bạn sẽ thấy một mã ngắn có thể được nhúng vào mẫu biểu mẫu liên hệ của bạn.

Đối với thẻ biểu mẫu “văn bản”, chúng tôi đang sử dụng cài đặt bên dưới để tạo trường nhập cho tên.

• Loại trường – Trường bắt buộc
• Tên – text-711 (được tạo tự động)
• Giá trị mặc định – Tên của bạn (được sử dụng làm văn bản giữ chỗ mặc định)
• Akismet – Bỏ chọn
• Thuộc tính ID (CSS) – cf7-your-name
• Thuộc tính lớp (CSS) – cf7-your-name

Các cài đặt này tạo ra mã ngắn bên dưới.

[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]

Hiện tại, chỉ cần nhấp vào nút Chèn thẻ để thêm thẻ biểu mẫu vào mẫu biểu mẫu liên hệ. Chúng tôi sẽ thêm nhiều thẻ HTML hơn để cấu trúc biểu mẫu sau này.

Thẻ biểu mẫu “Email”

Tiếp theo, chúng tôi sẽ tạo một thẻ biểu mẫu email cho phép biểu mẫu liên hệ của chúng tôi thu thập địa chỉ email.

Đối với thẻ biểu mẫu “email”, chúng tôi đã định cấu hình cài đặt bên dưới.

• Loại trường – Trường bắt buộc
• Tên – email-632 (được tạo tự động)
• Giá trị mặc định – Email của bạn
• Akismet – Bỏ chọn.
• Thuộc tính ID (CSS) – email của bạn
• Thuộc tính lớp (CSS) – email của bạn

Các cài đặt này tạo ra mã ngắn bên dưới.

[email* email-632 id:email class:email placeholder "Your Email"]

Thẻ biểu mẫu “URL”

Trong một số trường hợp, bạn có thể muốn có một trường đầu vào trên biểu mẫu liên hệ của mình để thu thập trang web của ai đó. Mặc dù về mặt kỹ thuật, bạn có thể sử dụng thẻ biểu mẫu “văn bản” thông thường cho việc này trong Biểu mẫu liên hệ 7, chúng tôi khuyên bạn nên sử dụng thẻ biểu mẫu “URL” để thay thế. Thẻ biểu mẫu “URL” sẽ tạo trường đầu vào xác thực URL để đảm bảo chúng được định dạng chính xác.

Đối với thẻ biểu mẫu “url”, chúng tôi đã định cấu hình cài đặt bên dưới.

• Tên – url-601 (được tạo tự động)
• Giá trị mặc định – Trang web của bạn
• Akismet – Bỏ chọn.
• Thuộc tính ID (CSS) – cf7-your-website
• Thuộc tính lớp (CSS) – cf7-your-website

Các cài đặt này tạo ra mã ngắn bên dưới.

[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]

Thẻ biểu mẫu “Điện thoại”

Tương tự như URL, bạn cũng có thể sử dụng thẻ biểu mẫu “văn bản” tiêu chuẩn để thu thập số điện thoại. Tuy nhiên, tốt hơn nên sử dụng thẻ biểu mẫu “điện thoại” để đảm bảo số điện thoại hợp lệ.

Đối với thẻ biểu mẫu “tel”, chúng tôi đã định cấu hình cài đặt bên dưới.

• Tên – tel-842 (được tạo tự động)
• Giá trị mặc định – Số điện thoại của bạn
• Thuộc tính ID (CSS) – cf7-your-phone-number
• Thuộc tính lớp (CSS) – cf7-your-phone-number

Các cài đặt này tạo ra mã ngắn bên dưới.

[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]

Thẻ biểu mẫu “Ngày”

Thẻ biểu mẫu “ngày” của Biểu mẫu liên hệ 7 cho phép bạn tạo bộ chọn ngày kiểu lịch. Trường nhập “ngày tháng” này hữu ích để chỉ định ngày cuộc hẹn trong biểu mẫu liên hệ.

Đối với thẻ biểu mẫu “ngày tháng”, chúng tôi đã định cấu hình cài đặt bên dưới.

• Tên – ngày-389 (được tạo tự động)
• Giá trị mặc định – Ngày hẹn của bạn
• Phạm vi – Phạm vi ngày tùy chỉnh của chúng tôi.
• Thuộc tính ID (CSS) – cf7-current-date
• Thuộc tính lớp (CSS) – cf7-bổ nhiệm-ngày

Các cài đặt này tạo ra mã ngắn bên dưới.

[date* date-389 min:2020-09-15 max:2020-10-24 id:cf7-appointment-date class:cf7-appointment-date placeholder "Your Appointment Date"]

Thẻ biểu mẫu “Textarea”

Thẻ biểu mẫu “textarea” cho phép bạn tạo một hộp văn bản nhiều dòng cho phép khách truy cập gửi tin nhắn dài hơn. Textareas hữu ích nhất để nắm bắt nội dung của một tin nhắn.

Đối với thẻ biểu mẫu “textarea”, chúng tôi đã định cấu hình cài đặt bên dưới.

• Tên – textarea-795 (được tạo tự động)
• Giá trị mặc định – Tin nhắn của bạn
• Thuộc tính ID (CSS) – cf7-your-message
• Thuộc tính lớp (CSS) – cf7-your-message

Các cài đặt này tạo ra mã ngắn bên dưới.

[textarea* textarea-795 id:cf7-your-message class:cf7-your-message placeholder "Your Message"]

Thẻ biểu mẫu “Menu thả xuống”

Thẻ biểu mẫu “menu thả xuống” của Contact Form 7 cho phép bạn tạo menu thả xuống với nhiều tùy chọn. Các menu thả xuống hữu ích cho các trường hợp bạn muốn khách truy cập chọn một tùy chọn cụ thể để gửi cùng với biểu mẫu. Ví dụ: nếu bạn điều hành một công ty bảo trì WordPress, bạn có thể định cấu hình menu thả xuống cho phép khách truy cập chọn giữa các dịch vụ bạn cung cấp.

Đối với thẻ biểu mẫu “menu thả xuống”, chúng tôi đã định cấu hình cài đặt bên dưới.

• Tên – menu-24 (được tạo tự động)
• Tùy chọn – Tùy chọn 1, Tùy chọn 2, Tùy chọn 3, Tùy chọn 4
• Cho phép Nhiều lựa chọn – Đã kiểm tra
• Chèn một mục trống làm tùy chọn đầu tiên – Đã kiểm tra
• Thuộc tính ID – cf7-menu thả xuống
• Thuộc tính lớp – cf7-menu thả xuống

Các cài đặt này tạo ra mã ngắn bên dưới.

[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]

Thẻ biểu mẫu “Hộp kiểm”

Thẻ biểu mẫu hộp kiểm cho phép bạn tạo các hộp kiểm HTML. Tương tự như menu thả xuống, hộp kiểm cũng có thể được sử dụng để chọn các tùy chọn được xác định trước. Tùy thuộc vào bản chất của biểu mẫu liên hệ của bạn, các hộp kiểm có thể hoạt động tốt hơn các menu thả xuống. Ví dụ: nếu bạn có một số lượng nhỏ các tùy chọn để chọn, một hộp kiểm sẽ giảm số lần nhấp cần thiết để thực hiện lựa chọn. Mặt khác, nếu biểu mẫu liên hệ của bạn có nhiều tùy chọn, menu thả xuống có thể hoạt động tốt hơn vì nó chiếm ít không gian theo chiều dọc hơn.

Đối với thẻ biểu mẫu “hộp kiểm”, chúng tôi đã định cấu hình cài đặt bên dưới.

• Tên – hộp kiểm-948 (được tạo tự động)
• Tùy chọn – Tùy chọn 1, Tùy chọn 2, Tùy chọn 3
• Bọc mỗi mục bằng phần tử nhãn – Đã kiểm tra
• Thuộc tính ID – hộp kiểm cf7
• Thuộc tính lớp – hộp kiểm cf7

Các cài đặt này tạo ra mã ngắn bên dưới.

[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]

Thẻ biểu mẫu “Radio Buttons”

Thẻ biểu mẫu “nút radio” cho phép bạn tạo các nút radio với nhiều tùy chọn. Không giống như các hộp kiểm và menu thả xuống, các nút radio chỉ cho phép bạn chọn một tùy chọn duy nhất.

Đối với thẻ biểu mẫu “nút radio”, chúng tôi đã định cấu hình cài đặt bên dưới.

• Tên – radio-708 (được tạo tự động)
• Tùy chọn – Tùy chọn 1, Tùy chọn 2, Tùy chọn 3
• Bọc mỗi mục bằng phần tử nhãn – Đã kiểm tra
• Thuộc tính ID – cf7-radio
• Thuộc tính lớp – cf7-radio

Các cài đặt này tạo ra mã ngắn bên dưới.

[radio radio-708 id:cf7-radio class:cf7-radio use_label_element default:1 "Option 1" "Option 2" "Option 3"]

Thẻ biểu mẫu “Chấp nhận”

Thẻ biểu mẫu “chấp nhận” của Biểu mẫu liên hệ 7 có thể được sử dụng để tạo một hộp kiểm duy nhất nhằm mục đích chấp nhận các điều khoản và điều kiện. Với cài đặt thẻ biểu mẫu chấp nhận, bạn có thể chỉ định một thông báo để hiển thị.

Đối với thẻ biểu mẫu “chấp nhận”, chúng tôi đã định cấu hình cài đặt bên dưới.

• Tên – chấp nhận-545 (được tạo tự động)
• Điều kiện – Chọn hộp này để chấp nhận các điều khoản.
• Thuộc tính ID – cf7-accept
• Thuộc tính lớp – cf7-accept

Các cài đặt này tạo ra mã ngắn bên dưới.

[acceptance acceptance-545 id:cf7-acceptance class:cf7-acceptance] Check this box to accept the terms. [/acceptance]

Thẻ biểu mẫu “Quiz”

Thẻ biểu mẫu “bài kiểm tra” có thể được sử dụng để tạo các câu hỏi cơ bản về câu hỏi và câu trả lời trong biểu mẫu liên hệ của bạn. Để tạo một câu hỏi đố vui, hãy sử dụng định dạng sau để tách câu hỏi và câu trả lời – Câu hỏi | Câu trả lời. Trong ảnh chụp màn hình bên dưới, câu hỏi của chúng tôi là “WordPress được phát hành vào năm nào?” Và câu trả lời (được phân tách bằng ký tự “|”) là năm 2003.

Đối với thẻ biểu mẫu “bài kiểm tra”, chúng tôi đã định cấu hình cài đặt bên dưới.

• Tên – quiz-461 (được tạo tự động)
• Điều kiện – Chọn hộp này để chấp nhận các điều khoản.
• Thuộc tính ID – cf7-quiz
• Thuộc tính lớp – cf7-quiz

Các cài đặt này tạo ra mã ngắn bên dưới.

[quiz quiz-461 id:cf7-quiz class:cf7-quiz "What year was WordPress released?|2003"]

Thẻ biểu mẫu “Tệp”

Thẻ biểu mẫu “tệp” của Biểu mẫu liên hệ 7 cho phép bạn thêm chức năng tải tệp lên vào biểu mẫu liên hệ. Điều này hữu ích cho các trường hợp bạn muốn khách truy cập có thể tải lên hình ảnh hoặc tệp PDF để gửi cùng với biểu mẫu. Ví dụ: nếu bạn điều hành một blog nhiếp ảnh với các thư viện ảnh đăng bài dự thi của khách, bạn có thể thêm chức năng tải tệp lên để mọi người tải hình ảnh lên.

Trong cài đặt thẻ biểu mẫu, bạn có thể chỉ định nhiều cài đặt khác nhau để bảo mật biểu mẫu của mình. Chúng tôi khuyên bạn nên luôn đặt giới hạn kích thước tệp để ngăn người dùng độc hại tải lên các tệp lớn. Tương tự, việc chỉ định “các loại tệp được chấp nhận” giúp bạn khóa biểu mẫu của mình thành các định dạng tệp mà bạn muốn và mong đợi. Với ví dụ về blog nhiếp ảnh, bạn có thể muốn giới hạn kích thước tệp ở mức 1 MB (1024 KB) và các loại tệp có thể chấp nhận được đối với các định dạng hình ảnh đã biết như chỉ JPG và PNG.

Đối với thẻ biểu mẫu “tệp”, chúng tôi đã định cấu hình cài đặt bên dưới.

• Tên – tệp-658 (được tạo tự động)
• Giới hạn kích thước tệp – 1024kb
• Các loại tệp được chấp nhận – jpg | png | gif
• Thuộc tính ID – cf7-file
• Thuộc tính lớp – cf7-file

Các cài đặt này tạo ra mã ngắn bên dưới.

[file file-658 limit:1024kb filetypes:jpg|png|gif id:cf7-file class:cf7-file]

Thẻ biểu mẫu “Gửi”

Cuối cùng nhưng không kém phần quan trọng là thẻ biểu mẫu “gửi” của Contact Form 7. Như bạn có thể đã đoán, thẻ biểu mẫu này cho phép bạn tạo nút gửi cho biểu mẫu liên hệ.

Đối với thẻ biểu mẫu “gửi”, chúng tôi đã định cấu hình cài đặt bên dưới.

• Nhãn – Gửi
• Thuộc tính ID – cf7-submit
• Thuộc tính lớp – cf7-submit

Các cài đặt này tạo ra mã ngắn bên dưới.

[submit id:cf7-submit class:cf7-submit "Submit"]

Cách cấu trúc một biểu mẫu liên hệ với thẻ biểu mẫu

Bây giờ chúng ta đã thiết lập tất cả các thẻ biểu mẫu, đã đến lúc tạo biểu mẫu liên hệ. Tại thời điểm này, cài đặt biểu mẫu liên hệ của bạn sẽ giống như ảnh chụp màn hình bên dưới. Hãy lưu ý tất cả các thẻ biểu mẫu mà chúng tôi đã tạo ở trên. Với các thẻ biểu mẫu tại chỗ, bạn có thể sử dụng mã ngắn [contact-form-7 404 "Not Found"] để nhúng biểu mẫu vào một bài đăng hoặc trang WordPress.

Trong trình chỉnh sửa WordPress, hãy dán mã ngắn vào một khối trống.

Nếu bạn đang sử dụng WordPress Classic Editor, bạn có thể dán shortcode vào bất kỳ đâu trong trình chỉnh sửa nội dung.

Bây giờ bạn sẽ có thể thấy biểu mẫu liên hệ trên trang mà bạn đã thêm mã ngắn của Biểu mẫu liên hệ 7. Đây là biểu mẫu liên hệ của chúng tôi với các cài đặt được đề cập ở trên trông như thế nào. Như bạn có thể thấy, Biểu mẫu liên hệ 7 tự động chuyển đổi các thẻ biểu mẫu thành HTML hợp lệ hiển thị với các kiểu CSS mặc định được bao gồm trong chủ đề WordPress của bạn.

Biểu mẫu liên hệ của chúng tôi ở trạng thái hiện tại là một điểm khởi đầu tốt, nhưng nó thiếu một tính năng chính. Các thẻ biểu mẫu như “văn bản”, “email” và “URL” hỗ trợ trình giữ chỗ, nhưng các phần tử khác như “hộp kiểm” và “nút radio” thì không. Nếu không có nhãn thích hợp, hộp kiểm và nút radio sẽ không hữu ích cho khách truy cập vì chúng không có bất kỳ ngữ cảnh nào. May mắn thay, việc thêm nhãn trong Biểu mẫu liên hệ 7 rất dễ dàng!

Cách thêm nhãn thẻ biểu mẫu trong biểu mẫu liên hệ 7

Có hai cách để thêm nhãn vào thẻ biểu mẫu Contact Form 7. Đối với các thẻ biểu mẫu bên dưới, bạn có thể chỉ cần bọc thẻ biểu mẫu bằng một nhãn.

• Chữ
• E-mail
• URL
• ĐT
• Con số
• Ngày
• Vùng văn bản
• chấp thuận
• Đố
• Tập tin

Hãy xem ví dụ về thẻ biểu mẫu “văn bản” bên dưới.

[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]

Để thêm nhãn vào thẻ biểu mẫu này, chúng tôi có thể thay thế thẻ biểu mẫu bằng đoạn mã bên dưới. Lưu ý trường hợp bổ sung của “Tên của bạn” ngay sau thẻ mở <label> .

<label> Your Name [text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"] </label>

Đây là những gì thay đổi này trông như thế nào trên biểu mẫu liên hệ của chúng tôi. Trong trường hợp này, nhãn mới được tạo phục vụ cùng mục đích với trình giữ chỗ. Tuy nhiên, nếu chúng tôi không muốn chỉ định trình giữ chỗ trong thẻ biểu mẫu, thì nhãn sẽ giúp xác định mục đích của một hộp nhập cụ thể.

Đối với các thẻ biểu mẫu hiển thị nhiều điều khiển biểu mẫu như hộp kiểm, nút radio và menu thả xuống , việc gói thẻ biểu mẫu bên trong thẻ </label> sẽ dẫn đến lỗi. Điều này xảy ra vì <label> chỉ được sử dụng với một điều khiển biểu mẫu duy nhất. Bản chất của hộp kiểm, nút radio và tùy chọn menu thả xuống liên quan đến nhiều điều khiển biểu mẫu, vì vậy chúng không tương thích với giải pháp ghi nhãn mặc định.

Đối với hộp kiểm, nút radio và menu thả xuống, bạn phải thêm tham số use_label_element trong shortcode. Hãy xem ví dụ về thẻ biểu mẫu hộp kiểm bên dưới, nơi use_label_element được in đậm.

[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]

Khi thông số use_label_element đã được thêm, bạn có thể thêm nhãn ngay phía trên thẻ biểu mẫu trong trình chỉnh sửa biểu mẫu liên hệ.

Để hoàn thiện, chúng tôi đã thêm nhãn vào tất cả các thẻ biểu mẫu trong biểu mẫu liên hệ của chúng tôi. Bạn có thể không cần phải làm điều này cho một trang web sản xuất vì một số thẻ biểu mẫu đã bao gồm trình giữ chỗ. Bất chấp điều đó, chúng tôi muốn chứng minh cách hoạt động của nhãn.

Đây là biểu mẫu liên hệ của chúng tôi trông như thế nào:

Định cấu hình Cài đặt Thư trong Biểu mẫu Liên hệ 7

Bây giờ chúng ta đã định cấu hình cấu trúc của biểu mẫu liên hệ của mình, đã đến lúc xem xét cài đặt gửi email trong Biểu mẫu liên hệ 7. Mặc dù cài đặt gửi thư mặc định sẽ hoạt động tốt đối với hầu hết các trang web, nhưng điều quan trọng vẫn là hiểu các trong trường hợp trang web hoặc trường hợp sử dụng của bạn yêu cầu cấu hình đặc biệt.

Để truy cập cài đặt gửi thư, hãy đi tới trình chỉnh sửa biểu mẫu liên hệ và chọn tab “Thư”.

Cài đặt gửi thư của Liên hệ với Biểu mẫu 7 cho phép bạn tùy chỉnh các mẫu và thông số được sử dụng để tạo và gửi thông báo cho bạn sau khi ai đó gửi biểu mẫu. Nếu bạn sử dụng cài đặt không chính xác, có thể bạn sẽ không được thông báo về việc gửi biểu mẫu. Do đó, điều quan trọng là phải kiểm tra việc gửi biểu mẫu sau khi tạo biểu mẫu liên hệ và thay đổi cài đặt.

Liên hệ với Biểu mẫu 7 cho phép bạn định cấu hình các cài đặt gửi thư sau.

• Tới – địa chỉ email để gửi thông báo.
• Từ – địa chỉ email để gửi thông báo từ.
• Chủ đề – chủ đề của email thông báo.
• Tiêu đề bổ sung – chỉ định tiêu đề email bổ sung như “trả lời”.
• Message Body – phần nội dung của email thông báo.
• Tệp đính kèm – chỉ định bất kỳ tệp đính kèm nào để đưa vào email thông báo.

Bây giờ, hãy xem qua từng cài đặt để hiểu rõ hơn về cách chúng có thể tác động đến việc gửi thư trong Biểu mẫu liên hệ 7.

Trường “Tới”

Đảm bảo chỉ định địa chỉ email thực cho cài đặt “Tới”. Theo mặc định, Biểu mẫu liên hệ 7 sẽ chỉ định địa chỉ email được liên kết với tài khoản người dùng WordPress của bạn cho cài đặt “Đến”. Nếu địa chỉ email WordPress của bạn không hợp lệ, hãy đảm bảo cập nhật nó trong cài đặt hồ sơ của bạn và thay đổi địa chỉ email trong Biểu mẫu liên hệ 7.

Trường “Từ”

Cài đặt “Từ” phải sử dụng định dạng sau – Your Name . Đối với cài đặt thư biểu mẫu liên hệ của chúng tôi, chúng tôi đang sử dụng kinstalife < [email protected] > .

Theo mặc định, Liên hệ 7 sẽ điền vào trường này với [email protected] . Bạn sẽ muốn đảm bảo rằng địa chỉ email này là địa chỉ hợp lệ vì một số máy chủ WordPress chặn email gửi đi đến các địa chỉ không hợp lệ. Có nhiều cách để làm cho địa chỉ email này hợp lệ. Bạn có thể thiết lập một tài khoản email chuyên dụng cho [email được bảo vệ] hoặc bạn có thể bật chức năng nhận toàn bộ thư tại nhà cung cấp dịch vụ email của mình. Nếu bạn không thể thiết lập địa chỉ email này, chúng tôi khuyên bạn nên thay đổi nó thành một địa chỉ email hợp lệ để tránh các vấn đề về khả năng gửi.

Trường “Chủ đề”

Cài đặt “Chủ đề” có thể được sử dụng để chỉ định dòng chủ đề cho các thư thông báo. Theo mặc định, Biểu mẫu liên hệ 7 đặt chủ đề là Site Name “[your-subject]” – tên chủ đề trong mẫu biểu mẫu mặc định của Biểu mẫu liên hệ 7.

Nếu bạn không có thẻ biểu mẫu có tên “[your-subject]” trong biểu mẫu của mình, hãy đảm bảo thay đổi thẻ này thành một thẻ khác. Ví dụ: nếu bạn chỉ có một thẻ biểu mẫu để ghi lại tên của khách truy cập (ví dụ: [tên bạn]), bạn có thể thay đổi dòng chủ đề thành You've Received a Message from [your-name] .

Trường “Tiêu đề bổ sung”

Trong “Tiêu đề bổ sung”, bạn có thể chỉ định tiêu đề email như thư trả lời, CC và BCC. Theo mặc định, Biểu mẫu liên hệ 7 thêm tiêu đề sau – Reply-To: [your-email] . Tiêu đề này cho phép bạn trả lời địa chỉ email được chỉ định trong biểu mẫu liên hệ đã gửi.

Tiêu đề trả lời mặc định sẽ tốt nếu bạn đang sử dụng thẻ biểu mẫu email mặc định của Biểu mẫu liên hệ 7. Nếu bạn không, hãy đảm bảo thay đổi nó để khớp với tên của thẻ biểu mẫu email của bạn. Đối với biểu mẫu liên hệ của chúng tôi, tên của thẻ biểu mẫu email là “email-632”, do đó, thẻ biểu mẫu trả lời sẽ phải được đổi thành Reply-To: [email-632] .

“Nội dung thư”

Tiếp theo là “Nội dung thư”, xác định nội dung nội dung của email thông báo. Mẫu mặc định của Biểu mẫu liên hệ 7 sử dụng các thẻ biểu mẫu [tên bạn], [email của bạn], [chủ đề của bạn] và [tin nhắn của bạn] và trông giống như sau:

From: [your-name] Subject: [your-subject] Message Body: [your-message] -- This e-mail was sent from a contact form on kinstalife (http://kinstalife.com)

Đảm bảo thay đổi các thẻ biểu mẫu này nếu bạn không sử dụng chúng trong mẫu biểu mẫu liên hệ của mình. Vì biểu mẫu liên hệ mà chúng tôi đã tạo thu thập nhiều thông tin, chúng tôi có thể thiết lập nội dung thư với các thẻ biểu mẫu bổ sung như sau:

Hello Brian, you've received a message from [text-711] ([email-632]). Website: [url-601] Phone Number: Tel-842 Appointment Date: date-389 Message: textarea-795

Liên hệ với Biểu mẫu 7 Cài đặt Thư – Tệp đính kèm

Nếu biểu mẫu liên hệ của bạn liên quan đến việc tải tệp lên, bạn có thể bao gồm tệp cùng với email thông báo. Trong biểu mẫu liên hệ của chúng tôi, chúng tôi có thẻ biểu mẫu tải lên tệp có tên “[tệp-658]”. Do đó, chúng tôi có thể thêm thẻ biểu mẫu này trong “Tệp đính kèm” để đảm bảo tệp sẽ được bao gồm trong thông báo qua email.

Liên hệ với Biểu mẫu 7 Các vấn đề về Gửi thư

Nếu bạn thấy rằng Biểu mẫu liên hệ 7 không gửi email, có một số điều bạn có thể kiểm tra trước khi liên hệ với nhà phát triển WordPress để được hỗ trợ.

1. Kiểm tra xem máy chủ của bạn có đang gửi các loại email khác hay không. Để kiểm tra điều này, bạn có thể kích hoạt một hành động gửi email khác bằng cách đưa ra nhận xét thử nghiệm trên một bài đăng trên blog hoặc gửi yêu cầu đặt lại mật khẩu trên trang đăng nhập WordPress của bạn. Nếu bạn nhận được email sau khi thực hiện một trong những hành động này, thì vấn đề có thể liên quan đến cấu hình của Biểu mẫu liên hệ 7. Nếu bạn không nhận được email, hãy liên hệ với nhóm hỗ trợ của máy chủ của bạn và cho họ biết bạn đang gặp sự cố với việc gửi email.
2. Đảm bảo rằng các trường “Đến” và “Từ” trong cài đặt gửi thư của biểu mẫu liên hệ của bạn được định cấu hình chính xác. Để Biểu mẫu liên hệ 7 hoạt động bình thường, cả hai trường này phải được điền bằng địa chỉ email thực.

Thông báo gửi biểu mẫu liên hệ 7

Biểu mẫu liên hệ 7 cho phép bạn tùy chỉnh nhiều loại thông báo gửi biểu mẫu. Những thông báo này hiển thị sau khi một điều kiện nhất định được đáp ứng. Ví dụ: nếu khách truy cập quên điền vào trường bắt buộc, Biểu mẫu liên hệ 7 sẽ hiển thị thông báo “Trường là bắt buộc”. Đối với hầu hết các trường hợp sử dụng, các thông báo mặc định sẽ hoạt động tốt. Tuy nhiên, nếu bạn muốn tùy chỉnh các tin nhắn, bạn có thể làm như vậy bằng cách nhấp vào tab “Tin nhắn” trong trình chỉnh sửa biểu mẫu liên hệ.

Cách bảo mật biểu mẫu liên hệ của bạn

Khi các bot tự động ngày càng thông minh hơn và phổ biến hơn trong những năm qua, thư rác đã trở thành một vấn đề lớn đối với các biểu mẫu liên hệ. Vì các biểu mẫu liên hệ thường được mở trên Internet công cộng, nên khá dễ dàng cho những người tìm kiếm trên web phát hiện ra chúng và loại bỏ các tin nhắn rác đến hộp thư đến email của bạn. May mắn thay, có nhiều cách khác nhau để ngăn chặn những kẻ gửi thư rác và bảo vệ biểu mẫu liên hệ của bạn.

Bảo mật Biểu mẫu liên hệ 7 của bạn với reCAPTCHA

Nếu bạn đã từng gửi biểu mẫu trên Internet, có thể bạn đã quen thuộc với reCAPTCHA, một công nghệ do Google phát triển để xác định hành vi tự động của bot. Các phiên bản cũ hơn của reCAPTCHA (V2) yêu cầu người dùng phải vượt qua một câu đố hoặc thử thách.

Phiên bản mới nhất của reCAPTCHA (V3) không yêu cầu bất kỳ sự tương tác nào từ người dùng. Thay vào đó, nó giám sát hoạt động của người dùng trong nền một cách minh bạch để phân biệt giữa khách truy cập là người và bot. Vì Biểu mẫu liên hệ 7 hỗ trợ reCAPTCHA V3, chúng tôi khuyên bạn nên sử dụng phiên bản mới nhất này vì nó cung cấp trải nghiệm người dùng tốt hơn cho khách truy cập.

Để thiết lập reCAPTCHA, trước tiên bạn cần tạo khóa API. Để thực hiện việc này, hãy đăng nhập vào tài khoản Google của bạn và truy cập trang thiết lập reCAPTCHA.

Chuyển qua biểu mẫu đăng ký để tạo reCAPTCHA của bạn.

• Nhãn – Chỉ định một nhãn bạn chọn.
• Loại reCAPTCHA – Biểu mẫu Liên hệ 7 hỗ trợ reCAPTCHA v3, vì vậy hãy chọn phiên bản đó.
• Miền – Nếu trang web của bạn sử dụng miền gốc, hãy thêm phiên bản không có www và www cho miền của bạn. Nếu trang web của bạn sử dụng miền phụ, chỉ cần thêm miền phụ.
• Chủ sở hữu – Địa chỉ email được liên kết với tài khoản Google của bạn sẽ được thêm làm chủ sở hữu theo mặc định. Vui lòng thêm địa chỉ email bổ sung nếu cần.

Sau khi bạn đã điền vào tất cả các tùy chọn, hãy nhấp vào Gửi . Sau đó, bạn sẽ được giới thiệu “khóa trang web” và “khóa bí mật” dành riêng cho trang web của mình. Đảm bảo giữ các khóa này ở nơi an toàn vì bạn sẽ cần thêm chúng vào Biểu mẫu liên hệ 7.

Tiếp theo, nhấp vào “Liên hệ” trong thanh bên bảng điều khiển WordPress của bạn và nhấp vào Tích hợp . Chọn tùy chọn reCAPTCHA và dán khóa trang web và khóa bí mật của bạn vào các trường tương ứng. Cuối cùng, nhấp vào Lưu thay đổi để hoàn tất quá trình tích hợp reCAPTCHA.

Sau khi định cấu hình reCAPTCHA trong Biểu mẫu liên hệ 7, bạn sẽ thấy biểu trưng reCAPTCHA ở góc dưới bên phải của trang biểu mẫu liên hệ của mình. Điều này có nghĩa là reCAPTCHA đang hoạt động và bảo vệ biểu mẫu liên hệ của bạn khỏi việc gửi spam.

Bảo mật Biểu mẫu liên hệ của bạn với Cloudflare (Tùy chọn)

Nếu bạn sử dụng Cloudflare để bảo vệ trang web của mình, bạn có thể thiết lập quy tắc trang đặc biệt cho trang biểu mẫu liên hệ của mình để giảm việc gửi biểu mẫu liên hệ spam.

Để thêm quy tắc trang, hãy nhấp vào tab “Quy tắc trang” và sử dụng các cài đặt sau để giúp bảo mật trang liên hệ của bạn.

• Nếu URL khớp – * your-domain.com / your-contact-page / *
• Kiểm tra tính toàn vẹn của trình duyệt – Bật
• Mức độ bảo mật – Cao

Tính năng “Kiểm tra tính toàn vẹn của trình duyệt” của Cloudflare phân tích các tiêu đề HTTP. Nếu nó phát hiện một tiêu đề HTTP thường được sử dụng bởi bot tự động và những kẻ gửi thư rác, nó sẽ từ chối yêu cầu đối với trang web của bạn. Đặt “Mức bảo mật” lên cao sẽ thách thức tất cả những khách truy cập có hành vi độc hại trong vòng hai tuần qua.

Bằng cách giới hạn các cài đặt này cho trang liên hệ của bạn với quy tắc đối sánh URL, các trang khác trên trang web của bạn sẽ không bị ảnh hưởng bởi các quy tắc trang này. Chúng tôi đề xuất cấu hình này vì các trang “chỉ đọc” thông thường trên trang web của bạn thường không yêu cầu cài đặt cấp độ bảo mật cao.

Bản tóm tắt

Contact Form 7 là plugin biểu mẫu liên hệ phổ biến nhất và vì lý do chính đáng! Nó có thể được sử dụng để tạo mọi thứ từ biểu mẫu liên hệ cơ bản, đến các câu đố trả lời câu hỏi, đến các biểu mẫu phức tạp hỗ trợ tệp đính kèm và menu thả xuống.

Hơn hết, nó đi kèm với hỗ trợ reCAPTCHA tích hợp để giúp bảo mật biểu mẫu liên hệ của bạn trước những kẻ gửi thư rác.

Bạn có sử dụng Biểu mẫu liên hệ 7 trên trang web WordPress của mình không? Nếu không, lựa chọn ưu tiên của bạn là gì? Cho chúng tôi biết trong phần ý kiến dưới đây!