Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Plugin Contact Form 7 cho phép chỉnh sửa biểu mẫu với textarea tiêu chuẩn. Addon này cho phép thêm trình chỉnh sửa HTML với công cụ đánh dấu mã vào từng biểu mẫu liên hệ

Bạn cũng có thể ẩn biểu mẫu khỏi người dùng bằng Chế độ kiểm tra. Biểu mẫu ở chế độ này sẽ chỉ có sẵn cho quản trị viên trang

Những đặc điểm chính

  • Đã thêm trình chỉnh sửa HTML;
  • Đã thêm Chế độ kiểm tra cho biểu mẫu;
  • Xóa các thẻ p được thêm tự động vào biểu mẫu

Để cải thiện các chức năng của plugin và thêm các chức năng mới, hãy viết thư cho chúng tôi trên diễn đàn hỗ trợ

Để cải thiện các chức năng của plugin và thêm các chức năng mới, hãy viết thư cho chúng tôi trên diễn đàn hỗ trợ hoặc gửi yêu cầu trên github

Dự án trên GitHub https. //github. com/wow-company/máy tính-xây dựng/

Hỗ trợ

Tìm kiếm câu trả lời và đặt câu hỏi của bạn tại diễn đàn hoặc gửi yêu cầu trên github

Ảnh chụp màn hình

  • Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?
    Mâu liên hệ
  • Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?
    trình soạn thảo HTML

Cài đặt

  • Tùy chọn cài đặt 1. Tìm và cài đặt plugin này trong phần Plugins -> Add new của wp-admin của bạn
  • Tùy chọn cài đặt 2. Tải xuống tệp zip, sau đó tải plugin lên qua wp-admin trong phần Plugins -> Add new. Hoặc giải nén kho lưu trữ và tải thư mục lên thư mục plugins /wp-content/plugins/ qua ftp
  • Nhấn Activate khi bạn đã cài đặt plugin qua bảng điều khiển hoặc nhấn Activate trong danh sách trong danh sách Plugins
  • Tới Plugins0

Đánh giá

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Có ích

shade351 Ngày 2 tháng 12 năm 2022

Làm cho công việc dễ dàng hơn

Đọc tất cả 1 đánh giá

Cộng tác viên & Nhà phát triển

“HTML Editor for Contact Form 7” là phần mềm mã nguồn mở. Những người sau đây đã đóng góp cho plugin này

Trong các biểu mẫu Biểu mẫu liên hệ 7 (CF7) của bạn, việc bổ sung các liên kết phù hợp có thể cung cấp thông tin cơ bản có giá trị cho các mục nhập biểu mẫu

Liên kết có thể cung cấp thông tin bổ sung bằng cách hiển thị bảng điều khiển bật lên hoặc bằng cách hướng người dùng của bạn đến các trang web khác. Bạn cũng có thể sử dụng các liên kết để cung cấp các tham chiếu và kết nối giữa các thành phần trong biểu mẫu của mình

Thêm liên kết bằng CF7 Skins Visual Editor

Bạn có thể sử dụng trường HTML do CF7 Skins Pro cung cấp để thêm bất kỳ thẻ HTML nào vào biểu mẫu của mình. Trong trường hợp này, chúng ta có thể sử dụng nó để thêm thẻ a cho các liên kết

Mẹo. Phần tử HTML chỉ khả dụng cho người dùng CF7 Skins Pro

Để thêm liên kết bằng CF7 Skins Visual Editor, hãy làm theo các bước sau

1. Chuyển đến Liên hệ của bạn >> Biểu mẫu liên hệ >> Biểu mẫu

2. Cuộn xuống phần Skins

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

3. Từ phần LĨNH VỰC (CF7 SKIN ITEMS), kéo và thả một phần tử HTML mới vào vị trí mong muốn trong biểu mẫu

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

4. Nhấp vào biểu tượng Chỉnh sửa của phần tử HTML

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

