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

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

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

Ах да, приведу в порядок айдишники и классы, чтобы легче понималось что и зачем. Изменю дизайн формы, так интереснее. В одной из следующих статей, возможно,  подключим к этой форме reCapthсa от Google, и настроем цель «Событие», при успешной отправке, так что готовится целый цикл статей.

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

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="modalform/libs/remodal/remodal.min.js"></script>
<script src="modalform/js/form.js"></script>

Обратите внимание на путь к файлам. Я решил поместить практически все файлы в папку modalform, чтобы легче было подключать к проекту.

Прежде чем перейти к разметке формы, подключим css файлы модального окна. Я делаю это между тегами head:

 <link rel="stylesheet" href="modalform/libs/remodal/remodal.css">
 <link rel="stylesheet" href="modalform/libs/remodal/remodal-default-theme.css">
 <link rel="stylesheet" href="modalform/css/formstyle.css">

Чтобы было интереснее:

Посмотреть пример

Итак, теперь перейдем к разметке самой формы и кнопки вызывающей ее. Начнем с кнопки.

<a class="linkButton" data-remodal-target="firstModal">Оставить заявку</a>

Тут — все просто. Обычная ссылка с произвольным классом. Data-remodal-target используется для того, чтобы вызвать модальное окно, аналогично, если бы использовался href со ссылкой на id. Но зачем нам этот мусор в адресной строке. В свою очередь модальное окно с формой выглядит следующим образом:

<div class="remodal" data-remodal-id="firstModal" data-remodal-options="hashTracking: false,closeOnConfirm: false">
  <button data-remodal-action="close" class="remodal-close"></button>
  <div class="formArea">
  
  <form id="secondForm" class="form" autocomplete="off">
  <p class="formTitle">Закажите обратный звонок и наш консультант свяжется с вами</p>
  <p class="msgs"></p>

      <fieldset class="form-fieldset ui-input __first">
        <input name="uname" type="text" id="username" required tabindex="0"/>
        <label for="username">
          <span data-text="Введите ваше имя">Введите ваше имя</span>
        </label>
      </fieldset>

      <fieldset class="form-fieldset ui-input __second">
        <input name="uphone" type="tel" id="phone" tabindex="0" required pattern="^[ 0-9]+$"/>
        <label for="phone">
          <span data-text="Введите ваш телефон">Введите ваш телефон</span>
        </label>
      </fieldset>

      <input name="formInfo" class="formInfo" type="hidden" value=""/>

      <div class="form-footer">
        <input type="submit" class="formBtn" value="Обратный звонок" />
      </div>
      <p class="formCreator"><a href="https://smartlanding.biz">smartlanding.biz</a></p>
  </form>
  </div>
</div>

Хоть кода, на первый взгляд, достаточно много, на самом деле все не так сложно. Вся форма обернута в div c классом remodal. У него есть data-remodal-id с таким же параметром как у кнопки. То есть firstForm. Именно благодаря им, при клике на кнопку открывается нужное окно, в случае, если на странице их несколько.

Data-remodal-options — один из способов задать или отключить некоторые возможности скрипта для модального окна. Подробнее можно почитать на официальном из сайте. Ссылку уже давал выше. В моем случае. Я отключил появление якоря в адресной строке и запретил закрытие окно после нажатия кнопки «отправить».

Внутри сама форма с fieldset(ами). Здесь важно обратить внимание, на параграф с классом «msgs». Именно сюда будет выводиться сообщение об успешной отправке или ошибке. Раньше сообщение выводилось прямо внутри формы, заменяя весь контент внутри.

Еще один момент. Скрытое поле c классом formInfo. Оно нужно для того, чтобы отличать заявки и понимать какую именно форму заполнил пользователь, в случае, если их несколько разных. Просто заполняем нужным текстом значение value.

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

Теперь давайте посмотрим на скрипт, который поможет нам отправить форму без перезагрузки страницы. Я назвал его form.js:

