Smartlanding

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

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

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

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

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

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

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

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

  • макс

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

    Ответить
  • dimadv7

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

    Ответить
  • макс

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

    Ответить
  • dimadv7

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

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

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

    Ответить
  • макс

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

    Ответить
  • dimadv7

    Бывает :)

    Ответить
  • макс

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

    Ответить
  • макс

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

    Ответить
  • Ольга

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

    Ответить
  • dimadv7

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

    Ответить
  • Ольга

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

    Ответить
  • dimadv7

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

    Ответить
  • Ольга

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

    Ответить
  • Ольга

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

    Ответить
  • dimadv7

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

    <img src="" ... />

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

    Ответить
  • dimadv7

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

    Ответить
  • Ольга

    У меня обязательный только 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

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

    Ответить
  • Андрей

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

    Ответить
  • dimadv7

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

    Ответить
  • Андрей

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

    Ответить
  • Андрей

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

    Ответить
  • dimadv7

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

    Ответить
  • макс

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

    Ответить
  • dimadv7

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

    Ответить
  • макс

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

    Ответить
  • dimadv7

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

    Ответить
  • dimadv7

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

    Ответить
  • макс

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

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

    Ответить
  • Андрей

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

    Ответить
  • dimadv7

    Ответил в вк)

    Ответить
  • toxa

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

    Ответить
  • dimadv7

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

    Ответить
  • Ильдар

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

    Ответить
  • dimadv7

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

    Ответить
  • Георгий

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

    Ответить
  • dimadv7

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

    Ответить
  • Вадим

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

    Ответить
  • dimadv7

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

    Ответить
  • Вадим

    Спасибо!

    Ответить
  • Дима

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

    Ответить
  • dimadv7

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

    Ответить
  • Васька

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

    Ответить
  • dimadv7

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

    Ответить
  • Васька

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

    Ответить
  • dimadv7

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

    Ответить
  • Саша

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

    Ответить
  • dimadv7

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

    Ответить
  • Саша

    Да, простите. невнимательно вашу переписку с Ольгой прочла, думала проблема решилась. дело в том, что мне эта очистка то и не нужна, в идеале буду делать, чтоб форма скрывалась, и выводилось сообщение. я убрала эти 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. Я только что поняла, что сообщение и не отправилось.. не понимаю почему когда возвращаю эти пять строчек, он отсылает..)

    Ответить
  • dimadv7

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

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

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

    Ответить
  • dimadv7

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

    Ответить
  • Ильдар

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

    Ответить
  • dimadv7

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

    Ответить
  • Павел

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

    Ответить
  • dimadv7

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

    Ответить
  • Павел

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

    Ответить
  • dimadv7

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

    Ответить
  • Елена

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

    Ответить
  • Елена

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

    Ответить
  • dimadv7

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

    Ответить
  • Елена

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

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

    Ответить
  • Елена

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

    Ответить
  • Елена

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

    Ответить
  • dimadv7

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

    Ответить
  • Елена

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

    <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>
    Ответить
  • Егор

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

    Ответить
  • dimadv7

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

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

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

    Ответить
  • Илья

    Здравствуйте. Не могу разобраться, что я делаю не так. Сменил обработчик на собственный 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>
    
    Ответить
  • dimadv7

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

    $message = 'Имя: '.$_POST['name'].';<br/> Телефон: '.$_POST['telephone'].';';
    Ответить
  • Лена

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

    <?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 режет код в комментариях.

    Ответить
  • Лена

    Спасибо Дмитрий) я вчера таки добила этот код)) поменяла кусок на:

    $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

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

    Ответить
  • Михаил

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

    Ответить
  • Михаил

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

    Ответить
  • dimadv7

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

    Ответить
  • Михаил

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

    Ответить
  • dimadv7

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

    Ответить
  • Алексей

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

    Ответить
  • Алексей

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

    Ответить
  • dimadv7

    Отлично :)

    Ответить
  • Дима

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

    Ответить
  • dimadv7

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

    Ответить
  • Дима

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

    Ответить
  • dimadv7

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

    Ответить
  • Дима

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

    Ответить
  • dimadv7

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

    Ответить
  • Виталий

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

    Ответить
  • dimadv7

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

    Ответить
  • Виталий

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

    Ответить
  • Виталий

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

    Ответить
  • Константин

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

    Ответить
  • Vlad S.

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

    Ответить
  • dimadv7

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

    Ответить
  • Андрей

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

    Ответить
  • dimadv7

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

    Ответить
  • Наталия

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

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

    Ответить
  • dimadv7

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

    Ответить
  • Наталия

    да на сервере

    Ответить
  • dimadv7

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

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

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

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

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

    Ответить
  • Аня

    Добрый день!
    У меня несколько форм, все с разными ид, после нажатия на кнопку выбивает:
    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.

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

    Ответить
  • Аня

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

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

    Ответить
  • Аня

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

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

    </form

    Ответить
  • Аня

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

    Ответить
  • dimadv7

    у вас на сервере ,если загрузить исходник, работает форма?

    Ответить
  • Аня

    Не знаю, к счастью или нет, но исходники работают

    Ответить
  • dimadv7

    Ну, а теперь поменяйте дизайн и все будет в порядке))) Кончено к счастью. Теперь мы знаем, что с сервером все в порядке)

    Ответить
  • Чайник

    Здравствуйте! Мой обработчик:
    <?php
    /* Здесь проверяется существование переменных */
    if (isset($_POST['name'])) {$name = $_POST['name']; if ($name == '') unset($name); }
    if (isset($_POST['phone'])) {$phone = $_POST['phone']; if ($email == '') unset($email); }
    if (isset($_POST['wishes'])) {$wishes = $_POST['wishes']; if ($message == '') unset($message); }

    /* Проверяем заполнены ли все поля */
    if (isset($name) && isset($email) && isset($message)) {

    /* Убираем все лишние пробелы и переносы строк, а также преобразуем все теги HTML в символы */
    $name = htmlspecialchars(trim($name));
    $phone = htmlspecialchars(trim($phone));
    $wishes = htmlspecialchars(trim($wishes));

    /* Сюда впишите свою эл. почту */
    $address = "xxx@list.ru";

    /* А здесь прописывается текст сообщения, \n — перенос строки */
    $sub = "Сообщение с моего сайта!!!";
    $mes = "Тема: Заказ обратного звонка!\nИмя: $name\nТелефон: $phone\nВаше сообщение: $wishes";

    /* Отправка сообщения */
    $email='Заказ ';
    $verify = mail ($address,$sub,$mes,»Content-type:text/plain; charset = utf-8\r\nFrom:$email»);

    if ($verify == 'true'){
    echo «Сообщение отправлено!»;
    }
    else {
    echo «Сообщение не отправлено!Повторите»;
    }
    }
    }
    else{
    echo «Вы заполнили не все поля!»;
    }
    ?>
    Хочу использовать $verify вместо $result .
    Можно ли в или где реализовать третий вариант результата заполнения формы? Я — чайник…

    Ответить
  • Чайник

    Виноват, в первых 3-х строчках имена одинаковые:
    «if (isset($_POST['name'])) {$name = $_POST['name']; if ($name == ») unset($name); }
    if (isset($_POST['phone'])) {$phone = $_POST['phone']; if ($phone == ») unset($phone); }
    if (isset($_POST['wishes'])) {$wishes = $_POST['wishes']; if ($wishes == ») unset($wishes); }

    Ответить
  • чайник

    Здравствуйте, Дмитрий! Извините, что намусорил… Пытаюсь запустить две формы на странице…не подскажете, а в Head надо что вносить? СПАСИБО!!!

    Ответить
  • dimadv7

    Нет, нужно только менять id у форм, а так делать все точно так-же

    Ответить
  • чайник

    Прекрасная форма! Работает и при размещении полей в таблице, и выводит изображение о состоянии, если заменить картинкой и вместо
    if ($result){
    echo «Cообщение успешно отправлено»; }
    поставить картинки, например
    ($result){
    echo «»; }

    Ответить
  • чайник

    В кавычках типа img src='_mod_files/images/zapolnite.png'

    Ответить
  • чайник

    Если используете несколько форм на странице, то для очистки полей формы после отправки предпоследние 5 строк скрипта из надо повторить со своим id формы

    Ответить
  • Zy

    Привет, скажи а как можно скопировать код, не получается?

    Ответить
  • dimadv7

    Так есть же исходник, вроде бы к каждой статье, который можно скачать и посмотреть как работает. А вообще ладно, сейчас сделаю, чтобы можно было все копировать.

    Ответить
  • Ян

    Супер Спасибо! Сайт классный с массой полезной информации! Я разобрался, можно было скачать исходник и подсветить исходный код в файле index, от туда можно скопировать, но с сайта намного удобнее, отдельное спасибо!

    Ответить
  • dimadima

    Помогите, пожалуйста, не могу вставить 2 формы на одну страницу, id различные.

    Ответить
  • Хабиб Омаров

    Было бы хорошо если прикрутили бы и проверку формы, и еще антиспам. Без проверки она и пустую форму отправляет

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

    Подскажите в чем ошибка, как только не пробовал, никак не работает. Вот один из вариантов

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

    Как сюда вставить код? Он удаляется из комментов…

    Ответить
  • dimadv7

    Вставить код можно так [ html ] код [ /html ] — без пробелов в квадратных скобках. Но форма работает, скачайте исходник и просто замените почту. Убедитесь, что все работает. А потом уже вносите правки)

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

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

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

    Сюда код не получается вставить и так как вы описали и так тоже не вставляется

    Ответить
  • dimadv7
    <a href="smartlanding.biz>Создание landing page</a>"

    Должно работать.

    Ответить
  • dimadv7

    Как тестируете, что не работает? Какая ошибка вываливается?

    Ответить
  • Андрей

    Здравствуйте! Спасибо за полезную статью, все что вы описали — работает.
    Не могли бы вы мне помочь с кодом отправки данной формы в админку WordPress, для модерации комментариев. А то на почту отправляет, а в админку нет.

    Ответить
  • Чайник

    dimadv7, СПАСИБО — все прекрасно работает! Но не подскажете: Нашел внешний генератор popup, вставляется на сайт, ес-но, через скрипт… По умолчанию у той формы обработка всякими Гетреспонсами, а мне хочется использовать то, что у меня уже есть. Короче, как правильно прописать в теле формы полный адрес на form. php , который у нас в корневой папке? Или «это так не работает»?… СПАСИБО !!!

    Ответить
  • dimadv7

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

    Ответить
  • сергей

    DIMADV7, в том то и дело, что у меня, виноват, «знаний не хватает»…чтобы прописать полный путь к form php в коде страницы… Обращение в поддержку того сервиса успеха не имело:
    Ajax Form Request (result_id,formMain,url); //you have to enter the correct parameters — это всё, что мне ответили…(пробелы сам наставил,чтобы не стерлось при отправке поста) Как правильно указать здесь полный url ? Файл php лежит в корневой папке сайта. СПАСИБО!

    Ответить
  • сергей

    onclick=»AjaxFormRequest('messegeResult_popup', 'formMain_popup', 'http://mysite/form.php')» не запускает…

    Ответить
  • dimadv7

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

    Ответить
  • Чайник

    dimadv7, спасибо за внимание. Постараюсь понять, что вы написали про [ php ] код [ /php ].
    Моя проблемка: у меня на сайте стоит ваша форма и прекрасно работает. Но хорошего много не бывает, поэтому нашел удобный генератор попапов, в форму которого можно вставить свои атрибуты/имена формы, но… упс…- не работает так… А ооочень хочется, чтобы не привязываться к платным сервисами

    Ответить
  • Чайник

    Сгенерированный дизайн формы ставится на страницу

    Ответить
  • Чайник

    7 пробелов сам поставил, чтобы код не стерся

    Ответить
  • dimadv7

    popup — это всплывающее окно, не пойму как оно мешает подключить форму. Чтобы вставить код вот так:

    <? echo "привет мир!"?>

    Нужно использовать такую конструкцию [ php ] код [ /php ], только пробел в скобках не ставить.

    Если нужна форма в модальном окне, попробуйте эту

    Если пытаетесь переделать свою, то не достаточно просто скрипт прописать, нужно следить за атрибутами name в форме. Нужно в обработчике брать информацию из соответствующих полей. То есть, если у вас есть поле с name=»email», то в обработчике:

    'Имя: '.$_POST['name'].';

    Кроме того, скрипт привязан к id формы (formMain), если у вас другой, то замените все formMain на свой.

    Ответить
  • Чайник

    Дмитрий, спасибо. Вдруг выкручусь, если мозгов хватит: попробую проверить скрипт src=' __www.leadsleap.com/widgetxgen/js.js?c=2915&u=yesss … в части атрибутов формы Если найду причину, просто залью исправленный файл себе на сайт.

    Ответить
  • Максим

    А подключить данную форму можно через include или iframe все-таки!?

    Ответить
  • dimadv7

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

    Ответить
  • Максим

    Я все-таки подключил так:
    создал папку, например callback туда загрузил все файлы и подключил

    <iframe src="/callback/index.html"></iframe>
    
    Ответить
  • Максим

    Скрипт-то работает! В избранное полубасу!! :))))

    Ответить
  • Максим

    Еще сделал такую штуку, типа всплывающего окна:

    <a href="javascript:void(0)" onClick="javascript:window.open('путь_к_файлу_index.html', 'Имя_окна', 'width=400, height=480, status=no, toolbar=no, menubar=no, left=40%, top=20%, scrollbars=no, resizable=no');">Обратный звонок</a>
    

    и прикольненько так получилось! :)

    Ответить
  • Максим

    О.о
    странно… пробовал на бесплатном хостинге — работает как часы. На платный хостинг поставил — пишет сообщение об ошибке отправки формы :(

    Ответить
  • Aleks

    Всем большой привет. И большая просьба!!
    Сколько уже форм обратной связи не пробовал, ни одна не пашет.
    Опять же? скачиваю на данный странице готовый код, вставляю, а он ни пашет.
    __http://vector136.ru/hren/

    Прошу помогите!!! Желаю всем добра и много гигов счастья!!!!

    Ответить
  • dimadv7

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

    Ответить
  • Кирилл

    Пожалуйста, скажите как сделать защиту формы?
    Я в пхп не силён совсем…

    Ответить
  • Кирилл

    Кол-во символов не самый лучший вариант, т.к. в моём случае отправляемый текст может быть больше 30 символов

    Ответить
  • dimadv7

    Вот тут современная статья, эту обновить нужно как-нибудь. Пока руки не доходят.

    Ответить
  • homeprorab.info

    Исходные коды подробно прокомментированы, поэтому что либо еще тут писать смысла нет. Остается только выложить исходники вот они . Если сей код на сервер залить, то форма обратной связи заработает? Будут ли приходить мне на ящик уведомления?

    Ответить
  • Андрей

    Добрый день.
    У Вас маленькая неувязочка:

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

    Находится внутри функции, но форму Вы ищете не по переданному параметру, а на прямую указывая id.
    И этот способ затирает стили о_О

    Ответить
  • Андрей

    И этот способ затирает стили о_О

    Пардон, затирает автозаполнение

    Ответить
  • Михаил

    класм

    Ответить
  • Михаил

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

    Ответить
  • Таня

    Здравствуйте! Сделала все в точности как вы написали, шаг за шагом — то кнопка отправки сообщения не работает!

    Ответить
  • dimadv7

    Здравствуйте, хм, а что в консоли? Есть ошибки? И попробуйте исходник загрузить на свой сервер. Работает ли у вас он?

    Ответить
  • сергей

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

    Ответить
  • dimadv7

    Реальный хост не бесплатный? не тестовый период? Хостер позволяет отправлять письма на бесплатные почтовые ящики и ящики которые созданы не специально для домена? То есть не вида info@sitname.ru. Очень часто можно отправлять письма только на почтовый адрес привязанный к домену.

    Ответить
  • Дмитрий

    Не знаю, что не так. Обычная форма с вашего сайта встала «на ура», а вот эта без перезагрузки что то капризничает. Ничего не менял, ставлю на тот же эксперимент Альпы домен — не отправляет письма и всё тут…

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

    Добрый день, приходит пустое письмо((
    Вот так: Имя: ; Телефон: ; Email: ; Сообщение: ;

    Ответить
  • dimadv7

    Здравствуйте. Значит атрибут name у полей, не соответствует тому, который принимаете в обработчике.

    Ответить
  • Владимир

    Все скопировал.
    В итоге Cannot set property 'innerHTML' of null
    Подскажите пожалуйста, в чем проблема?

    Ответить
  • dimadv7

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

    Ответить
  • Максим Саенко

    Здравствуйте Дмитрий! С удовольствием читаю все Ваши статьи. Они отличаются конкретикой, лаконичностью, краткостью и в то же время, понятливостью (если можно так выразиться).
    У меня такой вопрос: как прикрутить данную форму на сайте через модальное окно?
    Есть ли такая возможность?
    Заранее спасибо.
    С ув. Максим

    Ответить
  • dimadv7

    Здравствуйте, спасибо большое. Да есть же форма подобная, но и с модальным окном. Вот тут. Но, думаю, и эту можно, а в чем собственно сложность? Можно как при помощи плагина какого-нибудь для модального окна. Но, думаю, в 2018 — это преступление подключать какой-то из плагинов. Просто делаем див, помещаем туда форму, скрываем его в css, а потом при клике на кнопку доавляем класс скрытом диву, и добавляем новому классу в css видимость.

    Или просто менять видимость элемента при клике на кнопку:

    Показать и скрыть элемент при клике можно так:

    $('.toogle-element').on('click', function() {
            $(".toogled-element").fadeToggle();
    });
    // где toogle-element - элемент по которому кликаем, toogled-element - элемент который нужно показать или скрыть
    
    Ответить

Comments are closed.

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