5. Thêm một cặp thẻ mở và đóng với địa chỉ đích trong thuộc tính href. Nhập tiêu đề của liên kết ở giữa

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

6. Nhấp vào Xong để đóng hộp thoại chỉnh sửa

Mẹo. Bạn có thể nhấp vào Xong để đóng hộp thoại Chỉnh sửa nếu muốn, nhưng bạn không cần phải làm điều này – những thay đổi của bạn được cập nhật trong tab Hình thức Trực quan Trang phục CF7 khi bạn nhập

7. Nhấp vào Lưu hình ảnh

Lúc này link đã hiển thị ở dạng như hình bên dưới

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

đọc thêm

  • Cách sử dụng CF7 Skins Visual Editor
  • Thêm biểu mẫu liên hệ tốt hơn 7 trình giữ chỗ

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Bài viết này nói về việc thêm các liên kết HTML bằng CF7 Skins Visual Editor. Để tìm hiểu về cách thêm liên kết HTML bằng cách sử dụng trình chỉnh sửa biểu mẫu Biểu mẫu liên hệ 7, hãy xem phần Thêm liên kết HTML vào biểu mẫu Biểu mẫu liên hệ 7 của bạn (với Trình chỉnh sửa CF7)

Ngay cả khi vẫn còn một số người cứng rắn không muốn bị làm phiền, chúng tôi có thể nói rằng hầu hết tất cả các trang đều có trang liên hệ. paypal

Do đó, để thiết lập tính năng này trên trang WordPress, có hai khả năng

  1. Chủ đề của bạn có mẫu trang “Liên hệ” hoặc một cách khác để bao gồm biểu mẫu, trong trường hợp đó thì tất cả đều ổn
  2. Sử dụng plugin để đưa biểu mẫu vào trang Liên hệ của bạn

Trong bài đăng này, chúng ta sẽ xem cách sử dụng một plugin đã được tải xuống hơn 1 tỷ 300 triệu lần (tại thời điểm viết những dòng này). Mình đặt tên là Contact Form 7 (CF7)

Mặc dù nó khá đơn giản để sử dụng nhưng tôi muốn viết một hướng dẫn để chỉ cho bạn cách tích hợp ít nhiều các biểu mẫu liên hệ nâng cao trên trang web của bạn

Hãy cùng xem với các chương của hướng dẫn này…

Tổng quan

  1. Mẫu liên hệ 7 là gì?
  2. Thiết lập Contact Form 7 cơ bản
  3. Thêm các trường bổ sung trong Mẫu liên hệ 7
  4. Tích hợp Mẫu liên hệ 7 trên trang web của bạn
  5. 5 mẹo để tùy chỉnh biểu mẫu của bạn
  6. Mẫu liên hệ 7. chúng tôi lấy hàng

Bài viết này đã được cập nhật vào tháng 2 năm 2020 với phiên bản 5. 1. 6 của Mẫu liên hệ 7

Các dự án WordPress tốt nhất của bạn cần máy chủ lưu trữ tốt nhất

WPMarmite đề xuất Bluehost. hiệu suất tuyệt vời, hỗ trợ tuyệt vời. Tất cả những gì bạn cần cho một khởi đầu tuyệt vời

Dùng thử Bluehost

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Mẫu liên hệ 7 là gì?

Contact Form 7 là một plugin WordPress miễn phí để tạo các biểu mẫu liên hệ một cách đơn giản và nhanh chóng

Linh hoạt nhờ có nhiều trường có thể tùy chỉnh, nó cũng giúp chống thư rác

Nó là một trong những plugin phổ biến nhất trong thư mục chính thức

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Thiết lập Contact Form 7 cơ bản

Khi bạn đã cài đặt và kích hoạt Contact Form 7, bạn sẽ thấy mục Liên hệ đã được thêm vào menu (dưới phần Nhận xét). Nhấp vào nó để đến trang chính của plugin

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Trước hết, Biểu mẫu liên hệ 7 thông báo cho bạn rằng bạn được bảo vệ khỏi thư rác qua Akismet hoặc reCAPTCHA