$(document).ready(function () {
    $("form").submit(function () {
        // Получение ID формы
        var formID = $(this).attr('id');
        // Добавление решётки к имени ID
        var formNm = $('#' + formID);
        var message = $(formNm).find(".msgs"); // Ищет класс .msgs в текущей форме  и записываем в переменную
        var formTitle = $(formNm).find(".formTitle"); // Ищет класс .formtitle в текущей форме и записываем в переменную
        $.ajax({
            type: "POST",
            url: 'modalform/mail.php',
            data: formNm.serialize(),
            success: function (data) {
              // Вывод сообщения об успешной отправке
              message.html(data);
              formTitle.css("display","none");
              setTimeout(function(){
                //$(formNm).css("display","block");
                $('.formTitle').css("display","block");
                $('.msgs').html('');
                $('input').not(':input[type=submit], :input[type=hidden]').val('');
              }, 3000);
            },
            error: function (jqXHR, text, error) {
                // Вывод сообщения об ошибке отправки
                message.html(error);
                formTitle.css("display","none");
                // $(formNm).css("display","none");
                setTimeout(function(){
                  //$(formNm).css("display","block");
                  $('.formTitle').css("display","block");
                  $('.msgs').html('');
                  $('input').not(':input[type=submit], :input[type=hidden]').val('');
                }, 3000);
            }
        });
        return false;
    });
    //для стилей формы
      var $input = $('.form-fieldset > input');
      $input.blur(function (e) {
        $(this).toggleClass('filled', !!$(this).val());
      });
});

Давайте немного поясню, что тут происходит. Мы вызываем функцию, когда произошло событие submit у формы (нажали на отправку). Затем получаем id формы и сохраняем в переменную formNm. Теперь, id нашей формы в ней. В прошлой статье именно сюда выводилось сообщение. И именно об этом моменте я так часто писал в комментариях. Нужно просто указать другое место для вывода. В нашем случае мы все сообщения будем выводить в заранее подготовленное место. Это тег «p» с классом «msgs».

В скрипте, говорим, что на время показа сообщения об успешной или не успешной отправке, скроем заголовок. А через 3 секунды вернем все на место и отчистим поля формы вместе с сообщением.

Файл, который отправит полученные данные — mail.php. Вот его код:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (!empty($_POST['uname']) && (!empty($_POST['uemail']) || !empty($_POST['uphone']))){
  	if (isset($_POST['uname'])) {
  		if (!empty($_POST['uname'])){
	      $uname = strip_tags($_POST['uname']) . "<br>";
	      $unameFieldset = "<b>Имя пославшего:</b>";
	     }
    }
    if (isset($_POST['uemail'])) {
    	if (!empty($_POST['uemail'])){
	      $uemail = strip_tags($_POST['uemail']) . "<br>";
	      $uemailFieldset = "<b>Почта:</b>";
	 	}
    }
    if (isset($_POST['uphone'])) {
    	if (!empty($_POST['uphone'])){
	      $uphone = strip_tags($_POST['uphone']) . "<br>";
	      $uphoneFieldset = "<b>Телефон:</b>";
	    }
    }
    if (isset($_POST['formInfo'])) {
	    if (!empty($_POST['formInfo'])){
	      $formInfo = strip_tags($_POST['formInfo']);
	      $formInfoFieldset = "<b>Тема:</b>";
	    }
    }

    $to = "dima.d.v@yandex.ru"; /*Укажите адрес, на который должно приходить письмо*/
    $sendfrom = "smart-landing@yandex.ru"; /*Укажите адрес, с которого будет приходить письмо */
    $headers  = "From: " . strip_tags($sendfrom) . "\r\n";
    $headers .= "Reply-To: ". strip_tags($sendfrom) . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html;charset=utf-8 \r\n";
    $headers .= "Content-Transfer-Encoding: 8bit \r\n";
    $subject = "$formInfo";
    $message = "$unameFieldset $uname
                $uemailFieldset $uemail
                $uphoneFieldset $uphone
                $formInfoFieldset $formInfo";

    $send = mail ($to, $subject, $message, $headers);
        if ($send == 'true') {
            echo '<p class="success">Спасибо за отправку вашего сообщения!</p>';
        } else {
          echo '<p class="fail"><b>Ошибка. Сообщение не отправлено!</b></p>';
        }
  } else {
  	echo '<p class="fail">Ошибка. Вы заполнили не все обязательные поля!</p>';
  }
} else {
  header ("Location: https://smartlanding.biz"); // главная страница вашего лендинга
}

В нем несколько проверок:

  • Пришли ли данные методом POST, если да, то проверяем не пустые ли основные поля, если нет, то записываем в переменные и отправляем.
  • Если данные не пришли методом POST, то выкидываем на главную (то есть пользователь, каким-то образом попал сразу на страницу mail.php), а нам это не нужно, так как может отправиться пустое письмо.

На этом первая часть закончена.

Не забывайте указывать свои почтовые ящики. Кстати, на mail.ru письма могут не приходить с вашего ip. Ну и правильно, пользователи mail.ru и IE должны страдать.

Теперь, давайте сделаем так, чтобы не приходилось заполнять параметр value у скрытого поля вручную, а он заполнялся автоматически. Это может понадобиться, когда у вас одна форма, но много кнопок на landing page, которые вызывают ее. Например, один раз вы берете контакты для бесплатной консультации, а где-нибудь ниже предлагаете услугу со скидкой. Чтобы понимать по какой именно кнопке нажали и чего ждет от вас пользователь, логично было бы в письме передавать информацию об этом. Я предлагаю кнопкам (ссылкам), по которым будет вызываться модальное окно дать title. Например, так:

<a class="linkButton" data-remodal-target="firstModal" title="Консультация">Получить консультацию</a>
<a class="linkButton" data-remodal-target="secondModal" title="Обратный звонок">Обратный звонок</a>

И написать небольшой скрипт, который при клике на на нашу кнопку(ссылку) будет подставлять в скрытое поле информацию из title:

$(".linkButton").click(function() {
    $( "input[name*='formInfo']" ).val($(this).attr( "title" ));
});

То есть мы говорим, что при клике на элемент с классом linkButton, возьми текст из его title и помести в input с name параметром formInfo, где:

  • linkButton — класс нашей кнопки;
  • formInfo — значение name скрытого поля;

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

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

Если будет вылазить ошибка «not found», первым делом проверьте путь к mail.php в файле form.js

Кстати, написал статью как связать эту форму с reCptcha от Google.

Конструктор форм

