Ростелеком ТВ 

Защита от спама при заполнение формы. Ловушки в HTML форме. Изменение имен полей формы с помощью PHP

Методы защиты сайта от спама, защита HTML форм

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

Для начала, следует разделить все способы защиты на защиту типа КАПТЧИ (CAPTCHA) и защиты БЕЗ каптчи . Основная задача каптчи, предоставить пользователю задачу, с которой легко справится человек, но это задание будет гораздо сложнее для программы.

Защита через каптчу Графическая каптча

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

На сегодняшний день, большинство графических каптчей могут быть распознаны автоматически, а самые сложные, могут быть отправлены в в специальные сервисы для ручного разгадывания. Стоимость таких услуг составляет 1$ за 1000 каптчей. Таким образом, графическая каптча не может обеспечить серъёзной защиты для сайта, да и к тому же сложная каптча способна отфильтровать не только автоботов но и простых пользователей, которые не смогут с первого раза прочитать каптчу и просто уйдут. Исходя из вышесказанного, становится ясно, что на сколько сложна бы не была каптча, её могут распознать вручную, на специальных сервисах “за копейки”, и просто нет смысла усложнять её, и к тому же сложная каптча скорее отфильтрует некоторых пользователей чем обученных ботов.

Каптча - задачка (текстовая кптча)

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

Интерактивные каптчи

Представляет собой приложение, как правило на flash, которое предлагает собрать картинку из пазлов или задачки на логику с расположением картинок и т.п. Каптча подобного типа будет работать, только если у пользователя установлен flash плагин. Данный вид каптчи пока не сильно распространён, и по сему имеет наивысший уровень зашиты. Разгадать флешь ребус автоматически будет ОЧЕНЬ сложно, а отправить его на ручное разгадывание скорее всего невозможно, так как flash аплет можно защитить выполнением только на определённом домене. Но данный вид каптчи всё равно уязвим для брутфорса, так как не имеет большого количества вариантов решения (до 1000), да и к тому же можно создать базу готовых ответов не выполняя задачи.

Оценка эффективности каптчи

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

Защита сайта от спама без каптчи

Основным преимуществом безкаптчевой защиты является юзабилити сайта, пользователя не напрягают глупые задачки и угадывание трудночитаемого текста. Но большинство безкаптчевых методов довольно просто обходятся при помощи самописных скриптов или управляемых браузеров. Рассмотрим основные способы защиты HTML форм без каптчи начиная с самых неординарных, и заканчивая самыми адекватными. Совсем глупые способы описывать мы всё же не будем, типа “по времени заполнения формы”, фильтрации HTTP заголовков, анализа HTTP REFFER или анализа USER AGENT. И так, приступим.

Ловушки для ботов

Данный способ защищает не саму HTML форму, а сайт от ботов в целом. Принцип такой ловушки состоит в создании какой-то страницы или раздела сайта, на которую ведут ссылки с “нормальных” страниц вашего сайта, но эти ссылки скрыты от глаз пользователя при помощи CSS стилей (overflow:hidden;). Таким образом, обычный пользователь НИКОГДА не найдёт данный раздел сайта, а бот, который тупо парсит HTML страницы в поисках форм и ссылок, с лёгкостью найдёт такую ссылку и заглянет в данный раздел. И тут срабатывает ловушка - IP адрес этого бота сыпется в БАН-лист сайта, и он уже не сможет бродить по сайту с этого IP. “Нормальным” роботам (типа поисковых Google или Yandex), через файл robots.txt сообщается, о том, что в раздел-ловушку ходить не надо.

Пожалуй, недостатков у данного метода больше чем достоинств, ну поехали: обойти данные ловушки очень просто, можно научить бота читать тот же robots.txt, можно вручную найти такой раздел и “сказать” боту не ходить туда. А можно научить бота понимать ухищрения на CSS и не ходить по таким ссылкам. Управляемый браузер вообще не попадёт в такой раздел, так как просто “не увидит” этих ссылок. Но даже если представить что это на 100% рабочий метод, и он заблокирует всех плохих ботов, не нужно забывать, что за заблокированным IP бота может быть целая сеть невинных юзеров, которые не получат доступа к вашему сайту. И с другой стороны, бот, может запросто сменить IP, через анонимный проси и продолжит успешно спамить ваш сайт.