Bạn cũng được mời tải xuống một plugin bổ sung, Flamingo, cũng được thiết kế bởi Takayuki Miyoshi, người tạo ra CF7

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Nhờ nó, bạn có thể lưu vào cơ sở dữ liệu tất cả các thư được gửi trong biểu mẫu của mình. Không có nó, bạn sẽ chỉ có chúng trong hộp thư đến của mình (nhưng điều đó có thể là đủ đối với bạn)

Cuối cùng, đừng lo lắng, hướng dẫn này sẽ giúp bạn tạo biểu mẫu đầu tiên của mình. Để làm như vậy, chỉ cần nhấp vào nút Thêm mới ở đầu màn hình (hoặc trong menu)

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Bạn sẽ đến trang tiếp theo có 4 tab khác nhau

  • Mẫu đơn
  • E-mail
  • tin nhắn
  • Cài đặt thêm
Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Có một hình thức theo mặc định. Hãy xem các tùy chọn khác nhau tương ứng với cái gì

Nhập tiêu đề ở đây

Phần đầu tiên này được sử dụng để đặt tên cho biểu mẫu của bạn. Gọi nó là "Liên hệ", hoặc như bạn muốn

Bạn cũng có thể đặt tên cụ thể, nếu biểu mẫu bạn tạo cần được đặt trên một trang cụ thể (biểu mẫu hỗ trợ, biểu mẫu yêu cầu báo giá, v.v.)

Ngoài ra còn có nút Lưu. Đừng quên sử dụng nó sau khi bạn đã thực hiện các thay đổi của mình

tab “Biểu mẫu”

Phần này chứa mã HTML của biểu mẫu liên hệ của bạn. Một số đoạn văn có mặt (thẻ Plugins1 ) với các thẻ cho các trường biểu mẫu cũng như nút Gửi

Hãy để chi tiết tất cả những điều này để hiểu rõ hơn

Đoạn mã trên sẽ hiển thị văn bản “Tên của bạn (bắt buộc)” và sau đó là trường văn bản được liên kết với tên

Trong phần thứ hai của hướng dẫn này, chúng ta sẽ xem cách tạo thẻ. Bạn sẽ thấy rằng cú pháp của chúng không quan trọng lắm

Các trường email, chủ đề và tin nhắn được cấu trúc theo cùng một cách. Phần tử cuối cùng trong ngoặc vuông – Plugins2 – bao gồm thẻ cho nút xác thực biểu mẫu

Công dụng của thẻ

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Các nút phía trên biểu mẫu cho phép bạn thêm tất cả các loại trường trong biểu mẫu bạn tạo. văn bản, email, ngày tháng, menu thả xuống, nút radio, bài kiểm tra và thậm chí gửi tệp

Chúng ta sẽ xem cách định cấu hình chúng trong phần “Thêm trường bổ sung” của bài viết này

tab “Thư”

Chúng ta hãy xem các trường trong phần này và những gì chúng chứa

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Vì. Email mà thư sẽ được gửi đến (email của bạn hoặc của khách hàng của bạn)

Từ. Email của người gửi. Ở đây, chúng tôi truy xuất email của người đó từ trường email của biểu mẫu (được xác định bằng thẻ Plugins3 trong mã biểu mẫu). Tên được chỉ định trước email bằng thẻ Plugins4]

Điều quan trọng là giữ cấu trúc Plugins5 trong trường này để nó được hiển thị chính xác trong hộp thư đến của bạn

Vấn đề. Trong trường hợp của chúng tôi, biểu mẫu truy xuất chủ đề do người gửi chỉ định nhờ thẻ Plugins6]. Tuy nhiên, bạn không bắt buộc phải sử dụng nó. Nếu tôi đã sử dụng CF7 cho WPMarmite, tôi có thể chọn chủ đề sau “Plugins7]”

