Cách thiết lập contact form 7 trong WordPress. Tất cả các trường (thẻ) của biểu mẫu. Chống thư rác bằng CAPTCHA thực sự đơn giản

Mẫu liên hệ 7
  • Tất cả các trường biểu mẫu (thẻ)
  • Cách tạo một trong các trường bắt buộc: thư hoặc điện thoại
  • Các trường có điều kiện cho phần bổ trợ Mẫu liên hệ 7
  • Biểu mẫu liên hệ 7 Tiện ích xác thực tùy chỉnh

Trong bài viết trước, chúng ta đã làm quen với plugin Contact Form 7 và các cài đặt của nó. Và tại đây, tất cả các loại trường được hỗ trợ (thẻ mẫu biểu mẫu) và các tham số của từng loại, cũng như kiểu (lớp CSS) của các thành phần biểu mẫu sẽ được thảo luận chi tiết. Đây là tài liệu không chính thức cho tất cả các thẻ mẫu biểu mẫu Liên hệ 7.

Loại trường xác định loại thành phần biểu mẫu HTML: văn bản, “radio”, “select”. Loại trường được chỉ định trong tên của thẻ mẫu biểu mẫu.

Một ví dụ về thẻ trường văn bản và mã HTML mà nó sẽ xuất ra:

Ngoài ra, mỗi thẻ (trường) đều có các tùy chọn (thuộc tính thẻ) riêng. Tùy chọn thẻ được chỉ định sau tiêu đề và tên trường. Ví dụ: hãy thêm thuộc tính lớp cho trường văn bản trước đó:

Cú pháp thẻ mẫu (trường) của biểu mẫu:

Thuộc tính thẻ (trường)

Bạn có thể sử dụng cùng thuộc tính (tùy chọn) trong các thẻ biểu mẫu khác nhau. Do đó, để không lặp lại mô tả của từng thuộc tính cho từng trường biểu mẫu, chúng tôi sẽ đặt mô tả của chúng vào một phần riêng.

Các thuộc tính chỉ có thể áp dụng cho một thẻ biểu mẫu cụ thể sẽ được liệt kê riêng cho từng thẻ.

* Dấu * ngay sau loại trường làm cho trường này là bắt buộc.
Ví dụ: id (đường kẻ) Tên định danh. id thuộc tính css, được sử dụng để thiết kế trường.
Ví dụ: lớp id:foo (đường kẻ) Tên lớp. thuộc tính lớp css, được sử dụng để thiết kế trường.
Ví dụ: lớp:thanh
Bạn có thể chỉ định một số lớp: minlength và maxlength (con số)

Đây là các thuộc tính HTML5 giới hạn việc nhập ký tự vào một trường, cả ở ngưỡng dưới (tối thiểu) và ngưỡng trên (tối đa). Người dùng sẽ không thể nhập ít ký tự hơn (độ dài tối thiểu) hoặc nhiều ký tự (độ dài tối đa) vào trường hơn mức được chỉ định bởi các giá trị này.

Đối với minlength, nếu văn bản đã nhập nhỏ hơn giá trị này, người dùng sẽ nhận được cảnh báo "Trường quá ngắn". Và ngược lại với maxlength .

Ví dụ:
độ dài tối thiểu:10 -
chiều dài tối đa:90 -
cả hai cùng một lúc -

Kết quả là, chúng tôi nhận được một trường văn bản sẽ đưa ra cảnh báo và thư sẽ không được gửi nếu có ít hơn 10 hoặc nhiều hơn 140 ký tự được nhập vào đó.

Các tham số này hỗ trợ các loại trường sau: văn bản, vùng văn bản, email, url, tel, quiz.

Có một mục cũ cho các tham số này:

Tham số maxlength được ưu tiên rõ ràng, vì vậy nếu bạn thêm maxlength:150 thì 140 sẽ được viết lại thành 150.

Kích cỡ (con số)Độ rộng của trường văn bản, được xác định bởi số ký tự trong phông chữ đơn cách. Có thể được ghi đè trong các kiểu CSS bằng thuộc tính chiều rộng.
Ví dụ: kích thước:50 -
Mặc định: 40 mặc định (chuỗi/số)

Giá trị trường mặc định.

Ví dụ: mặc định:giá trị.

Nếu người dùng điền vào biểu mẫu được ủy quyền thì theo mặc định, bạn có thể thay thế giá trị lấy từ dữ liệu hồ sơ của người đó. Ví dụ: nếu bạn chỉ định thuộc tính default:user_email - , thì trường sẽ tự động được điền giá trị - “email của người dùng hiện tại” đang xem biểu mẫu...

Các trường đặc biệt khác của thuộc tính mặc định:

    mặc định:post_meta- sẽ nhận giá trị của siêu trường dữ liệu có khóa bằng tên trường. Ví dụ: sẽ hiển thị một trường biểu mẫu có giá trị sẽ được đặt thành giá trị của siêu dữ liệu bài đăng mymeta_key

    mặc định: nhận- sẽ đặt giá trị của tham số GET với khóa bằng tên trường: - http://example.com/?mykey=value

    mặc định:bài- sẽ đặt giá trị của tham số POST với khóa bằng tên trường: - trong POST chúng ta truyền dữ liệu mykey=value.

    mặc định: shortcode_attr- sẽ đặt giá trị của thuộc tính shortcode với khóa bằng tên trường. Ví dụ: thẻ mẫu biểu mẫu là: , thì trong mã ngắn của chính biểu mẫu, khi được gọi trong nội dung bài đăng, chúng tôi chỉ định thuộc tính mykey: . Đọc thêm dưới đây.

    Ngoài ra, bạn cần thêm tên thuộc tính shortcode wordpress vào danh sách trắng (vì wordpress loại bỏ tất cả các thuộc tính shortcode không xác định...). Điều này được thực hiện thông qua một bộ lọc:

    Add_filter("shortcode_atts_wpcf7", "my_shortcode_atts_wpcf7", 10, 3); hàm my_shortcode_atts_wpcf7($out, $pairs, $atts)( if(isset($atts["mykey"])) $out["mykey"] = $atts["mykey"]; return $out; )

Đối với hộp kiểm, radio và chọn:

  • mặc định: số - mặc định:2- chọn phần tử thứ hai của danh sách...
  • mặc định:số_số - mặc định:2_3- chọn phần tử thứ hai và thứ ba của danh sách (đối với nhiều lựa chọn và hộp kiểm)...

Đọc thêm về mặc định và các tùy chọn của nó, hãy đọc ở cuối bài viết.

Giữ chỗ hoặc hình mờ (đường kẻ)

Văn bản sẽ được hiển thị trong thuộc tính giữ chỗ.

Tùy chọn này phải được sử dụng ở cuối tất cả các tùy chọn thẻ mẫu: và không

Có thể được sử dụng Chữ ký ảnh thay vì giữ chỗ, đây là từ đồng nghĩa (bí danh) của thuộc tính.

Akismet (đường kẻ)

Sự bảo vệ SPAM. Yêu cầu cài đặt và kích hoạt plugin Akismet.

  • akismet:tác giả -
  • akismet:tác giả_email -
  • akismet:tác giả_url -

Làm thế nào nó hoạt động? Khi gửi dữ liệu, các giá trị của các trường được chỉ định sẽ được xử lý trên máy chủ akismet và nếu chúng không vượt qua quá trình kiểm tra, thư sẽ không được gửi và người dùng sẽ thấy lỗi:

Thông báo sẽ biến mất khi bạn tập trung vào bất kỳ trường nào.

Thẻ mẫu biểu mẫu (trường)

Dưới đây là tất cả các thẻ plugin mà bạn có thể sử dụng trong mẫu biểu mẫu của mình. Các thẻ này sẽ trở thành đầu vào HTML, vùng văn bản và các phần tử chọn lọc.