Ловушки в HTML форме

Уже теплее, данный метод может послужить надёжной защитой от большинства скриптов, но не будем забегать вперёд. Данная защита, по принципу очень схожа с предыдущей, но имеет более адекватный результат. В HTML форму добавляется скрытое поле (возможно и не одно), скрытое - значит не type="hidden", а type="text", но скрыто визуально всё теми же приёмами на CSS, а на стороне сервера, в обработчике формы добавляется условие, что заполнение формы является правильной только при условии что наши скрытые поля будут пустыми. И что у нас получится: пользователь, который просто не видит скрытое поле НЕ заполнит его - оно останется пустым, а подавляющее число ботов, которое просто спарсило HTML форму не думая о стилях обязательно заполнит эту форму. Обработчик форму получит “неправильную” форму и просто не добавит её. Все указанные выше (ловушка для ботов) методы обхода защиты применимы и тут, так что это не панацея, а лишь защита сайта от ботов не настроенных специально на вашу защиту. То есть, если у вас сайт - гигант, то ботов будут учить обходить вашу защиту, а если у вас сайт с небольшой посещаемостью, то получится как в анекдоте про неуловимого Джо…

Ловушка со скрытым полем и HTML сущностями

Принцип построения идентичен с предыдущим, но с той разницей, что вместо пустого поля, отправляются HTML сущности типа ( " &), любой браузер преобразует эти сущности в присвоенные им знаки ("&), а бот, скорее всего вернёт сущности без изменений. Как стало понятно, от управляемого браузера это не защита, и описанные выше уязвимости применимы и сюда.

Защита на JS

Пожалуй, саамы адекватный и “красивый” способ безкаптчевой защиты. Игры со стилями, поисковики могут понять неправильно, и это кончится печально, а с JS никаких проблем. Один из примеров с описанием JS защиты приведен тут. Большинство современных ботов не смогут обойти подобную защиту (без ручного вмешательства конечно под конкретный пример), научить бота обходить такую защиту будет на много сложнее, чем в предыдущих видах ловушек, но и не составит особой сложности. И по-прежнему, для управляемого браузера этот вид защиты не будет даже заметен.

Итоги

Можно с уверенностью сказать, что панацеи от спама нет и быть не может, какую бы человек не придумал защиту, её сможет обойти другой человек (в нашем случае), но стоит заметить, что если постоянно менять, скажем алгоритм защиты на JS, то спамеры просто не в состоянии будут всё время обучать бота и ваш сайт с плавающим алгоритмом защиты будет защищён от ботов такого типа. Но с другой стороны, чего бы вы не придумали на JS или на другой ловушке, управляемы браузер даже не спотыкнётся. С управляемым браузером можно бороться только при помощи каптчи любого вида. Графическая каптча разгадывается “на ура” на автомате или руками. А вот интерактивная или текстовая каптча с вопросами и задачками будет разгадана только по базе готовых ответов, а если такая каптча будет тоже плавать? - то есть генерироваться разные вопросы или картинки и т.д. то и базу писать-то нет на что. Единственным решением останется только отправить такую каптчу на ручной анализ, но и этому можно воспрепятствовать используя каптчу на FLASH с защитой по домену на выполнение, то есть флешь каптча будет работать только на домене вашего сайта, и отправка её на ручной разбор ничего не даст. Но FLASH каптча - это ещё одно узкое место, у некоторых пользователей не установлен флешь плеер. А с другой стороны, интерактивная и текстовая каптча имеет ограниченное количество вариантов ответов и уязвима для брутфорса, и тут уже понадобится простенький фаервол с анализатором лога, который не допустит слишком быстрых/частых попыток отправить форму для одной сессии/IP/User agent. Но и эту защиту можно обойти используя БОТНЕТ или много прокси, и так можно продолжать до бесконечности.

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

Подводя итоги, становится ясно, что, для мощной защиты своего сайта от спама нужно использовать оба метода в комплексе, и использовать их стоит в самых простых реализациях, которые не отнимут у посетителя больше 2-3 секунд. Но самое главное, это создать динамику обоих видов защиты, а это уже гораздо сложнее - алгоритмы защиты и вопросы/ответы каптчи должны постоянно меняться. И учитывая ограниченность интерактивной и текстовой каптчи (возможность брутфорса), не стоит забывать про простой фаервол с анализатором логов.