tiêu đề bổ sung. Trường này hữu ích để chỉ định người sao chép và sao chép ẩn. Ví dụ: bạn có thể gửi một bản sao của email cho người liên hệ với bạn (chúng ta sẽ thấy rằng mình có thể thực hiện theo cách khác ngay sau đây)

Để sao chép một người, hãy thêm Plugins8. Bạn cũng có thể sử dụng cấu trúc Plugins9 đã thấy ở trên. Plugins10

Để đưa một người vào bản sao ẩn, hãy sử dụng Plugins11. Như với bản sao bình thường, cấu trúc Plugins5 cũng hoạt động

Nội dung thư. Trường này sẽ được sử dụng để định dạng tin nhắn bạn sẽ nhận được. Trong ảnh chụp màn hình, bạn có thể thấy rằng các thẻ được sử dụng lại

Để xem rõ hơn, chỉ chèn thẻ Plugins13 để chỉ có thư của người gửi (email và tên đã có trong trường Từ). Làm như vậy, tin nhắn nhận được sẽ giống tin nhắn được gửi trực tiếp hơn

Chữ ký được Mẫu liên hệ 7 tự động thêm vào để cho biết thư được gửi từ mẫu nào. Nó có thể không tối ưu nhưng tôi khuyên bạn nên giữ nó như một lời nhắc nhở về nguồn gốc của email. Bạn có thể chỉnh sửa nó theo ý muốn để làm cho nó phù hợp hơn

Loại trừ các dòng có thẻ thư trống khỏi đầu ra. Tùy chọn này được sử dụng để loại trừ các dòng mà thẻ chưa được người gửi chỉ định. Ví dụ: nếu bạn có trường Thành phố và người đó không điền vào trường này, thì dòng sẽ hiển thị thẻ Thành phố sẽ không được hiển thị. Bạn có thấy tôi đang đi đâu với điều này không?

Sử dụng loại nội dung HTML. Ở đây không có gì phức tạp, tích vào ô nhận email liên hệ dạng HTML. Trong hầu hết các trường hợp, điều này là không cần thiết

Tập tin đính kèm. Trong trường hợp bạn cung cấp khả năng gửi tệp đính kèm. Bạn sẽ phải chỉ ra (các) thẻ tương ứng trong trường này để nhận chúng (đừng ngạc nhiên nếu bạn không nhận được gì nếu bạn để trống trường này)

Thư (2)

Khi bạn có khả năng sao chép mọi người, bạn có thể tự hỏi mục đích của trường email thứ hai là gì

Trường này hữu ích nếu bạn muốn gửi một tin nhắn có cấu trúc khác

Ví dụ: nếu bạn muốn gửi một bản sao của email cho người gửi, bạn có thể thêm một câu như thế này vào phần giới thiệu. “Cảm ơn bạn đã liên hệ với tôi, tôi sẽ trả lời trong vòng 24 giờ. Xin nhắc lại, đây là nội dung tin nhắn của bạn. ”

Xem bên dưới

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

tab "Tin nhắn"

Sau đó, đến thông báo lỗi và thành công sẽ được hiển thị lại khi email được gửi

Nếu mọi thứ suôn sẻ, thông báo thành công sẽ được hiển thị (cái đầu tiên), nếu không, một trong các thông báo lỗi sẽ được hiển thị tùy thuộc vào sự cố

Tùy thuộc vào bạn để xem những gì bạn muốn thay đổi. Bạn có thể tùy chỉnh thông báo thành công và lỗi để ít lạnh lùng hơn

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Thẻ “Cài đặt bổ sung”

Phần cuối cùng của trang này liên quan đến các ứng dụng nâng cao hơn một chút. Chúng ta sẽ thấy một số trong số chúng trong 5 mẹo ở cuối bài viết

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Bây giờ bạn đã có một biểu mẫu liên hệ cơ bản (đừng quên lưu nó nhờ nút Lưu ở trên cùng bên phải của trang). Bây giờ hãy xem cách tùy chỉnh nó…

