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ất Và chiề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ả
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ất Và chiề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ất Và chiề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ất Và chiề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ất Và chiề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:
- 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:
![](https://i0.wp.com/wp-kama.ru/wp-content/uploads/2016/12/CF7-obychnyj-vypadayushhij-spisok.jpg)
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:
- Đi đến bảng quản trị reCAPTCHA.
- Đăng ký một trang web.
- 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:
Trong trường hợp này chúng ta sẽ mất thẻ , bởi vì nó được thêm thông qua JS, sau một phần tử có lớp gửi wpcf7 - thông thường nút gửi tiêu chuẩn có một lớp như vậy.
Để khắc phục hạn chế này, chúng ta chỉ cần thêm lớp này vào mã HTML nút của mình:
Tất cả. Gắn thẻ bây giờ sẽ được thêm vào và hoạt động như bình thường.
Hoặc bạn có thể thêm một thẻ trực tiếp vào mẫu biểu mẫu.
chấp nhận (tôi chấp nhận các điều khoản của bạn)
Bạn chỉ có thể cho phép người dùng gửi dữ liệu nếu họ chấp nhận một số điều khoản nhất định.
Thuộc tính:
- lớp học
- đảo ngược- Tham số tạo ngay hộp kiểm có hộp kiểm, nhưng để gửi biểu mẫu cho người dùng, bạn cần xóa nó.
- mặc định- Tạo một hộp kiểm có hộp kiểm theo mặc định nếu bạn chỉ định bật , ví dụ default:on , mặc định là default:off .
- không bắt buộc- trường trở thành tùy chọn.
Tôi cho phép bạn sử dụng tên của tôi trong các bình luận.
Tôi cho phép bạn sử dụng tên của tôi trong các bình luận.
Trường này là một hộp kiểm được xử lý bằng JavaScript như thế này:
This.find(".wpcf7-acceptance").click(function() ( $(this).closest("form").wpcf7ToggleSubmit(); ));
Ban đầu ở nút gửi biểu mẫu thuộc tính bị vô hiệu hóa = "bị vô hiệu hóa" hiện diện. Những thứ kia. Nếu hộp kiểm không hoạt động thì nút gửi biểu mẫu cũng không hoạt động, nghĩa là không thể gửi biểu mẫu. Khi hộp kiểm được chọn, tập lệnh sẽ xóa thuộc tính này và nút sẽ hoạt động.
Logic của trường này có thể được thay đổi để nó chỉ được kiểm tra sau khi cố gắng gửi biểu mẫu. Để thực hiện việc này, hãy chèn đoạn mã sau vào tab cài đặt plugin "Cài đặt nâng cao":
Chấp nhận_as_validation: bật
Vì vậy, nếu người dùng không chọn hộp này, anh ta sẽ nhận được thông báo:
tập tin (tải tập tin lên)
Sử dụng trường này, bạn có thể cho phép người dùng đính kèm tệp của riêng họ vào tin nhắn.
Việc thêm chức năng như vậy bao gồm hai giai đoạn:
Giai đoạn 1 - thêm trường để tải tệp lên biểu mẫu
Thuộc tính:
loại tập tin- Loại tệp được phép tải xuống, ví dụ pdf, jpg và các loại khác (danh sách đầy đủ bên dưới), được biểu thị qua dấu phân cách | (đường thẳng) nếu bạn cần chỉ định nhiều loại.
- giới hạn- Giới hạn kích thước file tải về, ví dụ: limit:1048576, limit:1024kb, limit:1mb. Bạn có thể sử dụng kb (kilobyte) hoặc mb (megabyte).
Các loại tệp được chấp nhận: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, Mov, mp3, mp4, mpg, wav và wmv.
Kích thước tệp tối đa mặc định: 1 MB (1048576 byte).
Giai đoạn 2 - thêm thẻ vào mẫu thư
Ở giai đoạn 1, một trường có tên - your-file đã được tạo. Bây giờ chúng tôi sử dụng thẻ có tên này trong mẫu thư, nhưng không phải trong trường “Nội dung thư” thông thường mà trong trường “Tệp đính kèm”.
Trong trường "Tệp đính kèm", chỉ chèn thẻ có tên trường từ mẫu biểu mẫu.
- - Phải
- - sai
Nếu có một số trường để tải tệp lên, thì trong trường “Tệp đính kèm”, hãy liệt kê chúng lần lượt mà không có bất kỳ dấu phân cách nào: .
Tệp đính kèm cục bộ
Contact Form 7, bắt đầu từ phiên bản 3.5, hỗ trợ chuyển các tập tin cục bộ sang email. Để thực hiện việc này, cùng với việc chèn thẻ vào trường đính kèm tệp, bạn cần chuyển đường dẫn đến tệp của mình:
/home/you/dir/dir/dir/fantasticpicture.jpg tải lên/2013/08/08/boringguide.pdf
Nếu đường dẫn không tuyệt đối được chỉ định thì đường dẫn tương đối từ thư mục wp-content sẽ được xem xét.
Quản lý tải lên tệp
Sau khi người dùng tải tệp lên thông qua biểu mẫu liên hệ, Biểu mẫu liên hệ 7 sẽ kiểm tra những nội dung sau:
- Đã xảy ra lỗi PHP gì;
- Loại tệp và kích thước tệp.
Nếu kiểm tra thành công thì plugin:
- Di chuyển tập tin đã tải xuống vào một thư mục tạm thời.
- Đính kèm tập tin vào thư và gửi nó.
- Xóa một tập tin khỏi một thư mục tạm thời.
Theo mặc định, thư mục chứa các tệp tạm thời được đặt ở đây: wp-content/uploads/wpcf7_uploads. Có thể khác nếu đường dẫn đến thư mục tải lên bị thay đổi.
Thư mục wpcf7_uploads được tạo tự động. Nhưng có những trường hợp điều này là không thể - thư mục tải lên gốc không có quyền ghi. Sau đó, bạn cần:
- Thay đổi quyền của thư mục tải lên.
- Tạo thư mục wpcf7_uploads theo cách thủ công thông qua ftp, v.v.
Ngoài ra, bạn thường có thể thay đổi đường dẫn đến thư mục tạm thời của plugin. Để thực hiện việc này, hãy mở tệp wp-config.php trong thư mục gốc của trang web và thêm hằng số WPCF7_UPLOADS_TMP_DIR, trong đó chỉ định đường dẫn đầy đủ đến thư mục chứa các tệp tạm thời:
Xác định ("WPCF7_UPLOADS_TMP_DIR", "/your/file/path");
Khi chỉ định đường dẫn tùy chỉnh đến thư mục chứa các tệp tạm thời, hãy đảm bảo rằng nó tồn tại và có quyền ghi (755). Nếu không, việc tải tệp lên sẽ không hoạt động, đồng nghĩa với việc chúng sẽ không được đính kèm vào thư.
phản ứng
Đây không phải là một trường mà là thẻ biểu mẫu cho phép bạn thay đổi vị trí của thông báo lỗi và thông báo khi gửi biểu mẫu. Theo mặc định, thông báo về việc gửi biểu mẫu hoặc lỗi được hiển thị ở cuối trường biểu mẫu.
Để thay đổi vị trí này, hãy chèn thẻ vào vị trí trong mẫu biểu mẫu nơi có thông báo:
Tên của bạn (bắt buộc) Tin nhắn của bạn
Nếu bạn không nhập tên, biểu mẫu sẽ không được gửi và chúng tôi sẽ được thông báo về lỗi:
Như bạn có thể thấy, trong mẫu biểu mẫu, chúng tôi đã sử dụng thẻ ở đầu và cuối mã, đó là lý do tại sao plugin hiển thị thông báo cho chúng tôi ở hai nơi.
Hãy nhớ rằng tất cả các thông báo được plugin hỗ trợ (thành công, thư rác, v.v.) đều phải tuân theo quy tắc này.
Chuyên gia. giá trị thuộc tính mặc định
Lấy giá trị mặc định dựa trên tình huống
Hầu hết tất cả các trường đều có thể được gán giá trị mặc định thông qua thuộc tính mặc định. Nhưng phải làm gì khi cần truyền tham số động? Ví dụ: sử dụng yêu cầu GET qua URL.
Việc truy xuất thông số động hoạt động dựa trên các tùy chọn thẻ sau:
Mặc định: nhận các biến HTTP GET. Khóa tham số phải khớp với tên của trường biểu mẫu. mặc định:đăng các biến HTTP POST. Khóa tham số phải khớp với tên của trường biểu mẫu. default:post_meta Giá trị của trường tùy chỉnh của bài đăng chứa biểu mẫu. Tên trường tùy chỉnh phải khớp với tên thẻ. default:user_(user field) Chúng ta đang nói về: default:user_email hoặc default:user_nickname . Danh sách đầy đủ các giá trị như vậy được đưa ra sau đây. điểm.
Ví dụ về thẻ trường văn bản dựa trên yêu cầu GET:
Giả sử chúng ta có một trang liên hệ, hãy truy cập nó bằng tham số GET:
Http://example.com/contact/?your-name=Dmitry
Kết quả là giá trị của trường của chúng ta sẽ là máy "Dmitry".
Một ví dụ khác: chuyển thẻ UTM tới một biểu mẫu
Giá trị mặc định từ nhiều nguồn
Ngoài ra, bạn có thể vượt qua một số nơi mà bạn muốn nhận giá trị:
Chúng tôi đã chỉ định hai nguồn giá trị mặc định (thứ tự xác định mức độ ưu tiên): đầu tiên, plugin sẽ cố gắng lấy giá trị từ thanh địa chỉ, nếu không có ở đó thì từ trường tùy chỉnh của bản ghi. Nếu giá trị nằm trong thanh địa chỉ thì giá trị của trường tùy chỉnh sẽ bị bỏ qua.
ACF + CF7 không có plugin bổ sung
Giả sử bạn đã tạo một nhóm trường cho Bài đăng chứa trường văn bản có khóa my-text-field . Để hiển thị giá trị đã lưu trong trường này, hãy sử dụng mã ngắn:
hoặc, nếu bạn cần ẩn trường này:
Lấy giá trị mặc định cho người dùng đã đăng nhập
Khi bạn tạo biểu mẫu cho người dùng được ủy quyền, sẽ chẳng ích gì khi buộc họ nhập các giá trị đã có trong dữ liệu của họ, chẳng hạn như tên hoặc email. Biểu mẫu liên hệ 7 cung cấp điểm này và bạn có thể lấy dữ liệu từ hồ sơ người dùng.
Để thực hiện việc này, bạn cần sử dụng các giá trị thuộc tính mặc định đặc biệt cho người dùng được ủy quyền. Hãy xem xét tất cả các lựa chọn có thể:
- mặc định: user_login- Đăng nhập người dùng
- mặc định:user_email- Email
- mặc định:user_url- Địa chỉ trang web
- mặc định:user_first_name- Tên
- mặc định:user_last_name- Họ
- mặc định:user_nickname- Nick
- mặc định:user_display_name- Tên hiển thị trên website
- mặc định:user_description- Mô tả (tiểu sử).
- người dùng mặc định_*- trong đó thay vì * bạn có thể chỉ định bất kỳ giá trị nào từ dữ liệu người dùng (xem get_userdata()). Nếu dữ liệu người dùng ban đầu (khóa) không bắt đầu bằng user_ thì dữ liệu đó cần bắt đầu bằng user_ . Giả sử người dùng có siêu trường dữ liệu vk và chúng tôi cần chỉ ra giá trị của siêu trường dữ liệu này tại đây. Sau đó chúng ta viết như thế này: default:user_vk
Tên của bạn: Email của bạn:
Một ví dụ nữa
Một trong những người dùng đã đăng ký trên trang web đã quyết định sử dụng biểu mẫu. Thật hợp lý khi thay thế ngay tên của anh ấy vào trường “Tên”, vì nó đã được biết đến. Chúng tôi sử dụng thuộc tính mặc định:
Bây giờ, khi người dùng được ủy quyền truy cập trang có biểu mẫu, tên hiển thị của anh ta (display_name) sẽ tự động được nhập vào trường tên của bạn. Và nếu người dùng trái phép truy cập vào cùng một trang, anh ta sẽ thấy phần giữ chỗ “Nhập tên của bạn”.
Lấy giá trị mặc định thông qua các thuộc tính của shortcode CF7 chính
Đôi khi có thể cần phải sử dụng giá trị từ thuộc tính shortcode làm tham số mặc định cho một trường.
Trong trường hợp này, bạn cần sử dụng tùy chọn thẻ default:shortcode_attr, tùy chọn này “yêu cầu” plugin lấy giá trị của thuộc tính shortcode cùng tên (với tên trường) làm giá trị mặc định.
Bây giờ, hãy thêm thuộc tính có tên trường và giá trị mong muốn vào mã ngắn của plugin. Giá trị đã chỉ định sẽ được thay thế thành giá trị mặc định của trường biểu mẫu có cùng tên:
Tuy nhiên, đó không phải là tất cả! Như chúng ta biết, đối với bất kỳ shortcode nào trong WordPress, nó đều được cung cấp một danh sách trắng các thuộc tính có thể được sử dụng trong đó. Trong trường hợp này, WP không biết gì về thuộc tính shortcode contact-form-7 mới của chúng tôi, vì vậy nó cần được thêm vào danh sách trắng. Điều này được thực hiện thông qua hook plugin:
Add_filter("shortcode_atts_wpcf7", "custom_shortcode_atts_wpcf7", 10, 3); hàm custom_shortcode_atts_wpcf7($out, $pairs, $atts) ( if(isset($atts["myemail"])) $out["myemail"] = $atts["myemail"]; return $out; )
Mã này được chèn vào hàm.php.
Bây giờ, khi bạn truy cập một trang có biểu mẫu, trường email sẽ được điền giá trị [email được bảo vệ].
Chào mọi người. Bằng cách nào đó, tôi có quá nhiều năng lượng và hôm nay tôi quyết định viết một bài viết khác, bài viết này sẽ dành riêng cho một trong các plugin WordPress. Một plugin khá thú vị và đầy chức năng, nó đáp ứng 100% trách nhiệm của mình và tôi vẫn chưa tìm ra cách nào tốt hơn để cung cấp phản hồi.
Tôi không muốn làm bạn nhàm chán lâu, tôi nghĩ bạn đã hiểu những gì sẽ được thảo luận trong bài viết. Và vì vậy, hôm nay chúng ta sẽ hiểu và cấu hình Plugin Liên hệ Mẫu 7 cho WordPress, cụ thể là tạo một biểu mẫu phản hồi.
Tôi ngồi rất lâu và nghĩ về những nhược điểm của plugin và không nghĩ ra điều gì, nhưng sáng tạo này có rất nhiều ưu điểm.
Ưu điểm của plugin Contact Form 7.
- Rõ ràng và dễ cấu hình. Một người lần đầu tiên gặp plugin này sẽ có thể hiểu được nó mà không gặp vấn đề gì.
- Tạo ra một số lượng lớn các hình thức khác nhau và tích hợp chúng vào trang web.
- Biểu mẫu được chèn bằng mã ngắn vào trang và bất kỳ vị trí nào trên trang web. Nó rất thoải mái.
- Hỗ trợ tiếng Nga và các ngôn ngữ khác.
- Hỗ trợ các yêu cầu Ajax.
- Bảo vệ thư rác bằng câu hỏi văn bản hoặc hình ảnh xác thực. Đối với hình ảnh xác thực, bạn sẽ cần cài đặt thêm CAPTCHA thực sự đơn giản.
- Tùy chỉnh giao diện của biểu mẫu bằng cách sử dụng kiểu css.
- Tích hợp với dịch vụ Akismet để bảo vệ khỏi thư rác.
Trên trang web của chúng tôi, bạn có thể xem và sử dụng biểu mẫu như vậy nếu bạn nhấp vào mục menu “Liên hệ với chúng tôi”, một cửa sổ sẽ bật lên nơi bạn có thể xem ví dụ rõ ràng.
Hãy bắt đầu nào!
Đầu tiên chúng ta cần tải plugin này về. Bạn có thể từ máy chủ của chúng tôi đây là liên kết -> hoặc từ trang web chính thức đây là liên kết -> Tải xuống từ trang web chính thức .
Sau khi tải xuống, bạn cần cài đặt nó trên . Tôi sẽ không mô tả cách cài đặt, tôi nghĩ bạn nên biết quy trình này từ A đến Z. Chúng tôi đã tải xuống, cài đặt nó, bây giờ chúng tôi trực tiếp đến phần mềm để tìm hiểu và cấu hình nó.
Thiết lập plugin Contact Form 7 và tạo biểu mẫu phản hồi.
Bây giờ bạn đã tải xuống và cài đặt mọi thứ nếu cần, hãy truy cập bảng quản trị WordPress và tìm mục Mẫu liên hệ 7, hãy nhấp vào nó và chúng tôi được đưa đến trang để thêm biểu mẫu mới.
![](https://i2.wp.com/loleknbolek.com/wp-content/uploads/2014/10/form-1.jpg)
Tạo một biểu mẫu.
Để tạo một biểu mẫu mới, bạn cần nhấp vào “ Thêm mới”, sau đó chọn ngôn ngữ (tiếng Nga theo mặc định) và nhấp vào “Thêm mới”. Sau tất cả các bước bạn đã thực hiện, bạn sẽ có một bức ảnh như thế này:
![](https://i1.wp.com/loleknbolek.com/wp-content/uploads/2014/10/form2.jpg)
Biểu mẫu đã được tạo, bây giờ chúng ta sẽ tùy chỉnh nó cho phù hợp với nhu cầu của bạn và trước tiên hãy đặt tên cho nó. Trong trường hợp của tôi, tôi sẽ gọi “ Mẫu thử nghiệm”, bạn đặt tên theo ý muốn rồi nhấn “Save”. Bây giờ bạn có thể thấy mã ngắn cần được chèn vào mã của trang web nơi biểu mẫu này sẽ được hiển thị.
![](https://i2.wp.com/loleknbolek.com/wp-content/uploads/2014/10/form3.jpg)
Chúng ta sẽ cần mã sau một lát vì chúng ta cần thiết lập biểu mẫu trước. Hãy đi đến mẫu biểu mẫu và tùy chỉnh nó.
Bên phải là danh sách thả xuống “ Tạo thẻ”, nếu bạn mở rộng nó, bạn có thể thấy nhiều trường được thêm vào biểu mẫu.
![](https://i2.wp.com/loleknbolek.com/wp-content/uploads/2014/10/form4.jpg)
Ở bên trái, bạn có thể thấy các trường đã được thêm vào biểu mẫu.
Ví dụ: hãy tạo một biểu mẫu đơn giản sẽ có tên, email, số điện thoại, câu hỏi văn bản để bảo vệ khỏi thư rác, tin nhắn và nút gửi.
Bắt đầu.
Tạo một trường văn bản cho tên. Trong danh sách thả xuống “Tạo thẻ”, chọn “ Trương Văn bản" Chúng tôi đánh dấu vào trường bắt buộc, đặt tên cho nó trong trường hợp của tôi là “TÊN” và gán cho nó một id để trường có thể được thiết kế bằng kiểu css. Tôi nhận được id="name". Dưới đây bạn có thể thấy văn bản “ Sao chép mã này và dán vào mẫu biểu mẫu bên trái" Lấy mã này và sao chép nó vào mẫu biểu mẫu, như trong hình:
![](https://i1.wp.com/loleknbolek.com/wp-content/uploads/2014/10/form5.jpg)
Đối với thư (e-mail) chúng tôi cũng làm tương tự, đối với điện thoại, chọn từ danh sách “Tạo thẻ”, trường “ Số điện thoại” và chúng tôi cũng làm điều đó bằng cách tương tự.
Để định cấu hình tin nhắn, hãy chọn “ Trương Văn bản” và chúng tôi cũng làm điều đó bằng cách tương tự với mọi thứ được mô tả ở trên.
![](https://i1.wp.com/loleknbolek.com/wp-content/uploads/2014/10/form6.jpg)
Bây giờ hãy thêm trường " Câu hỏi". Để thực hiện việc này, hãy chọn mục “ Câu hỏi”, đặt tên cho nó. Trong trường Câu hỏi|Trả lời, bạn có thể đặt các câu hỏi và câu trả lời khác nhau, bên dưới trường là ví dụ về câu hỏi logic, bạn có thể đặt câu hỏi dạng văn bản, ví dụ: “Tháng 3 trong năm?| tháng ba”, v.v. Chúng tôi dán mã như trước.
![](https://i2.wp.com/loleknbolek.com/wp-content/uploads/2014/10/form7.jpg)
Và điều cuối cùng chúng ta cần là một “ Gửi”, bạn có thể để lại thẻ trong mẫu hoặc trong danh sách “Tạo thẻ”, chọn “Nút gửi”. Mẫu đã sẵn sàng, nhấp vào “ Cứu”.
Hãy kiểm tra những gì chúng tôi nhận được, sao chép mã ngắn và dán nó lên trang hoặc vào bất kỳ phần nào của mã nếu cần. Tôi sẽ dán nó vào một trang thử nghiệm.
Đây là những gì tôi có:
![](https://i1.wp.com/loleknbolek.com/wp-content/uploads/2014/10/form8.jpg)
Bạn phải có một cái gì đó tương tự.
Thiết lập người nhận biểu mẫu và tin nhắn
Chúng tôi đi xuống bên dưới mẫu biểu mẫu một chút và xem cài đặt người nhận.
- Trường đích. Nhập địa chỉ email mà thư sẽ được gửi cho khách truy cập điền vào biểu mẫu.
- Trường người gửi. Thay vì<>, chúng tôi thay thế các mã ngắn của mình (tên được đặt cho các trường). Bạn có thể xem chúng ở trên. Trong trường hợp của tôi nó sẽ là<>.
- Chủ đề. Tôi luôn viết Mẫu phản hồi và chỉ ra trang web.
- Trường mẫu thư. Ở đây bạn có thể hiển thị bất cứ điều gì trái tim bạn mong muốn. Trong ví dụ của chúng tôi, tôi tạo trường Từ:<>và chi tiết Điện thoại: , Tin nhắn ..
- Các trường còn lại trống.
![](https://i2.wp.com/loleknbolek.com/wp-content/uploads/2014/10/form9.jpg)
Đừng quên lưu vào cuối.
Nếu bạn xuống thấp hơn nữa, bạn có thể thấy cài đặt tin nhắn. Mọi thứ ở đây đều bằng tiếng Nga nên bạn có thể chỉnh sửa cho phù hợp với nhu cầu của mình theo ý muốn. Tôi nghĩ bạn sẽ tự mình tìm ra
Biểu mẫu đã sẵn sàng, bạn có thể tiến hành kiểm tra nó và xem liệu thư có đến địa chỉ email bạn đã chỉ định hay không.
Mọi thứ đều ổn với tôi, sau khi nhấp vào nút “Gửi”, tôi thấy thông báo “ Tin nhắn đã được gửi thành công. Cảm ơn. “Bạn có thể kiểm tra và xem biểu mẫu sẽ tạo ra lỗi gì nếu bạn nhập dữ liệu không chính xác.
Đối với kiểu css, chúng có thể được thêm vào tệp css chính style.css. Sử dụng firebag, bạn có thể xem id và lớp của các trường và gán kiểu thích hợp cho chúng.
Plugin Liên hệ Mẫu 7 cho WordPress rất tiện dụng, bạn có thể tạo ra bất kỳ hình thức phức tạp nào, tôi chắc chắn rằng bạn bị thuyết phục về điều này. Tôi sẽ kết thúc ở đây, nếu có một số điểm chưa hoàn toàn rõ ràng, hãy viết bình luận và tôi sẽ cố gắng giúp bạn tìm ra. Cảm ơn.
Chào mọi người. Bằng cách nào đó, tôi có quá nhiều năng lượng và hôm nay tôi quyết định viết một bài viết khác, bài viết này sẽ dành riêng cho một trong các plugin WordPress. Một plugin khá thú vị và đầy chức năng, nó đáp ứng 100% trách nhiệm của mình và tôi vẫn chưa tìm ra cách nào tốt hơn để cung cấp phản hồi.
Tôi không muốn làm bạn nhàm chán lâu, tôi nghĩ bạn đã hiểu những gì sẽ được thảo luận trong bài viết. Và vì vậy, hôm nay chúng ta sẽ hiểu và cấu hình Plugin Liên hệ Mẫu 7 cho WordPress, cụ thể là tạo một biểu mẫu phản hồi.
Tôi ngồi rất lâu và nghĩ về những nhược điểm của plugin và không nghĩ ra điều gì, nhưng sáng tạo này có rất nhiều ưu điểm.
Ưu điểm của plugin Contact Form 7.
- Rõ ràng và dễ cấu hình. Một người lần đầu tiên gặp plugin này sẽ có thể hiểu được nó mà không gặp vấn đề gì.
- Tạo ra một số lượng lớn các hình thức khác nhau và tích hợp chúng vào trang web.
- Biểu mẫu được chèn bằng mã ngắn vào trang và bất kỳ vị trí nào trên trang web. Nó rất thoải mái.
- Hỗ trợ tiếng Nga và các ngôn ngữ khác.
- Hỗ trợ các yêu cầu Ajax.
- Bảo vệ thư rác bằng câu hỏi văn bản hoặc hình ảnh xác thực. Đối với hình ảnh xác thực, bạn sẽ cần cài đặt thêm CAPTCHA thực sự đơn giản.
- Tùy chỉnh giao diện của biểu mẫu bằng cách sử dụng kiểu css.
- Tích hợp với dịch vụ Akismet để bảo vệ khỏi thư rác.
Trên trang web của chúng tôi, bạn có thể xem và sử dụng biểu mẫu như vậy nếu bạn nhấp vào mục menu “Liên hệ với chúng tôi”, một cửa sổ sẽ bật lên nơi bạn có thể xem ví dụ rõ ràng.
Hãy bắt đầu nào!
Đầu tiên chúng ta cần tải plugin này về. Bạn có thể từ máy chủ của chúng tôi đây là liên kết -> hoặc từ trang web chính thức đây là liên kết -> Tải xuống từ trang web chính thức .
Sau khi tải xuống, bạn cần cài đặt nó trên . Tôi sẽ không mô tả cách cài đặt, tôi nghĩ bạn nên biết quy trình này từ A đến Z. Chúng tôi đã tải xuống, cài đặt nó, bây giờ chúng tôi trực tiếp đến phần mềm để tìm hiểu và cấu hình nó.
Thiết lập plugin Contact Form 7 và tạo biểu mẫu phản hồi.
Bây giờ bạn đã tải xuống và cài đặt mọi thứ nếu cần, hãy truy cập bảng quản trị WordPress và tìm mục Mẫu liên hệ 7, hãy nhấp vào nó và chúng tôi được đưa đến trang để thêm biểu mẫu mới.
![](https://i2.wp.com/loleknbolek.com/wp-content/uploads/2014/10/form-1.jpg)
Tạo một biểu mẫu.
Để tạo một biểu mẫu mới, bạn cần nhấp vào “ Thêm mới”, sau đó chọn ngôn ngữ (tiếng Nga theo mặc định) và nhấp vào “Thêm mới”. Sau tất cả các bước bạn đã thực hiện, bạn sẽ có một bức ảnh như thế này:
![](https://i1.wp.com/loleknbolek.com/wp-content/uploads/2014/10/form2.jpg)
Biểu mẫu đã được tạo, bây giờ chúng ta sẽ tùy chỉnh nó cho phù hợp với nhu cầu của bạn và trước tiên hãy đặt tên cho nó. Trong trường hợp của tôi, tôi sẽ gọi “ Mẫu thử nghiệm”, bạn đặt tên theo ý muốn rồi nhấn “Save”. Bây giờ bạn có thể thấy mã ngắn cần được chèn vào mã của trang web nơi biểu mẫu này sẽ được hiển thị.
![](https://i2.wp.com/loleknbolek.com/wp-content/uploads/2014/10/form3.jpg)
Chúng ta sẽ cần mã sau một lát vì chúng ta cần thiết lập biểu mẫu trước. Hãy đi đến mẫu biểu mẫu và tùy chỉnh nó.
Bên phải là danh sách thả xuống “ Tạo thẻ”, nếu bạn mở rộng nó, bạn có thể thấy nhiều trường được thêm vào biểu mẫu.
![](https://i2.wp.com/loleknbolek.com/wp-content/uploads/2014/10/form4.jpg)
Ở bên trái, bạn có thể thấy các trường đã được thêm vào biểu mẫu.
Ví dụ: hãy tạo một biểu mẫu đơn giản sẽ có tên, email, số điện thoại, câu hỏi văn bản để bảo vệ khỏi thư rác, tin nhắn và nút gửi.
Bắt đầu.
Tạo một trường văn bản cho tên. Trong danh sách thả xuống “Tạo thẻ”, chọn “ Trương Văn bản" Chúng tôi đánh dấu vào trường bắt buộc, đặt tên cho nó trong trường hợp của tôi là “TÊN” và gán cho nó một id để trường có thể được thiết kế bằng kiểu css. Tôi nhận được id="name". Dưới đây bạn có thể thấy văn bản “ Sao chép mã này và dán vào mẫu biểu mẫu bên trái" Lấy mã này và sao chép nó vào mẫu biểu mẫu, như trong hình:
![](https://i1.wp.com/loleknbolek.com/wp-content/uploads/2014/10/form5.jpg)
Đối với thư (e-mail) chúng tôi cũng làm tương tự, đối với điện thoại, chọn từ danh sách “Tạo thẻ”, trường “ Số điện thoại” và chúng tôi cũng làm điều đó bằng cách tương tự.
Để định cấu hình tin nhắn, hãy chọn “ Trương Văn bản” và chúng tôi cũng làm điều đó bằng cách tương tự với mọi thứ được mô tả ở trên.
![](https://i1.wp.com/loleknbolek.com/wp-content/uploads/2014/10/form6.jpg)
Bây giờ hãy thêm trường " Câu hỏi". Để thực hiện việc này, hãy chọn mục “ Câu hỏi”, đặt tên cho nó. Trong trường Câu hỏi|Trả lời, bạn có thể đặt các câu hỏi và câu trả lời khác nhau, bên dưới trường là ví dụ về câu hỏi logic, bạn có thể đặt câu hỏi dạng văn bản, ví dụ: “Tháng 3 trong năm?| tháng ba”, v.v. Chúng tôi dán mã như trước.
![](https://i2.wp.com/loleknbolek.com/wp-content/uploads/2014/10/form7.jpg)
Và điều cuối cùng chúng ta cần là một “ Gửi”, bạn có thể để lại thẻ trong mẫu hoặc trong danh sách “Tạo thẻ”, chọn “Nút gửi”. Mẫu đã sẵn sàng, nhấp vào “ Cứu”.
Hãy kiểm tra những gì chúng tôi nhận được, sao chép mã ngắn và dán nó lên trang hoặc vào bất kỳ phần nào của mã nếu cần. Tôi sẽ dán nó vào một trang thử nghiệm.
Đây là những gì tôi có:
![](https://i1.wp.com/loleknbolek.com/wp-content/uploads/2014/10/form8.jpg)
Bạn phải có một cái gì đó tương tự.
Thiết lập người nhận biểu mẫu và tin nhắn
Chúng tôi đi xuống bên dưới mẫu biểu mẫu một chút và xem cài đặt người nhận.
- Trường đích. Nhập địa chỉ email mà thư sẽ được gửi cho khách truy cập điền vào biểu mẫu.
- Trường người gửi. Thay vì<>, chúng tôi thay thế các mã ngắn của mình (tên được đặt cho các trường). Bạn có thể xem chúng ở trên. Trong trường hợp của tôi nó sẽ là<>.
- Chủ đề. Tôi luôn viết Mẫu phản hồi và chỉ ra trang web.
- Trường mẫu thư. Ở đây bạn có thể hiển thị bất cứ điều gì trái tim bạn mong muốn. Trong ví dụ của chúng tôi, tôi tạo trường Từ:<>và chi tiết Điện thoại: , Tin nhắn ..
- Các trường còn lại trống.
![](https://i2.wp.com/loleknbolek.com/wp-content/uploads/2014/10/form9.jpg)
Đừng quên lưu vào cuối.
Nếu bạn xuống thấp hơn nữa, bạn có thể thấy cài đặt tin nhắn. Mọi thứ ở đây đều bằng tiếng Nga nên bạn có thể chỉnh sửa cho phù hợp với nhu cầu của mình theo ý muốn. Tôi nghĩ bạn sẽ tự mình tìm ra
Biểu mẫu đã sẵn sàng, bạn có thể tiến hành kiểm tra nó và xem liệu thư có đến địa chỉ email bạn đã chỉ định hay không.
Mọi thứ đều ổn với tôi, sau khi nhấp vào nút “Gửi”, tôi thấy thông báo “ Tin nhắn đã được gửi thành công. Cảm ơn. “Bạn có thể kiểm tra và xem biểu mẫu sẽ tạo ra lỗi gì nếu bạn nhập dữ liệu không chính xác.
Đối với kiểu css, chúng có thể được thêm vào tệp css chính style.css. Sử dụng firebag, bạn có thể xem id và lớp của các trường và gán kiểu thích hợp cho chúng.
Plugin Liên hệ Mẫu 7 cho WordPress rất tiện dụng, bạn có thể tạo ra bất kỳ hình thức phức tạp nào, tôi chắc chắn rằng bạn bị thuyết phục về điều này. Tôi sẽ kết thúc ở đây, nếu có một số điểm chưa hoàn toàn rõ ràng, hãy viết bình luận và tôi sẽ cố gắng giúp bạn tìm ra. Cảm ơn.
Mọi chủ sở hữu trang web đều muốn có một biểu mẫu liên hệ để gửi tin nhắn từ người dùng và nhận chúng trong email của họ. Đây được gọi là mẫu phản hồi. Nghĩa là, khách truy cập có thể gửi thư của mình đến quản trị trang web trực tiếp từ trang web mà không cần mở hộp thư. Plugin tốt nhất để triển khai tính năng này là Contact Form 7, plugin không gửi email. Bài viết của tôi mô tả đúng Thiết lập plugin Contact Form 7để mọi thứ hoạt động chính xác.
Cách hoạt động của plugin Contact Form 7
Biểu mẫu này có thể được đặt trên bất kỳ trang nào trên trang web của bạn (bạn chỉ cần sao chép dòng này và dán vào đúng vị trí). Khách truy cập trang web điền vào các trường bắt buộc (ví dụ: tên, e-mail, tin nhắn) và plugin thông qua một hộp thư (hãy gọi nó là "người gửi") gửi thư đến hộp thư khác ( "người nhận").
Đó là, bạn phải đăng ký 2 hộp thư - người gửi và người nhận. Tốt hơn là tạo người gửi trong thư Yandex và người nhận là hộp thư chính thức của trang web của bạn.
Đã được một thời gian, plugin Contact Form 7 đã ngừng hoạt động - nó không gửi email mà chỉ tiếp tục tải. Tôi đã tìm ra lối thoát - cài đặt một plugin miễn phí khác, WPForms Lite. Nó rất dễ cài đặt và không yêu cầu cài đặt plugin bổ sung để thiết lập gửi tin nhắn, nhưng tôi nhận thấy rằng nó không hoạt động với mọi email. Tôi đã không nhận được bất kỳ lá thư nào trên một, nhưng chúng đã được gửi ở mặt khác.
Thiết lập plugin Contact Form 7. Hướng dẫn
1) Chúng tôi đăng ký hộp thư của người gửi trên thư Yandex (bất kỳ hộp thư nào, dù thế nào đi nữa, tên của nó không quan trọng để plugin hoạt động và sẽ không hiển thị cho khách truy cập). Nó sẽ phục vụ như một điểm trung chuyển cho các lá thư.
2) Thiết lập biểu mẫu liên hệ của plugin Contact Form 7. Nhấp vào "Thay đổi" trở đi "Mẫu biểu mẫu". Đây là ví dụ về giao diện của nó với các trường bắt buộc: tên người dùng, email, tin nhắn và nút “gửi”:
Tên của bạn (bắt buộc)
Email của bạn (bắt buộc)
Tin nhắn
3) Chuyển hướng "Thư" chịu trách nhiệm về sự xuất hiện của các email bạn nhận được.
Gửi ai– địa chỉ hộp thư người nhận
Từ ai – <адрес ящика отправитель>
Chủ thể –
Nội dung của bức thư –
Vì vậy, bạn nhận được một lá thư chứa tất cả các trường đã điền đầy đủ của biểu mẫu phản hồi. Việc này hoàn tất việc cấu hình plugin Contact Form 7..
Chú ý! Để plugin Contact Form 7 gửi email, bạn cần cài đặt một plugin WP-Mail-SMTP khác. Chính anh ta sẽ là người kết nối hai địa chỉ email, người gửi và người nhận, đồng thời thực hiện các chức năng hệ thống để gửi thư.
Thiết lập plugin WP-Mail-SMTP. Hướng dẫn
Từ email– địa chỉ hộp thư người gửi
Từ tên– ví dụ: tên tổ chức của bạn hoặc tên của bạn
Người đưa thư- Chức năng gửi thư. Chọn “Gửi tất cả email WordPress qua SMTP”
Máy chủ SMTP– đối với thư Yandex smtp.yandex.ru
Cổng SMTP– đối với thư Yandex 465
Mã hóa– Sử dụng mã hóa SSL
Xác thực– Có: Sử dụng xác thực SMTP
tên tài khoản- đăng nhập vào người gửi email của bạn
Mật khẩu– mật khẩu trên người gửi email của bạn
Quá trình thiết lập đã hoàn tất. Lưu các thay đổi của bạn.
Cách đặt biểu mẫu phản hồi Mẫu liên hệ 7 trên một trang
Trong cài đặt biểu mẫu liên hệ, hãy chú ý đến dòng ở trên cùng:
Nó cần phải được sao chép và dán trên bất kỳ trang nào. Tất cả đã sẵn sàng.
Không tạo ra bất kỳ khó khăn nào, đặc biệt là theo hướng dẫn của tôi. Mọi thứ hoạt động tốt và email được gửi. Tôi cũng khuyên bạn nên đọc bài viết về những cái tốt nhất cho WordPress. Ở đó bạn sẽ tìm thấy rất nhiều điều thú vị.
Contact Form 7 có thể quản lý nhiều biểu mẫu liên hệ, nơi bạn có thể tùy chỉnh linh hoạt biểu mẫu và nội dung thư với bố cục khá đơn giản. Các biểu mẫu có hỗ trợ tích hợp cho việc gửi Ajax, CAPTCHA, bộ lọc thư rác Akismet, v.v.
Tài liệu và hỗ trợ
Ảnh chụp màn hình
Cài đặt
- Tải toàn bộ thư mục contact-form-7 lên thư mục /wp-content/plugins/.
- Kích hoạt plugin từ trang Plugin trong bảng điều khiển WordPress của bạn.
Trong menu bảng điều khiển WordPress, bạn sẽ tìm thấy tab ‘Phản hồi’.
Để tìm hiểu cách sử dụng plugin một cách chính xác, bạn có thể truy cập trang chủ của nó.
Đánh giá
Tôi thấy nhiều người ghét plugin này vì họ đang sử dụng một số phiên bản không được hỗ trợ được tích hợp trong một chủ đề - tất cả những gì tôi có thể nói từ kinh nghiệm của bản thân là sau khi sử dụng nó trong vài năm trên nhiều trang web, tôi thực sự cảm ơn bạn rất nhiều gửi đến các nhà phát triển luôn cập nhật và miễn phí cho mọi người. Việc thiết lập và tùy chỉnh cực kỳ dễ dàng. Chúc mừng!
Người tham gia và nhà phát triển
Contact Form 7 là một dự án mã nguồn mở. Những người đóng góp sau đây đã đóng góp vào sự phát triển của plugin:
Những người tham giaNhật ký thay đổi
Để biết thêm thông tin, xem Bản phát hành.
5.1.6
- CSS: xóa quy tắc kiểu khỏi biểu định kiểu không cần thiết và xung đột với quy tắc của Twenty Twenty.
- API REST: truy xuất ID biểu mẫu liên hệ một cách rõ ràng từ các tham số tuyến đường.
5.1.5
- Trình xác thực cấu hình: Mục kiểm tra mới cho lỗi không có sẵn_html_elements.
- Trình xác thực cấu hình: Mục kiểm tra mới cho lỗi attachments_overweight.
5.1.4
- reCAPTCHA: Giới thiệu các hằng số WPCF7_RECAPTCHA_SITEKEY và WPCF7_RECAPTCHA_SECRET.
- reCAPTCHA: Giới thiệu móc lọc wpcf7_recaptcha_sitekey và wpcf7_recaptcha_secret.
- Thêm tham số $status vào bộ lọc wpcf7_form_response_output.
- Tạo mã ngẫu nhiên khi người dùng là người dùng đã đăng ký.
- Giới thiệu WPCF7_contactForm::unit_tag(), một phương thức công khai trả về thẻ đơn vị.
- reCAPTCHA: đưa ra một thông báo khác trong nhật ký thư rác trong trường hợp mã thông báo phản hồi trống.
- Cờ đồng ý: Hỗ trợ tùy chọn label_first trong thẻ đồng ý của biểu mẫu.
5.1.3
- Đã sửa lỗi dẫn đến không thể bỏ chọn tùy chọn trong tab Thư.
5.1.2
- Liên hệ liên tục: Giới thiệu bộ chọn danh sách liên hệ.
- Liên hệ cố định: Một cài đặt bổ sung, constant_contact, được giới thiệu.
- reCAPTCHA: Đã giới thiệu các hook bộ lọc wpcf7_recaptcha_actions và wpcf7_recaptcha_threshold.
5.1.1
- reCAPTCHA: Thay đổi phản hồi thành mã thông báo phản hồi trống.
5.1
- Mô-đun tích hợp Constant Contact đã được giới thiệu.
- Mô-đun reCAPTCHA đã được cập nhật để hỗ trợ reCAPTCHA v3.
- Thêm quy tắc kiểu Chế độ tối.
5.0.5
- Đã khắc phục sự cố không nhất quán giữa get_data_option() và get_default_option() trong lớp WPCF7_FormTag.
- Ngăn chặn các lỗi PHP xảy ra khi gọi unlink().
- Đã giới thiệu wpcf7_is_file_path_in_content_dir() để hỗ trợ hằng số UPLOADS.
5.0.4
- Đặt rõ ràng đối số power_type trong lệnh gọi register_post_type() để khắc phục sự cố leo thang đặc quyền trái phép.
- Tệp đính kèm cục bộ - cấm chỉ định đường dẫn tuyệt đối đến các tệp nằm bên ngoài thư mục wp-content.
- Trình xác thực cấu hình - Thêm phần tử kiểm tra để phát hiện cài đặt tệp đính kèm không chính xác.
- Đã khắc phục lỗi trong tính năng tương thích ngược JavaScript cho các trình duyệt cũ không hỗ trợ thuộc tính giữ chỗ HTML5.
- Hộp kiểm đồng ý - vô hiệu hóa chức năng không lưu trữ của thẻ biểu mẫu.
5.0.3
- CSS: Áp dụng kiểu con trỏ "không được phép" khi di chuột qua các nút gửi ở trạng thái không hoạt động.
- Cờ đồng ý: Đại tu giao diện người dùng của trình tạo thẻ để khuyến khích sử dụng các tùy chọn bảo mật tốt hơn.
- Triển khai hàm wpcf7_anonymize_ip_addr().
- Đã giới thiệu tùy chọn allow_for:storage cho tất cả các loại thẻ biểu mẫu.
5.0.2
- Đã thêm phần "Thông báo về quyền riêng tư" vào tệp readme.txt.
- Nội dung được cập nhật trong khối meta Thông tin.
- Sử dụng get_user_locale() thay vì get_locale() khi thích hợp hơn.
- Cờ đồng ý: Đặt lại trạng thái vô hiệu hóa của các nút gửi sau khi đăng ký thành công.
5.0.1
- Đã sửa lỗi sử dụng sai _n().
- Kiểm tra cấu hình: Đã sửa số lượng cảnh báo không chính xác trên tab Tùy chọn nâng cao.
- Kiểm tra cấu hình: Đã sửa lỗi xử lý không chính xác thẻ email đặc biệt [_site_admin_email] trong trường tiêu đề Từ.
- Hộp kiểm chấp nhận: Thuộc tính lớp và id được chỉ định đã được áp dụng cho thành phần HTML sai.
- Kiểm tra cấu hình: Nếu có tiêu đề thư tùy chọn cho các hộp thư như Cc hoặc Trả lời nhưng có thể có giá trị trống thì lỗi "Cú pháp hộp thư không hợp lệ" sẽ được trả về.
- Chỉ định rõ ràng tham số thứ tư cho add_action() để tránh truyền các giá trị tham số ngoài ý muốn.
- Kiểm tra xem thư mục đích có trống không trước khi xóa nó.
5.0
- Cài đặt bổ sung: on_sent_ok và on_submit đã bị xóa.
- Cài đặt bổ sung mới: Skip_mail.
- Flamingo: Tiêu đề của kênh đến thay đổi cùng với tiêu đề của biểu mẫu liên hệ tương ứng.
- sự kiện DOM. Toàn bộ đối tượng phản hồi API có thể truy cập được thông qua thuộc tính event.detail.apiResponse.
- Thư HTML: Thêm các thuộc tính liên quan đến ngôn ngữ vào tiêu đề HTML.
- Tải lên tệp: Đặt thuộc tính chấp nhận trong trường tải lên.
- Một lớp mới WPCF7_MailTag đã được giới thiệu.
- Cho phép bạn hủy bỏ nỗ lực gửi thư bằng cách sử dụng hook hành động wpcf7_b Before_send_mail. Ngoài ra, bạn có thể đặt trạng thái và thông báo tùy chỉnh thông qua bộ chặn hành động.
- Hộp kiểm chấp nhận: Cho phép bạn chỉ định các điều kiện trong phần nội dung của thẻ biểu mẫu.
- Hộp kiểm chấp nhận: Hỗ trợ tham số tùy chọn.
- Thẻ thư đặc biệt mới: [_site_title], [_site_description], [_site_url], [_site_admin_email], [_invalid_fields], [_user_login], [_user_email], [_user_url], [_user_first_name], [_user_last_name], [_user_nickname] và [_user_display_name].
- Móc bộ lọc mới: wpcf7_upload_file_name, wpcf7_autop_or_not, wpcf7_posted_data_($type) và wpcf7_mail_tag_replaced_($type)
- Các tính năng thẻ biểu mẫu mới: vùng chứa không điều khiển và không dành cho thư