Các trường văn bản bao gồm các loại sau: văn bản, email, url, tel, textarea và thẻ count có liên quan chặt chẽ với các trường văn bản.

Có hai loại trường số: số và phạm vi. Đây là các trường HTML5 nên các trình duyệt cũ hơn không hỗ trợ chúng mà thay vào đó hiển thị trường văn bản.

chữ

Trường văn bản một dòng.

Các tùy chọn được hỗ trợ (thuộc tính):

  • lớp học
  • Độ dài nhỏ nhấtchiều dài tối đa
  • kích cỡ
  • phần giữ chỗ
  • mặc định- bạn có thể sử dụng: user_login, user_first_name, user_last_name, user_nickname, user_display_name
  • akismet:tác giả

e-mail

Trường này được dùng để nhập email.

Các thuộc tính được hỗ trợ:

  • lớp học
  • Độ dài nhỏ nhấtchiều dài tối đa
  • kích cỡ
  • phần giữ chỗ
  • akismet:tác giả_email
  • mặc định:user_email hoặc mặc định: [email protected]

địa chỉ

Trường để nhập địa chỉ Internet (URL).

Các thuộc tính được hỗ trợ:

  • lớp học
  • Độ dài nhỏ nhấtchiều dài tối đa
  • kích cỡ
  • phần giữ chỗ
  • akismet:tác giả_url
  • mặc định:user_url hoặc giá trị mặc định

điện thoại

Trường để nhập số điện thoại.

Các thuộc tính được hỗ trợ:

  • lớp học
  • Độ dài nhỏ nhấtchiều dài tối đa
  • kích cỡ
  • phần giữ chỗ

vùng văn bản

Trường để nhập văn bản nhiều dòng.

Các thuộc tính được hỗ trợ:

  • lớp học
  • Độ dài nhỏ nhấtchiều dài tối đa
  • phần giữ chỗ
  • (cols)x(hàng)- trong đó cols là chiều rộng của trường tính bằng ký tự và hàng là chiều cao của trường tính bằng dòng văn bản. Có 3 định dạng: (cols)x(rows) , (cols)x và x(rows) .

Đối với vùng văn bản, giá trị trường có thể được chỉ định theo hai cách:

  1. Văn bản mặc định...

Nếu vùng văn bản chứa thẻ html thì sau khi gửi biểu mẫu, bạn có thể gặp lỗi máy chủ 500!

đếm (bộ đếm ký tự)

Thẻ đếm cho phép bạn đặt bộ đếm khi bạn muốn hiển thị cho người dùng biết bao nhiêu ký tự đã được nhập hoặc còn lại bao nhiêu ký tự cho đến giá trị tối đa (nếu tham số là maxlength).

Để kích hoạt bộ đếm, bạn cần chèn thẻ bộ đếm vào mẫu biểu mẫu cho biết tên của trường văn bản mà nó sẽ đếm ký tự.

Thẻ truy cập có thể được sử dụng ở bất kỳ đâu trong mẫu biểu mẫu.

Ví dụ: chúng tôi có trường văn bản cho tin nhắn:

Sau đó chúng tôi làm điều này:

Trường này được giới hạn ở mức tối thiểu là 10 và tối đa là 140 ký tự. Trong trường hợp này, bộ đếm sẽ hiển thị số lượng ký tự đã được nhập.

Đôi khi sẽ thuận tiện hơn khi hiển thị số lượng ký tự còn lại để nhập vì người dùng không biết về giới hạn tối đa. Để thực hiện việc này, bạn cần chỉ định tùy chọn down - trong thẻ.

con số

Trường để nhập số. Khi trường có tiêu điểm, các giá trị có thể được thay đổi bằng cách xoay con lăn chuột.

Hỗ trợ các thuộc tính:

  • lớp học
  • phần giữ chỗ
  • phút
  • tối đa

phạm vi

Thanh trượt để chọn số trong phạm vi được chỉ định.