Tham gia các thuê bao WPMarmite

Nhận các bài đăng WPMarmite cuối cùng (và cả các tài nguyên độc quyền)

THEO DÕI NGAY

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Thêm các trường bổ sung trong Mẫu liên hệ 7

Sau khi khám phá các phần khác nhau của trang chỉnh sửa biểu mẫu, hãy xem việc sử dụng các thẻ, điều này sẽ cho phép chúng tôi chèn các trường mới

Hãy bắt đầu bằng cách nhấp vào phần tử đầu tiên

trường văn bản

Một hộp cấu hình trường văn bản sẽ được hiển thị. Bạn có thể gán nó

  • Nghĩa vụ phải điền vào;
  • Một cái tên;
  • Giá trị mặc định (mà bạn có thể đặt làm hình nền mờ);
  • Kiểm tra chống thư rác thông qua plugin Akismet (chỉ hữu ích nếu trường văn bản là tên);
  • Mã định danh (đối với CSS);
  • Một lớp (luôn dành cho CSS)

Trong ví dụ bên dưới, tôi đã đặt trường bắt buộc và thêm văn bản hình mờ (phần giữ chỗ)

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Sau khi trường được thiết lập, bạn sẽ nhận được một thẻ phải được đặt trong mã biểu mẫu

Bây giờ hãy nhấp vào “Chèn thẻ” để thực hiện việc này. Để giữ một màn hình cổ điển, tôi đã sử dụng cấu trúc Plugins14 của các trường khác

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Bây giờ trường này ở dạng, nó phải có thể truy xuất nó khi một người gửi tin nhắn. Do đó, sự hiện diện của thẻ thứ hai Plugins15

Như plugin chỉ ra, nó phải được đặt trong phần nội dung của email sẽ được gửi cho chúng tôi

Cuối cùng, bạn cũng có thể đặt nó trong dòng chủ đề nếu bạn quan tâm

Quy trình tương tự cho tất cả các trường khác. Chúng ta hãy nhìn vào một số trong số họ

Tôi sẽ bỏ qua trường email, URL và số để cho bạn biết về…

trường ngày

Giả sử bạn tạo một mẫu đặt phòng. có ngày đến và ngày đi là bắt buộc. Cũng giống như trường văn bản, bạn có thể thiết lập ngày

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Đối với ngày đến, tôi đã xác định ngày tối thiểu và tối đa để tránh mọi người đưa vào các giá trị sai

Vùng văn bản

Để viết tin nhắn của họ, người gửi sẽ cần một vùng văn bản

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Cũng như các trường khác, thẻ đầu tiên phải được chèn vào mã biểu mẫu và thẻ thứ hai trong nội dung thư

Trình đơn thả xuống

Nếu biểu mẫu của bạn cho phép khách truy cập liên hệ với bạn về một trong các ưu đãi của bạn, menu thả xuống có thể hữu ích để tìm ra ưu đãi nào mà khách truy cập muốn thông tin về

Cho biết một lựa chọn trên mỗi dòng và đánh dấu vào một số tùy chọn nếu cần

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Lưu ý . Các nút radio và hộp kiểm có chức năng tương tự nhau.

chấp thuận

Với trường này, bạn có thể thêm nút chấp nhận. Nếu nút không được khách truy cập của bạn kiểm tra, email sẽ không được gửi

Để tuân thủ một phần GDPR (Quy định chung về bảo vệ dữ liệu), bạn có thể sử dụng trường này để yêu cầu khách truy cập chấp nhận Chính sách quyền riêng tư của bạn

Trong trường hợp này, hãy nhớ thêm một dòng chữ nhỏ như “Bằng cách đánh dấu vào ô này, tôi chấp nhận Chính sách bảo mật của trang web này” vào giữa hai thẻ Plugins16

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Về các tùy chọn, lưu ý rằng có thể làm cho hộp kiểm này trở thành tùy chọn

Đố

