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

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

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

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

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

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

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

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

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

173 комментария

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

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

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

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

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

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

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

    5. Бывает :)

    6. ширина страницы мешает, не получается :(

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

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

    9. :) :) :) Ничего не понял!

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

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

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

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

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

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

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

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

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

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

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

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

      <img src="" ... />

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

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

  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?

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

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

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

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

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

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

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

      <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>
      
    3. Спасибо. Конечно, обновляйте. Пошла менять на html, php меня немного пугало))) Кроме того, в php у меня не срабатывает автоматическая проверка правильности указания e-mail с помощью type="email"

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

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

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

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

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

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

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

    1. Ответил в вк)

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

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

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

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

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

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

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

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

    2. Спасибо!

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

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

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

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

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

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

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

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

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

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

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

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

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

      и скрипт:

      error: function(response) {
                      document.getElementById(result_id).innerHTML = "<p>Возникла ошибка при отправке формы. Попробуйте еще раз</p>";
                      }
    2. У меня прописано в случае прохождения валидации - отсылает сообщение и выводит echo. Я только что поняла, что сообщение и не отправилось.. не понимаю почему когда возвращаю эти пять строчек, он отсылает..)

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

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

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

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

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

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

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

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

    1. Привет, используй скрипт модального окна. Или вот я когда-то пытался для себя сделать, но есть минусы: https://smartlanding.biz/kak-sdelat-knopku-zakazat-obratnyj-zvonok.html

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

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

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

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

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

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

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

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

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

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

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

    2. Какой результат и куда не вставляет, где вы меняете теги? Для чего, я же не могу вам так подсказать, не поняв о чем речь. если вставляете код в комментарий, то заключайте его в [ 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 не срабатывает. Форму можно отправить пустой. Как добавить в этот скрипт проверку заполненности полей ДО того, как обработчик получит данные?

    1. Наверное делать это на 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. Большое СПАСИБО.
    Только у Вас разобрался с тонкостями данной темы. Только маленький косяк нашел - не работает перевод строки в Вашем исполнении. Большое спасибо за материал.

    1. Здравствуйте, ну у меня работает, обычный 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 "Обязательные поля не заполнены. Введите номер телефона";
    }
    ?>

    1. Давайте в вк пообщаемся, скиньте свой файл, а то 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();
    

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

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

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

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

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

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

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

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

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

    1. Отлично :)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  45. да на сервере

    1. Значит нужно добавить 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. форму почему-то не могу отправить, даже если теги убираю

Comments are closed.

© 2014 — 2020, Smartlanding.biz. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности