Php защита от спама. Защита от спама в WordPress


Сегодня будем работать над созданием красивой HTML формы обратной связи для сайта, работающей на PHP и имеющею встроенную защиту от спама. Никаких особых знаний вам не потребуется, достаточно будет основ html и элементарной логики. Я дам готовые файлы, которые вы сможете вставить на сайт без изменений или скорректировать под свои нужды.

Недавно я делал статью о том, как сделать с помощью плагина Contact Form 7. Также просто можно сделать форму обратной связи на Joomla и других популярных CMS.

Но, что делать сайтам, которые не используют популярные CMS? – Остается делать все руками.

Кроме того, использование обратной связи без плагинов возможно и для WordPress. Лишние плагины создают немалую нагрузку на сервера и отказ от них позволяет ускорить работу сайта.

Заказать установку и настройку готовой формы за 500 рублей можно здесь (это для тех кому лень руками поработать или навыка недостаточно).

Принцип работы формы обратной связи на html

Наша форма будет иметь 5 полей для ввода данных – имя, электронный адрес, телефон, адрес сайта, текст сообщения (вы сможете удалить или изменить их самостоятельно).

Все поля, кроме адреса веб сайта будут обязательны для заполнения (это вы тоже сможете настроить самостоятельно).

Для полей с email адресом и сайтом будет проводиться обязательная проверка правильности ввода данных.

Конечная форма связи будет иметь вот такой вид:


Для работы контактной формы, созданной на html, требуется 3 элемента.

Первый отвечает за структуру самой формы, за тип и количество полей ввода данных. Это обычный html код.

Второй отвечает за обработку данных, которые пользователь вводит в поля формы. Он определяет, что, куда и в каком виде пересылать, после того, как будет нажата кнопка отправки сообщения. Для реализации используется специальный PHP скрипт.

Третий отвечает за внешний вид. Устанавливает размеры и расположение полей ввода данных, добавляет различные цвета и эффекты. Это все задается CSS стилями.

Демо версия формы

Настройку каждого из этих элементов мы с вами разберем по шагам.

Создание HTML макета

Чтобы не делать статью слишком длинной и не добавлять отдельно каждый элемент, я приведу полный html код, а ниже опишу каждый блок и возможные изменения.

Для обозначения форм в html используется тег , внутри которого заполняются необходимые параметры.

Имя:

Email: Правильный формат "[email protected]"

Телефон: Правильный формат "+7-123-4567890"

Сайт: Правильный формат "http://someaddress.com"

Текст сообщения:

Отправить сообщение

Имя:

Email:

Телефон:

Правильный формат "+7-123-4567890"

Сайт:

Правильный формат "http://someaddress.com"

Текст сообщения:

Отправить сообщение

Начнем с первой строки.

class=”contact_form” – указываем класс, для того, чтобы в будущем задать CSS стили.

action=”contact-form.php” – указываем название файла со скриптом, который будет обрабатывать данные формы и осуществлять отправку сообщения. Если файл лежит в той же папке, что и страница с формой, то достаточно указать только название файла, если в другой, то нужно будет указать и путь к файлу.

Дальше идут 4 блока

Отвечающих за вывод полей для ввода данных, по названиям понятно, какой за что отвечает. Сами поля выводятся с помощью тегов , внутри которого задаются следующие характеристики:

Type – отвечает за тип вводимых данных, text – обычный текст, email – электронный адрес, такие поля автоматически проверяются на правильность (должна присутствовать @), tel – телефон, url – адрес сайта.

Name – собственное название самого элемента, оно необходимо, что скрипт знал как использовать данные каждого поля. Если вы сделаете несколько полей одного типа, то вам необходимо каждому полю присвоить свое name.

Placeholder – это подсказка, находящаяся внутри поля, текст, замещающий пустое поле элемента. Ее можно изменить или удалить, на работу формы она не влияет.

Required – этот параметр указывает на то, что поле обязательно для заполнения. Вы можете самостоятельно решить, какие элементы обязательны, а какие нет.

pattern=”(http|https)://.+” – эта конструкция служит для проверки корректности поля веб сайт, указывает на то, что адрес обязательно должен содержать http://текст или https://текст , в противном случае будет ошибка.

Для некоторых полей задана всплывающая подсказка, которая появляется при выборе элемента. Ее задет , где form_hint является классом элемента (его свойства прописываются в CSS). Текст во всплывающей подсказке для каждого поля контактной формы можно задать любой. Если такая фишка вам не нужна – просто удалите весь тег .

Поля для ввода самого сообщения размечается тегом , в котором cols задает количество символов поля в ширину, а rows число строк.

Защита от спама – невидимое поле с именем name=bezspama. У него стоит стиль display:none – это значит поле невидимо людям, но боты его будут заполнять на автомате.

И завершающий элемент любой формы – кнопка отправки сообщения, она задается тегом , имеющим свой класс для настройки внешнего вида и тип “submit”.

