Thực đơn
trang chủWindows 7

Trang bắt đầu mã chống thư rác html. Một ví dụ đơn giản về việc tạo một biểu mẫu. Sự bảo vệ SPAM. Lợi ích của plugin KAMA

Tạo biểu mẫu nhận xét Mẫu phản hồi và thư rác trong thư

Sau khi đăng mẫu phản hồi lên website, email của bạn Hộp thư chẳng mấy chốc nó bắt đầu đầy lên không chỉ tin nhắn hữu ích, nhưng cũng có nhiều loại thư rác. Việc bảo vệ khỏi sự phẫn nộ này đã được mô tả trong bài viết “Capcha ở dạng phản hồi”. Vì, theo ý kiến ​​​​của tôi, việc buộc khách truy cập trang web giải quyết sự kết hợp của các chữ cái và số bị bóp méo, tức là hình ảnh xác thực, là không công bằng hoặc, như người ta nói hiện nay là vi phạm quyền của anh ta, chúng tôi sẽ xem xét các cách khác để bảo vệ khỏi thư rác đến từ biểu mẫu phản hồi trên trang web.

Phương pháp một.
Như bạn đã biết, thư rác từ biểu mẫu phản hồi không bắt đầu đến ngay lập tức mà sau một thời gian, chỉ sau khi người gửi thư rác (robot gửi thư rác) quét các trang web trên Internet và tìm thấy trang của bạn có biểu mẫu. Sau đó, trang này được nhập vào cơ sở dữ liệu và một cuộc tấn công có hệ thống vào hộp thư của bạn bắt đầu. Vì vậy, bạn cần phải gây khó khăn cho những kẻ gửi thư rác khi tìm thấy trang của bạn bằng biểu mẫu. Đơn giản nhất và cách hiệu quả- đổi tên cô ấy thường xuyên. Và để gây khó khăn hơn nữa cho người gửi thư rác, bạn có thể tổ chức quy trình này như sau.

Vì các chương trình thư rác thường vô hiệu hóa việc thực thi Tập lệnh JavaScript, sau đó chúng tôi sẽ thay đổi trang của mình bằng biểu mẫu phản hồi để nó không có biểu mẫu đó mà sẽ mở trong một cửa sổ nhỏ riêng biệt với sử dụng JavaScript và do đó, rô-bốt thư rác sẽ không thể truy cập được:
văn bản liên kết.

Bạn có thể gửi tin nhắn bằng cách điền vào mẫu phản hồi.

Do đó, biểu mẫu phản hồi được chứa trên trang Mess.html và mở trong một cửa sổ riêng có chiều rộng=500, chiều cao=350 ở bên trái góc trên cùng màn hình. Nhân tiện, một trang PHP có kết quả gửi tin nhắn cũng sẽ mở ở đó (xem bài viết “Tạo biểu mẫu phản hồi trên trang web)”. Bây giờ, khi bạn nhận được thư rác từ biểu mẫu phản hồi, bạn sẽ cần đổi tên trang Mess.html và thay đổi liên kết trong javascript. Vì thông thường sự xuất hiện của thư rác trong thư bắt đầu khoảng 1-2 tháng sau khi đăng biểu mẫu phản hồi lên trang web, bạn sẽ không cần phải nỗ lực nhiều để thay đổi địa chỉ. Để hiển thị biểu mẫu phản hồi hiệu quả hơn trong một cửa sổ riêng, bạn có thể sử dụng plugin jQuery. Để biết việc này dễ dàng như thế nào, hãy xem bài viết “Sử dụng jQuery cho biểu mẫu phản hồi”. Phương pháp hai.
Hãy để tôi nhắc bạn về một cách khác để giảm thư rác đã được đề cập trước đó. Bạn tạo trường nhập văn bản thông thường trong biểu mẫu phản hồi nhưng ẩn nó (style="display:none" ). Người dùng không nhìn thấy trường này và không điền vào, nhưng robot có thể điền vào vì chúng cố gắng điền vào tất cả các trường. Trong chương trình PHP, bạn cần kiểm tra trường này trước khi gửi tin nhắn. Nếu nó được lấp đầy thì đó là robot; nếu nó trống thì đó là khách truy cập “trực tiếp”. Do đó, chúng tôi không yêu cầu khách truy cập trang web giải hình ảnh xác thực mà phân tích hành vi của robot gửi thư rác. Kỹ thuật này cung cấp thêm bảo vệ hiệu quả hơn cái đầu tiên và việc sử dụng nó dưới dạng phản hồi sẽ không bao giờ thừa.

