G|Translate: English EN Français FR Deutsch DE Italiano IT Русский RU Español ES

Защищаем форму обратной связи от ботов

Есть форма обратной связи для клиентов

Защищаем форму обратной связи от ботов

Читаем статью

Форма обратной связи

Проблема в том, что если просто разместить код html формы на странице – рекламные боты замучают.  И fail2ban особо не поможет, т.к. IP-адресов много и они динамически меняются. 

И будет что-то типа такого безобразия

Защищаем форму обратной связи от ботов

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

Что делать?

Создаем форму обратной связи через PHP

Будем прятать форму от глупых ботов. Да, умные боты её все равно найдут, но их будет менее 5% от общего числа ботнетов.

Спрячем форму в файл form.php, который будет вызываться по клику и создавать форму на экране.

Стоп, а какая разница? Ведь всё равно у скрита будет прямой URL, по которому его можно вызвать? И все эти названия в любом случае видны в коде сайта.

Но разница есть.

mysite/form.html

mysite/form.php

В первом случае вызывается готовый файл html, в котором бот может точно также на автомате заполнять поля.

Во втором случае скрипт PHP создает форму. 

echo 'Имя: <input type= "text" name= "name" value="" placeholder="optional"> <br/>';
echo 'E-mail*: <input type= "text" size = "17" name= "email" value="" placeholder="optional"><br/>';

и так далее.

И мы можем запретить прямой вызов скрипта.

Как-то так

if (рефер не принадлежит сайту) {
   // вызов файла-заглушки
}

А в файле-заглушке устанавливаем 404 ошибку

<?PHP
header($_SERVER['SERVER_PROTOCOL']." 404 Not Found");
echo '<html>'; 
echo <head>'; 
echo </head>'; 
echo <body>'; 
echo </body>'; 
echo </html>';
?>

Вот здесь подробнее

Защищаем скрипт PHP от прямого вызова

В результате бот будет получать ошибку 404 вместо формы:) Вот, например, проверка ответа сервера через Яндекс

Защищаем форму обратной связи от ботов

Красота!

Что бы форма создалась – нужно скрипт вызвать со страницы сайта, т.е. с правильным рефером. Да, есть мощные боты, которые умеют полностью моделировать работу браузера (библиотека Curl PHP), но их меньшинство.

Создаем красивую картинку для вызова формы обратной связи

Для привлечения внимания можно сделать бегущую строку в gif-файле

Защищаем форму обратной связи от ботов

Вот онлайн сервис для создания такой надписи http://rooltime.com/animacija-teksta.html

Но если нам еще нужна подложка (фон) – то ситуация будет сложнее.

Защищаем форму обратной связи от ботов

Как совместить две картинки (наложить одну картинку на другую)? Можно сделать простое решение, просто вклеить gif на jpg – но тогда размер файла получится порядка 150 Кб, что не есть хорошо на каждой странице сайта.

Вот сервис https://gfto.ru/index/obedinit_png_jpeg_s_gif_animaciej/0-77

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

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

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

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

Выход есть – SVG.

SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики.

Но SVG-формат не только позволяет создавать векторную графику с помощью текста, но и позволяет выводить несколько картинок, как единое целое.

Вот так

<svg width="100%" viewBox="0 0 200 85"
xmlns="https://www.w3.org/2000/svg" 
xmlns:xlink="https://www.w3.org/1999/xlink">
<image xlink:href="fon.jpg" x="0" y="0" width="100%" />
<image xlink:href="gif.gif" x="5" y="35" width="95%" /> 
</svg>

 

Большинство браузеров поддерживают эту конструкцию

Защищаем форму обратной связи от ботов

Делаем форму обратной связи в всплывающем окне с паранджой

Последний штрих

Читаем статью

Делаем модальное окно iFrame для WordPress

Нам осталось только сделать ссылку на объекте SVG абсолютно стандартным способом

<a 'href="'https://mysite.ru/form.php" class="myModal" data-width="330" data-height="400"><svg>...</svg></a>

 

где class=”myModal” – привязка к модальному окну

 


Вы можете сохранить ссылку на эту страницу себе на компьютер в виде htm файла