P.S. если у вас пока не большой проект, и он не имеет большой посещаемости, то не стоит сильно заморачиватся, используйте любой вид безкаптчевой защиты (например предложенный выше на JS)или придумайте свой и будет вам счастье.

P.P.S не стоит сильно полагаться на защиты в популярных CMS и движках форумов, эти движки лакомые для всех спамеров, так как на них поднято много сайтов, и их все можно спамить по одному алгоритму.

Не забываем оставлять

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

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

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

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

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

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

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

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

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

Шаг 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; /*курсор в виде руки*/ }

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

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

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

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

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

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

Три года назад на Хабре была опубликована статья , рассказывающая о принципиально отличном от CAPTCHA решении для PHP по защите форм от спам-ботов. Это решение основано на идеях, изложенных в своих статьях Филом Хааком (Phil Haack) - Honeypot Captcha и Недом Батчелдером (Ned Batchelder) - Stopping spambots with hashes and honeypots . К сожалению, предложенный в статье класс, написан для PHP4 и не развивается с 2007-го года. Хочу предложить вашему вниманию его аналог на PHP5.

Ботобор

Ботобор - библиотека, написанная на PHP 5.0, предназначенная для защиты от заполнения веб-форм роботами. Используемые ей методы, незаметны для посетителей-людей.

Для выявления роботов Ботобор использует следующие проверки:

  • несовпадение значения REFERER с URL, на котором расположена форма;
  • слишком маленький промежуток между показом формы и её отправкой (настраивается);
  • слишком большой промежуток между показом формы и её отправкой (настраивается);
  • заполнение поля-приманки.

По умолчанию используются все проверки, но у разработчика есть возможность отключать любые из них.

ПримерыПростой пример
require "botobor.php" ;
…
// Получите разметку формы тем способом, который предусмотрен у вас в проекте, например:
$html = $form -> getHTML () ;
// Создайте объект-обёртку:

// Получите новую разметку формы
$html = $bform -> getCode () ;

Фрагмент кода, обрабатывающего данные формы:

require "botobor.php" ;
…
if (Botobor_Keeper:: isHuman () )
{
// Форма отправлена человеком, можно обрабатывать её.
} Пример настройки формыФрагмент кода, создающего форму:
// пусть $html содержит код формы
$bform = new Botobor_Form($html ) ;
// отключаем поля-приманки
$bform -> setCheck ("honeypots" , false ) ;
// устанавливаем нижний предел заполнения формы в 2 секунды
$bform -> setDelay (2 ) ;
// устанавливаем верхний предел заполнения формы в 60 минут
$bform -> setLifetime (60 ) ;
$html = $bform -> getCode () ;
В остальном всё также как и в первом примере.Что у ней внутре?Что делает Ботбор с кодом формы В конструкторе Botobor_Form принимает HTML-код формы. В этот код, после открывающего тега , добавляется скрытый (display: none) , содержащий input с мета-данными формы. Эти мета-данные хранят подписанную информацию о времени создания формы, установленных опциях и т. д. В этот же скрытый блок Ботобор может вставлять поля-приманки.Поля-приманки Поля-приманки предназначены для отлова роботов-пауков, которые находят формы самостоятельно. Такие роботы, как правило, ищут в форме знакомые поля (например, name) и заполняют их. Ботобор может добавить в форму скрытые от человека (при помощи CSS) поля с такими именами. Человек оставит эти поля пустыми (т. к. просто не увидит), а робот заполнит и тем самым выдаст себя.

По умолчанию в коде формы ищутся поля с любым из следующих имён: «name», «mail», «email» (список настраивается). У каждого найденного поля имя меняется на сгенерированную случайным образом комбинацию символов и создаётся скрытое средствами CSS поле с оригинальным именем.

Обратное преобразование имён будет сделано во время вызова метода Botobor_Keeper::handleRequest() или Botobor_Keeper::isHuman().

Буду рад, если кому-то пригодится.

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