Отправка формы без перезагрузки страницы

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

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

Отправка данных формы без перезагрузки страницы

Будем реализовывать такую структуру:

форма без перехода на страницу

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

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

Для того, чтобы отправка формы осуществлялась без перезагрузки страницы нам придется воспользоваться технологией ajax. Необходимо между тегами <head></head> подключить следующий скрипт:

<script>
function AjaxFormRequest(result_id,formMain,url) {
   jQuery.ajax({
      url:     url,
      type:     "POST",
      dataType: "html",
      data: jQuery("#"+formMain).serialize(),
      success: function(response) {
         document.getElementById(result_id).innerHTML = response;
      },
      error: function(response) {
         document.getElementById(result_id).innerHTML = "Возникла ошибка при отправке формы. Попробуйте еще раз";
      }
   });
}
</script>

В этой строке напишите сообщение, которое будет выводиться при неудачной отправке данных формы:

   document.getElementById(result_id).innerHTML = "Возникла ошибка при отправке формы. Попробуйте еще раз";

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

$(':input','#formMain')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');

То есть, теперь должно выглядеть так:

<script>
 function AjaxFormRequest(result_id,formMain,url) {
 jQuery.ajax({
 url: url,
 type: "POST",
 dataType: "html",
 data: jQuery("#"+formMain).serialize(),
 success: function(response) {
 document.getElementById(result_id).innerHTML = response;
 },
 error: function(response) {
 document.getElementById(result_id).innerHTML = "

Возникла ошибка при отправке формы. Попробуйте еще раз

";
 }
 });

 $(':input','#formMain')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');
 }
</script>

Это, так сказать, универсальный скрипт, который очистит не только поля форм, но и checkbox и радиокнопки, если таковые присутствуют в вашей форме.

Теперь следует создать совершенно обыкновенную форму, с одной единственной особенностью в input (е), отвечающем за отправку данных формы:

<div class="wrapper">
 <div class="form">
  <div id="messegeResult">Оставьте ваши контакты и наш консультант свяжется с вами </div>
  <form method="post" action="" id="formMain">
        <input id="name" type="text" name="name" placeholder="Введите ваше имя" maxlength="30" autocomplete="off" />
        <input id="telephone" type="Tel" name="telephone" placeholder="Введите ваш телефон" maxlength="30" autocomplete="off"/>
        <input id="button" type="button"  value="Заказать обратный звонок" onclick="AjaxFormRequest('messegeResult', 'formMain', 'form.php')"/>
  </form>
  </div>
</div>

В этой строке нужно указать то сообщение, которое будет выводится до отправки данных формы:

<div id="messegeResult">
 Оставьте ваши контакты и наш консультант свяжется с вами 
</div>

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

<?php
if($_POST)
	{
	$to = "почта@mail.ru"; //куда отправлять письмо
	$from = 'почта@mail.ru'; // от кого
	$subject = "Проверка почты"; //тема
	$message = 'Имя: '.$_POST['name'].'; Телефон: '.$_POST['telephone'].';';
	$headers = "Content-type: text/html; charset=UTF-8 \r\n";
	$headers .= "From: <почта@mail.ru>\r\n";
	$result = mail($to, $subject, $message, $headers);

    if ($result){
        echo "Cообщение успешно отправленно. Пожалуйста, оставайтесь на связи";
	}
	}
?>

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

echo "

Cообщение успешно отправленно. Пожалуйста, оставайтесь на связи

";

Не забывайте прописывать доктайп и указывать кодировку UTF-8, а также прописывать свой адрес почты в трех местах.

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

Скачать исходник

Про более совершенную (во всех смыслах) ajax форму, которая работает как в модальном окне, так и без него описано тут

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

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

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

  1. макс

    Классная форма!
    Тут у меня встал такой вопрос по lading страничкам)))
    decorstudia. ru есть сайты на подобии этого на странице когда листаешь в низ там акции, таймер и форма обратной связи а на заднем фоне у них картинка. как это можно реализовать на wordpress?

    • dimadv7

      Вы, наверное, о параллакс эффекте говорите? Об этом? lunita.ca/. Достаточно сложный эффект, который в большинстве случаев реализуется на javascript. Поищите, может быть плагин какой-то есть. Или скачайте тему, в в которой уже реализован данный эффект.

    • макс

      Не ту ссылку вставил, пардон) shtorkindom. ru/
      там под формой обратной связи и акцией есть фон (картинка) как это реализовать?

    • dimadv7

      Сделать контейнер, например

      <div class="formBg"> </div> 

      , в него вставить форму и все, что нужно. А после этого в таблице стилей задать .formBg{
      background: путь к картинке; width: 000px; и height: 000px;

    • макс

      Блин точно))) пора на воздух))))

    • dimadv7

      Бывает 🙂

    • макс

      ширина страницы мешает, не получается 🙁

    • dimadv7

      Опиши подробнее в чем проблема.

    • макс

      Изображение которое я вставляю в страницу через css не отображается
      ширина стр не дает скажем на 3000px сделать изображение

    • dimadv7

      🙂 🙂 🙂 Ничего не понял!

    • dimadv7

      Почему не отображается изображение? Где оно должно быть?

    • макс

      все разобрался)
      margin-bottom: 0px;
      margin-left: -900px;
      решило)

      но появилась другая проблема, с формой обратной связи)
      1 в хедере вторая в page
      заполняешь в page нажимаешь отправить, а кнопка получается запрашивает поля в хедере

  2. макс

    я думаю можно все равно добавить в статью)))

  3. макс

    библиотеку jquery*

  4. Ольга

    спасибо. полезная информация. только у меня не показывает сообщение, что данные отправлены. Оно же находится в form.php, а мы на эту страницу не переходим? Или я чего-то не понимаю?

  5. dimadv7

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

    • Ольга

      открываю на локальном. сообщения уходят, все работает, но сообщение, что отправлено, не выводится 🙁

    • dimadv7

      Только что проверил — работает. Может ошиблись где-то? Если хотите, выложите исходник, я гляну. Можете на почту или в ВК.

    • Ольга

      нашла проблему. у меня кнопка отправки в виде картинки, т.е type=»image», а с type=»button» все работает, только я хочу свою картинку)

    • Ольга

      вместо <input написала <button type="button". Все прекрасно работает. Спасибо. Еще если можно подскажите, как сделать, чтобы выдавалась ошибка, если не все поля заполнены?

    • dimadv7

      Можно input заменить на

      <img src="" ... />

      , и тоже работать будет. Проверил только что. А вот с проверкой — проблемка. Я обычно пользовался атрибутом required, но тут он почему-то не работает. Нужно проверку формы при помощи javascript осуществлять, но до этого руки, пока, не доходили.

    • dimadv7

      Но не уверен, что будет работать, так как не проверял

  6. Ольга

    У меня обязательный только e-mail
    Сделала так:
    <?php
    $to = "..";
    $subject = "..";
    if(!empty($_POST['mail']))
    {
    $message = 'Имя: '.$_POST['name'].'; Адрес: '.$_POST['mail'].';Сообщение: '.$_POST['text'].';';
    $headers = "Content-type: text/html; charset=UTF-8 \r\n";
    $headers .= "From: \r\n»;
    $result = mail($to, $subject, $message, $headers);
    }
    if ( $result){
    echo «Thank you! Your message has been successfully sent. «;
    }
    else {
    echo «Type your e-mail, please»;
    }
    ?>
    Вроде работает
    Еще если можно два вопроса:
    1) как сделать, чтобы поля после отправки очищались
    unset($_POST['name'], $_POST['mail'], $_POST['text']); не работает
    2)чем объясняется необходимость переименования index.html в index.php?

    • dimadv7

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

      $(':input','#formMain')
       .not(':button, :submit, :reset, :hidden')
       .val('')
       .removeAttr('checked')
       .removeAttr('selected');
      

      Это универсальный вариант, он отчищает значение чекбоксов, полей ввода и радиокнопок.

      В этой строке нужно поменять #formMain на id вашей формы:

      $(':input','#formMain')
      

      Вы не против, если я обновлю статью с учетом вашей проверки email(а)? Действительно, все работает и с html!!! я посему-то был уверен, что не сработает. Спасибо вам за наводку.

    • dimadv7

      то есть должно быть так:

      <script>
          function AjaxFormRequest(result_id,formMain,url) {
                      jQuery.ajax({
                          url:     url,
                          type:     "POST",
                          dataType: "html",
                          data: jQuery("#"+formMain).serialize(), 
                          success: function(response) {
                          document.getElementById(result_id).innerHTML = response;
                      },
                      error: function(response) {
                      document.getElementById(result_id).innerHTML = "Возникла ошибка при отправке формы. Попробуйте еще раз";
                      }
                   });
      
                   $(':input','#formMain')
       	        .not(':button, :submit, :reset, :hidden')
       		.val('')
       		.removeAttr('checked')
       		.removeAttr('selected');
          }
      </script>
      
    • Ольга

      Спасибо. Конечно, обновляйте. Пошла менять на html, php меня немного пугало))) Кроме того, в php у меня не срабатывает автоматическая проверка правильности указания e-mail с помощью type=»email»

    • dimadv7

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

  7. Андрей

    Добрый день, Дмитрий. Просмотрите, пожалуйста, форму по вот этой ссылке: postovoy.net/22.html . Если вдруг Вас заинтересует, буду благодарен за статью про подключение этой формы на сайт.

    • dimadv7

      Здравствуйте. Честно говоря, не очень хочется писать рерайт. Ну там же и есть статья о том, как ее подключить. Чем она отличается от моих?

    • Андрей

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

    • dimadv7

      Нет, письма складываются в одну из папок. Если не ошибаюсь tmp -> !sendmail. Давно уже не пользовался denwer. Там они в txt формате по датам разложены. Не знаю, может быть как-нибудь сделаю обзор, пока немного другие планы.

    • Андрей

      Апдейтом к предыдущему комменту.
      Форма по той ссылке с анти-спамом, проверкой, подсветкой и всплывающими окошками. Красиво реализовано.

  8. Андрей

    Дмитрий, добрый день. Извиняюсь, снова Вас побеспокою. Всё мучаюсь с формой, но на этот раз использую Вашу. Уже вывел сайт на домен. Возникает несколько проблем. Во-первых, При нажатии на кнопку в «messegeResult» попадает не только запланированное сообщение «успешной отправки», но и часть php-кода. Во-вторых, сообщение выводится, но самой отправки не происходит. Видимо, я налажал где-то в php-коде, потому что html в порядке. Но сколько бы я не проверял, никакой ошибки не нашел (чистого времени потратил не меньше 6 часов на поиск этой ошибки) 🙁 Скину ссылки на Code-pen html и php страницы:
    codepen.io/anon/pen/gbaPJE.html
    codepen.io/anon/pen/gbaPJE.js
    Буду крайне признателен, если вы сможете мне помочь. Заранее благодарю.

    • dimadv7

      Ответил в вк)

  9. toxa

    Привет, спасибо за скрипт, проблема с кодировкой, иероглифы пишет, что делать? у страницы стоит utf-8

    • dimadv7

      Привет. На чем тестируешь?

  10. Ильдар

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

    • dimadv7

      В смысле? 🙂 🙂 🙂 НУ так статья же об этом)

  11. Георгий

    Добрый вечер! Можете посмотреть? Не выводит оповещение об отправки. Не могу понять в чем причина. test7.html-box.com

    • dimadv7

      Привет, у меня выводит латиницей слово «Otpravleno»)))

  12. Вадим

    подскажите, пожалуйста, как я могу прикрутить эту форму на сайт wordpress?

    • dimadv7

      Все аналогично, как описано в статье, только обработчик в корень wp класть, туда, где wp-config.php

    • Вадим

      Спасибо!

  13. Дима

    Как реализована форма на Вашем сайте?

    • dimadv7

      Привет. Плагин contact form7. Вот все никак руки не доходят сделать его чуть приличнее (подровнять все и уменьшить отступы)

  14. Васька

    Привет. А как вставить две таких формы на одной странице? Спасибо

    • dimadv7

      Привет, а ты пробовал это сделать?)))

    • Васька

      вчера получилось) не мог понять в чем причина — оказалось просто опечатка) когда меня айди формы пропустил букву)

    • dimadv7

      Здорово. Я просто спросил, чтобы понимать с чего начать помогать)) Ну в смысле ты попробуешь, получишь какую-то ошибку, и мы бы начали разбираться)) А ты видишь, и сам разобрался))

  15. Саша

    Здравствуйте! Взяла вашу реализацию, но со своей формой. Есть проблема, не могу понять, как решить.. У меня обязательные поля идут в таком порядке: «контактное лицо», ниже «телефон», требуют ввода с помощью применения псевдокласса :required. До добавления Вашего кода работало так: при нажатии на кнопку отправки формы, если не заполнили поле «контактное лицо», всплывает возле поля сообщение «пожалуйста, заполните это поле», заполняем, но еще не заполнили поле «телефон» и нажимаем на кнопку, выдает к нему соответствующее сообщение. Добавила Ваш код, даже если заполнено поле «контактное лицо», но «телефон» не заполнено, он очищает все поля и снова требует заполнить начиная с «контактного лица»… Ох, много прямо написала, простите, что так. Надеюсь на ответ! Заранее спасибо!!

    • dimadv7

      Здравствуйте. Ну все верно, я же прям в статье написал что не работает проверка через required. Нужно через js делать или php.

  16. Саша

    Да, простите. невнимательно вашу переписку с Ольгой прочла, думала проблема решилась. дело в том, что мне эта очистка то и не нужна, в идеале буду делать, чтоб форма скрывалась, и выводилось сообщение. я убрала эти 5 строчек $(':input', '#add')… Все хорошо, :required заработало, но сообщение вверху с «Оставьте ваши контакты и наш консультант свяжется с вами» не сменилось.. разве очистка связана с выдачей самого сообщения? простите, если туплю..

    • dimadv7

      Нет, вы правы — не связанно. Должно рабоать. Обратите внимание. В исходнике есть :

      <div id="messegeResult">
      <p> Оставьте ваши контакты и наш консультант свяжется с вами </p>
      </div>
      

      И в обработчике и скрипте есть условия вывода в этот div сообщения:

      if ($result){
              echo "<p>Cообщение успешно отправленно. Пожалуйста, оставайтесь на связи</p>";
          }
      

      и скрипт:

      error: function(response) {
                      document.getElementById(result_id).innerHTML = "<p>Возникла ошибка при отправке формы. Попробуйте еще раз</p>";
                      }
    • Саша

      У меня прописано в случае прохождения валидации — отсылает сообщение и выводит echo. Я только что поняла, что сообщение и не отправилось.. не понимаю почему когда возвращаю эти пять строчек, он отсылает..)

  17. dimadv7

    Ну изначально все и без них работало, это уже когда Ольга спросила, то добавил их. Должно работать. Где-то ошиблись просто. Вообще ajax — хитрая штука, тоже не очень разбираюсь в этой технологии

  18. Александр

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

    • dimadv7

      Здравствуйте. В статье же писал об этом!!!

    • Егор

      А где в статье написано? У меня тоже отправляет незаполненные поля.

    • dimadv7

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

      if(!empty($_POST['mail']))
      {
      код
      вывод нужного сообщения
      }
      
      else {
      echo "Ошибка при отправке";
      }

      На днях поправлю 🙂

  19. Ильдар

    Доброго времени суток! а как реализовать данную форму в виде модального окна…нажимаем кнопку ЗАКАЗАТЬ и вылетает окно с формой по середине экрана…Мне просто нравится использовать вашу форму. Удобно в установке и редактирование…

  20. Павел

    Приветствую, возник вопрос об использовании нескольких форм на странице, не подскажете как это реализовать?

    • dimadv7

      Здравствуйте. А вы пробывали? В чем проблема?

  21. Павел

    У меня несколько форм на странице, а работает только одна

    • dimadv7

      Так, что не работает. Напишите конкретно?

  22. Елена

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

  23. Елена

    Да, и еще, письма иногда (не всегда!) приходят пустыми…

    • dimadv7

      Сделать можно, менять id формы и атрибут form у кнопки, на соответствующий форме. Для того, чтобы письма не приходили пустыми, нужно сделать проверку какую-нибудь, на наличие данных в форме.

  24. Елена

    Оставьте ваши контакты и наш консультант свяжется с вами

    Оставьте ваши контакты и наш консультант свяжется с вами

  25. Елена

    Получилось!!! Как вставить сюда код?

    • Елена

      Есть только сложность: он не вставляет результат, если заменять другие теги, как h1 и т.д.

    • dimadv7

      Какой результат и куда не вставляет, где вы меняете теги? Для чего, я же не могу вам так подсказать, не поняв о чем речь. если вставляете код в комментарий, то заключайте его в [ html ] код [ /html ] без пробелов в скобках

  26. Елена

    Ой как не люблю формы…
    Готовое рабочее решение для одинаковых форм получилось таким:

    <div id="form-1" class="form">
      <div id="messegeResult_1"><h3>ОСТАВЬТЕ ЗАЯВКУ</h3>
      <p>на бесплатную оценку<br>вашей недвижимости</p></div>
      <form  method="post" action="" id="formMain_1">
        <input id="telephone"  class="pole" type="Tel" name="telephone" placeholder="Ваш телефон" maxlength="30" autocomplete="off" />
        <input id="button" type="button"  class="btn" value="Оставить заявку" onclick="AjaxFormRequest('messegeResult_1', 'formMain_1', 'form.php')"/>
      </form>
    </div>
    
    <div id="form-2" class="form">
      <div id="messegeResult_2"><h3>Хотите узнать как можно легко решить ваш вопрос?</h3>
      <p>Оставьте заявку и наш менеджер свяжется с вами</p></div>
      <form  method="post" action="" id="formMain_2">
        <input id="telephone"  class="pole" type="Tel" name="telephone" placeholder="Ваш телефон" maxlength="30" autocomplete="off" />
        <input id="button" type="button"  class="btn" value="Оставить заявку" onclick="AjaxFormRequest('messegeResult_2', 'formMain_2', 'form.php')"/>
      </form>
    </div>
  27. Илья

    Здравствуйте. Не могу разобраться, что я делаю не так. Сменил обработчик на собственный cgi скрипт — без проверки заполненности полей. В итоге получается, что обычный html required не срабатывает. Форму можно отправить пустой. Как добавить в этот скрипт проверку заполненности полей ДО того, как обработчик получит данные?

    • dimadv7

      Наверное делать это на javascript. А как еще? Но сходу так я не выдам вам код, нужно садиться и разбираться. Что-то вроде такого:

      <script type='text/javascript'>
      function validate(){
         //Считаем значения из полей name и email в переменные x и y
         var x=document.forms['application']['telephone'].value; //applivation - это атрибут name="" у формы, а telephone - это атрибут name="" у поля, которое хотим проверить
         var y=document.forms['application']['email'].value;
         //Если поле telephone и email пустое, выведем сообщение и предотвращаем отправку формы
         if (x.length==0 && y.length==0 ){
            document.getElementById('namef').innerHTML='* Укажите E-mail или Телефон для связи';
            return false;
         }
      }
      </script>
      
  28. Дядя Алёша

    Большое СПАСИБО.
    Только у Вас разобрался с тонкостями данной темы. Только маленький косяк нашел — не работает перевод строки в Вашем исполнении. Большое спасибо за материал.

    • dimadv7

      Здравствуйте, ну у меня работает, обычный br ставьте и будет вам перевод строки 🙂

      $message = 'Имя: '.$_POST['name'].';<br/> Телефон: '.$_POST['telephone'].';';
  29. Лена

    не приходят на почту сообщения(((
    помогите пожалуйста
    пишет успешно отправлено…

    <?php
    if(!empty($_POST['telephone'] ))
    {
    $to = "woloshindima@ya.ru";
    $from = 'madmweb@gmail.com';
    $subject = "Проверка почты";
    $message = 'Имя: '.$_POST['name'].'; Телефон: '.$_POST['telephone'].';';
    $headers = "Content-type: text/html; charset=UTF-8 \r\n";
    $headers .= "From: \r\n»;
    $result = mail($to, $subject, $message, $headers);

    if ($result){
    echo «Cообщение успешно отправленно. Пожалуйста, оставайтесь на связи»;
    }
    else{
    echo «Cообщение не отправленно. Пожалуйста, попрбуйте еще раз»;
    }
    }
    else {
    echo «Обязательные поля не заполнены. Введите номер телефона»;
    }
    ?>

    • dimadv7

      Давайте в вк пообщаемся, скиньте свой файл, а то wordpress режет код в комментариях.

  30. Лена

    Спасибо Дмитрий) я вчера таки добила этот код)) поменяла кусок на:
    $to = 'madmweb@gmail.com';
    $subject = 'Проверка почты';
    $message = 'Имя: '.$_POST['name'].'; Телефон: '.$_POST['telephone'].';';
    $headers = «Content-type: text/html; charset=UTF-8 \r\n»;
    $headers = 'From: madmweb@gmail.com' . «\r\n» .
    'Reply-To: madmweb@gmail.com' . «\r\n» .
    'X-Mailer: PHP/' . phpversion();

    и заработало. Отличная вещь! Спасибо за прекрасную статью))

    • dimadv7

      Ну главное, что работает)

  31. Михаил

    Всё отлично работает, но есть одно «но». В коде нет обработки спецсимволов. То есть в формы ввода можно занести опасные коды и они прочитаются на серваке, как коды. Добавьте, пожалуйста, htmlentities с соответствующей кодировкой в обработчик. Сам бы добавил, но у меня IQ не хватает. Заранее спасибо!

    • dimadv7

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

  32. Михаил

    Допишите экранирование переменных, плииз…

  33. Михаил

    Предлагаю дополнить форму обработки следующими строчками:
    if(isset($_POST['name']) && isset($_POST['telephone'])){
    $name=htmlentities($_POST['name']);
    $telephone = htmlentities($_POST['telephone']);
    }
    В этом случае всё должно быть зэ бэст.

    • dimadv7

      Это проверка на то, не пуста ли переменная? Прикольно. В исходнике есть проверка, но там на == 0, наверное, ваш вариант правильнее 🙂 Поправлю на днях.

  34. Алексей

    СПС Красава все работает!

  35. Алексей

    С первого раза !

    • dimadv7

      Отлично 🙂

  36. Дима

    Подскажите все такие как разместить 2е форме на одной странице?

    • dimadv7

      А вы уже пробовали как-то это сделать?

  37. Дима

    да, пробовал как описала 2015-04-22 ЕЛЕНА но формы у меня на одной странице разные

    • dimadv7

      Хорошо, давайте начнем с того, что у вас получается конкретно, какая ошибка или еще что?

  38. Дима

    Есть скайп? ЧТО бы быстрее? Ошибок нет формы две разные с разным набором полей к тому же обязательных для заполнения. Как можно реализовать такую форму?

    • dimadv7

      Давай в вк, напиши. Только, ты говоришь, что не получается, а ошибок нет. Странно! Что тогда не получается, что ты сделал, после чего вдруг понял, что не получается?

  39. Виталий

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

    • dimadv7

      Тогда это форма вам не подойдет. Она выводит сообщение прямо на странице, а не в модальном окне.

    • Виталий

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

  40. Виталий

    Уже сделал, спасибо)

  41. Константин

    Супер форма! А как можно добавить выпадающий список select для выбора клиенту? Например:
    Причина обращения (и ниже select):
    — Технический вопрос —
    — Вопрос по оплате —
    — Претензия —

  42. Vlad S.

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

    • dimadv7

      Здравствуйте. Поменяйте id у форм. посмотрите в комментариях, уже ребята делали и описывали как вроде бы. Вообще, что конкретно не получается. Как вы пробовали. Какая ошибка вылазит и т.д?

  43. Андрей

    Здравствуйте Дима. На локальном сервере форма работает при переносе на хостинг перестает работать, выдает ошибку «Cообщение не отправленно. Пожалуйста, попрбуйте еще раз», помогите пожалуйста разобратся.

    • dimadv7

      Здравствуйте. Ну начнем с базовых вопросов 🙂 Хостинг платный? с поддержкой php? Не тестовый период? Хостинг позволяет отправлять письма с любых адресов, а не только с почты, созданной специально для сайта (blabla@sitename.ru)?

  44. Наталия

    А как добавить поле с Email ?
    Добавила (заменила строку) вот это в форму:
    $message = 'Имя: '.$_POST['name'].'; Телефон: '.$_POST['telephone'].';';
    А в html добавила input:

    СООБЩЕНИЯ НЕ ОТПРАВЛЯЮТСЯ. Что еще нужно добавить?

    • dimadv7

      Вы на сервере тестируете?

  45. Наталия

    да на сервере

    • dimadv7

      Значит нужно добавить input, например такой:

      <input name="email" type="email" placeholder="Введите ваш E-mail" required />

      А в обработчике дописать так:

      $message = 'Имя: '.$_POST['name'].'; Почта: '.$_POST['email'].'; Телефон: '.$_POST['telephone'].';';
  46. Наталия

    Спасибо) работает)

  47. Аня

    Добрый день!
    У меня несколько форм, все с разными ид, после нажатия на кнопку выбивает:
    404 Cannot find the file
    Web server cannot find the file or script you requested. Please check the URL to ensure that the path is correct.

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

  48. Аня

    ой , форму пропустила:

    ОТПРАВИТЬ ЗАЯВКУ

  49. Аня

    form id=»glavnaya» method=»post» action=»» onSubmit=»return checkForm(this)»>

    ОТПРАВИТЬ ЗАЯВКУ

    </form

  50. Аня

    форму почему-то не могу отправить, даже если теги убираю

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