Стилизованная рабочая форма обратной связи

Преимущество данной формы в том, что в ней нет необходимости ставить капчу и мучать тем самым ее отправителей, а не спамботов.

Валидация заполненных полей осуществляется средствами jQuery, плюс дополнительно можно добавить проверки на php

Так выглядит форма:

HTML код формы:

Немного о коде:
  • Мы вообще не используем тег <form>, чтобы меньше привлекать внимание спамботов.
  • По умолчанию галочка с соглашением включена, чтобы не смущать посетителя неактивной кнопкой отправки. Если нужно сделать наоборот, то с чекбокса нужно удалить checked="checked", а на кнопку отправки добавить disabled="disabled". Подробнее об этой галочке можно поглядеть тут. Если она и вовсе не нужна, просто удалите чекбокс и его лабел из кода.
  • Атрибут data-validate выводит текст ошибки, если поле не заполнено.
  • Блок result-at нужен для вывода сообщений после обработки формы сервером.
  • Скрытое поле subject-at нужно чтобы обозначить форму, если она используется на разных страницах. Например, на главной странице это будет одно значение, а в услугах другое.
  • Важно: на одной странице 2 формы работать не будут!

CSS код формы:

Немного о коде:
  • Если на сайте не используется шрифт FontAwesome, то у класса .alert-validate::after нужно заменить content: "\f129" на крестик content: "\2718" или другой символ. И соотв. удалить сам шрифт font-family: "FontAwesome"
  • Если поле для ввода не обязательное, используется класс no-validate-input-at вместо validate-input-at. В PHP нужно убрать проверку этого поля.

JS код формы (jQuery):

Немного о коде:
  • /send.php - путь к файлу, который будет отправлять почту.
  • Если поле email-at используется только для почты, нужно раскомментировать строку, чтобы проверять его валидность.

PHP код формы (send.php):

Немного о коде:
  • Все основные моменты описаны в комментариях кода
  • Почту, которая числится отправителем, лучше поставить свою и занести ее в белый список почтовика.
  • Я поставил 1 проверку на запрещенные слова, но если с формы будут идти нежелательные письма, такие проверки можно добавить: поставить капчу, блокировать по IP или кукам и т.д. Как выглядит проверка на слова, можно увидеть вписав в сообщение формы "предложение", "купить" или "раскрутка".
  • При необходимости, результаты этих проверок можно не показывать, а сообщать что форма отправлена, соотв. не отправляя письмо на почту.

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Михаил:

    День добрый.

    Вопрос такой: как вставить в js код — цель на отправку формы метрики?

    Ответить
    • Alexander:

      Когда форма отправлена:

      $(".result-at").html("<div class='success-at'>Ваше сообщение отправлено!</div>"); 
      $(".form-at").fadeOut(500);
      $(".input-at").val("");

      Ниже ставим:

      yaCounterNNNNNNNNNNN.reachGoal('name');
      Ответить
  • пудж:

    всё работает по кайфу

    Ответить
  • Альберт:

    Добрый день!
    Спасибо за крутое решение… долго искал

    Подскажите, пожалуйста, как правильно добавить input file, чтобы и можно было получить файлы

    Спасибо

    Ответить
    • Alexander:

      Я про отправку файлов не писал в блоге, но можно почитать тут например.
      Или лучше использовать что то более профессиональное — PHPMailer

      Ответить
  • Александр:

    Вставил всё это на свою страницу. По нажатию кнопки ничего не происходит.

    Ответить
  • Рушан:

    Добрый день! А файл jQuery как назвать необходимо?

    Ответить
    • Alexander:

      Как угодно, главное чтобы код был на сайте

      Ответить