Nếu bạn muốn lọc các email được gửi cho mình, bạn có thể sử dụng một bài kiểm tra (Tôi sẽ cho bạn biết về một giải pháp khác sau)

Ngay cả khi thư rác thường được xử lý tốt bởi Biểu mẫu liên hệ 7, thì việc thêm một câu hỏi phụ cho phép bạn chắc chắn rằng những người đối thoại của bạn thực sự là con người

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Và ở dạng

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Trong trường hợp này, tôi đã hỏi thủ đô của Úc là gì nhưng bạn có thể yêu cầu giải một phép tính nhỏ

Điều quan trọng là sử dụng cấu trúc. Câu hỏi. Câu trả lời

gửi tập tin

Các liên hệ của bạn cũng có thể gửi cho bạn các tệp. Đây có thể là thông số kỹ thuật, hình ảnh, v.v. Tóm lại, bất cứ điều gì bạn muốn

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Để tránh nhận bất kỳ loại tệp nào, bạn nên xác định kích thước tối đa. Cho biết 1, 2, 3 hoặc 10mb hoặc thậm chí nhiều hơn tùy thuộc vào tệp bạn mong đợi

Đồng thời cho biết các định dạng tệp được biểu mẫu của bạn chấp nhận, dựa trên ví dụ này. Plugins17. Điều quan trọng là phân tách các phần mở rộng bằng các thanh dọc. Plugins18

Điều cuối cùng cần biết, không đặt thẻ thứ hai (Plugins19) trong nội dung thư mà trong trường Tệp đính kèm của email

gửi nút

Để gửi tin nhắn của mình, người đối thoại của bạn sẽ phải nhấp vào nút Gửi. Đối với các trường đã nghiên cứu trước đây, có thể thêm mã định danh và lớp để tùy chỉnh bằng CSS

Nhãn tương ứng với văn bản của nút, vì vậy điều quan trọng là phải chỉ định nó

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Sau đó dán thẻ vào mã biểu mẫu bên trái

Chúng tôi đã hoàn thành chuyến tham quan các thẻ Biểu mẫu liên hệ 7, nhưng trước khi chúng tôi chuyển sang tích hợp biểu mẫu của bạn trên trang web của bạn, tôi muốn dừng lại một chút về hình ảnh xác thực

CAPTCHA trong Mẫu liên hệ 7

Trước đó để có thể lọc email mình đã nói với các bạn là có thể dùng quiz với Contact Form 7

Nhưng cũng có một giải pháp không có trên CF7, nhưng được khuyến nghị hơn. sử dụng hình ảnh xác thực

Hình ảnh xác thực là một bài kiểm tra giúp chống lại thư rác bằng cách phân biệt con người với rô-bốt

Nó yêu cầu phản hồi từ người dùng (chọn ảnh, sao chép từ) trước khi thực hiện một hành động (tải xuống tệp, tạo tài khoản email, xác thực nhận xét, gửi biểu mẫu, v.v. )

Để chèn captcha với CF7 thì bạn làm như thế nào?

Chà, trước khi cập nhật bài viết này, tôi đã nói với bạn cách thực hiện nhờ một plugin khác được thiết kế bởi tác giả của CF7. Captcha thực sự đơn giản

Nó cho phép bạn chọn kích thước và chủ đề của hình ảnh xác thực (màu nền và màu phông chữ)

Trong thời gian chờ đợi (đối với các phiên bản CF7 cao hơn 4. 3), Takayuki Miyoshi đã thay đổi cuti của mình và hiện khuyến nghị sử dụng reCAPTCHA

Đây là một dịch vụ của Google cho phép bạn chứng minh rằng bạn không phải là người máy bằng cách đánh dấu vào một ô

Nếu máy tính nghi ngờ bạn là con người, nó sẽ cho bạn một bài kiểm tra nhỏ

Để liên kết reCAPTCHA với CF7, hãy nhấp vào liên kết Tích hợp trong menu plugin. Sau đó bấm vào nút Thiết lập tích hợp

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Trên trang tiếp theo, bạn được nhắc nhập Khóa trang web và Khóa bí mật

