Smartlanding

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

Контактная форма в модальном окнеВсем — привет. Сегодня решил взяться за переработку статьи об 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 комментариев

  • Дмитрий

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

    П.С скрис из письма https://s.mail.ru/99BX/NDf937g82

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

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

    Ответить
  • Никита

    Кажется то, что нужно. Огромное спасибо!

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

    Дмитрий, я на вашем сайте недавно, но уже нашел много полезных для себя вещей, поэтому сразу хочу сказать спасибо за чудесный блог)
    Теперь к делу:
    Данный скрипт я не пробовал, пока пользуюсь самописным.
    Зачастую моим клиентам нужно отсылать или дублировать входящие заявки именно на mail.ru, почему данный скрипт не отправляет на этот ящик письма? Какая разница кто держатель почтового сервера? Мой скрипт так же основан на php функции mail() и у меня все прекрасно отправляет! Но, у меня нет аякса, просто редирект с помощью заголовка на главную, или отдельную страницу thank-you-page.html , которую можно использовать как цель в метрике.
    Данная форма мне понравилась, единственный момент, что хотелось бы когда окно «Спасибо за заявку бла бла бла…» изчезало, первой модальное окно с формой тоже закрывалось, а то получается, что тебя перебрасывает на страницу с открытой формой.
    Спасибо.

    Ответить
  • dimadv7

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

    А по поводу mail.ru — не нравятся им мои заголовки, видимо, которые передаю. Никак руки не доходят посмотреть как это сделано в профессиональных инструментах.

    Ответить
  • dimadv7

    Пока не придумал как, может хранить все не пустые данные и не (null) в массиве, а потом дергать от туда и вставлять в тело письма. Есть вообще идеи как сделать все это грамотно? Если разберешься — напиши о своем способе.

    А вообще, там же при помощи br переносится на новую строку.

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

    А как сделать чтобы на mail.ru тоже приходили?

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

    Дмитрий, добрый день. Возникла проблема с реализацией Вашего метода под CMS Joomla 3.6.2.
    Вроде бы всё проделано верно но все же после отправки выдает иероглифи и письмо не приходит (тестовая почта на gmail@com)

    Ответить
  • dimadv7

    Здравствуйте. Иероглифы — из-за разных кодировок. Нужно привести все к одной. Причем не только указать в коде, но и сохранить файлы под нужной кодировкой. Письма — проверьте в спаме, иногда первый раз — туда кидает на gmail, нужно 1 раз указать будет, что это не спам. Если тестируете на реальном сервере, то возможно, ваш хостинг не позволяет отправлять письма на почту, не привязанную к сайту (в целях борьбы со спамом). Попробуете создать почту у хостера и отправлять письма на этот почтовый ящик.

    Ответить
  • Виктор

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

    Единственное, мне обязательно нужно поле textarea, поэтому я добавил его очистку после отправки (и после ошибки):
    $('textarea').val(»);

    А также добавил автозакрытие окна после успешной отправки (но! не после ошибки):
    $('.remodal-close').click();

    Ответить
  • Семён

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

    Ответить
  • dimadv7

    Здравствуйте, то есть телефон и имя заполнено? И name у них uname и uphone соответственно? И отличаться формы должны айдишником, я же специально задал firstForm и secondForm, чтобы явно на это указать. Тем более, чтобы пройти валидацию верстки, не должно быть 2 и более одинаковых id на странице!

    Ответить
  • Семён

    id разные, иначе как бы я эту форму вызывал. Поля заполнены, uname, uphone переименованы на просто name, phone, как в самой форме, так и в обработчике формы и в скрипте, сделано это так как туда интегрирован мегаплан по API, чтобы не переписывать его интеграцию, поубирал «u» впереди.

    Ответить
  • Семён

    Всё, нашел свою ошибку, спасибо Вам большое!))

    Ответить
  • Элизабет

    Здравствуйте. Нашла в вашем комментарии то на, что искала ответ. У меня в форме тоже есть textarea, но так как я ничего не понимаю ни в php ни в js не могу понять куда именно вставлять эти строки и еще не поняла в полном ли виде вы представили эту строку «$('textarea').val(»);» ? И автозакрытие формы после уведомления об успешной отправке мне тоже очень нужно, не могли бы вы куда-то выложить ваш вариант form.js и mail.php или отправить мне на имейл ( luz-irina.91 @ mail.ru )?

    Ответить
  • Элизабет

    Здравствуйте. Спасибо за полезную статью! Форму прикрутила кое-как, но вот возникли вопросы: возможно ли сделать так, чтобы сообщение о том, что не все обязательные поля заполнились выводилось именно в теге без скрытия самой формы, то есть прямо под заголовком, но перед полями для заполнения, а сообщение об успешной отправке чтобы скрывало саму форму? И еще вопрос: почему у меня форма отправляет данные даже если заполнено лишь одно имя, то есть без телефона или имейла позволяет отправлять? И последний: что означает && и || там где прописывается проверка на непустое поле? :-) Надеюсь на помощь, так как гугл не помог.

    Ответить
  • Евгения

    Попробуйте сделать дополнительную валидацию на стороне клиента при помощи добавления тега required в нужное поле, например:

    <input name="uname" type="text" id="username" tabindex="0" required />

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

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

    Скорее всего вы поменяли значения в атребуте name у форм. Поэтому проверка не работает.

    что означает && и ||

    && — логическое «И», || — логическое «ИЛИ». То есть в проверке мы говорим, если поле с name=»uname» и с name=»uphone» или name=»uemail» пустое, то выводим сообщение.

    Ответить
  • Egor

    Сделал всё как вы написали. При отправке выдает Not Found. Путь к mail.php проверил, вроде бы всё верно, но не работает :(

    Ответить
  • dimadv7

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

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

    Добрый день!
    Не могу победить «Not Found».
    Прописывал разные пути, не помогает. Положил файл mail.php туда, где находится form.js. Ничего не помогает.

    Ответить
  • dimadv7

    Если папку положили не в корень сайта, то просто нужно было слеш убрать.

    Ответить
  • Фёдор

    Где строка, отвечающая за проверку емаил и телефона? Спасибо все отлично, всё работает.

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

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

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

    Хочу поблагодарить Дмитрия за его форму и его труды)
    Спасибо Дим большое что помог и пояснил изи как ее поставить на свой сайт)
    Спасибо что уделил время)
    И человеческое спасибо!!!))))))))
    Успехов в тебе в работе!) Твой портал наполнен важной и актуальной информацией) Это важно и нет воды) Что не скажешь о других)

    Ответить
  • dimadv7

    Не по тегу выбирайте форму а по классу или id вот тут:

    $("form").submit(function () {
    Ответить
  • Саша

    я не прогер)))
    Не по тегу выбирайте форму а по классу или id вот тут:
    $(«form»).submit(function () {
    что именно заменить надо и на что? не подскажите заранее благодарен.

    Ответить
  • dimadv7

    form — это тег, html — это не язык программирования, а разметка. Нужно заменить тег форм, на класс формы, или, если форма это одна на странице, то можно использовать id

    Ответить
  • Игорь

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

    Ответить
  • dimadv7

    Ну так есть же отдельная таблица стилей для формы. А сообщение выводится в тег с классом .msgs

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

    Поднимите

    <p class="msgs"></p>

    выше чем

    <form id="firstForm" class="form" autocomplete="off">  
    Ответить
  • Виктор

    Здравствйте. Пробую внести правку в файлы темы — толку ноль.
    Опишите по подробней, где необходимо внести правку и каких файлов WordPress, чтоб все заработало. Заранее спасибо

    Ответить
  • dimadv7

    Ставлю на WordPress — все работает. Опишите поподробнее на каком этапе появляется ошибка, ее код, текст и тогда можно будет подумать в чем ваша проблема

    Ответить
  • Виктор

    WordPress 4 https://ru.wordpress.org/themes/marla/
    Правлю файлы: header.php — добавляю ,
    и сам файл страницы «Обратный звонок» — pages_loc.php — добавляю:

    <?php
    /**
    
    Template Name: Обратный звонок
    
     */
    
    ?>
    
    <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="firstForm" 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" tabindex="0" />
              <label for="username">
                <span data-text="Введите ваше имя">Введите ваше имя</span>
              </label>
            </fieldset>
     
            <fieldset class="form-fieldset ui-input __second">
              <input name="uemail" type="email" id="email" tabindex="0" />
              <label for="email">
                <span data-text="Введите ваш e-mail">Введите ваш e-mail</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"></p>
          </form>
        </div>
      </div>

    Статья написана как «для программиста PHP», а хотелось — для пользователя:
    Скачиваем архив, расспаковываем тудато, выставляем права(если нужно), находим файл в теме ворпресса и редактируем. так же создаем новый файл с тем-то и тем-то и добавляем/прописываем то-то то-то.

    Ответить
  • dimadv7

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

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

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

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

    Причем рядом — на него нажимается и все работает.
    А на див — нет.

    Почему так может быть и как можно обойти?
    Див — это пока принципиально.

    Ответить
  • Xand

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

    Ответить
  • Xand

    Простите великодушно, ложная тревога, — все работает.
    Автору — поклон и теплые слова!

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

    Приветствую.
    В коде js ошибка на этапе проверки успешности formNm.serialize().
    Даже если удалить код, выполняющийся тут:

    error: function (jqXHR, text, error) {...}

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

    Ответить
  • dimadv7

    Здравствуйте, все верно ведь не о той ошибке речь)

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

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

    Ответить
  • dimadv7

    Ну посмотри на код же))

    success: function (data) {

    В случае успешного запроса к серверу, дальше все обрабатывается в php. А error: — в случae нeудaчнoгo зaвeршeния зaпрoсa к сeрвeру. Можем еще показать освет сервера, а не только ошибку — так:

    alert(jqXHR.status);

    По поводу пустого поля — я тоже сделал, сегодня обновлю.

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

    Здравствуйте! У меня на сайте данная форма конфликтует с другой.

    Если я меняю привязку по id формы на:

    $("secondForm").submit(function ()

    при этом конфликт как бы устраняется, но при этом форма не работает: в адресной строке появляется

    http://url.com/?uname=dghdhd&uphone=456456&formInfo=

    и не отправляется письмо.

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

    Отбой, сам разобрался! Надо было писать так:

    $("#secondForm").submit(function ()
    Ответить
  • dimadv7

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

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

    Доброго времени суток. Скинул папку modalform в корень, сделал кнопку


    Позвоните мне!

    Ниже скинул остальную часть кода из примера, подключил скрипы, css стили, но при нажатии этой самой кнопки не происходит ничего вообще. В чём может быть дело?

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

    Не получается показать код кнопки целиком -_-. В общем, data-remodal-target=»firstModal», остальное не суть важно)

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

    Проблема оказалась в порядке подключения js скриптов.

    Ответить
  • аксинья

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

    Ответить
  • dimadv7

    Попробуйте скачать исходник и заменит файл mail.php

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

    Классная форма! Встроил в сайт без проблем, только вот не пойму, как добавить нее поле для сообщения, который textarea?

    Ответить
  • 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.

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

    Дмитрий.

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

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

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

    какой id нужно прописывать для forminfo вот в этой строке?

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

    какой id нужно прописывать для forminfo вот в этой строке?

    <input name="forminfo" type="text" id="?" required tabindex="0"/>
    Ответить
  • dimadv7

    Да любой!

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

    Попробовал так и это поле не приходит (имя, телефон, mail приходят нормально). Или в обработчике еще нужно что то добавлять?

     <input name="formInfo" type="text" id="Info" tabindex="0" />
            <label for="Info">
    Ответить
  • dimadv7

    ID вообще там не нужен, в принципе. Поле formInfo заполняется, путем нажатия на кнопку c классом linkButton, у которой прописан title c нужным нам текстом для formInfo

    Ответить
  • dimadv7

    Либо, нужно самому прописать value у поля с formInfo

    Ответить
  • Ararat06

    Добрый день!

    Отличная статья, большое спасибо! реализовал на своем сайте.

    Однако недавно перестала работать эта функция:

    Поле formInfo заполняется, путем нажатия на кнопку c классом linkButton, у которой прописан title c нужным нам текстом для formInfo

    Подскажите, куда копать???

    Ответить
  • Ararat06

    Не работает именно скрипт подстановки

    Ответить
  • Ararat06

    Вопрос снят, разобрался.

    Скрипт подстановки должен стоять сразу после

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    Ответить
  • Владимир

    Добрый день! Не могу победить этот скрипт подстановки! Не работает и все((

    сама кнопка:

    Заказать

    и скрипт:

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

    Сама форма работает отлично, а вот скрипт подстановки нет

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

    сама кнопка:

    <div class="btn-box">
    <button class="button linkButton wow bounce" data-remodal-target="firstModal" type="button" title="Кнопка главной страницы">Заказать</button>
    </div>
    
    Ответить
  • Владимир

    и скрипт:
    [html]

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

    Ответить
  • dimadv7

    Должно работать, ищите ошибку в консоли.

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

    Здравствуйте!
    Спасибо большое за форму, всё работает отлично! На ПК и на планшете всё шикарно, а вот когда захожу с телефона (айфон) происходит косяк.
    У меня кнопки на формы рассположены, вверх, по середине и в низу лейдинга.
    Так вот, если открыть форму внизу странички, всё шикарно, если в середине, то съезжает курсор с полей, т.е. я пишу имя, а курсор не в поле, а ниже и из-за этого нельзя нажать но другое поле, приходиться убирать клавиатуру.

    Ответить
  • dimadv7

    Здравствуйте, когда писал статью, не тестировал на ios в safari, но проблема действительно существует и мне тоже удалось обнаружить ее после того, как вы сообщили об этом. Как оказалось, проблема распространенная как минимум с 11 версии ios Вот тут описывают, что подали заявку в Apple, но она открыта еще с версии 11.0.1 и до сих пор.

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

    Ответить
  • Юрий

    Здравствуйте! Подскажите как сделать, чтобы на почту приходило письмо, где «тема» стояла та, которую добавил её заполняющий (я добавил дополнительную колонку «тема письма»)

    Ответить
  • dimadv7

    Вот тут:

    $subject = "$formInfo";
    

    Вместо $formInfo, передать данные из вашего поля.

    Ответить
  • Федор

    Кому будет интересно куда дописать клас самозакрытия)
    1. корректируем mail.php добавив в него id в сообщении про успешную отправку.

     echo '<p class="success" id="suc_msg">...;

    2. form.js

    success: function (data) {
                  // Вывод сообщения об успешной отправке
                  message.html(data);
                  formTitle.css("display","none");
                  setTimeout(function(){
                    //$(formNm).css("display","block");
                    $('.formTitle').css("display","block");
    				
    				if ( $("#suc_msg").hasClass("success") ) {
    					$('.remodal-close').click();
    				}
                    $('.msgs').html('');
                    $('input').not(':input[type=submit], :input[type=hidden]').val('');
    				
    				
                  }, 3000); 
    Ответить
  • Tiraz

    Пожалуйста подскажите как очищать «textarea»
    Куда вписать $('textarea').val(»);
    Зараннее спасибо.

    Ответить
  • Tiraz

    Сам спросил, сам ответил.

                    
    $('input').not(':input[type=submit], :input[type=hidden]').val('');
    $('form textarea').val('');
    
    Ответить
  • Tiraz

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

    Ответить
  • dimadv7

    Использовать formdata нужно, а не serialize, тогда будет возможность отправлять файлы

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

    Добрый день! Можете подсказать, у меня не приходят на почту письма в которых содержится +, ( ) — это я имею в виду, когда пользователь вводит в после «Телефон». Пишет: успешно отправлено, а письмо вообще не приходит.
    А, когда просто цифры, все нормально. Проверку в html убирал: [required pattern]

    Буду благодарен за ответ

    Ответить
  • dimadv7

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

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

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

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

    Ответить
  • dimadv7

    Это же статья о контактной форме без перезагрузки страницы. Со страницами благодарности другой подход. Есть соответствующие на блоге:
    Вот: https://smartlanding.biz/kontaktnaya-forma-s-chekboksami.html
    Вот: https://smartlanding.biz/sozdanie-formy-obratnoj-svyazi.html

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

    Большое спасибо за ответ, посмотрю

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

    Здравствуйте, я использую SSL сертификат на сервере и видимо связи с этим скрипт просто не исполняется? загрузил ваш php файл на хостинг и открыл его http:// — скрипт заработал. Есть идеи?

    Ответить
  • dimadv7

    Здравствуйте. Я не понял вас, вы загрузили скрипт на сайт, где не установлен ssl сертификат и скрипт работает, а когда загружаете на сайт с ssl сертификатом, то скрипт не работает?

    Ответить
  • Евгений

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

    Ответить
  • Вилен

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

    Ответить
  • dimadv7

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

    Ответить
  • Егор

    Добрый день! Такая ситуация, нам одной странице две формы с разными обработчиками php. В файле form.js добавил функцию с новым id
    ( $(document).ready(function () {
    $(«#serv»).submit(function () { …)
    и прописал путь к другому php. А обработка происходит на mail.php
    Подскажи пожалуйста
    1) Как определяется форма в обработчике js
    2) Как сделать что бы обработка проходила на разных php

    Ответить
  • dimadv7

    Добрый день, вот тут:

    $("form").submit(function () {
    

    вместо $(«form») указываете id или класс формы, которую нужно обработать, и должно работать.

    Ответить
  • Егор

    поменял, заработало. появилось другое приходят сообщения с двух обработчиков mail.php и mail2.php

    Ответить
  • dimadv7

    Если привязывались к id формы и он разный у 2 форм, то должен только 1 срабатывать.

    Ответить
  • Данид

    не работает ваша отправка сообщений на gmail и прочее

    Ответить
  • Коля

    Данид, у всех работает, у тебя — нет. Делай вывод!

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

    Уважаемый Дмитрий (dimadv7). Спасибо Вам за труд и за то, что делитесь опытом. Попытался на базе Вашей формы сделать отправку файлов. В форму добавил поле

    	  <fieldset class="form-fieldset ui-input __third">
    	    <label for="file">
              <span  data-text="Выберите файл:">Выберите файл:</span>
            </label>
          <input name="file" type="file" id="userFile" tabindex="0" />
          </fieldset>

    В тэг добавил enctype=»multipart/form-data» В файл mail.php добавил

    $filepath = $_FILES["file"]["tmp_name"];
            $filename = $_FILES["file"]["name"];

    и т.д. В form.js меняю serialize() на FormData()

                url: "modalform/mail.php",
                data: formNm.FormData(),

    В итоге, ничего не отправляется. Добавляю в тэг action с указанием обработчика

    <form action="modalform/mail.php" id="firstForm" class="form"  method="post" autocomplete="off" enctype="multipart/form-data">

    и тогда файл и сообщение отправляются. Все ОК! Только сообщение об успешной отправке выводится в открывшемся окне mail.php, на который указал action , а не в окне remodal, как хотелось бы! Пробовал явно ставить класс formfile и id= firstForm

     $("#firstForm").submit(function ()... или  $("#formfile").submit(function ()...

    , чтобы избежать action — не работает. Подскажите, пожалуйста как решить эту проблему(вывода сообщения в модальное окно) или подскажите, что я делаю не так.

    Ответить
  • dimadv7

    Здравствуйте. Все вы правильно делаете, скорее всего ошибка где-то в обработке результата, который вам formdata возвращает:
    Вот пример функции, которую я использовал в SmartLid

           sendMail: function (formid) {
                var formId = "#" + formid;
                var fd = new FormData(document.querySelector(formId));
                $.ajax({
                    url: "./smartlid/php/smartlid.php",
                    type: "POST",
                    data: fd,
                    processData: false,
                    contentType: false,
                    beforeSend: function () {
    
                        $(formId).find('.smartlid__preloader').css('display', 'block');
                        $(formId).find('.smartlid__default-msgs').css('display', 'none');
                        $(formId).find('.smartlid__form-button').prop('disabled', true);
                        $(formId).find('.smartlid__respond-msgs').html('Отправка письма');
                    },
                    success: function (data) {
                        $(formId).find('.smartlid__preloader').css('display', 'none');
                        switch (data) {
                            case 'attantion':
                                $(formId).find('.smartlid__respond-msgs').html('').append(defaults.attantion);
                                break;
                            case 'successmsgs':
                                $(formId).find('.smartlid__respond-msgs').html('').append(defaults.successmsgs);
                                break;
                            case 'failmsgs':
                                $(formId).find('.smartlid__respond-msgs').html('').append(defaults.failmsgs);
                                break;
                            case 'failfile':
                                $(formId).find('.smartlid__respond-msgs').html('').append(defaults.failfile);
                                break;
                        }
    
                        setTimeout(() => {
                            $(formId).find('.smartlid__default-msgs').css('display', 'block');
                            $(formId).find('.smartlid__respond-msgs').html('');
                            $(formId).find('.smartlid__form-button').prop("disabled", false);
    
                        }, 4000);
    
                    },
                    complete: function (data) {
                        if (data.responseText == 'successmsgs') {
                            $(formId).find($('input').not(':input[type=hidden]')).val('');
                            $(formId).find($('textarea').val(''));
                        }
                        defaults.counter();
                    },
    
                });
            },
    

    Попробуйте по аналогии сделать и обратите внимание на:

    var fd = new FormData(document.querySelector(formId));
                $.ajax({
                    url: "./smartlid/php/smartlid.php",
                    type: "POST",
                    data: fd,
                    processData: false,
                    contentType: false,
    
    Ответить

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

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