Для добавления или удаления полей, достаточно убрать ненужные или вставить новые по аналогии с существующими, прописав для них все свойства и имена.

Оформление CSS стилями

Если вы посмотрите в браузере на то, что получилось, то увидите нечто корявое и непривлекательное. Для того, чтобы у нас получилась красивая форма обратной связи, придется поработать над ее стилями (html будет недостаточно).

Если вы владеете CSS, то задать оформление для всех элементов формы сможете без проблем, тут даже не потребуется моя помощь.

Если же вы не знакомы со стилями, то я просто дам вам готовый файл, в котором уже все прописано таким образом, что ваша форма будет идентична той, что в примере.

Подключить стили можно двумя способами:

  • Скопировать содержимое файла в файл style.css, который уже есть на вашем сайте (добавьте в самый конец)
  • Поместить файл, который я дал, на ваш хостинг и подключить его.

    • Подключаются файлы стилей следующим кодом , размещаемым внутри . Если файл со стилями (styles.css) находится не в одной папке с html страницей, то пропишите полный путь до него.

    В файле со стилями, который я дал, каждый элемент подписан, поэтому, вы можете вносить в него любые изменения – менять цвета, размеры, форму, эффекты. Владея самыми базовыми знаниями, вы сможете легко его править.

    Настройка PHP кода (добавлена защита от спама)

    Как и в случае со стилями, я дам вам готовый код, обрабатывающий HTML форму обратной связи и защищающий от спама. Этот файл адаптирован для конкретной конфигурации и, если вы захотите задать новые поля или удалить существующие, в него придется вносить изменения. Поэтому, я расскажу вам, как он работает, чтобы вы поняли, что нужно менять.

    Для сайтов, использующих кодировку windows-1251 и версию php 5.4+, в код нужно будет внести дополнение, связанное с функцией htmlspecialchars. Покажу его ниже. Иначе, вместо кириллицы будут приходить пустые поля.

    Помните, в свойствах формы (в html файле) мы указывали параметр action=”contact-form.php”. Вам нужно создать файл с названием contact-form.php и поместить в него находящийся ниже код.

    Укажите ссылку, куда будет перенаправляться человек после отправки сообщения, а также не забудьте указать адрес электронной почты, на него будут приходить письма. Сохраняете файл в формате php. Название файла вы можете использовать своё, я же назвал файл message.php . Это название файла и путь к нему в дальнейшем потребуется прописать в самой форме.

    Когда файл создан, его нужно загрузить на сервер, где хранится ваш сайт. Можно загрузить файл в корневую папку и тогда ничего менять не надо будет, даже если вы поменяете тему оформления.

    А можно загрузить файл в папку с темой оформления и тогда его можно будет редактировать прямо из панели администрирования WordPress, но при смене темы оформления и настройки придётся менять.

    Итак, рассмотрим пример с загрузкой файла в папку темы оформления:

    /wp-content/themes/ВАША ТЕМА /message.php

    Сделать вы это сможете с помощью файлового менеджера хостинга или через .

    Шаг 3. Создание формы на странице.

    Невидимую часть мы создали, приступаем к видимой. Теперь нужно создать форму обратной связи на странице. Для установки формы необходимо выбрать страницу и вставить в неё предложенный ниже код. Как правило, это страница с контактами, но может быть и любая другая страница.

    Открывает административную панель WP – «Страницы» – выбираете или создаёте страницу для размещения формы.

    Открываете страницу в режиме текстового редактора и вставляете в нужное место — вот этот код:

    Форма обратной связи Ваше имя Электронная почта Тема сообщения Текст сообщения:

    Обязательно смените путь к файлу-обработчику. Этот код без применения стилей оформления, есть лишь несколько самых необходимых. Такая форма будет выглядеть вот так:

    Шаг 4. Применение стиля к формы.

    Во все элементы формы внедрены классы оформления, и вы сможете настроить оформление под любой дизайн. Но для этого потребуются базовые знания CSS и HTML.

    В качестве примера приведу стили, которые я использовал для оформления. Скопируйте эти стили и вставьте в файл Таблица стилей (style.css).

    /*стиль для всей формы*/ .form_kontact{ background-color: rgba(0, 120, 201, 0.6); /*цвет фона для формы с прозрачностью*/ border: 1px solid #1576D3; /*цвет бордюра для формы*/ border-radius:5px;} /*закругление углов формы*/ /*стиль для полей контакта*/ .input_kontact{width: 29%; /*ширина поля*/ padding: 5px; /*внутренние отступы*/ border-radius: 5px; /*закругление углов поля*/ border: 1px solid #1576D3; /*цвет бордюра для поля*/ margin: 5px; /*внешний отступ*/ } /*стиль для надписи Текст сообщения*/ .kontakt {margin: 5px; /*внешний отступ для текста*/ } /*стиль для поля текст сообщения*/ .text_kontact{width: 96% /*ширина поля*/ height: 100%; /*высота поля*/ padding: 5px; /*внутренние отступы*/ border-radius: 5px; /*закругление углов поля*/ border: 1px solid #1576D3; /*цвет бордюра для поля*/ overflow: auto; /*управление блочным объектом, полосы прокрутки появляются при необходимости*/ margin-left: 5px; /*внешний отступ слева*/ } /*стиль для кнопки*/ .submit_kontact{background: #0E71F4; /*цвет кнопки*/ padding:5px; /*внутренние отступы*/ border: none; /*отключение бордюров*/ border-radius: 5px; /*закругление углов*/ box-shadow: inset 0 1px 0 rgba(120,200,230,.5),0 5px 0 rgba(0,0,0,.15); /*параметры тени*/ margin-left: 5px; /*внешний отступ слева*/ cursor: pointer; /*курсор в виде руки*/ } /*стиль для кнопки при наведении курсора*/ .submit_kontact:hover{background:#0671BE; /*цвет кнопки*/ padding: 5px; /*внутренние отступы*/ border: none; /*отключение бордюров*/ border-radius: 5px; /*закругление углов*/ box-shadow: inset 0 6px 3px rgba(120,200,230,.5),0 3px 4px rgba(0,0,0,.15); /*параметры тени*/ color: #fff; /*цвет шрифта*/ text-decoration: none; /*нет подчёркивания на ссылке*/ margin-left: 5px; /*внешний отступ слева*/ cursor: pointer; /*курсор в виде руки*/ }

    В результате форма примет вот такой вид:

    Если поковыряться в коде формы можно сделать, чтобы форма выглядела вот так:

    На этом создание формы обратной связи без плагина и с защитой от спама завершено. Вам лишь остаётся следовать пошаговой инструкции и внедрить эту форму к себе на блог.

    А для наглядного примера советую посмотреть видеоурок, где я показываю, как установить форму и как она работает.

    Также друзья для облегчения задачи предлагаю скачать исходные файлы .

    А у меня на сегодня всё, я желаю вам удачи! И помните, я всегда рад видеть вас на своём блоге 🙂 До встречи в новых статьях и видео.

    Всякий спам, отправляемый через различные формы ввода, раздражает абсолютно всех владельцев сайтов. В большинстве случаев нежелательная и нервирующая информация, как правило содержащая внешние ссылки, отправляется различными спам-ботами. Каждый вебмастер пытается защищать свои веб-ресурсы от спама разными способами, но в большинстве случаев используется «капча». Однако капча, особенно «навороченная», как правило нервирует посетителей таких сайтов, что может сказаться на посещаемости. В этой заметке предлагаю вам познакомимся с некоторыми несложными, но в то же время эффективными способами защиты от спама без использовании капчи.

    Использование CSS для скрытия полей формы

    Можно в форму добавить дополнительные поля, но скрыть их с помощью CSS, чтобы эти поля не были видны обычному, реальному посетителю сайта, т.е. чтобы ему не нужно было их заполнять. При отправке данных через форму, PHP-скрипт, обрабатывающий запрос на стороне сервера, должен проверять данные, переданные в запросе.

    Поля HTML формы:

    Hidefield { display:none; }

    PHP скрипт, принимающий данные, отправленные из формы:

    If ($_POST["anydata1"] != "" or $_POST["anydata2"] != "http://") { // если поле "anydata1" не пустое или // значение поля "anydata2" содержит строку, отличную от "http://" // то запрос НЕ принимается, т.е. данные не будут далее обрабатываться или сохраняться в БД } else { // принимаем данные запроса }

    Этот метод вполне пригоден, но только тогда, если спам-бот не принимает во внимание и не обрабатывает CSS, но таких ботов все же подавляющее большинство.

    Использование Javascript для добавления CSS-класса к полям формы

    С помощью Javascript можно немного улучшить выше описанный метод - к скрытым полям ввода можно добавлять соответствующий CSS-класс используя Javascript:

    document.getElementById("anydata1").className = "hidefield";

    Этот метод сработает, если спам-бот не обрабатывает Javascript, но в то же время посетители, у которых в браузере отключена поддержка JS (это часто встречается на смартфонах), будут видеть поля, которые мы пытались скрыть от них.
    Можно усовершенствовать и этот метод - зашифровать или закодировать сам Javascript-код. В интернете можно найти много онлайн сервисов для кодирования JS-скриптов.

    Изменение имен полей формы с помощью PHP

    Чтобы сбивать с толку спам ботов, можно периодически или регулярно менять имена полей HTML-форм. Самый простой способ - использовать функцию date() , например как date("Yz") , где «Y» - это год (2014), а «z» - порядковый номер дня в году (дни нумеруются начинается с 0). В результате date("Yz") вернет значение примерно такое «201446» (2014 год и 46-й день, т.е. 16 февраля).
    

    2024 © gtavrl.ru.