140 комментариев

  • svarkagid.com

    Если сей код на сервер залить, то форма обратной связи заработает? Будут ли приходить мне на ящик уведомления?

    Ответить
  • dimadv7

    Почту свою укажете и будут)

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

    У меня на хостинге не работает ваша форма проверял и пути и пробовал index.html в index.php переименовать думал мож в этом дело, но безрезультатно, вроде как всё отправляется и форма пишет спасибо, но на указанный адрес письма не приходят,помогите плииз если сможете!!!

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

    Почту отправки и получения указывал созданную на хостинге…

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

    Все это очень здорово, но как вставить переменную formNm с таким кодом: {deeplinking: false} , что бы при клики в браузере мы переходили на предыдущую страницу, а не открывалась опять форма?

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

    В скрипте prettyPhoto это реализуется вот такой вставкой: {deeplinking: false}, но как это реализовать в smartlid?

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

    Дмитрий, присоединяюсь к словам благодарности, дай Бог тебе здоровья, Проблема с отправкой писем из модального окна, из формы которую я так же разместил на странице как у тебя в исходнике письма приходят, а если нажимаю кнопку и заполняю поля в модальном окне писем нет (( к стати в статье ты написал что опишешь способ когда кнопок на странице несколько, а форма одна, но способа этого я не увидел, у меня как раз такой случай. Может из-за нескольких кнопок такое?

    Ответить
  • dimadv7

    Спасибо)

    Начиная со слов:

    Теперь, давайте сделаем так, чтобы не приходилось заполнять параметр value у скрытого поля вручную, а он заполнялся автоматически. Это может понадобиться, когда у вас одна форма, но много кнопок на landing page, которые вызывают ее.

    и показано как сделать.

    А письма из формы, которые в модальном окне — не приходят? Я просто не понял

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

    Да, именно из окна они почему то не приходят, сайт __www.uvasnachas.ru

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

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

    Ответить
  • dimadv7

    Отправил на почту, немного иной вариант, проверьте будет ли работать?

    Ответить
  • Андрюха

    Кое как победил создание этой формы у себя на сайте.. НО! Не могу отправить письмо. Пишет «Ошибка. Сообщение не отправлено!». Тоесть, правильно я понял, что файл mail.php он нашел, но в чем тогда проблема? Почты поменял на свои.

    Ответить
  • Андрюха

    Отбой по этому вопросу, не прошло и полгода техподдержка ответила, были проблемы на хостинге. Но теперь другие вопросы):
    1) Автозакрытие (например через 2 секунды) после успешной отправки как организовать?
    $('.remodal-close').click(); — куда вписывать?
    2)Добавил новое поле для ввода данных, но при открытии формы оно уже горит красным, как будто там ошибка, остальные норм.
    3)И главный вопрос! У меня на сайте более 100 страниц, где есть кнопка, на которые должны вызывать это модальное окно. Как намного эффективней и без особых телодвижений организовать их работу? (чтоб не открывать каждую страницу, не прикреплять скрипты, ссылки на стили, потом блок div…) Без присвоения класса каждой кнопки конечно не получится, но это я готов сделать)

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

    Добрый день.
    Спасиюбо большое за отличную статью.
    Сделал форму для заказа в один клик на сайте __http://dvigateli.msk.ru
    В форме есть два поля которые скрыты — Название товара и артикул. Они подгружаются.
    Проблема заключается в следующем. После отправки письма выдается сообщение что все нормально сработало форму закрываем и пробуем заказать другой товар на этой же странице не перезагружая. После этого форма выдает что не все поля заполнены. Тоесть после отправки артикул и название товара на всех формах на странице стираются.
    Как быть

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

    Доброго времени суток
    очень крутая форма!
    Установил, все ок, отправляю заявку с сайта и на мыло приходит сообщени сайта, но в полях имя и телефон — пусто.
    Скажите пожалуйста, что в этом случае имеет смысл проверить/изменить, что бы информация приходила на почту ?
    фото __http://prntscr.com/doo480

    Ответить
  • dimadv7

    Если меняли в полях атрибут name, то верните обратно. В обработчике проверяют эти атрибуты и информация берется из полей с соответствующим атрибутом.

    Ответить
  • dimadv7

    при подключении нескольких форм, у них должны быть разные id

    Ответить
  • Денис

    В модальном окне не работает кнопка отправить.

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

    Форма просто супер, работает как часы — __http://glassboards.com.ua/

    Для закрытия формы нужно добавить
    $('.remodal-close').click();
    в form.js (строка 22) и будет Вам счастье ))))

    Ответить
  • Aiba

    Я вот не разобрался

    Ответить
  • Ко

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

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

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

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

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

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

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

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

    У тебя в самой статье в коде формы стоит data-remodal-id=»secondModal».
    А ниже пишешь «У него есть data-remodal-id с таким же параметром как у кнопки. То есть firstForm.» Исправь

    Ответить
  • dimadv7

    Спасибо))

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

    Здравствуйте. Вопрос такой — можно ли сделать так, чтобы класс msgs цеплялся на не , а заменял собой форму? То есть перед отправкой у посетителя форма, а при клике на отправить форма исчезает, на ее месте появляется сообщение, которое выдает обработчик.

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

    ой, тэг проглотился… не на параграф короче

    Ответить
  • dimadv7

    Ну так а в чем проблема собственно? Укажите куда выводить и что скрывать, только логика токая, что тег msgs ищется внутри формы, придется и это переделать.

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

    Добрый день! спасибо за скрипт. Подскажите пожалуйста как после отправки формы сделать редирект на другую страницу сайта?

    Ответить
  • Николай

    У меня та же проблема. Все файлы с кодировкой utf-8 без BOM.
    Какие то еще файлы надо перекодировать или другая совсем нужна?

    Ответить
  • Николай

    Текст ошибки после отправки:
    «ÐŸÑ€ÐµÐ´ÑÑ‚авление не найдено [name, type, prefix]: category, php, contentView»

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

    Добрый день!

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

    Ответить
  • Kate The Great

    Не знаю про мейл ру, я меня все письма приходят с этой формы

    Ответить
  • eroctive2.blogspot.ru

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

    Ответить
  • Con.Sam

    Виктор, тоже нужно добавить эти функции ( $('textarea').val(»); и $('.remodal-close').click(); ), подскажите в какой файл и в каком месте это прописать?
    P.S.Не уверен, что Виктор ответит, но если ответит кто-то другой, то буду благодарен.
    P.S.Можно ли вообще очистить форму после отправки? Без перезагрузки страницы. Т.е. чтобы при повторном открытии формы пользователь видел не «Сообщение успешно отправлено», а новую форму, чтобы заново мог отправить письмо.
    Спасибо!

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

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

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

    Если в пустом окне формы нажать Отправить, то происходит переход на страницу __https://site.ru/?uname&uphone&formInfo=Обратный%звонок. Сайт на wordpress. Подскажите пожалуйста, как исправить?

    Ответить
  • Денис

    Не получается открыть форму по нажатию на кнопу и сама форма вставилась в сайт

    Ответить
  • пу

    Вот бы пришпандроить этот скрипт как нибудь

    $(document).ready(function(){
    $('.createCallForm').smartlid();
    $('input[name=»inpName»]').mask('+7 (999) 999-99-99');
    });

    Ответить
  • Xander12

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

    «; $unameFieldset = «Имя пославшего:»; } } if (isset($_POST['uemail'])) { if (!empty($_POST['uemail'])){ $uemail = strip_tags($_POST['uemail']) . »
    «; $uemailFieldset = «Почта:»; } } if (isset($_POST['uphone'])) { if (!empty($_POST['uphone'])){ $uphone = strip_tags($_POST['uphone']) . »
    «; $uphoneFieldset = «Телефон:»; } } if (isset($_POST['formInfo'])) { if (!empty($_POST['formInfo'])){ $formInfo = strip_tags($_POST['formInfo']); $formInfoFieldset = «Тема:»; } } $to = «primer@yandex.ru»; /*Укажите адрес, на который должно приходить письмо*/ $sendfrom = «primer@mail.ru»; /*Укажите адрес, с которого будет приходить письмо */ $headers = «From: » . strip_tags($sendfrom) . «\r\n»; $headers .= «Reply-To: «. strip_tags($sendfrom) . «\r\n»; $headers .= «MIME-Version: 1.0\r\n»; $headers .= «Content-Type: text/html;charset=utf-8 \r\n»; $headers .= «Content-Transfer-Encoding: 8bit \r\n»; $subject = «$formInfo»; $message = «$unameFieldset $uname $uemailFieldset $uemail $uphoneFieldset $uphone $formInfoFieldset $formInfo»; $send = mail ($to, $subject, $message, $headers); if ($send == 'true') { echo '
    Спасибо за отправку вашего сообщения!
    '; } else { echo '
    Ошибка. Сообщение не отправлено!
    '; } } else { echo '
    Ошибка. Вы заполнили не все обязательные поля!
    '; } } else { header («Location: http://«); // главная страница вашего лендинга }

    111111
    ВВЕДИТЕ ВАШЕ ИМЯ

    11111111111111
    ВВЕДИТЕ ВАШ ТЕЛЕФОН
    ОБРАТНЫЙ ЗВОНОК

    Ответить
  • Xander12

    А как вставить, тему, к примеру «Новый заказ», чтобы письмо не приходило (Без темы)?

    Разобрался.

    Ответить
  • Anonimys

    Не работает отправка ваша

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

    Форма совсем не хочет работать(
    Взял саму форму

    <form id="secondForm" class="form" autocomplete="off">
      <p class="formTitle">Закажите обратный звонок и наш консультант свяжется с вами</p>
      <p class="msgs"></p>
     
          <fieldset class="form-fieldset ui-input __first">
            <input name="uname" type="text" id="username" required tabindex="0"/>
            <label for="username">
              <span data-text="Введите ваше имя">Введите ваше имя</span>
            </label>
          </fieldset>
     
          <fieldset class="form-fieldset ui-input __second">
            <input name="uphone" type="tel" id="phone" tabindex="0" required pattern="^[ 0-9]+$"/>
            <label for="phone">
              <span data-text="Введите ваш телефон">Введите ваш телефон</span>
            </label>
          </fieldset>
     
          <input name="formInfo" class="formInfo" type="hidden" value=""/>
     
          <div class="form-footer">
            <input type="submit" class="formBtn" value="Обратный звонок" />
          </div>
          <p class="formCreator"><a href="http://cleanqueen.ru">cleanqueen.ru</a></p>
      </form>
    

    Добавил на страницу скрипты

    <script src="form/form.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(".linkButton").click(function() {
        $( "input[name*='formInfo']" ).val($(this).attr( "title" ));
    });
    </script>
    

    Создал на хостинге папку form. Туда залил файл form.js. Изменил в нем расположение файла mail.php (находится в корне сайта).

    $(document).ready(function () {
        $("form").submit(function () {
            // Получение ID формы
            var formID = $(this).attr('id');
            // Добавление решётки к имени ID
            var formNm = $('#' + formID);
            var message = $(formNm).find(".msgs"); // Ищет класс .msgs в текущей форме  и записываем в переменную
            var formTitle = $(formNm).find(".formTitle"); // Ищет класс .formtitle в текущей форме и записываем в переменную
            $.ajax({
                type: "POST",
                url: '/mail.php',
                data: formNm.serialize(),
                success: function (data) {
                  // Вывод сообщения об успешной отправке
                  message.html(data);
                  formTitle.css("display","none");
                  setTimeout(function(){
                    //$(formNm).css("display","block");
                    $('.formTitle').css("display","block");
                    $('.msgs').html('');
                    $('input').not(':input[type=submit], :input[type=hidden]').val('');
                  }, 3000);
                },
                error: function (jqXHR, text, error) {
                    // Вывод сообщения об ошибке отправки
                    message.html(error);
                    formTitle.css("display","none");
                    // $(formNm).css("display","none");
                    setTimeout(function(){
                      //$(formNm).css("display","block");
                      $('.formTitle').css("display","block");
                      $('.msgs').html('');
                      $('input').not(':input[type=submit], :input[type=hidden]').val('');
                    }, 3000);
                }
            });
            return false;
        });
        //для стилей формы
          var $input = $('.form-fieldset > input');
          $input.blur(function (e) {
            $(this).toggleClass('filled', !!$(this).val());
          });
    });
    

    В mail.php указал почту куда и откуда.

    <?php
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
      if (!empty($_POST['uname']) && (!empty($_POST['uemail']) || !empty($_POST['uphone']))){
        if (isset($_POST['uname'])) {
            if (!empty($_POST['uname'])){
              $uname = strip_tags($_POST['uname']) . "<br>";
              $unameFieldset = "<b>Имя пославшего:</b>";
             }
        }
        if (isset($_POST['uemail'])) {
            if (!empty($_POST['uemail'])){
              $uemail = strip_tags($_POST['uemail']) . "<br>";
              $uemailFieldset = "<b>Почта:</b>";
            }
        }
        if (isset($_POST['uphone'])) {
            if (!empty($_POST['uphone'])){
              $uphone = strip_tags($_POST['uphone']) . "<br>";
              $uphoneFieldset = "<b>Телефон:</b>";
            }
        }
        if (isset($_POST['formInfo'])) {
            if (!empty($_POST['formInfo'])){
              $formInfo = strip_tags($_POST['formInfo']);
              $formInfoFieldset = "<b>Тема:</b>";
            }
        }
     
        $to = "info@cleanqueen.ru"; /*Укажите адрес, на который должно приходить письмо*/
        $sendfrom = "z266069@srv030.infobox.ru"; /*Укажите адрес, с которого будет приходить письмо */
        $headers  = "From: " . strip_tags($sendfrom) . "\r\n";
        $headers .= "Reply-To: ". strip_tags($sendfrom) . "\r\n";
        $headers .= "MIME-Version: 1.0\r\n";
        $headers .= "Content-Type: text/html;charset=utf-8 \r\n";
        $headers .= "Content-Transfer-Encoding: 8bit \r\n";
        $subject = "$formInfo";
        $message = "$unameFieldset $uname
                    $uemailFieldset $uemail
                    $uphoneFieldset $uphone
                    $formInfoFieldset $formInfo";
     
        $send = mail ($to, $subject, $message, $headers);
            if ($send == 'true') {
                echo '<p class="success">Спасибо за отправку вашего сообщения!</p>';
            } else {
              echo '<p class="fail"><b>Ошибка. Сообщение не отправлено!</b></p>';
            }
      } else {
        echo '<p class="fail">Ошибка. Вы заполнили не все обязательные поля!</p>';
      }
    } else {
      header ("Location: http://cleanqueen.ru"); // главная страница вашего лендинга
    }

    Но письма не приходят. Подскажите в какую сторону копать?

    Ответить
  • dimadv7

    попробуйте к хостеру обратиться и описать проблему

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

    Добрый день. Подключила вашу форму к лендингу. Проблема в следующем: на странице присутствует 2 формы — одна появляется в модальном окне и отлично срабатывает, вторая расположена непосредственно на странице. Так вот при нажатии на кнопку отправки данные на почту не приходят. Единственное, что удалось сделать, так это чтобы поля пропадали. Видимо этот скрипт работает только для форм, заключенных в модальные окна??
    Второй форме указала id=»MyForm», но у нее нет fieldset-ов, может дело в этом? Очень нужен ответ.

    Ответить
  • dimadv7

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

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

    Дмитрий.

    Добрый день.

    Воспользовался вашей формой, всё работает, письма приходят, но почему-то нет темы письма из title кнопки.

    В чём может быть проблема?

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

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

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

    Дмитрий.

    Ещё вопрос по валидности, после подключения стилей сайт проверку валидатора не проходит.

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

    Ответить

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

 

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