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

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

Всем привет! В этой статье вы узнаете, как создать всплывающую форму обратной связи для html и wordpress сайтах. В первую очередь такие формы будут необходимы интернет-магазинам, лендингам, да и простым сайтам-визиткам, так как это реально удобно для пользователя.

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

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

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

Вставляем в нужное место на сайте следующий код:

Онлайн заявка

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

Код вставлен, что мы видим?

forma1

Форма появилась, но надо придать ей вид. Для этого добавляем следующие стили:

/*
Форма обратной связи
*/
#inline {
   margin-left:30px;
   width:80%;
   margin:0 auto;
   background:#fff;
   padding:10px 20px;
}
.txt {
   display:inline-block;
   color:#676767;
   width:190px;
   margin-bottom:10px;
   border:1px solid #ccc;
   padding:5px 9px;
   font-size:15px!important;
   line-height:1.4em;
}
.txtarea {
   display:inline-block;
   color:#676767;
   width:617px;
   margin-bottom:10px;
   border:1px solid #ccc;
   padding:5px 9px;
   font-size:15px!important;
   line-height:1.4em;
   height:80px;
}
.txt:focus, .txtarea:focus {
   border-style:solid;
   border-color:#bababa;
   color:#444;
}
input.error, textarea.error {
    border-color:#973d3d;
    border-style:solid;
    background:#f0bebe;
    color:#a35959;
}
input.error:focus, textarea.error:focus {
    border-color:#973d3d;
    color:#a35959;
}
#send { 
    color:#FFFFFF;
    display:block;
    cursor:pointer;
    padding:5px 11px;
    font-size:1.2em;
    border:solid 1px #F9F9F9;
    border-radius:2px;
    background:#70C6B9;
    width:210px;
    margin-bottom:20px;
}
#send:hover {
    background:#979797;
}
/*
Форма обратной связи
*/

forma2

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

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

Выглядит это вот так:

forma3

Что получается? Посетитель кликает на поле, и скрипт подставляет ему уже готовую маску, с кодом страны. Довольно удобно.

Для этого, необходимо подключить скрипт маски. Скачать его вы сможете в самом конце статьи вместе с исходниками.


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

Для этого перед закрывающимся тегом вставьте следующий скрипт:


Как работает этот скрипт?

  1. Производит проверку введенного e-mail.
  2. Указывает поля, с которыми будет работать.
  3. Проверяет эти поля на заполнения. В случае, если обязательные поля не указаны – выдает сообщение о том, что их нужно заполнить.
  4. Обрабатывает введенную информации и инициирует отправку уведомления на почту.
  5. Выдает сообщение пользователю о том, что его заявка принята с помощью Ajax.

Осталось сделать самое последнее – создать файл sendmessage.php вставить в него нижеприведенный php код и загрузить его в корень вашего сайта.

";
$msg .= "

Новое сообщение

\r\n"; $msg .= "

Имя: ".$username."

\r\n"; $msg .= "

Номер телефона: ".$userphone."

\r\n"; $msg .= "

Почта: ".$usermail."

\r\n"; $msg .= "

Сообщение: ".$content."

\r\n"; $msg .= ""; // отправка сообщения if(@mail($sendto, $subject, $msg, $headers)) { echo "true"; } else { echo "false"; } ?>

Вот и все, простая форма обратной связи для html сайта готова. Не забудьте только поменять e-mail в файле sendmessage.php на свой.

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

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

Для начала нам нужно подключить jqury fancybox, скачать который вы сможете в конце статьи.




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

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

Обратный звонок

И придаем ей стили.

.modalbox {
   color:#FFFFFF;
   display:block;
   cursor:pointer;
   padding:10px 11px;
   font-size:1.2em;
   border:solid 1px #F9F9F9;
   border-radius:2px;
   background:#70C6B9;
   width:210px;
   text-decoration:none;
   text-align:center;
   margin:0 auto 20px;
}
.modalbox:hover {
   background:#979797;
}

Обратите внимание, что кнопке, при нажатии на которую будет вызывать всплывающее окно, обязательно должен быть присвоен класс modalbox и путь href=»#inline». Без этого всплывающая форма не будет открываться на сайте.

После чего прячем созданную нами ранее форму, чтобы она открывалась во всплывающем окне. Для этого нужно заменить стили #inline со старых на новые.

#inline {
   display:none;
   margin-left:30px;
   width:80%;
   margin:0 auto;
   background:#fff;
   padding:10px 20px;
}

В итоге у нас получается вот такая кнопочка.

forma4

При нажатии на которую открывается всплывающее окно с обратной связью.

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

Опять же, стили, расположение полей и элементов можно менять так, как вам будет нужно. К примеру, для обратного звонка с сайта достаточно будет оставить всего 2 поля – имя и телефон, а остальные поля убрать.

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

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

В случае, если ваш сайт работает на движке wordpress, вы можете использовать специальные плагины для добавления контактной формы. Один из лучших плагинов Contact Form 7. Скачать его можно с официального сайта, либо через админку в разделе Плагины.

Еще нет сайта на данном движке? Рекомендую прочитать статью о том, как установить wordpress на свой домен.

После активации плагина в левом меню появится новая вкладка. Открываете ее и нажимаете Add New.

forma6

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

forma7

Копируете этот код, переходите на нужную страницу, в визуальном редакторе выбираете формат «Текст», вставляете этот шорткод и сохраняете страницу.

forma8

Затем проверяем, отображается ли форма на странице и корректно ли работает. Для этого, достаточно будет просто перейти на страницу, где вставили код. У вас должна появиться вот такая форма:

forma9

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

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

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

  1. Всплывающую форму, описанную выше в статье, просто прикручиваем ее не к html сайту, а к движку.
  2. Форму, созданную через плагин всплывающей формы Contact Form 7, внеся небольшие доработки.

Первый способ уже был описан выше, поэтому сразу перейдем ко второму.

Для начала, вставляем следующий код сразу после открытия тега body.

Обратный звонок
X

Давайте разберемся что есть что:

  • Ссылка, имеющая id=»callme-open» при нажатии на которую, наша форма будет открываться. Обратите внимания, что эту ссылку нужно вставить не после открытого тега, а в то место, где вы хотите, чтобы эта кнопка располагалась. Обычно ее добавляют в правый угол шапки, рядом с телефоном вашей компании.
  • Блок bg-b будет создавать затемненный фон сайта, когда всплывающая форма будет открыта.
  • Блок callme будет содержать саму форму обратной связи.
  • X — это будет наш крестик в углу форму, при клике на которую форма будет закрываться.
  • Ну и php код, в котором будет запускаться шорткод плагина Contact Form 7.

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

.bg-b {
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
  background:rgba(51,51,51,0.55);
  z-index:1000;	
}
body {
 position:relative;
}
.callme {
  position:fixed;
  top:30%;
  left:50%;
  width:300px;
  margin-left:-150px;
  z-index:1100;
  background:#fff;
  padding:20px 20px 10px;
  border-radius:4px;
}
.callme small {
  position:absolute;
  right:10px;
  top:10px;
  font-size:15px;
  cursor:pointer;
}

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


Данный скрипт необходимо вставить в файл footer, перед закрывающимся тегом body.

Остались последние штрихи и всплывающая форма на wordpress будет готова. Добавьте классам .callme и .bg-b стиль display:none. Это необходимо для того, чтобы форма не появлялась на экране при запуске сайта.

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

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

UPDATE 06.06.2018

В последних версиях WordPress jQuery скрипты не работают с символом $, поэтому это следует учесть и заменить $ на jQuery

