Форма обратной связи для сайта с отправкой на почту

  • Статьи
  • Видеоуроки
  • Таймлайн
  • Вопросы
  • Поиск
    • Войти
    • Регистрация
  • HTML & CSS
  • JavaScript
  • Bootstrap

Форма обратной связи для сайта с отправкой на почту

Приветствую вас всех мои друзья! Сегодня я хочу поделиться с вами уроком. На какую тему? Думаю, вы и сами прекрасно догадались!

Форма обратной связи для сайта, которую я вам покажу – основана на использовании технологии Ajax. Но не волнуйтесь, знать этого вам не надо, все уже готово, останется только установить эту форму и настроить под себя!

Ребята — скрипт очень давно устарел. У кого-то работает, у кого то нет. А мне разбираться и уж тем более обновлять — лень. Поэтому тестируйте на своё усмотрение.

Демо

Форма обратной связи php с отправкой на почту

Эта форма обратной связи на сайт очень функциональна сама по себе, к ней подключено несколько плагинов, которые создают привлекательный внешний вид и проверяют валидность (читай правильность) введенных вами данных. Эти плагины работают на великом и могучем JavaScript! А называются так:

    1. JQTransform – плагин который позволяет сделать нашу форму обратной связи красивой!

    2. formValidator – а этот плагин проверяет форму контактов на правильность введенной информации и в случае чего выводит всплывающие подсказки!

Для полноценной работы этой формы будет использован класс – PHPMailer. Считается одним из лучших!

Заметка для самых умных:

Форму обратной связи для сайта можно сделать на HTML! Но работать она начнет только при помощи PHP! И никак иначе!

Это я для тех, кто ищет форму обратной связи только на HTML. Сделать сделаете, но работать она не будет!

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

Эту форму обратной связи я откопал на сайте www.tutorialzine.com ссылка ведет непосредственно на страницу оригинала, т.е. сайт автора данной формы!

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

Признаюсь честно, мы с этой «формочкой» провозились два дня, так как начинали всплывать различные косяки, а недоделанную до конца форму обратной связи, тем более такую красивую, выкладывать не хотелось! Так что если вы любитель все сделать сами, и в вашу светлейшую голову влезет мысль – самому русифицировать данную форму, дам пару советов, так как просто переводом фраз не ограничишься:

    1. Эта форма обратной связи заточена под буржуев, от туда же и скачена, поэтому она будет присылать вам вместо нормальных русских символов – кракозяблы. Разберитесь с кодировкой. Да и вообще все «тюлени» будут связаны с этим!

    2. Скрипт валидации изначально не понимает наши букв, поэтому их там надо будет прописать!

    3. Даже после этих действий если указать тему письма на русском, письмо приходит с темой – No subject (надеюсь правильно написал), это лечится если указать кодировку в файле класса PHPMailer.

    4. В оригинальной форме текст в полях ввода прижимался к низу, а не по середине. Это глюк плагина JQTransform.

Ну, вроде все расписал и предупредил. Поехали дальше!

Для тех кто хочет получить уже готовую форму обратной связи:

    1. Скачиваем скрипт формы обратной связи для сайта (под видео).

    2. Смотрим видео ниже. В нем я рассказал где необходимо менять настройки, что бы форма работала на вас.

Установка формы обратной связи для сайта

И так, смотрите видео по установке формы, там все рассказано. Если возникнут какие либо вопросы – задаем их или на форуме, или здесь в комментах. Если вопрос сугубо технического характера, то лучше на форуме.

ЗЫ: кстати, забыл добавить, что эта форма обратной связи для сайта, работает, даже если у вашего посетителя отключен JavaScript.

Форма обратной связи с использованием ajax, php и bootstrap

  • Статьи
  • Видеоуроки
  • Таймлайн
  • Вопросы
  • Поиск
    • Войти
    • Регистрация
  • HTML & CSS
  • JavaScript
  • Bootstrap

Всплывающая форма обратной связи | ИТ Шеф

  • Статьи
  • Видеоуроки
  • Таймлайн
  • Вопросы
  • Поиск
    • Войти
    • Регистрация
  • HTML & CSS
  • JavaScript
  • Bootstrap

Как защитить свою форму обратной связи от атаки? / Хабр

Представьте такую ситуацию.

Приходите вы на работу, садитесь проверить почту, рассчитывая увидеть ответ от партнёра, немного спама, а вместо этого видите вот такое: Входящие (164 532).


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

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

В пятницу рабочий день заканчивается в 18.00, предположим в 18.30 офис закрывается на ключ. В понедельник рабочий день начинает в 9.00, ну а открывают офис, к примеру, в 8.00. Итого имеем 61.5 час на то, что бы злоумышленник не опасаясь быстрого разоблачения занялся делом. Предположим он спамит (а сделать это можно даже с помощью браузера) в 10 потоков, т.е. он одновременно может отсылать 10 писем. Если он будет отправлять письма раз в три секунды, то утром понедельника, в 8.00 мы обнаружим 738 000 писем. Естественно, потоков может быть больше, время между отправками писем меньше, да и компьютеров, вовлечённых в этот процесс может быть десятки, а то и сотни.

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

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

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

К сожалению, наказать злоумышленника, даже если вы точно знаете кто это, практически невозможно. Вот как это комментирует один из сотрудников отдела по борьбе с компьютерными преступлениями города Санкт — Петербург:

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

Глава 28 УК РФ.
Преступления в сфере компьютерной информации
Статья 272. Неправомерный доступ к компьютерной информации
Статья 273. Создание, использование и распространение вредоносных программ для ЭВМ
Статья 274. Нарушение правил эксплуатации ЭВМ, системы ЭВМ или их сети

И дополнительной поправкой к федеральному закону «О рекламе» от 13.03.2006 N 38-ФЗ, введённой 1 июля 2007 года:
Статья 18. Реклама, распространяемая по сетям электросвязи и размещаемая на почтовых отправлениях

Таким образом, данное действие, совершаемое преступником, попадает под действие статьи 274. Нарушение правил эксплуатации ЭВМ, системы ЭВМ или их сети, т.к. при достаточном количестве запросов, создается т.н. DDoS-атака, влекущая за собой
(цитата: блокирование охраняемой законом информации ЭВМ) и ВОЗМОЖНОЕ наказание, в виде
(цитата: лишения права занимать определённые должности или заниматься определённой деятельностью на срок до пяти лет, либо обязательными работами на срок от ста восьмидесяти до двухсот сорока часов, либо ограничением свободы на срок до двух лет. )

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

Даже в том случае, если пострадавшая сторона будет настаивать на продолжении расследования, будет необходимо со 100% точностью воссоздать ситуацию, при которой может происходить аналогичная ситуация, а также послать запрос разработчику ПО, вероятнее всего, вызвавшего сбой и разработчикам ПО, непосредственно взаимодействующего с ним, т.к. ситуация не обязательно была или может быть вызвана лишь одной из программ, а не ошибкой их взаимодействия. А это в свою очередь может занять не один и не два года. Поэтому наказать преступника просто не представляется возможным.


Теперь давайте посмотрим, как работает уязвимая форма обратной связи.

В большинстве случаев форма обратной связи отправляет информацию методом POST, либо сразу через функцию mail(). Не будем углубляться в дебри, но эти решения грешат возможностью автоматизации отправки огромного количества писем на ящик, в который уходят сообщения из формы обратной связи. Вот посмотрите предупреждение браузера Firefox2 о повторной отсылке информации на сервер:

Браузер Mozilla Firefox 2.0.0.12
Как вы сами понимаете, простое нажатие кнопки F5 на клавиатуре снова отправит вам письмо. Ну а автоматизировать данный процесс, повторюсь, совсем не сложно (хотя бы с помощью Opera).

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

Я предлагаю пять вариантов, каждый вариант обладает как положительными сторонами, так и отрицательными.

Вариант номер 1:

Ajax.

Вот несколько из них:
AJAX contact form — [Описание][Демо]
An AJAX contact form — [Описание][Демо]
Ajax.Form.Mootools — [Описание + Демо]

Хорошо: множество готовых примеров; сообщение отправляется без перезагрузки страницы;

Плохо: если у пользователя отключён JavaScript — то форма работать не будет.


Вариант номер 2:
Редирект.

После отправки сообщения — моментальный редирект на любую другую страницу, к примеру на страницу с формой. Над формой можно вывести сообщение, что письмо отправлено.

Сделать это можно несколькими путями, самый топорный — это через META-теги:

<meta http-equiv="refresh" content="0; url=index.html">


Хорошо: работает, и в большинстве случае помогает;

Плохо: у этого решения отвратительное юзабилити.


Вариант номер 3:
Работа с БД.

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

Хорошо: на мой взгляд очень хорошая защита;

Плохо: требуется база данных, увеличивается время работы скрипта, увеличиваются требования к мощностям (если сайт популярен, то особенно), обмануть всё-таки можно.


Вариант номер 4:
Cookie.

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

Хорошо: способ работает, потенциальное количество спама уменьшается;

Плохо: куки могут быть отключены (специально или нет — но вы же не запретите отправку сообщения только потому, что куки отключены), куки можно стирать автоматически.


Вариант номер 5:
Captcha.

Капча (если он не кривая) спасёт от спама через форму обратной связи.

Вам помогут ссылки:
reCaptcha
CAPTCHA.ru
Cryptographp
w3captcha

Хорошо: способ действенный;

Плохо: лично мне капча неудобна, особенно сложные, капчу могут распознать и обойти.

Стоит учесть, что абсолютной панацеи всё равно нет, просто эти способы (которые, кстати, легко можно модернизировать, совмещать и т.п.) помогут отгородиться от проказ молодых и неопытных сетевых хулиганов.
Спасибо metalalisametalalisa за дополнение. Если честно, про капчу хотел написать, на забыл 🙂

Кросс-пост из моего блога.

niklasvh / feedback.js: Форма обратной связи со скриншотом

перейти к содержанию Зарегистрироваться
  • Почему GitHub? Особенности →
    • Обзор кода
    • Управление проектами
    • Интеграции
    • Действия
    • Пакеты
    • Безопасность
    • Управление командой
    • Хостинг
    • мобильный
    • Истории клиентов →
    • Безопасность →
  • команда
  • предприятие
  • Проводить исследования
    • Изучите GitHub →
    Учитесь и вносите свой вклад
    • Темы
    • Коллекции
    • В тренде
    • Учебная лаборатория
    • Руководства с открытым исходным кодом
    Общайтесь с другими
      .

      EddyVerbruggen / nativescript-feedback: Неблокирующая текстовая обратная связь для вашего приложения NativeScript

      перейти к содержанию Зарегистрироваться
      • Почему GitHub? Особенности →
        • Обзор кода
        • Управление проектами
        • Интеграции
        • Действия
        • Пакеты
        • Безопасность
        • Управление командой
        • Хостинг
        • мобильный
        • Истории клиентов →
        • Безопасность →
      • команда
      • предприятие
      • Проводить исследования
        • Изучите GitHub →
        Учитесь и вносите свой вклад
        • Темы
        • Коллекции
        • В тренде
        • Учебная лаборатория
        • Руководства с открытым исходным кодом
        Общайтесь с другими
        • События
      .

      elogy / feedbackscript: php-скрипт, обеспечивающий анонимную обратную связь для студентов

      перейти к содержанию Зарегистрироваться
      • Почему GitHub? Особенности →
        • Обзор кода
        • Управление проектами
        • Интеграции
        • Действия
        • Пакеты
        • Безопасность
        • Управление командой
        • Хостинг
        • мобильный
        • Истории клиентов →
        • Безопасность →
      • команда
      • предприятие
      • Проводить исследования
        • Изучите GitHub →
        Учитесь и вносите свой вклад
        • Темы
        • Коллекции
        • В тренде
        • Учебная лаборатория
        • Руководства с открытым исходным кодом
        Общайтесь с другими
        • События
        • Форум сообщества
        • GitHub Education
      .

      Страница не найдена · GitHub · GitHub

      перейти к содержанию Зарегистрироваться
      • Почему GitHub? Особенности →
        • Обзор кода
        • Управление проектами
        • Интеграции
        • Действия
        • Пакеты
        • Безопасность
        • Управление командой
        • Хостинг
        • мобильный
        • Истории клиентов →
        • Безопасность →
      • команда
      • предприятие
      • Проводить исследования
        • Изучите GitHub →
        Учитесь и вносите свой вклад
        • Темы
        • Коллекции
        • В тренде
        • Учебная лаборатория
        • Руководства с открытым исходным кодом
        Общайтесь с другими
        • События
        • Форум сообщества
      .

      No related posts.