Hỗ trợ các thuộc tính:

  • lớp học
  • phần giữ chỗ- chỉ được hiển thị trong các trình duyệt không hỗ trợ loại trường này và thay vào đó hiển thị trường văn bản.
  • phút- Đặt giá trị thấp hơn khi nhập số: min:20
  • tối đa- Đặt giá trị trên để nhập số: min:100
  • bước chân- Đặt bước thay đổi số cho thanh trượt và trường nhập số: min:5

hộp kiểm và đài phát thanh

  • Nút radio- Đây là những công tắc cho phép bạn chỉ chọn một tùy chọn trong số nhiều tùy chọn.
  • Hộp kiểm- Đây là những hộp kiểm cho phép bạn chọn nhiều tùy chọn cùng một lúc.

Các thuộc tính được hỗ trợ:

  • mặc định- Giá trị mặc định của trường, ví dụ mặc định:2, có nghĩa là khi trường được hiển thị, tùy chọn trả lời thứ hai sẽ được chọn. Đối với các hộp kiểm, bạn có thể chỉ định một số giá trị như mặc định này:1_2_3

    nhãn_as_đầu tiên- Theo mặc định, hộp kiểm (nút radio) xuất hiện trước và sau đó là dòng chữ của nó (cô ấy). Bằng cách truyền tham số này, bạn sẽ trao đổi chúng.

    use_label_element- Bao bọc hộp kiểm hoặc nút radio trong nhãn, cho phép bạn chọn một phần tử bằng cách nhấp vào tên của nó.

    loại trừ- Bằng cách chỉ định tham số này, chỉ có thể chọn 1 phần tử từ hộp kiểm. Chức năng này dựa trên JavaScript. Nút radio không hỗ trợ tùy chọn này do tính chất cụ thể của chúng.

    văn bản miễn phí- Cho phép bạn thêm trường văn bản vào phần tử cuối cùng. Nó sẽ sẵn sàng để hoàn thành khi phần tử cuối cùng được chọn và người dùng có thể bổ sung câu trả lời của mình.

  • dữ liệu- Nhận giá trị từ một trang tính có các quốc gia trên thế giới, ví dụ data:countries .

Trung Quốc Ấn Độ San Marino

lựa chọn

Cho phép bạn chọn các tùy chọn trả lời từ danh sách thả xuống. Có thể được sử dụng theo hai cách:

Thuộc tính:

  • lớp học
  • mặc định- mặc định:2 hoặc mặc định:2_3_4
  • nhiều- Cho phép chọn nhiều phương án trả lời
  • bao gồm_blank- Thêm dòng “- – –” làm phương án trả lời đầu tiên
  • nhãn_as_đầu tiên
  • dữ liệu
  • mặt hàng- tùy chọn trả lời

ngày

Trường để chọn ngày theo lịch. Đây là loại HTML5 và không được các trình duyệt cũ hỗ trợ.

Thuộc tính:

  • lớp học
  • phần giữ chỗ
  • phút- Giá trị thấp hơn của một ngày có thể, ví dụ min:2016-01-01 . Định dạng ngày tương đối được hỗ trợ, ví dụ: hôm nay+10 ngày, hôm nay-2 tuần, v.v.
  • tối đa- Giá trị trên của một ngày có thể, ví dụ min:2017-01-01 . Định dạng ngày tương đối được hỗ trợ, giống như min .
  • bước chân- Bước thay đổi ngày theo ngày, ví dụ step:3 . Nếu giá trị thấp hơn là 2016-01-01 và bước 3 thì bước tiếp theo sẽ hiển thị ngày 2016-01-04, v.v.

Khi bạn chèn thẻ vào mẫu thư, bạn sẽ nhận được ngày trong thư ở định dạng YYYY-MM-DD (25-12-2016) - điều này không rõ ràng. Do đó, bạn có thể chỉ định một mẫu trực quan hơn; để thực hiện việc này, hãy sử dụng cấu trúc [_format_(tên trường) "(định dạng ngày)"]