Để triển khai phương pháp này, hãy thêm bất kỳ vị trí nào bên trong thẻ ... một trường ẩn có tên, ví dụ: spam:
.

Trong chương trình PHP, chúng ta sẽ kiểm tra trường này bằng cấu trúc if. Nếu trường trống thì khối gửi thư sẽ được thực thi, được đặt trong dấu ngoặc nhọn, được đánh dấu bằng màu đỏ đậm. Nếu không, khối này sẽ bị bỏ qua và chương trình sẽ thoát mà không gửi thư (exit):

Bạn cũng nên lưu ý rằng rô-bốt gửi thư rác chủ yếu quét các trang thường có biểu mẫu phản hồi. Những trang như vậy thường có tên liên hệ, kontakt, zakaz và những trang tương tự. Vì vậy, nên tránh những cái tên “nói” như vậy đối với các trang có biểu mẫu.

Các phương pháp được xem xét có thể làm giảm đáng kể thư rác, đến từ trang web của bạn. Đương nhiên, những phương pháp này không bảo vệ khỏi thư rác được gửi trực tiếp tới địa chỉ email, đặc biệt nếu nó được đưa vào cơ sở dữ liệu của người gửi thư rác. Vì địa chỉ trong biểu mẫu phản hồi bị ẩn trong một tệp PHP riêng nên khá khó xác định. Do đó, hãy tạo một hộp thư riêng cho các thư từ trang web và không sử dụng địa chỉ của nó ở bất kỳ nơi nào khác.

Xin chào các bạn thân mến. Như bạn biết, tôi không thực sự thích tải blog của mình bằng các plugin, điều mà tôi đã viết nhiều lần. Và hôm nay chúng ta sẽ nói về việc tạo một biểu mẫu phản hồi mà không cần plugin và thậm chí có tính năng chống thư rác.

Tôi nghĩ không cần thiết phải nói về lý do tại sao bạn cần một mẫu phản hồi. Mọi người đều tự quyết định xem có cần một biểu mẫu như vậy trên trang web/blog của mình hay không. Và mục đích của nó đã rõ ràng ngay từ cái tên. Nhưng tôi sẽ cho bạn biết cách tạo một biểu mẫu như vậy trên trang web hoặc blog mà không cần plugin.

Hình thức này có gì hay?

Thứ nhất, nó rất dễ cài đặt và cấu hình.

Thứ hai, nó hoàn toàn không tải máy chủ. Tại sao lại giữ một plugin bổ sung chỉ vì một biểu mẫu phản hồi.

Thứ ba, biểu mẫu có tính năng bảo vệ SPAM tích hợp.

Việc chống thư rác được tổ chức như thế nào?

Như bạn còn nhớ, gần đây tôi đã xuất bản một bài viết trong đó tôi nói về cách tạo trường ẩn trong biểu mẫu nhận xét và thiết lập bộ lọc. Vì vậy, nguyên tắc tương tự này được thực hiện dưới hình thức phản hồi. Có một trường ẩn, khi một người quyết định gửi tin nhắn, anh ta chỉ điền vào các trường hiển thị và tin nhắn sẽ được gửi. Khi spambot điền vào một biểu mẫu, nó sẽ điền vào tất cả các trường trong biểu mẫu, bao gồm cả những trường bị ẩn và tin nhắn sẽ không được gửi. Bộ lọc được cấu hình để kiểm tra xem trường ẩn có được điền hay không.

Cách cài đặt biểu mẫu phản hồi trên trang web

Bước 1: Tạo một tập tin xử lý.

Tập tin này sẽ chịu trách nhiệm gửi tin nhắn từ trang web. Vì vậy, hãy mở Trình soạn thảo sổ tay++ hoặc ít nhất là một notepad. Và chèn nó vào tập tin mới- đây là mã:

Cho biết liên kết nơi người đó sẽ được chuyển hướng sau khi gửi tin nhắn, đồng thời đừng quên cho biết địa chỉ email, thư sẽ được gửi đến đó. Lưu tệp ở định dạng php. Bạn có thể sử dụng tên riêng của mình cho tệp, nhưng tôi đặt tên tệp là message.php . Tên tệp này và đường dẫn đến nó sẽ cần phải được nhập vào biểu mẫu trong tương lai.

Khi tệp được tạo, nó cần được tải lên máy chủ nơi lưu trữ trang web của bạn. Bạn có thể tải tập tin lên thư mục gốc và sau đó bạn sẽ không cần thay đổi bất cứ điều gì, ngay cả khi bạn thay đổi chủ đề.

Hoặc bạn có thể tải file lên thư mục có theme rồi chỉnh sửa trực tiếp từ bảng điều khiển Quản trị WordPress, nhưng nếu thay đổi chủ đề và cài đặt, bạn sẽ phải thay đổi.

Vì vậy, hãy xem ví dụ về tải tệp lên thư mục chủ đề:

/wp-content/themes/CHỦ ĐỀ CỦA BẠN /message.php

Bạn có thể làm điều này bằng cách sử dụng quản lý tập tin lưu trữ hoặc thông qua .

Bước 3. Tạo một biểu mẫu trên trang.

Chúng ta đã tạo xong phần vô hình, hãy chuyển sang phần hữu hình. Bây giờ bạn cần tạo một biểu mẫu phản hồi trên trang. Để cài đặt biểu mẫu, bạn cần chọn một trang và dán mã bên dưới vào đó. Theo quy định, đây là trang liên hệ nhưng có thể là bất kỳ trang nào khác.

Mở ra bảng điều hành WP – “Trang” – chọn hoặc tạo một trang để lưu trữ biểu mẫu.

Mở trang ở chế độ soạn thảo văn bản và dán nó vào đúng chỗ - đây là mã:

Mẫu phản hồi Tên của bạn E-mail Chủ đề tin nhắn Nội dung tin nhắn:

Hãy chắc chắn thay đổi đường dẫn đến tệp xử lý. Mã này không áp dụng bất kỳ kiểu thiết kế nào, chỉ có một số kiểu cần thiết nhất. Biểu mẫu này sẽ trông như thế này:

Bước 4: Áp dụng kiểu cho hình dạng.

Các lớp thiết kế được triển khai thành tất cả các thành phần của biểu mẫu và bạn có thể tùy chỉnh thiết kế cho phù hợp với bất kỳ thiết kế nào. Nhưng điều này sẽ đòi hỏi kiến ​​thức cơ bản về CSS và HTML.

Để làm ví dụ, tôi sẽ đưa ra các phong cách mà tôi đã sử dụng để thiết kế. Sao chép các kiểu này và dán chúng vào tệp Style Sheet (style.css).