Để làm như vậy, hãy truy cập trang này và nhấp vào nút Bảng điều khiển dành cho quản trị viên ở góc trên cùng bên phải của trang

Điền thông tin được yêu cầu bằng cách chọn hình ảnh xác thực bạn chọn (phiên bản 3 hoặc phiên bản 2). Google hiển thị cho bạn các loại captcha khác nhau trên trang này

Ví dụ: chọn reCAPTCHA phiên bản 2 nếu bạn muốn hộp kiểm “Tôi không phải là người máy” hiển thị

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Sau khi thông tin được điền, Google sẽ hiển thị Khóa trang web và Khóa bí mật của bạn

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Tất cả những gì bạn phải làm là sao chép và dán chúng vào các ô được cung cấp, nhấp vào Lưu thay đổi và thế là xong

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Và để biết mọi thứ về hình ảnh xác thực, WPMarmite có hướng dẫn bạn cần, trong đó chúng tôi giới thiệu 6 plugin chuyên dụng

Vì vậy, như đã hứa, đã đến lúc chuyển sang tích hợp biểu mẫu vào nội dung của bạn

Xây dựng trang web của bạn với Elementor

Dễ dàng thiết kế giao diện trang web WordPress của bạn với trình tạo trang nổi tiếng

Dùng thử phần tử

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Tích hợp Mẫu liên hệ 7 trên trang web của bạn

Khi bạn đã thiết lập xong các trường trong biểu mẫu của mình, hãy nhấp vào nút Lưu ở trên cùng bên phải của màn hình

Dưới tiêu đề, bạn sẽ thấy một mã ngắn

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Để chèn biểu mẫu của bạn, chỉ cần dán mã ngắn vào bài viết, trang hoặc tiện ích bạn chọn

Và vâng, nó không phức tạp hơn 🙂

Tôi đề nghị bạn kết thúc hướng dẫn này với…

5 mẹo để tùy chỉnh biểu mẫu của bạn

Nếu bạn muốn biểu mẫu của mình nâng cao hơn một chút, đây là một số mẹo có thể hữu ích

Tất nhiên, đây không phải là những điều duy nhất bạn có thể làm với plugin này

Hãy xem các plugin khác kết hợp với Contact Form 7 để xem chúng có thể làm gì

1. Chèn biểu mẫu vào bất cứ đâu

Theo mặc định, chỉ có thể chèn biểu mẫu trong ấn phẩm (bài đăng, trang hoặc khác) và tiện ích con

Nếu bạn muốn đưa biểu mẫu vào mẫu trang hoặc tại một vị trí cụ thể trong chủ đề của mình, hãy sử dụng mã PHP sau (rõ ràng bằng cách đặt đúng mã ngắn)

Plugins20

2. Hãy để khách truy cập chọn người nhận

Để khách truy cập của bạn có cơ hội liên hệ với một người hoặc bộ phận cụ thể trong công ty của bạn, hãy tiến hành như sau

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Như trong hình, tạo menu thả xuống và đặt người nhận vào các lựa chọn. Sử dụng cấu trúc Plugins21 để ẩn email cho khách truy cập (e. g. Plugins22)

Để điều này hoạt động, cần đặt thẻ Plugins23 vào trường Đến

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

3. Nhận IP của khách truy cập

Nếu vì bất kỳ lý do gì, bạn muốn lấy IP của người liên hệ với bạn, hãy chèn thẻ Plugins24 vào nội dung thư (ví dụ dưới chữ ký)

4. Nhận ngày và thời gian gửi

Ngoài ra, có thể có ngày và thời gian gửi email. Bạn sẽ cho tôi biết rằng điều này tương ứng với ngày giờ nhận được email và bạn sẽ đúng

Nhưng này, nếu cần, bạn có thể chèn các thẻ Plugins25 và Plugins26 ] vào nội dung thư

