Есть форма обратной связи для клиентов
Читаем статью
Проблема в том, что если просто разместить код 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” – привязка к модальному окну