Довольно часто бывает такая проблема, при которой сквозная форма на сайте, перестает отправлять на внутренних страницах. Для того, чтобы этого не происходило, указывайте в обработчике полный пусть к файлу sendmessage.php. Например, вот так:

url: 'http://site.ru/sendmessage.php'

А скачать исходники первых двух форм, вы сможете по ссылке

UPDATE 04.07.2018

По многочисленным просьбам, форма обратной связи была модернизирована. Теперь в ней учтена установка галочки на согласие об отправке данных согласно законодательству РФ № 152-ФЗ «О персональных данных», доработана адаптивность под любые разрешения экранов, сжаты js и css файлы.

Посмотреть пример, а также и скачать исходники обновленной формы обратной связи и всплывающей формы теперь можно online, по ссылкам:

popup form
form

Отдельного внимания зазлуживает реализация формы обратной связи на WordPress без использования плагинов.

Опубликовано: 14:46-19.05.2016

271 Комментариев —  Развернуть

  • Charlespi:

    а можно поставить это все на сайте Joomla? Помогите разобраться нужно очень как поставить эту форму на лединг пейдже плиз

    • Евгений К.:

      Добрый день. Данная форма не имеет привязки к движку. Ставить ее точно по такому же принципу, как и на любой сайт. Единственное вы не сможете добавить форму через плагин Contact7, так как он для движка WordPress.

  • N:

    Не приходят письма. Ошибок форма не выдаёт

    • Евгений К.:

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

  • Anthony:

    Пример отличный.
    Супер все работает. Автору — спасибо.

    Вопрос вот в чем. Ситуация (при всплывающем окне):
    — пользователь не до конца заполнил и закрыл
    — отправил — зафиксировалось, что отправилось
    — отправилось с ошибкой или завис статус отправки
    При нажатии на крестик — закрыть форму — данные не сбрасываются. тоесть она остается в последнем состоянии, как вызывалась/заполнялась раньше.
    Предположим человек заполнил один раз — отправил. захотел второй раз отправить — а там говориться — уже отправлено…
    Как сбрасывать данные и приводить форму в первоначальный вид при нажатии на «закрыть» или при успешной отправке?

    • Евгений К.:

      Добрый день. Все зависит от того, какую форму вы себе ставили. Просто на html или использовали плагин?
      При успешной отправке форма очищается самостоятельно.

      Не совсем верно будет не давать пользователю давать отправить вторую форму. Быть может он ошибся с вводом телефона или почты, понял это и решил отправить еще раз форму с верными данными. А тут ему сообщение, что уже все, нельзя больше.

      Чтобы форма сбрасывалась при закрытии, надо повесить скрипт на кнопку закрытия, который будет обнулять формы по клику. Для этих целей нужен будет js либо jquery.

      А для фиксации введенных данных в полях — можно использовать куки.

      В большинстве случаев в этом нет необходимости, поэтому в статье и не рассматривались данные вопросы.

      • Anthony:

        В чем-то согласен.

        Однако.. как реализовать следующий функционал (форма из примера «всплывающая форма обратной связи» с использованием и JS и JQuery):
        1 пример
        -пользователь открыл форму
        -заполнил поля
        — НЕ оправил.
        — нажал «закрыть»
        При повторном открытии формы — сохраняются данные — это нормально

        2 пример
        -пользователь открыл форму
        -заполнил поля
        — ОТПРАВИЛ или в статусе «отправка…».
        При повторном нажатии на вызов окна говорится, что форма «отправлена» или в «отправке», если что-то не так.
        При «отправил»:
        — как сбросить данные, чтобы открывалась чистая форма, готовая к отправке
        При «отправка…» при нажатии на закрытие:
        — так же форма приходила в первоначальный вид — чистый, готовый к новому заполнению.

        Не соображу как это сделать ((.

  • Андрей:

    Заменяю в файле .php тестовый майл на свой, на сайте отображается сообщение, что отправлено, но письма на почту не приходят.

    Помогите!

    • Евгений К.:

      Добрый вечер, Андрей. Проблем может быть несколько.
      1. Ваш хостинг не позволяет отправлять письма с сайта.
      2. Письмо попало в папку «Спам». Проверьте эту папку. Если письмо там — то просто нажмите кнопку «Это не спам», и письма должны будут приходить.
      3. Глючат сервисы, возможно письмо придет с задержкой.

      Все поля формы заполняются? В том числе и почта?

  • Андрей:

    Мне, как начинающему, не понятно куда вставлять скрипты: в код страницы, в таблицу стилей или шаблон сайта?
    Можно уточнить?

    • Евгений К.:

      Код формы можно вставить в подвал сайта. Обработчик sendmessage.php в корень сайта, стили в файл с css.

      По ucoz подсказать не могу ничего. Никогда с ним не работал и вам не советую.

  • Андрей:

    …..и к тому же ucoz не даёт загрузить файл с расширением php
    Можете помочь?

  • Денис:

    Тестирую код на денвере.
    В статье написано в форме такая строка:
    Пока action не поменял с # на sendmessage.php, ничего не работало и письма не отправлялись + срабатывала навигация по странице в самый верх.
    После замены письма отправляются. Но, после отправки отображается вместо моей страницы просто пустая страница с надписью true. Плюс никаких изменений кнопки и всплывающих сообщений об отправке не было.
    Скачал ваш пример и залил на хостинг страницу с формой, чтобы проверить. Такая же история: сообщения отправляются и на экране только true.
    Вопрос: как сделать, чтобы при нажатии на кнопку, письмо отправилось, текущая страница и навигация на ней не изменились и где-нибудь отобразилось сообщение об успешной отправке (например на кнопке или на фэнсибоксе?

    • Евгений К.:

      Добрый день. Форма рабочая. Менять в ней ничего не надо, так как она и так после отправки заявки показывает, что форма успешно отправлена.
      Верните обратно в action #, иначе вы так и будете получать только страницу с true.
      А вот почему у вас не работает форма с ajax обработчиком — уже надо разбираться. В консоле какие ошибки показывает?

      • Денис:

        Разбирая конкретно ваш пример страницы с формой:
        1.ошибка отсутствия normalize.css
        2. Uncaught TypeError: $(…).fancybox is not a function(…) (index):57
        3. Метод getPreventDefault() является устаревшим. Для его замены используйте метод defaultPrevented.1 jquery-1.7.1.min.js:3:6598

        Пробовал открыть разными браузерами (хром, мозилла, макстон) и с денвера и с веба.
        При нажатии на кнопку просто скролл вверх и отправки нет.

        • Евгений К.:

          У вас сайт на чем? Вордпресс или самописный движок?

          • Денис:

            Мой сайт на шаблоне от html5up. Там ничего замудреного, простой лэндинг.
            Но. Чтобы нам с вами было проще, в этом обсуждении я работаю конкретно с вашими исходниками и в последнем сообщении я написал ошибки не со своего сайта а с вашего примера. С моим сайтом пересечений нет. Ошибки абсолютно идентичны.

          • Евгений К.:

            Форма работает на всех моих сайта + на всех клиентских сайтах. В ней нет ничего сложного, простая форма и обработчик.
            Почему у вас выдает такие ошибки сказать не могу, нужно смотреть детально и разбираться.
            К примеру файла normalize.css — здесь вообще нет. И то, что вам выдает сообщение об его отсутствии — это проблема скорее всего вашего шаблона.

            Далее. В форме есть проверка на валидность введенных данных. Если что-то введено не так, то отправки не будет. Либо, если вы уберете поля для ввода e-mail, форма тоже не отправит, пока не будет изменен код обработчика.

          • Денис:

            Я не сомневаюсь, что у вас всё и везде работает.
            Но, конкретно пример и эти ошибки я обнаруживаю из вашего архива http://seoblognik.ru/wp-content/uploads/2016/05/hide-form.zip
            Повторюсь, что мой сайт и шаблон не пересекается с вашим примером.
            Что касается normalize.css, он запрашивается в файле index.html в папке «форма обратной связи» из вашего архива.

          • Евгений К.:

            Посмотрю что там сегодня, и обновлю архив.

  • Сергей:

    Когда обновите архив? У меня тоже не работает я полностью вставляю вашу форму и письма не уходят даже ошибки не выдает.

  • bigcities:

    Я то и пришел сюда по запросу форма обратной связи, другу нужна на сайт. И не удержался соблазну, как дитя пошалил. Спасибо огромное за форму, просто супер! Поставила, работает. Только вот хотела поменять сообщение, которое выдается после отправки. «Благодарю!» И не могу найти, откуда оно выводится. Не подскажете?

    • Евгений К.:

      В обработчике есть строчка: $(this).before(«

      Успешно! Ваше сообщение отправлено 🙂

      «);

      Напишите туда свое сообщение и оно будет показываться.

  • Александр:

    Тоже почему то не работает, работает только контроль заполнения e-mail, после нажатия на кнопку отправить форма очищается, никаких сообщений не выдается.

  • Сергей:

    Все работает, спасибо

    Скажите а как сделать что бы какие то поля не были обязательные.
    И как добавить поля где в письме будет написано с какого сайта это пришло.

    • Евгений К.:

      Вот здесь задаются условия проверки. Можно убрать из этого не нужные проверки.

      if(mailvalid == false) {
      $("#email").addClass("error");
      }
      else if(mailvalid == true){
      $("#email").removeClass("error");
      }
      if(mailvalid == false) {
      $("#name").addClass("error");
      }
      else if(mailvalid == true){
      $("#name").removeClass("error");
      }
      if(mailvalid == false) {
      $("#phone").addClass("error");
      }
      else if(mailvalid == true){
      $("#phone").removeClass("error");
      }
      if(msglen < 4) { $("#msg").addClass("error"); } else if(msglen >= 4){
      $("#msg").removeClass("error");
      }

      А эта строчка уже задает условия на отправку обработчика

      if(mailvalid == true && msglen >= 4) {

      • Сергей:

        $(«#msg»).addClass(«error»); } else if(msglen >= 4){ $(«#msg»).removeClass(«error»); }

        А 4 что значит?

        • Евгений К.:

          Это проверка заполнения текстового поля. Если введено 4 и более символа, то текстовое поле считается заполненным корректно.

  • Сергей:

    Понял где менять но не понял что менять. Можно строчку кода где Имя и текстовое сообщения не обязательное

    И вот что мне приходит в письме

    Имя: Сергей Ракипов
    Номер телефона: +7 (950) 555-5444
    Почта: sergey2210rakipov@gmail.com
    Сообщение: Тестовое сообщение

    Но не понятно с какого сайта, можно добавить строку в коде где я напишу что это сайта такого то, я сам напишу в коде.

    • Евгений К.:

      По поводу адреса сайта. В файле sendmessage.php добавьте новую строчку перед именем:


      $msg .= "

      Сайт: название сайта

      \r\n";

      А чтобы сделать имя и сообщение не обязательным, нужно удалить этот код:


      if(mailvalid == false) {
      $("#name").addClass("error");
      }
      else if(mailvalid == true){
      $("#name").removeClass("error");
      }

      Потом этот кусок кода


      if(msglen < 4) { $("#msg").addClass("error"); } else if(msglen >= 4){
      $("#msg").removeClass("error");
      }

      И потом найти и удалить в обработчике


      && msglen >= 4

  • оксана:

    добрый вечер.
    У меня после отправки нет сообщения что письмо отправилось. и письма так же не приходят на почту

  • Павел:

    Спасибо за форму вернее код css и html никак не мог найти адаптивную подходящую форму, а ваша отлично подстраивается. Устанавливал на Modx отправка через Ajax все отлично.

  • Сергей:

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

    Мне нужно на одной странице разместить две формы.
    1 с эл. почтой и сообщением
    2 только с номером телефона.

    Я где есть вожу разные йди создаю два обработчика, и два скрипта проверки для каждого свои айди

    Но то проверку не проходи то не отправляет.

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

    • Евгений К.:

      Добрый день, Сергей.

      1) Для двух и нескольких форм на сайте нужно обязательно менять все id, а так же name у форм + менять все это в обработчике.
      Также нужно будет создать второй файл sendmessage2.php.
      Вы все это сделали?

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

      jQuery(document).ready(function() {
      jQuery(«.modalbox»).fancybox();
      jQuery(«#contact2»).submit(function() { return false; });

      jQuery(«#send2»).on(«click», function(){
      var emailval2 = jQuery(«#email2»).val();
      var namevl2 = jQuery(«#name2»).val();
      var namep2 = namevl2.length;
      var phonevl2 = jQuery(«#phone2»).val();
      var ph2 = phonevl2.length;

      if(namevl2 == false) {
      jQuery(«#name2»).addClass(«error»);
      jQuery(«#name2»).after(«поле заполнено не верно»);
      }
      else if(namevl2 == true){
      jQuery(«#name2»).removeClass(«error»);
      }

      if(phonevl2 == false) {
      jQuery(«#phone2»).addClass(«error»);
      jQuery(«#phone2»).after(«поле заполнено не верно»);
      }
      else if(phonevl2 == true){
      jQuery(«#phone2»).removeClass(«error»);
      }

      if(namep2 > 1 && ph2 > 1) {

      // если обе проверки пройдены
      // сначала мы скрываем кнопку отправки
      jQuery(«#send2»).replaceWith(«отправка…«);

      jQuery.ajax({
      type: ‘POST’,
      url: ‘sendmessage2.php’,
      data: jQuery(«#contact2»).serialize(),
      success: function(data) {
      if(data == «true») {
      jQuery(«#contact2»).fadeOut(«fast», function(){
      jQuery(this).before(«

      Ваша заявка принята! Ожидайте.

      «);
      setTimeout(«jQuery.fancybox.close()», 1000);
      });

      }
      }
      });
      }
      });
      });

      Такой скрипт будет проверять заполнение двух полей: имени и телефона. Если нужен только телефон, то уберите «namep2 > 1 &&»

      Не забудьте только скобочки потом поменять и поставить правильные.

  • Сергей:

    У меня вообще такого кода нет!

    Вот что тут нужно поменять

    http://jsbin.com/donehilamu/edit?html,css,output

    sendmessage2.php сделан

    Вот в это варианте все отправляется. Если в первой форме оставляю эл. почту и сообщение тоже все уходит, но если я во второй форме оставляю только номер телефона не работает.

    • Евгений К.:

      Так я же вам прислал новый обработчик для формы с телефоном!

      • Сергей:

        Не работает.

        • Евгений К.:

          В одну строчку это сделайте

          jQuery(this).before(»

          Ваша заявка принята! Ожидайте.

          «);

          • Сергей:

            Сделал, не работает.

          • Евгений К.:

            И вот это удалите jQuery(«.modalbox»).fancybox();

          • Сергей:

            Удалил, не работает

          • Евгений К.:

            Вы консоль читаете? там все ошибки написаны!

            Я вам уже писал ранее, что если только телефон, то удалите namep2 > 1 &&
            И это
            var emailval2 = jQuery(«#email2»).val();
            var namevl2 = jQuery(«#name2»).val();
            var namep2 = namevl2.length;

            и это
            if(namevl2 == false) {
            jQuery(«#name2»).addClass(«error»);
            jQuery(«#name2»).after(«поле заполнено не верно»);
            }
            else if(namevl2 == true){
            jQuery(«#name2»).removeClass(«error»);
            }

          • Сергей:

            Спасибо, все заработало! ))))

  • Артем:

    Привет! Установил. Спрятал скрипт в кнопку. При нажатии кнопки форма не появляется, сайт переходит на страницу #inline в чем может быть проблема?

    • Евгений К.:

      Значит что-то не так сделали. Какую ошибку показывает в консоли?

  • Виктор:

    Помогите , уже голову сломал, все вроде сделал правильно, на сайте после отправки, и заполнения всех полей форма пишет что сообщение отправлено успешно, но ничего на почту не приходит, емайл в php файле естественно поменял на свой, емайлы пробовал разные вписывать, пробовал отправлять с денвера и на хостинг выгружал — не помогает ничего, может в обработчике чего то еще подправить кроме моей почты нужно?

  • Виктор:

    да, может это быть связано с конфликтом библиотек jQuery, который присутствует на моем сайте
    jquery-1.7.1.min.js конфликтует похоже с jquery/3.1.0/jquery.min.js»

    • Евгений К.:

      Если пишет, что сообщение отправлено, то дело не в конфликте.
      Нужно смотреть конкретно вашу форму, так сказать сложно.

  • Виктор:

    папку спам проверил

  • Виктор:

    я вообще не знаю php, в файле sendmessage.php кроме своей почты в строке
    «$sendto = «viktor-zel@mail.ru»; // Обязательно измените e-mail на свой»
    больше ничего менять не нужно?

  • Виктор:

    хорошо. продолжу эксперименты ))

  • Виктор:

    не понял что было , но заработало!!!

    • Евгений К.:

      Поздравляю)

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

  • Виктор:

    Думаю , что в них и была причина

  • Олег:

    Тоже пишет, что письмо отправлено, а на почту ничего не приходит
    может еще придет конечно, всего 30 мин прошло 🙂
    Подскажите как Вы смс уведомление реализовали? У меня простой лендинг на html

    • Евгений К.:

      Вариантов проблем масса. Каждую ситуацию нужно рассматривать отдельно.

  • Олег:

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

    • Евгений К.:

      Данная форма работает 100% =) Проверено уже, как на сотне клиентских сайтах, так и на всех своих сайтах.

  • Олег:

    я не сомневаюсь, что форма работает
    мне интересно почему у меня не работает. php файл сделал, в index.html прописал код как описано в инструкции, форма пишет что письмо отправлено, но не приходит. перепробовал разные e-mail, ничего не помогает

  • Артем:

    ЕВГЕНИЙ К. где консоль то находится? )))

    • Евгений К.:

      Артем, правой кнопкой мыши — проинспектировать элемент — консоль.

  • Артем:

    ЕВГЕНИЙ К. консоль:
    Uncaught ReferenceError: $ is not defined(…)

  • Артем:

    Чудеса, в файле стоит

    • Евгений К.:

      Если не указать этот класс, то не будет срабатывать скрипт, вызывающий всплывающую форму.

  • Артем:

    он стоит. Я открываю сайт свой, правую кнопку мыши, исследовать и там стоит.

    • Евгений К.:

      Тогда надо смотреть ваш сайт конкретно. Так не могу ничего сказать.

  • Артем:

    у меня еще лайтбокс стоит, может быть причиной проблем?

    • Евгений К.:

      Легко. Особенно если сайт на wordpress. Довольно много конфликтов с этим.
      Как вариант, можно сделать так, как описано в блоке «ДЕЛАЕМ ВСПЛЫВАЮЩУЮ ФОРМУ ОБРАТНОЙ СВЯЗИ ДЛЯ WORDPRESS»

  • Артем:

    Вставил после body код, прикрутил стили. В итоге в верхнем левом углу надпись: обратный звонок и крестик. И все

    • Евгений К.:

      Я вам могу посоветовать только перечитать статью и попробовать поставить все заново, следуя инструкции.

  • максим:

    как подредактировать фон и местоположение кнопки — обратный звонок

  • Татьяна:

    Здравствуйте! у меня письма приходят, но на сайте дает ошибку:
    Ошибка 404 — страница не найдена

    Похоже мы не можем найти что вам нужно
    Так бывает.

    Может вы неправильно ввели URL, или страница, которую вы ищите была изменена, перемещена или удалена.
    Не грустите. Попробуйте сделать так:

    Проверьте правильность URL и обновите страницу.
    Что мне нужно сделать, чтобы этого не было?

    • Евгений К.:

      Вы весь код правильно скопировали?

      Особенно обратите внимание на эту строчку

      И также нужно смотреть, какие ошибки у вас отображаются в консоли браузера.

  • Татьяна:

    код скопировала весь и ошибок не дает

    • Евгений К.:

      Скорее всего тогда идет конфликт со скриптами на вашем сайте. При клике на кнопку Отправить никуда перекидывать не должно, так как весь обработчик идет на Ajax.

  • Татьяна:

    и что мне делать?

    • Евгений К.:

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

  • Татьяна:

    Все, спасибо, я нашла в чем причина.Все работает.

  • сергей:

    Подскажите как убрать почту и текст из формы

    • Евгений К.:

      Сергей, смотрите выше в комментариях я выкладывал обработки без проверки валидности e-mail.

  • Данил:

    ????????? ??????????

    Приходит по почте вот с такими вопросительными знаками

    ???: услуги

    ????? ????????: Номер

    ?????: it@mail.ru

    ?????????: аNTcnbhjdfybt

  • Данил:

    Поменял кодировку на $headers .= «Content-Type: text/html;charset=windows-1251 \r\n»;

    Теперь наоборот, слева нормально, справа аероглифы

    Обращение гражданина

    Имя: авпвапавпавп

    Номер телефона: апавпвапав

    Почта: it@priluzie.ru

    Сообщение: прпарппрпа

  • Данил:

    Чтобы прикреплять файлы нету информации?

    • Евгений К.:

      Пока нет =) Может в дальнейшем.

      • Николай:

        Добрый вечер Евгений. Попробовал вашу форму. Изменил только свой е-майл в сендере и часть текстового наполнения. Всё выложил на ФТП и решил попробовать. Форма работает отлично, но сообщения на почту не приходят. Тестил на трех разных (яндекс, джмайл и майл). В папках СПАМ писем нет. Хостер Джино и с него нормально отправлялось на другой форме. В чем может быть ошибка?

  • Александр:

    Пытаюсь настроить форму на Joomla3.6.
    Форма появляется, но при нажатии на кнопку «отправить» ничего не происходит.
    В консоли висят слдующие сообщения:
    10:28:53.748 Метод getAttributeNode() является устаревшим. Для его замены используйте метод getAttribute(). 1 mootools-core.js:108:287
    10:28:55.351 Метод getPreventDefault() является устаревшим. Для его замены используйте метод defaultPrevented. 1 jquery-1.7.1.min.js:3:6598

    При нажатии на кнопку «отправить» появляется следующее:
    10:35:20.501 TypeError: $(…) is null 1 rp:122:23
    http://localhost/rp/:122:23
    f.event.dispatch http://localhost/rp/templates/rp/js/jquery-1.7.1.min.js:3:4299
    f.event.add/i http://localhost/rp/templates/rp/js/jquery-1.7.1.min.js:3:311

  • Алексей:

    Спасибо вам за проделанный труд, интересную и полезную статью, она очень помогла. Я слабо разбираюсь в этом, но нахожу это занятие увлекательным. Уже третий сайт делаю. Если с html и css еще более менее понятно, то ява и php темный лес. Тем не менее, я разобрался, что к чему. И поскольку я сверстал форму, подходящую к моему новому творению, я позаимствовал ваши скрипты и обработчик. Все это дело я воплотил в рабочий симбиоз. Безмерно благодарен вам, за помощь! В скрипт и обработчик я аналогично свойственному порядку добавил дополнительные поля на денвере все работает, письмо приходит с нужной инфой, ура! Только вот, теперь морочусь, пытаясь впихнуть невпихуемое, т.е. не зная, что и как работает в обработчике и скрипте, упорно стараюсь реализовать передачу файла. Так как в моей форме эта функция есть и она там, отнюдь не лишняя. Было бы здорово, если бы вы мне, да и многим другим юзерам помогли решить эту незаурядную задачу, хотя бы советом — в каком направлении двигаться. За ранее, благодарю Вас!

  • Роман:

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

  • Виктор:

    Поставил форму, всё окей. Но вот когда нажимаю отправить, то просто висит надпись отправка… и всё.

    • Евгений К.:

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

    • MARSHAL327:

      попробуй в javascript удалить эту строчку кода: $(«.modalbox»).fancybox();

  • Andr:

    Добрый день! Мне нужно оставить только номер телефона, видел что такой вопрос уже поднимался, но не понял куда это вставить. Почему у Вас переменные стали с «2»? Нет готового исходника только с одним полем телефона? Спасибо.

    • Евгений К.:

      Добрый. Переменные стали с 2, для того, чтобы разделить просто одну форму от другой. Вам это делать не нужно, если форма будет одна на сайте.

  • Екатерина:

    Здравствуйте, Евгений! у меня сайт без движка, когда загрузила форму обратной связи (первый вариант, описанный Вами), он выдал ошибку 405 — HTTP verb used to access this page is not allowed. The page you are looking for cannot be displayed because an invalid method (HTTP verb) was used to attempt access. Подскажите, пожалуйста, как исправить

  • Екатерина:

    Я сделала заявку в хостинг, после чего ошибка перестала выдаваться, но сообщения о том, что письмо отправлено, не появляется, письмо в почту не приходит, внизу страницы слева под сайтом появляется текст: ожидание кэша…, а потом сайт перезагружается

  • Екатерина:

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

    • Евгений К.:

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

      Возможно просто идет конфликт среди подключаемых скриптов.

  • MARSHAL327:

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

    • Виктор:

      Добрый день.
      У меня в консоли выдаёт ошибку
      ReferenceError: msgval is not defined

      И письмо не уходит.

      • Евгений К.:

        Добрый день. Ошибка означает, что у вас либо нет, либо не правильно задано значение «msgval». Скорее всего вы просто убрали с сайта поле «ваше сообщение».

        • Виктор:

          Мне как раз надо чтобы не было поле E-Mail и поле сообщение, только имя и телефон.

          • Евгений К.:

            Тогда вам нужно немного изменить скрипт. Убрать из него проверку на заполнение текстового поля и e-mail. Если вы просто удалите их, но при этом не измените скрипт, то форма работать не будет.

          • Виктор:

            А что именно надо там убрать? Я просто не силён в скриптах ((

          • Евгений К.:

            Попробуйте этот:

             jQuery(document).ready(function() {
                    jQuery(".modalbox").fancybox();
                    jQuery("#contact").submit(function() { return false; });
            
                    
                    jQuery("#send").on("click", function(){
                        var emailval = jQuery("#email").val();
                        var namevl  = jQuery("#name").val();
                        var namep = namevl.length;
                        var phonevl  = jQuery("#phone").val();
                        var ph  = phonevl.length;
             
            
                        
            
                if(namevl  == false) {
                            jQuery("#name").addClass("error");
                        }
                        else if(namevl == true){
                            jQuery("#name").removeClass("error");
                        }
            
                        if(phonevl == false) {
                            jQuery("#phone").addClass("error");
                        }
                        else if(phonevl == true){
                            jQuery("#phone").removeClass("error");
                        }
            
                           if(namep > 1 && ph > 1) {
                  
                            // если обе проверки пройдены
                            // сначала мы скрываем кнопку отправки
                            jQuery("#send").replaceWith("отправка...");
                            
                            jQuery.ajax({
                                type: 'POST',
                                url: 'sendmessage.php',
                                data: jQuery("#contact").serialize(),
                                success: function(data) {
                                    if(data == "true") {
                                        jQuery("#contact").fadeOut("fast", function(){
                                            jQuery(this).before("

            Ваша заявка принята! Ожидайте.

            "); setTimeout("jQuery.fancybox.close()", 1000); }); } } }); } }); });
          • Виктор:

            Спасибо Евгений!!!!!

  • Игорь:

    Здравствуйте. Форма работает.
    Но периодически приходят письма с пустыми полями. Хотя если их не заполнить, то отправки не происходит. Как такое может быть?

    • Евгений К.:

      Добрый день. Такое происходит, когда кто-то обращается к файлу обработчику напрямую. вашсайт.ру/sendmessage.php

  • Оксана:

    Добрый день.

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

    • Евгений К.:

      Добрый вечер. Замените стили на

      .txt {
          display: inline-block;
          color: #676767!important;
          width: 190px!important;
          margin-bottom: 10px;
          border: 1px solid #ccc;
          padding: 5px 9px!important;
          font-size: 15px!important;
          line-height: 1.4em;
      }
  • Сергей:

    Добрый день! Прикрутил Вашу форму к своему сайту, все работает отлично, спасибо большое! Подскажите пожалуйста, возможно ли добавить в форму обратного звонка с именем и телефоном еще поле «Удобное время для звонка» и возможно ли там реализовать возможность выбора диапазона времени?

    • Евгений К.:

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

      • Oleg:

        Добрый день! Как сделать почту необязательной?

        • Евгений К.:

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

          • Виктор:

            Доброе утро!

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

            Uncaught TypeError: Cannot read property ‘close’ of undefined
            at :1:16

          • Евгений К.:

            Доброе. Идет конфликт скриптов у вас.

          • Виктор:

            А как понять где именно? Я уже сутки маюсь.

          • Евгений К.:

            Для начала нужно понять на чем сделан ваш сайт. Движок или чистый html.

            Если на движке, возможен конфликт с другими fancybox или lightbox плагинами.

            Если на html, можно попробовать поочередно отключать скрипты, и посмотреть, когда пропадет эта проблема.

          • Виктор:

            Сайт сделан на Bootstrap, из скриптов стоит родной Bootstrap и скрипты от формы + маска. Отключал по очерёдно, но проблема не решилась.

          • Евгений К.:

            А версия jquery? Попробуйте поставить 1.8.3

          • Виктор:

            Версия стоит по умолчанию Bootstrap 1.12.4

          • Евгений К.:

            Ну так попробуйте поставить jquery 1.8.3 =)

          • Виктор:

            Всё тоже самое ((

          • Евгений К.:

            адрес сайта пришлите, посмотрю

          • Евгений К.:

            Так а в чем проблема? Все же работает на сайте у вас.

          • Виктор:

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

          • Евгений К.:

            Так форма и не должна закрываться, она же не всплывающая. Закрываются только те, что открываются во всплывающем окне.

          • Виктор:

            Понятно, тогда такой вопрос, а можно сделать, чтобы форма закрывалась?

          • Евгений К.:

            Можно.

          • Виктор:

            Евгений! Буду очень благодарным, если подскажите как это сделать.

          • Евгений К.:

            Рассматривать код каждого сайта, у которого возникают проблемы с формой — времени нет совсем. Могу натолкнуть на мысль.

            В скрипте есть код setTimeout(«jQuery.fancybox.close()», 5000); — после успешной отправки сообщения, сплывающая форма закрывается. Так как у вас она не в модальном окне, вам эту строчку нужно заменить. Например, на:

            $("#inline").animate({
                        width: "0px",
                        height: "0px",
                    }, 5000);
            

            А для формы #inline задать overflow:hidden;

  • Добрый день,не могли бы Вы подсказать,все сделал форма работает пишет что отправлено,но на почту не приходит,я сделал что бы отправлялись только имя и телефон но в файле php ничего не менял кроме адреса почты на которую высылать,надо ли изменить файл php ?

    • Все заработало,разобрался только новая беда появилась,во всех браузерах нормально все работает и отображается а в мазиле криво и выдает ошибку а точнее предупреждение
      метод getPreventDefault() является устаревшим ,для его замены используйте DefaultPrevented

  • Алексей:

    Письма не приходят , ошибок не каких нет , не знаю в чем причина. Запускаю всё через Open Server

  • Антон:

    Спасибо за отличную статью. Но столкнулся с трудностью, может натолкнете умной мыслью куда копать? Скачал ваш архив со всплывающей формой для html все подключил как было написано, форма открывается, поля заполняются, проверка заполнения работает, но вот при нажатии кнопки отправить появляется надпись отправка… и ничего больше не происходит. По всему ajax не хочет общаться с файлом sendmessage.php. Не очень силен в ajax, как и в php, но путь к файлу указывается верно (проверял в консоли), ошибок в консоли не возникает никаких по скриптам. В принципе пробовал запускать Вашу версию из архива так как она там представлена, эффект тот же( Проверял и на локальной машине и на хостинге). Подскажите куда смотреть? или каким образом отладку произвести?

    • Евгений К.:

      Добрый день. На локальной вроде и не должно работать. По поводу отправки, возможно причина в хостинге. Они часто блокируют отправку сообщений, чтобы избежать спам. Тем более, если хостинг бесплатный.

  • андрей:

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

    • Евгений К.:

      Форма без ввода почты? Только телефон и имя?
      Папку спам проверяли?

      • Антон:

        проверял на хосинге hostland.ru на других сайтах с отправкой проблем не было. Подскажите хостинг на котором гарантировано должна работать отправка

        • Евгений К.:

          Сижу на beget.ru уже несколько лет. Все хорошо работает.

          • андрей:

            а что насчет jino.ru? я на этом хостинге работаю.

          • Евгений К.:

            На джино сидел несколько лет назад. Не очень понравилось — были частые перебои. Сейчас не знаю, как они там, много времени прошло, возможно и исправились)

  • Евгений:

    Здравствуйте!
    Ваша почтовая форма одна из самых лучших, которые я видел в интернете.
    У меня к вам убедительная просьба пожалуйста в связи с новым законом добавьте пожалуйста еще одно поле, «Я согласен с использованием моих персональных данных для обработки данного обращения», где необходимо будет поставить галочку о том что, клиент согласен с обработкой его персональных данных. Мне необходимо использовать две ваши формы обычную и со всплывающим окном, так чтобы они не мешали друг другу.
    Благодарю Вас за понимание, за Вашу почтовую форму.
    С уважением к Вам,
    наилучших пожеланий.
    Жду от Вас ответа и помощи.
    Евгений
    ______________________________________________________________________________________
    С 1 июля ко мне может прийти штраф за сбор персональных данных.
    Если на моем сайте пользователь оставляет свою контактную информацию, например имя, телефон и адрес электронной почты, то на меня автоматически распространяются поправки в статье 13.11 КоАП, которые вступят в силу уже 1 июля.
    Разные виды нарушений, связанные со сбором, хранением и использованием контактной информации клиентов повлекут за собой административную ответственность: штраф от 1 тысячи (для физических лиц) до 75 тысяч рублей (для юридических лиц).
    Что необходимо сделать, чтобы не получить штраф?
    Обратите внимание: вы уже нарушаете закон, если не настроили ваш сайт в соответствии с перечисленными пунктами!
    — Разместите в открытом доступе на сайте информацию об обработке персональных данных пользователей. Если такой страницы нет, вас ждет штраф.
    — Не собирайте контактную информацию, которая не соответствует целям. Если у вас на сайте есть только форма обратного звонка, то не за чем в ней просить указать дополнительно еще и адрес электронной почты. Если вы собираете данные, для которых не прописаны цели, вас ждет штраф.
    — Каждый пользователь должен оставить письменное согласие о том, что знает об обработке вами его персональных данных и согласен с этим. Нет соглашения – вас ждет штраф.
    — Предоставляйте пользователю всю информацию о том, какие именно его данные вы храните и используете. И удаляйте их из базы по первому же требованию пользователя.
    — Храните данные в защищенном месте. На российском сервере или в любой точке мира – в законе не прописано, но лучше подстраховаться и выбрать российскую компанию.
    Это тот минимум, который просто необходимо соблюдать.

  • Дмитрий:

    Добрый день. Прочитал все отзывы о вашей работе с формой. Прикольная форма, скачал архив в отдельный каталог, распаковал, заменил емайл на свой. Заполняю форму ставлю свой емайл, отправляю, форма очищается и ничего не происходит, никаких ошибок, ни сообщений. Установлен OpenServer. Очень нужна форма связи.
    Может за последнее время вы доработали форму ? Посоветуйте, что мне делать, постепенно проверяю на локалке.

    • Евгений К.:

      Дмитрий, здравствуйте. А вы уверены, что ваш OpenServer отправляет реальные письма на почту?

      • Сергей:

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

  • Дмитрий:

    подскажите как сделать форму не только на главной страницу, но и на других страницах одного сайта ?

    • Евгений К.:

      Вставьте код формы и обработчик на всех страницах, на которых они должны отображаться)

      • Дмитрий:

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

      • Дмитрий:

        Да обработчики забыл вставить.
        Спасибо вам за то что, помогаете тем людям которые нуждаются в этом, в том числе и мне.
        Благодарю)

        • Сергей:

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

          • Евгений К.:

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

          • Сергей:

            на почту которая указана на форме, и на почту,которая указана в коде.

          • Евгений К.:

            В файле sendmessage.php в переменную $sendto заносится ваша почта, на которую хотите получать уведомления, а в переменную $usermail — почта, которая будет указана в форме.

            В этой строчке

             if(@mail($sendto, $subject, $msg, $headers)) { 

            идет указание, какие поля будут использованы при отправке сообщения. Попробуйте добавьте к условию еще $usermail.

          • Сергей:

            Попробовал, к сожалению не получилось.

          • Сергей:

            if(@mail($sendto, $subject, $msg, $headers,$usermail )) {
            Таким образом надо было?

          • Евгений К.:

            Нет. Думаю, что нужно добавить его во второе условие. Только вместо $sendto будет $usermail

          • Сергей:

            Спасибо Вам огромное!!! Очень сильно выручили!

          • Сергей:

            А поставить от спама, можно что нибудь?

          • Евгений К.:

            Можно, но нужно искать информацию в гугле.

  • Дмитрий:

    а еще вопрос такой, как сделать дизайн формы на отдельной странице один, а на другой странице другой ?

    • Евгений К.:

      Одну форму оберните в id=inline, вторую в id=inline2. И задавайте стили, исходя из id формы.

      Например,
      #inline input {border:1px solid #333;}
      #inline2 input {border:1px solid #fff;}

  • Дамир:

    Установил форму, сообщения приходят, но все поля пустые, и кнопка зависает с «отправка…»

    • Евгений К.:

      Смотрите консоль. Там все ошибки показываются.

      • Дамир:

        В консоли ошибок нет

        • Евгений К.:

          Значит что-то не так поставили. Не должно быть проблем с формой.

          • Дамир:

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

          • Евгений К.:

            Значит конфликт у вас где-то идет.

          • Сергей:

            Добрый день. Как после отправки письма, перейти на предыдущую страницу?

          • Евгений К.:

            Эта страница для всех посетителей имеет один адрес?

          • Сергей:

            Да

          • Евгений К.:

            Замените строку setTimeout(«$.fancybox.close()», 1000);
            на setTimeout(window.location.href = «http://адрес.страницы»);

          • Сергей:

            Теперь сообщения не отправляются и не выходит сообщение об успешной отправке.

          • Евгений К.:

            Сообщения должны отправляться. Значит вы что-то не так вставили.

          • Сергей:

            if(data == «true») {
            $(«#contact»).fadeOut(«fast», function(){
            $(this).before(«Успешно! Ваше обращение отправлено. «);
            setTimeout(window.location.href = «http://index.php»);

          • Евгений К.:

            Кавычки поменяйте на нормальные.

  • Дмитрий:

    Смотри у меня только на главной кнопки работают (index.html) и выдают что сообщение отправлено, на почту письмо приходит..
    А на остальных страницах при нажатии просто кнопка не выдает отчет что сообщение отправлено, и при проверки на почту письма нету..

  • Николай:

    В начале все было хорошо, но потом пошел спам. Куча писем приходит.

  • Иван:

    Танцы с бубном. Все поставил, скопировал только вашу форму, чтобы попробовать как работаете — ничего! Как не пытался… форма открывается, работает, но сообщения не приходят. С другого сайта где стоит форма обратной связи другая- все приходит ваша форма нет. Хостинг у них один. Куда рыть не знаю… Срок ожидания писем — сутки

    • Евгений К.:

      У формы есть поле для ввода почты?

      • Иван:

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

  • Coronado:

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

    • Евгений К.:

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

      Возьмите за основу второй обработчик, в котором нет email, там это условие убрано.

  • Сергей:

    Добрый день. меня интересует один вопрос ,который ранее задал один из комментаторов
    как можно сделать данную надпись «Я согласен с использованием моих персональных данных для обработки данного обращения» и галочку согласия ?

    Евгений | 29.05.2017 16:45
    Здравствуйте!
    Ваша почтовая форма одна из самых лучших, которые я видел в интернете.
    У меня к вам убедительная просьба пожалуйста в связи с новым законом добавьте пожалуйста еще одно поле, «Я согласен с использованием моих персональных данных для обработки данного обращения», где необходимо будет поставить галочку о том что, клиент согласен с обработкой его персональных данных. Мне необходимо использовать две ваши формы обычную и со всплывающим окном, так чтобы они не мешали друг другу.
    Благодарю Вас за понимание, за Вашу почтовую форму.
    С уважением к Вам,
    наилучших пожеланий.
    Жду от Вас ответа и помощи.
    Евгений
    ______________________________________________________________________________________
    С 1 июля ко мне может прийти штраф за сбор персональных данных.
    Если на моем сайте пользователь оставляет свою контактную информацию, например имя, телефон и адрес электронной почты, то на меня автоматически распространяются поправки в статье 13.11 КоАП, которые вступят в силу уже 1 июля.
    Разные виды нарушений, связанные со сбором, хранением и использованием контактной информации клиентов повлекут за собой административную ответственность: штраф от 1 тысячи (для физических лиц) до 75 тысяч рублей (для юридических лиц).
    Что необходимо сделать, чтобы не получить штраф?
    Обратите внимание: вы уже нарушаете закон, если не настроили ваш сайт в соответствии с перечисленными пунктами!
    — Разместите в открытом доступе на сайте информацию об обработке персональных данных пользователей. Если такой страницы нет, вас ждет штраф.
    — Не собирайте контактную информацию, которая не соответствует целям. Если у вас на сайте есть только форма обратного звонка, то не за чем в ней просить указать дополнительно еще и адрес электронной почты. Если вы собираете данные, для которых не прописаны цели, вас ждет штраф.
    — Каждый пользователь должен оставить письменное согласие о том, что знает об обработке вами его персональных данных и согласен с этим. Нет соглашения – вас ждет штраф.
    — Предоставляйте пользователю всю информацию о том, какие именно его данные вы храните и используете. И удаляйте их из базы по первому же требованию пользователя.
    — Храните данные в защищенном месте. На российском сервере или в любой точке мира – в законе не прописано, но лучше подстраховаться и выбрать российскую компанию.
    Это тот минимум, который просто необходимо соблюдать.

    Ответить

    Евгений К. | 29.05.2017 17:34
    Добрый день. Пишите в скайп foggis_store., обсудим доработку.

  • Coronado:

    Добрый день. Спасибо за форму — отличная вещь.
    Есть несколько вопросов:
    1. Как сделать чтобы в графу формы уже автоматически подставлялись данные? То есть поле имя скажем уже было заполнено и в нем написано: ВАСЯ… к примеру?
    2. Как сделать чтобы появлялась подсказка почему форма не отправляется. Например у нас задано условие имя более 3 знаков. У меня сейчас такая ситуация я заполнил в форме имя в 2 знака, форма не отправляется и информация об ошибке (почему не получается отправить форму) не появляется. Как такое можно добавить?

    • Евгений К.:

      Добрый день.
      1) Измените или задайте placeholder=»Вася».
      2) В обработчике указано, что полям, которые указаны неправильно задается класс error. Можно задать ему стили, чтобы было видно. Так же можно добавить к нему блок, посредством псевдокласса. Например, .error:after {content:»Данные указаны неверно»;}. А вот уже этот сам псевдокласс оформить в виде всплывающего окна.

      • Coronado:

        Спасибо за ответ. А подробнее не можете подсказать как по вопросу 2 сделать всплывающее окно?

      • Coronado:

        По вопросу 1 добавлю. Таким образом получилось сделать надпись по умолчанию. Но ее можно сменить. Можно ли как то сделать, чтобы она была неизменной?

        • Евгений К.:

          По 1 пункту задайте тогда value=»Вася». А чтобы нельзя было изменить, поле должно быть неактивным — disabled
          По 2 пункту, просто обыгрываете стилями, задаетей ей позиционирование, например. Подробнее об позиционировании тут http://seoblognik.ru/sozdanie-saieta/pozitsionirovanie-lementov.html

          • Coronado:

            Спасибо за ответ. По вопросу 1 вырос еще вопрос. Я хочу сделать чтобы автоматически указывался город человека который заполняет форму. Я сделал поле город, но город по скрипту геолокации задается не могу понять как это вставить в форму.
            По вопросу 2. Не очень понял куда именно в обработчике нужно вставить .error:after {content:»Данные указаны неверно»;}

          • Евгений К.:

            1. Не знаю.
            2. Это в стили задается.

  • Алексей:

    Добрый день.
    Не плохая форма. Правда вот только не приходят письма, пробовал и на gmail и на admin@…cf. Установил вроде все правильно. В чем беда!?! Тут столько отписывало о такой же проблеме, но не один(-а) не отписали как побороли. Сами сделали, а на остальных на*рать пусть сами мучаются. Никакой взаимной поддержки.

  • Олег:

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

    • Евгений К.:

      Форма должна работать с любым e-mail. Код не содержит условий привязки почты к определенному домену.

      • Олег:

        Вообщем вот что получилось, убрал две строчки в sendmessage.php и письма на все почты стали приходить:

        $headers = «From: » . strip_tags($usermail) . «\r\n»;
        $headers .= «Reply-To: «. strip_tags($usermail) . «\r\n»;

        Только пока не знаю как поставить исходящий емайл… Если же у кого даже после удаления строчек не будут приходить письма после правильной установки скрипта, значит у хостера отключена функция PHP mail();

  • Анастасия:

    Добрый день! Подскажите пожалуйста, форма работает но некорректно. Отправляется 1 раз и попадает в папку спам. Повторно захожу на сайт, заполняю поля, пишет что отправлено, но повторно сообщение не поступает даже в папку спам. И пробовали заполнить и отправить форму со смартфона, она вообще не отправляет..В чём может быть причина? Очень хочу разобраться, форма простая и нужная.

    • Евгений К.:

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

      • Анастасия:

        Пользуюсь яндексом. А вы не пробовали с мобильных устройств отправлять форму? У вас на сайтах работает?

        • Евгений К.:

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

  • сергей:

    А как вывести в письме урл от куда пришла заявка?

  • Добрый день, спасибо за статью. Пока не совсем работает, после нажатия «отправка» застывает надпись отправка… , письмо не отправляет, ошибок не выдает. В чем может быть дело?

  • Добрый день не чего не отправляет ваша форма ввожу данные отправляю а страница просто перезагружается и все. в консоле есть ошибка Uncaught SyntaxError: Invalid regular expression: missing указывает на эту строку var reg = /^(([^()[\]\\.,;:\s@\»]+(\.[^()[\]\\.,;:\s@\»]+)*)|(\».+\»))@((\[[0-9]

  • Добрый день не чего не работает все установил по инструкции при заполнении данных и отправки страница перезагружается и все в консоле есть ошибка Uncaught SyntaxError: Invalid regular expression: missing указывает на строку var reg = /^(([^()[\]\\.,;:\s@\»]+(\.[^()[\]\\.,;:\s@\»]+)*)|(\».+\»))@((\[[0-9]

  • Все заработало!

  • пробую форму с вашего архива,меняю майл в PHP но после нажатия кнопки отправить,зависает на сообщении «отправка…»

    • vikizima:

      Попробуйте JS скриптах с использованием jQuery типа $(document).ready(), заменить $ на jQuery.

      • а все $ заменять на jQuery?

        • vikizima:

          Если скрипт работает в среде wordpress то да

          • так сама форма с архива изначально не работает,зависает на отправке

          • vikizima:

            В последних версиях wordpress да, но это многие знают, исправить руки не доходят

          • а что сделать то надо чтобы работала форма? сайт самописный ,менял $ на jQuery ,не помогло,менял # на sendmessage.php не помогло

          • vikizima:

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

  • Костас:

    Зависает на этапе отправка…..
    В консоли следующее:
    Ошибка синтаксического анализа XML: корневой элемент не найден
    Адрес: http://phoneforbusiness.ru/sendmessage.php
    Строка 27, символ 3:

    Что делать?

    • Костас:

      После размещения на хостинге также зависает на отправка….

      В консоли следующее:
      Метод getPreventDefault() является устаревшим. Для его замены используйте метод defaultPrevented. jquery-1.7.1.min.js:3:6598
      Ошибка синтаксического анализа XML: корневой элемент не найден
      Адрес: http://phoneforbusiness.ru/sendmessage.php
      Строка 27, символ 3: sendmessage.php:27:3

  • Костас:

    Коллеги, помогите разобраться?
    Зависает на отправка…..
    В консоли следующее: jquery-1.7.1.min.js:4 Access to XMLHttpRequest at ‘file:///C:/Users/%D0%9A%D0%BE%D1%81%D1%82%D0%B0%D1%81/Desktop/%D0%92%D0%B5%D0%B1-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0/%D0%9C%D0%B0%D1%82%D0%B5%D1%80%D0%B8%D0%B0%D0%BB%D1%8B%20%D0%B4%D0%BB%D1%8F%20%D0%BE%D0%B1%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D1%8F/%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%B0/sendmessage.php’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

  • Григорий:

    Добрый день. Подскажите, какая настройка должна быть на хостинге, что бы обрабатывался PHP?

  • Марина:

    тоже зависло на слове отправка.

    а я уж так обрадовалась готовой форме)))

  • Костас:

    Подскажите, пожалуйста, как добавить галочку с согласием с политикой по-умолчанию?

  • Вячеслав:

    Очень круто, респект автору.
    А как сделать, чтоб не на почту уходило, а по ссылке?

  • Marat:

    Спасибо за форму тестю на Денвере в корпоративной почте все отлично работает )

  • Леонид:

    Большое спасибо.
    Использовал Ваши идеи и ваш код. Давно искал такой неглючный вариант.
    Всё работает. Правда, все письма с mail.ru попадают в СПАМ. Но это вина настроек службы mail.ru.

  • Владимир:

    Благодарю за форму. Можно сказать, нашел то что искал. Но, есть одна проблемка. Хочется убрать из формы емаил, но форма почему то перестает работать. Убираю код проверки емаил —
    if(mailvalid==false){
    $(«#email»).addClass(«error»);
    }
    else if(mailvalid==true){
    $(«#email»).removeClass(«error»);
    }
    и при нажатии на кнопку отправить, уже высвечивается красным цветом номер телефона.
    Не подскажете, в чем может быть причина?.

  • Владимир:

    как я понимаю, почту убрать невозможно. С нею теряются все проверки, соответственно и отправить нельзя. Грустно((

  • Василий:

    Салют!
    Спасибо за форму!
    Можете ответить на такой вопрос — можно ли разместить одну форму, скопировав её на все страницы сайта? Она будет работать?

    • vikizima:

      Да можно, у меня на этом сайте так и реализовано, создал в functions.php шорткод, и подгружаю через get_file_contents. Вставляю шорткод там, где это необходимо, вот к примеру, как здесь

  • Валентина:

    Добрый день. Спасибо за статью. Хороший вариант, но пока мне не хватает знаний, пока использую конструктор форм Формдизайнер. Всё удобно сделано. Для wordpress есть плагин. Буду учить, чтобы сделать как вы рекомендуете

  • таня:

    у меня не отправляется ,просто стоит «отправка..» и всё,что сделать?

  • Рикардо:

    А форма отправляет сообщение только если сайт на хостинге?

  • Игорь:

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

  • Макси:

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

  • Кирилл:

    НЕ приходят письма на почту

  • Васек:

    Интересно и детально, спасибо.

  • Роман:

    Взял ваш архив для разбора и обучения ! Спасибо за проделанную работу ! но есть проблема ) только учусь !! Поменял в форме адрес на свой ,открываю форму заполняю тестовым сообщением нажимаю отправить скрипт пишет отправка….. и нечего не происходит консоль выдает ошибку преведенную ниже

    Запрос из постороннего источника заблокирован: Политика одного источника запрещает чтение удаленного ресурса на file:///C:/Users/ROMAN/Desktop/Lending/%D0%A0%D0%B0%D0%B1%D0%BE%D1%87%D0%B0%D1%8F%20%D0%BF%D0%B0%D0%BF%D0%BA%D0%B0/forms/%D0%A4%D0%BE%D1%80%D0%BC%D0%B0%20%D0%BE%D0%B1%D1%80%D0%B0%D1%82%D0%BD%D0%BE%D0%B9%20%D1%81%D0%B2%D1%8F%D0%B7%D0%B8/sendmessage.php. (Причина: запрос CORS выполнен не по http).

    • vikizima:

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

  • Роман:

    Разобрался с отправкой ! Но возник вопрос как вызвать всплывающую форму поверх другого окна !?

  • Роман:

    Здрастуйте еще раз скажите что нужно поменять в коде чтобы сообщение отправлялось через button type=»submit» для достижения цели в Яндексе !!!


Ответить на комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *