Vào năm 2023, việc 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 dịch vụ như MailChimp giúp bạn phân phối nội dung trực tiếp đến người đăng ký của mình
Danh sách email rất tuyệt, nhưng nếu độc giả 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? . 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 Mẫu liên hệ 7
Contact Form 7 đã xuất hiện từ năm 2009 và nó đã thu đượ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 của WordPress. Nếu bạn tìm kiếm “mẫu liên hệ 7”, bạn sẽ có thể tìm thấy plugin cùng với nhiều tiện ích bổ sung
Sau khi plugin được cài đặt, 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 xem nhanh 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
Xem cách Kinsta chống lại đối thủ. So sánh
Ưu điểm của việc có một mẫu liên hệ
- Biểu mẫu liên hệ cho phép độc giả, 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 khách truy cập giao tiếp với bạn có thể rất quan trọng. Ví dụ: việc 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 tổn 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
- 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ệ là một yếu tố 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ệ
- Thư rác có thể là một vấn đề đối với các biểu mẫu công khai như hộp nhận xét và biểu mẫu liên hệ. May mắn thay với 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ẽ tìm hiểu chi tiết cách thiết lập tính năng chống thư rác trong Biểu mẫu liên hệ 7 ở phần sau của bài viết
- Sau khi thêm biểu mẫu liên hệ vào trang web của bạn, bạn có thể cần dành thời gian để trả lời tin nhắn. Đây không nhất thiết 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ợ 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ệ thể hiện từ việc có 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 cung cấp năng lượng cho 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 chi tiết siêu dữ liệu được liên kết 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 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 biểu mẫu mẫu để hiểu rõ hơn về cách thức hoạt động của Biểu mẫu liên hệ 7. Click vào Contact Form 1 để xem cài đặt form
Trang “Chỉnh sửa biểu mẫu liên hệ” được chia thành bốn phần
- 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
- Thư – Tùy chỉnh mẫu email và cài đặt được sử dụng cho email thông báo
- 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ệ
- Cài đặt bổ sung – Chỉ định đ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ờ, hãy xem xét kỹ hơn từng phần và tạo biểu mẫu liên hệ tùy chỉnh
Bạn biết họ nói gì- giữ bạn bè của bạn gần gũi và khán giả của bạn gần gũi hơn. hay đại loại thế. 😉 Luôn kết nối với khách truy cập trang web nhờ plugin phổ biến này 👇Nhấp để TweetCách tạo biểu mẫu liên hệ WordPress
Để tạo biểu mẫu liên hệ mới, nhấp vào Thêm mới bên cạnh “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 cài sẵn 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 các mô tả bên dưới để biết các thẻ biểu mẫu đặt sẵn đ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 mã 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 địa chỉ email
- URL – Tạo thẻ biểu mẫu cho URL
- Tel – Tạo thẻ biểu mẫu cho 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 nhập "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 nhập nhiều dòng văn bản. Chúng lý tưởng để nhập nội dung 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 hộp kiểm
- Radio Buttons – 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
- Quiz – Tạo thẻ biểu mẫu cho 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ờ, hãy tiếp tục và tùy chỉnh 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 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ác 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-tên-bạn
- Thuộc tính lớp [CSS] – cf7-tên-bạn
Các cài đặt này tạo 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ác 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 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ó trường nhập liệu 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” bình thường cho việc này trong Biểu mẫu liên hệ 7, nhưng 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 nhập xác thực cá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ác 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-trang web của bạn
- Thuộc tính lớp [CSS] – cf7-trang web của bạn
Các cài đặt này tạo 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 hết bạn nên sử dụng thẻ biểu mẫu “tel” để đả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ác 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 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 Mẫu liên hệ 7 cho phép bạn tạo bộ chọn ngày theo kiểu lịch. Trường nhập "ngày" này rất hữu ích để chỉ định ngày hẹn trong biểu mẫu liên hệ
Đối với thẻ biểu mẫu “ngày”, chúng tôi đã định cấu hình các 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-appointment-date
- Thuộc tính lớp [CSS] – cf7-appointment-date
Các cài đặt này tạo 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 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. Vùng văn bản hữu ích nhất để nắm bắt nội dung của thư
Đối với thẻ biểu mẫu “textarea”, chúng tôi đã định cấu hình các 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 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 “Trình đơn thả xuống”
Thẻ biểu mẫu “menu thả xuống” của Contact Form 7 cho phép bạn tạo một menu thả xuống với nhiều tùy chọn. 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ác 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 – Đã chọn
- Chèn một mục trống làm tùy chọn đầu tiên – Đã chọn
- Thuộc tính ID – menu thả xuống cf7
- Thuộc tính lớp – menu thả xuống cf7
Các cài đặt này tạo 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ư trình đơn thả xuống, các 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, hộp kiểm có thể hoạt động tốt hơn menu thả xuống. Ví dụ: nếu bạn có ít tùy chọn để chọn, 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ác 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 Từng Mục với Thành phần Nhãn – Đã chọn
- 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 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 “Nút radio”
Thẻ biểu mẫu “nút radio” cho phép bạn tạo 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 Từng Mục với Thành phần Nhãn – Đã chọn
- Thuộc tính ID – cf7-radio
- Thuộc tính lớp – cf7-radio
Các cài đặt này tạo mã ngắn bên dưới
________số 8Thẻ biểu mẫu “Chấp nhận”
Có thể sử dụng thẻ biểu mẫu "chấp nhận" của Biểu mẫu liên hệ 7 để 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 sẽ 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ác cài đặt bên dưới
- Tên – accept-545 [được tạo tự động]
- Điều kiện – Đánh dấu vào ô này để chấp nhận các điều khoản
- Thuộc tính ID – chấp nhận cf7
- Thuộc tính lớp – chấp nhận cf7
Các cài đặt này tạo 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 “Đố vui”
Thẻ biểu mẫu “câu đố” có thể được sử dụng để tạo các câu hỏi và câu trả lời cơ bản trong biểu mẫu liên hệ của bạn. Để tạo câu hỏi trắc nghiệm, hãy sử dụng định dạng sau để phân 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 dấu “. ” ký tự] là 2003
Đăng kí để nhận thư mới
Bạn muốn biết làm thế nào chúng tôi tăng lưu lượng truy cập của mình hơn 1000%?
Tham gia cùng hơn 20.000 người khác nhận bản tin hàng tuần của chúng tôi với các mẹo nội bộ về WordPress
Đối với thẻ biểu mẫu “câu đố”, chúng tôi đã định cấu hình các cài đặt bên dưới
- Tên – quiz-461 [được tạo tự động]
- Điều kiện – Đánh dấu vào ô 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 mã ngắn bên dưới
[email* email-632 id:email class:email placeholder "Your Email"]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 biểu mẫu liên hệ. Điều này hữu ích cho các tình huống mà 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 các bài gửi 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 ả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 luôn đặt giới hạn kích thước tệp để ngăn người dùng ác ý 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. Lưu ý đến 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 chấp nhận đối với các định dạng hình ảnh đã biết như JPG và chỉ
Đối với thẻ biểu mẫu “tệp”, chúng tôi đã định cấu hình các 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 – tệp cf7
- Thuộc tính lớp – tệp cf7
Các cài đặt này tạo mã ngắn bên dưới
[email* email-632 id:email class:email placeholder "Your Email"]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 Biểu mẫu liên hệ 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ác cài đặt bên dưới
- Nhãn – Gửi
- Thuộc tính ID – cf7-gửi
- Thuộc tính lớp – cf7-gửi
Các cài đặt này tạo mã ngắn bên dưới
[email* email-632 id:email class:email placeholder "Your Email"]Cách cấu trúc một biểu mẫu liên hệ với các 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. Lưu ý tất cả các thẻ biểu mẫu 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
[email* email-632 id:email class:email placeholder "Your Email"]Trong trình chỉnh sửa WordPress, dán mã ngắn vào một khối trống
Nếu đang sử dụng , bạn có thể dán mã ngắn vào bất kỳ đâu trong trình chỉnh sửa nội dung
Bây giờ bạn 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ó 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 thành phần khác như “hộp kiểm” và “nút radio” thì không. Nếu không có nhãn phù 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 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 chỉ cần bọc thẻ biểu mẫu bằng thẻ
[email* email-632 id:email class:email placeholder "Your Email"]- Chữ
- URL
- điện thoại
- Con số
- Ngày tháng
- Khu vực 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 ta 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 “Your Name” ngay sau thẻ mở đầu
[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]Mệt mỏi vì một máy chủ chậm? . Kiểm tra các kế hoạch của chúng tôi
[email* email-632 id:email class:email placeholder "Your Email"]Đây là 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 có 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 hộp nhập liệu 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 bọc thẻ biểu mẫu bên trong thẻ
[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"][url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]Đối với các hộp kiểm, nút radio và menu thả xuống, bạn phải thêm tham số
[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"][url url-601 id:cf7-your-website class:cf7-your-website "Your Website"][email* email-632 id:email class:email placeholder "Your Email"]Khi tham số
[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]Để 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 mình. 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 kể, 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 tôi đã định cấu hình cấu trúc biểu mẫu liên hệ của mình, đã đến lúc xem 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 chỉ hoạt động tốt đối với hầu hết các trang web, nhưng điều quan trọng là phải hiểu các cài đặt khác nhau 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 chuyển đến 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 Contact Form 7 cho phép bạn tùy chỉnh các mẫu và tham 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
Contact Form 7 cho phép bạn định cấu hình các cài đặt gửi thư sau
- To – địa chỉ email để gửi thông báo đến
- From – đị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 các tiêu đề email bổ sung như “trả lời”
- Nội dung thư – 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 để gửi kèm theo 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 Contact Form 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 “Tới”. Nếu địa chỉ email WordPress của bạn không hợp lệ, hãy nhớ cập nhật nó trong cài đặt hồ sơ của bạn và thay đổi cả đị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 –
[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"][url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]Theo mặc định, Liên hệ 7 sẽ điền vào trường này bằng
[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]Trường “Chủ đề”
Cài đặt “Chủ đề” có thể được sử dụng để chỉ định dòng chủ đề cho thư thông báo. Theo mặc định, Biểu mẫu liên hệ 7 đặt chủ đề là
[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]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 nó thành một thứ khác. Ví dụ: nếu bạn chỉ có một thẻ biểu mẫu để nắm bắt tên của khách truy cập [e. g. [your-name]], bạn có thể thay đổi dòng chủ đề thành
[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]Trường “Tiêu đề bổ sung”
Trong “Tiêu đề bổ sung”, bạn có thể chỉ định các tiêu đề email như trả lời, CC và BCC. Theo mặc định, Biểu mẫu liên hệ 7 thêm tiêu đề sau –
[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]Tiêu đề trả lời mặc định vẫn ổn nếu bạn đang sử dụng thẻ biểu mẫu email mặc định của Contact Form 7. Nếu không, hãy nhớ 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 thay đổi thành
[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]“Thân 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 Contact Form 7 sử dụng các thẻ biểu mẫu [your-name], [your-email], [your-subject] và [your-message] và trông như thế này
[email* email-632 id:email class:email placeholder "Your Email"]Đả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ệ chúng tôi đã tạo thu thập rất nhiều thông tin, chúng tôi có thể thiết lập nội dung thư bằng các thẻ biểu mẫu bổ sung như vậy
[email* email-632 id:email class:email placeholder "Your Email"]Mẫu liên hệ 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ể đưa tệp đó vào 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 “[file-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 đưa vào thông báo email
Mẫu liên hệ 7 vấn đề gửi thư
Nếu thấy như vậy , bạn có thể kiểm tra một số điều trước khi liên hệ với nhà phát triển WordPress để được hỗ trợ
- Kiểm tra xem máy chủ của bạn có đang gửi các loại email khác 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 kiểm tra trên một bài đăng trên blog hoặc 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ì sự cố 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 chủ nhà và cho họ biết bạn đang gặp sự cố khi gửi email
- Đảm bảo các trường “Tới” 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
Biểu mẫu liên hệ 7 Tin nhắn gửi biểu mẫu
Contact Form 7 cho phép bạn tùy chỉnh nhiều loại thông báo gửi biểu mẫu. Các 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 trở nên 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 để những người quét web phát hiện ra chúng và gửi thư rác vào 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 Mẫu liên hệ 7 của bạn bằng reCAPTCHA
Nếu bạn đã từng gửi biểu mẫu trên Internet, thì có lẽ 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 bot tự động. Các phiên bản cũ hơn của reCAPTCHA [V2] yêu cầu người dùng vượt qua câu đố hoặc thử thách
Phiên bản reCAPTCHA mới nhất [V3] không yêu cầu bất kỳ tương tác nào từ người dùng. Thay vào đó, nó theo dõi minh bạch hoạt động của người dùng trong nền để phân biệt giữa khách truy cập là người và bot. Vì Contact Form 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ó mang lại 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
Đi qua biểu mẫu đăng ký để tạo reCAPTCHA của bạn
- Nhãn – Chỉ định nhãn bạn chọn
- Loại reCAPTCHA – Mẫu liên hệ 7 hỗ trợ reCAPTCHA v3, vì vậy hãy chọn phiên bản đó
- Tên miền – Nếu trang web của bạn sử dụng tên miền gốc, hãy thêm phiên bản không có www và www cho tên miền của bạn. Nếu trang web của bạn sử dụng tên miền phụ, chỉ cần thêm tên miền phụ
- Chủ sở hữu – Theo mặc định, đị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. 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 cung cấp "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 tượ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 bị gửi thư rác
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 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 phù hợp – *tên miền của bạn. com/trang liên hệ của bạn/*
- 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, thì 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” thành cao sẽ thách thức tất cả khách truy cập có hành vi nguy hiểm trong vòng hai tuần qua
Bằng cách giới hạn các cài đặt này đối với trang liên hệ của bạn bằng 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 khuyên dùng cấu hình này vì các trang "chỉ đọc" bình thường trên trang web của bạn thường không yêu cầu cài đặt mức bảo mật nâng cao
Không để khán giả của bạn ở trạng thái đọc. 👀 Liên hệ trực tiếp với độc giả và khách hàng tiềm năng của bạn thông qua plugin Biểu mẫu liên hệ 7 ⬇️Nhấp để TweetTóm lược
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ừ các 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
Trê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 khỏi những kẻ gửi thư rác
Bạn có sử dụng Mẫu liên hệ 7 trên trang web WordPress của mình không?
Nhận tất cả các ứng dụng, cơ sở dữ liệu và trang web WordPress của bạn trực tuyến và dưới một mái nhà. Nền tảng đám mây hiệu suất cao, đầy đủ tính năng của chúng tôi bao gồm
- Dễ dàng thiết lập và quản lý trong bảng điều khiển MyKinsta
- Hỗ trợ chuyên gia 24/7
- Mạng và phần cứng Google Cloud Platform tốt nhất, được cung cấp bởi Kubernetes để có khả năng mở rộng tối đa
- Tích hợp Cloudflare cấp doanh nghiệp cho tốc độ và bảo mật
- Tiếp cận đối tượng toàn cầu với tối đa 35 trung tâm dữ liệu và hơn 275 PoP trên toàn thế giới
Hãy tự kiểm tra với $20 trong tháng đầu tiên của Lưu trữ ứng dụng hoặc Lưu trữ cơ sở dữ liệu. Khám phá kế hoạch của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm thấy sự phù hợp nhất của bạn