Меню
ГлавнаяWindows 7

Код защиты от спама start page html. Простой пример генерации формы. Защита от спама. Преимущества плагина KAMA

Создание формы обратной связи Форма обратной связи и спам в почте

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

Способ первый.
Как известно, спам с формы обратной связи начинает приходить не сразу, а через некоторое время, только после того, как спамер (робот спамера), сканируя сайты в интернете, найдет вашу страницу с формой. После этого страница заносится в базу и начинается планомерная атака на ваш почтовый ящик. Следовательно, надо усложнить спамеру поиск вашей страницы с формой. Самый простой и действенный способ - регулярно менять её имя. А чтобы ещё больше затруднить работу спамеру, можно организовать этот процесс следующим образом.

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

Вы можете отправить сообщение, заполнив форму обратной связи.

Таким образом, сама форма обратной связи содержится на странице mess.html и открывается в отдельном окне размером width=500, height=350 в левом верхнем углу экрана. Кстати, там же откроется и php-страница с результатом отправки сообщения (см. статью "Создание формы обратной связи на сайте)". Теперь при появлении спама с формы обратной связи вам необходимо будет переименовать страницу mess.html и изменить ссылку в javascript. Так как обычно появление спама в почте начинается примерно через 1-2 месяца после размещения на сайте формы обратной связи, то больших усилий по изменению адресов от вас не потребуется. Для более эффектного вывода формы обратной связи в отдельном окне можно использовать плагины jQuery . О том, как просто это сделать, смотрите в статье "Применение jQuery для формы обратной связи ". Способ второй.
Напомню и еще один способ уменьшения спама, о котором упоминалось ранее . Вы создаете в форме обратной связи обычное текстовое поле ввода, но делаете его скрытым (style="display:none" ). Пользователи этого поля не видят и не заполняют, а роботы могут заполнить, ибо стараются заполнить все поля. В php-программе перед отправкой сообщения нужно проверить это поле. Если оно заполнено - значит, это робот, если пустое - то "живой" посетитель. Таким образом, мы не требуем от посетителя сайта разгадывать капчу, а анализируем поведение робота-спамера. Этот прием обеспечивает более эффективную защиту, чем первый, и его применение в форме обратной связи никогда не будет лишним.

Для реализации этого способа добавим в любом месте внутри тега ... скрытое поле с именем, например, spam :
.

В РНР-программе проверим это поле с помощью конструкции if (если). Если поле пустое (empty), то выполняется блок отправки письма, заключенный в фигурные скобки, выделенные жирным красным цветом. В противном случае, этот блок пропускается и выполняется выход из программы без отправки письма (exit):

Также следует учесть, что роботы-спамеры в первую очередь сканируют страницы, на которых обычно присутствует форма обратной связи. Такие страницы чаще всего имеют названия contacts, kontakt, zakaz и аналогичные. Поэтому желательно избегать таких "говорящих" названий для страниц с формой.

Рассмотренные способы позволяют значительно уменьшить почтовый спам, приходящий с вашего сайта. Естественно, эти способы не защищают от спама, отправленного непосредственно на ваш электронный адрес, особенно, если он попал в базу спамеров. Так как адрес в форме обратной связи скрыт в отдельном РНР-файле, то его достаточно сложно определить. Поэтому для писем с сайта создавайте отдельный почтовый ящик и нигде больше его адрес не используйте.

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

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

Чем хороша эта форма?

Во-первых, легко устанавливается и настраивается.

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

В третьих в форму встроена защита от СПАМа.

Как организована защита от спама

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

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

Шаг 1. Создание файла обработчика.

Именно этот файл будет отвечать за отправку сообщений с сайта. Итак, открываем редактор Notepad++ или хотя бы блокнот. И вставляем в новый файл — вот это код:

Укажите ссылку, куда будет перенаправляться человек после отправки сообщения, а также не забудьте указать адрес электронной почты, на него будут приходить письма. Сохраняете файл в формате 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; /*курсор в виде руки*/ }

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

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

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

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

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

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

Сегодня будем работать над созданием красивой 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 и поместить в него находящийся ниже код.