/*kiểu cho toàn bộ biểu mẫu*/ .form_kontact( Background-color: rgba(0, 120, 201, 0.6); /*màu nền cho biểu mẫu có độ trong suốt*/ border: 1px Solid #1576D3; /*màu viền cho the form* / border-radius:5px;) /*làm tròn các góc của biểu mẫu*/ /*kiểu cho các trường liên hệ*/ .input_kontact(width: 29%; /*field width*/ đệm: 5px; /*inner đệm*/ border-radius : 5px; /*làm tròn các góc của trường*/ border: 1px Solid #1576D3; /*màu viền cho trường*/ lề: 5px; /* lề*/ ) /*kiểu cho văn bản tin nhắn văn bản*/ .kontakt (lề: 5px; /*lề ngoài cho văn bản*/ ) /*kiểu cho trường văn bản tin nhắn*/ .text_kontact(width: 96% /*field width */ chiều cao: 100%; /*chiều cao trường*/ phần đệm: 5px; /*phần đệm bên trong*/ bán kính đường viền: 5px; /*làm tròn các góc của trường*/ đường viền: 1px liền khối #1576D3; /*màu đường viền cho field*/ tràn : auto; /*điều khiển một đối tượng khối, thanh cuộn xuất hiện nếu cần*/ lề trái: 5px; /*lề ngoài bên trái*/ ) /*kiểu dáng cho nút*/ .submit_kontact(background: #0E71F4 ; /*màu nút* / phần đệm:5px; /*padding*/ đường viền: không có; /*vô hiệu hóa đường viền*/ bán kính đường viền: 5px; /*làm tròn góc*/ box-shadow: inset 0 1px 0 rgba(120,200,230, .5),0 5px 0 rgba(0,0,0,.15); /*thông số bóng*/ lề trái: 5px; /*lề ngoài bên trái*/ con trỏ: con trỏ; /*con trỏ tay*/ ) / *kiểu dành cho các nút khi di chuột*/ .submit_kontact:hover(background:#0671BE; /*button color*/ đệm: 5px; /*padding*/ border: none; /*vô hiệu hóa đường viền*/ bán kính đường viền: 5px; /*góc tròn*/ box-shadow: inset 0 6px 3px rgba(120,200,230,.5),0 3px 4px rgba(0,0,0,.15); /*tham số bóng*/ color: #fff; /*màu phông chữ*/ trang trí văn bản: không có; /*không gạch chân trên liên kết*/ lề trái: 5px; /*lề trái*/ con trỏ: con trỏ; /*con trỏ tay*/ )

Kết quả là, biểu mẫu sẽ trông như thế này:

Nếu bạn tìm hiểu sâu hơn về mã biểu mẫu, bạn có thể làm cho biểu mẫu trông như thế này:

Việc này hoàn tất việc tạo biểu mẫu phản hồi mà không cần plugin và có tính năng chống thư rác. Tất cả những gì bạn phải làm là làm theo hướng dẫn từng bước một và nhúng biểu mẫu này vào blog của bạn.

Va cho ví dụ rõ ràng Tôi khuyên bạn nên xem video hướng dẫn trong đó tôi hướng dẫn cách cài đặt biểu mẫu và cách thức hoạt động của nó.

Ngoài ra, các bạn ơi, để thực hiện công việc dễ dàng hơn, tôi khuyên bạn nên tải xuống các tệp nguồn.

Hôm nay chỉ vậy thôi, chúc bạn may mắn! Và hãy nhớ rằng, tôi luôn vui mừng khi gặp bạn trên blog của mình :) Hẹn gặp lại bạn trong các bài viết và video mới.

Hôm nay chúng ta sẽ tiến hành tạo HTML đẹp biểu mẫu phản hồi cho trang web, chạy trên PHP và có tính năng chống thư rác tích hợp. Bạn không cần bất kỳ kiến ​​​​thức đặc biệt nào, nó sẽ đủ cơ bản về html và logic cơ bản. Tôi sẽ cung cấp các tệp làm sẵn mà bạn có thể chèn vào trang web mà không cần thay đổi hoặc điều chỉnh theo nhu cầu của mình.

Gần đây tôi đã viết một bài viết về cách tạo một biểu mẫu bằng cách sử dụng plugin Contact Form 7. Bạn cũng có thể dễ dàng tạo biểu mẫu phản hồi trên Joomla và các CMS phổ biến khác.

Nhưng các trang web không sử dụng nên làm gì CMS phổ biến? – Tất cả những gì còn lại là làm mọi thứ bằng tay.

Ngoài ra, WordPress cũng có thể sử dụng phản hồi mà không cần plugin. Các plugin không cần thiết sẽ tạo ra tải trọng đáng kể cho máy chủ và việc loại bỏ chúng cho phép bạn tăng tốc trang web.

Đặt hàng cài đặt và cấu hình hình thức làm sẵn bạn có thể lấy 500 rúp ở đây (dành cho những người quá lười làm việc bằng tay hoặc không đủ kỹ năng).

Cách biểu mẫu phản hồi HTML hoạt động

Biểu mẫu của chúng tôi sẽ có 5 trường để nhập dữ liệu - tên, email, số điện thoại, địa chỉ trang web, nội dung tin nhắn (bạn có thể tự xóa hoặc thay đổi chúng).

Tất cả các trường ngoại trừ địa chỉ trang web sẽ được yêu cầu (bạn cũng có thể tự định cấu hình trường này).

Đối với các trường có địa chỉ email và trang web sẽ được tổ chức kiểm tra bắt buộc tính đúng đắn của việc nhập dữ liệu.

Hình thức giao tiếp cuối cùng sẽ như thế này:


Cho công việc Mâu liên hệ, được tạo bằng html, yêu cầu 3 phần tử.

Người đầu tiên chịu trách nhiệm về cấu trúc của biểu mẫu, loại và số lượng trường nhập dữ liệu. Điều này là bình thường Mã HTML.

Thứ hai chịu trách nhiệm xử lý dữ liệu mà người dùng nhập vào các trường biểu mẫu. Nó xác định những gì, ở đâu và dưới hình thức nào sẽ gửi sau khi nhấn nút gửi. Một tập lệnh PHP đặc biệt được sử dụng để triển khai.

Người thứ ba chịu trách nhiệm về ngoại hình. Đặt kích thước và vị trí của các trường nhập dữ liệu, thêm màu sắc khác nhau và các hiệu ứng. Tất cả điều này được thiết lập bởi các kiểu CSS.

Phiên bản demo của biểu mẫu

Chúng tôi sẽ hướng dẫn bạn từng bước thiết lập từng yếu tố này.

Tạo bố cục HTML

Để không làm bài viết quá dài và không bổ sung thêm từng yếu tố riêng biệt, tôi sẽ cung cấp html đầy đủ mã và bên dưới tôi sẽ mô tả từng khối và những thay đổi có thể xảy ra.

Để chỉ định các biểu mẫu trong HTML, một thẻ được sử dụng, bên trong chứa các tham số cần thiết.

Tên:

E-mail: Định dạng đúng "[email được bảo vệ]"

Điện thoại: Đúng định dạng "+7-123-4567890"

Trang web: Đúng định dạng "http://someaddress.com"

Tin nhắn văn bản:

Gửi tin nhắn

Tên:

E-mail:

Điện thoại:

Định dạng đúng là "+7-123-4567890"

Trang mạng:

Định dạng đúng là "http://someaddress.com"

Tin nhắn văn bản:

Gửi tin nhắn

Hãy bắt đầu với dòng đầu tiên.

class=”contact_form” – chỉ định lớp để đặt kiểu CSS trong tương lai.

action=”contact-form.php” – chỉ định tên của tệp có tập lệnh sẽ xử lý dữ liệu biểu mẫu và gửi tin nhắn. Nếu tệp nằm trong cùng thư mục với trang có biểu mẫu thì chỉ cần chỉ ra tên tệp là đủ, nếu nằm trong một thư mục khác thì bạn sẽ cần chỉ ra đường dẫn đến tệp.

Tiếp theo là 4 khối

Chịu trách nhiệm hiển thị các trường để nhập dữ liệu, tên cho thấy rõ ai chịu trách nhiệm về việc gì. Bản thân các trường được hiển thị bằng thẻ, trong đó các đặc điểm sau được đặt:

Loại – chịu trách nhiệm về loại dữ liệu đầu vào, văn bản – văn bản thuần túy, email – địa chỉ email, các trường như vậy sẽ tự động được kiểm tra tính chính xác (@ phải có mặt), tel – số điện thoại, url – địa chỉ trang web.

Tên là tên riêng của chính phần tử đó, cần thiết để tập lệnh biết cách sử dụng dữ liệu của từng trường. Nếu bạn tạo nhiều trường cùng loại thì bạn cần gán tên riêng cho từng trường.

Trình giữ chỗ là một chú giải công cụ nằm bên trong trường, văn bản thay thế trường trống của phần tử. Nó có thể được thay đổi hoặc xóa; nó không ảnh hưởng đến hoạt động của biểu mẫu.

Bắt buộc - tham số này cho biết trường này là bắt buộc. Bạn có thể tự mình quyết định yếu tố nào là bắt buộc và yếu tố nào không.

mẫu=”(http|https)://.+” – cấu trúc này được sử dụng để kiểm tra tính chính xác của trường trang web, cho biết rằng địa chỉ phải chứa http://text hoặc https://text, nếu không sẽ có lỗi.

Một số trường có chú giải công cụ xuất hiện khi bạn chọn một mục. Nó bị ảnh hưởng bởi , trong đó form_hint là lớp của phần tử (thuộc tính của nó được viết bằng CSS). Bạn có thể đặt bất kỳ văn bản nào trong chú giải công cụ cho từng trường biểu mẫu liên hệ. Nếu bạn không cần tính năng như vậy, chỉ cần xóa toàn bộ thẻ.

Trường để nhập thông báo được đánh dấu bằng một thẻ, trong đó cols chỉ định số ký tự trong chiều rộng của trường và hàng số dòng.

Chống thư rác – trường vô hình có tên name=bezspama. Nó có kiểu display:none - điều này có nghĩa là trường này không hiển thị với mọi người, nhưng bot sẽ tự động điền vào.

Và thành phần cuối cùng của bất kỳ hình thức nào là nút gửi tin nhắn, nó được chỉ định bởi thẻ, có lớp riêng để tùy chỉnh vẻ bề ngoài và gõ “gửi”.

Để thêm hoặc xóa các trường, chỉ cần xóa những trường không cần thiết hoặc chèn những trường mới tương tự với những trường hiện có, chỉ định tất cả các thuộc tính và tên cho chúng.

Trang trí bằng các kiểu CSS

Nếu nhìn vào kết quả trên trình duyệt, bạn sẽ thấy có gì đó vụng về và kém hấp dẫn. Để chúng ta thành công hình dáng đẹp phản hồi, bạn sẽ phải làm việc theo kiểu của nó (html sẽ không đủ).

Nếu bạn biết CSS thì bạn có thể thiết lập thiết kế cho tất cả các thành phần của biểu mẫu mà không gặp vấn đề gì, thậm chí bạn không cần sự trợ giúp của tôi.

Nếu bạn không quen với các kiểu, thì tôi sẽ chỉ cung cấp cho bạn một tệp làm sẵn trong đó mọi thứ đã được viết theo cách sao cho biểu mẫu của bạn giống hệt với biểu mẫu trong ví dụ.

Bạn có thể kết nối các phong cách theo hai cách:

  • Sao chép nội dung của tệp vào tệp style.css đã có trên trang web của bạn (thêm vào cuối)
  • Đặt tập tin tôi đã cung cấp trên máy chủ của bạn và kết nối nó.

    • Các tệp kiểu được kết nối bằng mã sau được đặt bên trong. Nếu tệp có kiểu (styles.css) không nằm trong cùng thư mục với trang html, sau đó viết đường dẫn đầy đủ đến nó.

    Trong tệp kiểu mà tôi đã cung cấp, mỗi thành phần đều được gắn nhãn, vì vậy bạn có thể thực hiện bất kỳ thay đổi nào đối với nó - thay đổi màu sắc, kích thước, hình dạng, hiệu ứng. Có kiến ​​thức cơ bản nhất thì bạn có thể dễ dàng chỉnh sửa.

    Thiết lập mã PHP (thêm tính năng chống thư rác)

    Giống như kiểu, tôi sẽ cung cấp cho bạn mã xử lý biểu mẫu HTML phản hồi và chống thư rác. Tệp này được tùy chỉnh cho một cấu hình cụ thể và nếu bạn muốn đặt các trường mới hoặc xóa các trường hiện có, bạn sẽ phải thực hiện các thay đổi đối với nó. Vì vậy, tôi sẽ cho bạn biết nó hoạt động như thế nào để bạn hiểu những gì cần thay đổi.

    Đối với các trang web sử dụng mã hóa windows-1251 và php phiên bản 5.4+, bạn sẽ cần thêm phần bổ sung vào mã liên quan đến hàm htmlspecialchars. Tôi sẽ trình bày nó bên dưới. Nếu không, các trường trống sẽ xuất hiện thay vì bảng chữ cái Cyrillic.

    Hãy nhớ rằng, trong thuộc tính biểu mẫu (trong tập tin html) chúng ta đã chỉ định tham số action=”contact-form.php”. Bạn cần tạo một tệp có tên contact-form.php và đặt mã bên dưới vào đó.