5. Lấy địa chỉ của trang gửi

Nếu bạn đã tích hợp biểu mẫu của mình trong một tiện ích hoặc thứ gì đó trong chủ đề của mình, thì việc biết chính xác trang mà biểu mẫu được gửi từ đó có thể rất thú vị

Để làm như vậy, hãy chèn thẻ Plugins27 vào phần nội dung của thư (Plugins28 sẽ trả về liên kết cố định của bài đăng, vì vậy điều đó tùy thuộc vào bạn)


Ngoài ra, có hai thủ thuật khác mà tôi sẽ không trình bày chi tiết ở đây vì việc triển khai chúng liên quan đến người dùng cao cấp hơn. Tôi thực sự không hiểu tại sao tác giả lại tích hợp các tính năng này theo cách này nhưng tốt, nó là như vậy. họ đang

  • Chuyển hướng người dùng sau khi gửi biểu mẫu;
  • Theo dõi xác thực biểu mẫu với Google Analytics

Tìm hiểu tất cả về Google Analytics và cách sử dụng nó để hiểu thống kê trang web WordPress của bạn, hãy đọc bài viết này

Mẫu liên hệ 7. chúng tôi lấy hàng

Contact Form 7 là một trong 6 plugin chính thức của WordPress. thư mục org với hơn 5 triệu lượt cài đặt đang hoạt động

Nó cho phép bạn tạo các biểu mẫu đơn giản nhưng không phải lúc nào cũng dễ dàng tạo ra những thứ phức tạp với nó

Bạn sẽ cần một số kiến ​​thức về HTML để có được kết xuất chính xác. Nếu bạn có kiến ​​thức cơ bản về CSS, bạn sẽ có thể đẩy tùy chỉnh nhờ các lớp và mã định danh có thể được thêm vào từng phần tử

Nếu bạn đang tìm kiếm sự đơn giản hơn, tôi khuyên dùng Gravity Forms

Đặc biệt, nó cho phép bạn tạo các biểu mẫu với thao tác kéo thả đơn giản. Mà – phải nói rằng – bỏ xa Contact Form 7

Nhiều plugin bổ sung có sẵn để hưởng lợi từ nhiều chức năng hơn (chẳng hạn như Slack, Mailchimp hoặc Paypal). Có rất nhiều để lựa chọn

Từ giờ trở đi, tôi sẽ để sàn cho bạn. Bạn nghĩ gì về Mẫu liên hệ 7?

Thể hiện bản thân bằng cách đăng bình luận bên dưới

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Nhận các bài đăng tiếp theo miễn phí và truy cập các tài nguyên độc quyền. Hơn 40.000 người đã làm, tại sao bạn không?

Đăng ký

Làm cách nào để sử dụng Mẫu liên hệ 7 trong HTML?

Giới thiệu về tác giả

Nhóm WPMarmite

WPMarmite giúp người mới bắt đầu tận dụng tối đa WordPress với các hướng dẫn chuyên sâu và đánh giá trung thực. Gặp gỡ người sáng lập, Alex và nhóm của anh ấy ngay tại đây

Làm cách nào để sử dụng shortcode mẫu liên hệ 7 trong HTML?

Mở trang chỉnh sửa cho biểu mẫu liên hệ mà bạn muốn thêm (Liên hệ > Biểu mẫu liên hệ). Mỗi biểu mẫu liên hệ có mã ngắn riêng, chẳng hạn như [ contact-form-7 id="1234" title="Contact form 1"] . Copy shortcode dán vào nội dung bài viết.

Thẻ HTML mặc định của mẫu liên hệ 7 là gì?

Biểu mẫu Biểu mẫu liên hệ 7 mặc định sử dụng các phần tử đoạn văn (

Paragraph Content

) làm cơ sở cho biểu mẫu. Mặc dù đây có lẽ là cách đơn giản nhất để tạo biểu mẫu, nhưng nó có một số thiếu sót.