[_format_your-date "D, d M y"]

reCAPTCHA (bảo vệ thư rác)

Biểu mẫu liên hệ 7, bắt đầu từ phiên bản 4.3, kết hợp với dịch vụ reCAPTCHA, cho phép bạn chống thư rác. Để sử dụng reCAPTCHA, bạn cần có tài khoản Google, nơi bạn có thể lấy khóa để sử dụng API dịch vụ.

Để có được những chìa khóa này bạn cần:

  1. Đi đến bảng quản trị reCAPTCHA.
  2. Đăng ký một trang web.
  3. Lấy khóa trang và khóa bí mật (đây là hai khóa khác nhau: có thể có một khóa trang nhưng có nhiều khóa bí mật).

Thuộc tính:

  • lớp học
  • chủ đề- Phối màu widget. Có thể tối hoặc sáng (mặc định).
  • kích cỡ- Kích thước tiện ích. Có thể nhỏ gọn (compact) hoặc bình thường (mặc định).

Bây giờ trong mẫu biểu mẫu hãy sử dụng thẻ.

Đố vui (câu hỏi-trả lời)

Trong trường này, người dùng sẽ được hỏi một câu hỏi và phải trả lời câu hỏi đó, nếu không thư sẽ không được gửi. Trường này xuất hiện khi thư rác được xử lý bằng cách sử dụng hình ảnh xác thực chữ cái (chưa có reCAPTCHA). Việc sử dụng hình ảnh xác thực chữ cái đã áp đặt các hạn chế trên cả máy chủ (bắt buộc phải có thư viện đồ họa) và con người (lỗi nhận thức trực quan). Phương pháp này đã giải quyết được những nhược điểm đó.

Thuộc tính:

  • lớp học
  • kích cỡ- Kích thước và chiều dài trường. Một trong các giá trị có thể bị bỏ qua.

Ví dụ cho thấy câu hỏi và câu trả lời được phân tách bằng dấu | . Câu hỏi và câu trả lời có thể được viết hoàn toàn theo bất kỳ cách nào, ví dụ như toán học:

Bạn có thể chỉ định một số cặp câu hỏi-câu trả lời; câu hỏi sẽ được chọn ngẫu nhiên mỗi khi biểu mẫu được hiển thị:

Đối với trường này, bạn có thể chỉ định tham số minlength và maxlength:

Khi tạo thẻ bài kiểm tra có nhiều câu hỏi bằng trình tạo, hãy viết từng cặp câu hỏi-câu trả lời trên một dòng mới.

ẩn giấu

Trường ẩn - không hiển thị cho người dùng. Có thể lưu trữ thông tin có giá trị. Thông tin có thể được thêm bằng Javascript hoặc được tạo bằng tùy chọn mặc định.

Thuộc tính:

  • lớp học
  • mặc định- Bạn có thể truyền vào đây một tham số sẽ được chuyển đổi theo một quy tắc cụ thể. Đọc thêm ở phần mô tả thuộc tính (tùy chọn ở đầu bài).

nộp

Nút gửi dữ liệu biểu mẫu (gửi). Khi bạn bấm vào nút này, tất cả dữ liệu biểu mẫu sẽ được gửi đến máy chủ.

Thuộc tính:

  • lớp học

Bạn có thể chỉ định văn bản nút:

Một ví dụ về việc sử dụng tất cả các tham số được hỗ trợ:

trình tải ajax

Xin lưu ý rằng thẻ trong đó biểu tượng tải xuống được tải nếu bạn nhấp vào gửi biểu mẫu, nó sẽ được thêm cùng với nút gửi, hay đúng hơn là sau nó.

Vì vậy, ví dụ: nếu bạn thay thế thẻ bằng nút HTML làm sẵn. Điều này đôi khi cần thiết khi bố trí nút không phù hợp. Ví dụ: nếu bạn muốn nút gửi trông như thế này: