Smartlanding

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

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

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

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

Примечание! Я не буду подробно описывать каждое действие, а предлагаю вам готовый вариант в исходнике. Если возникнут вопросы — пишите в комментариях. Будем разбираться :)

Ajax форма обратной связи

Сегодня начнем не с jQuery, а с верстки кнопки и формы. Все скрипты подключим в конце страницы.

Кнопка, по нажатию на которую будет открываться модальное окно:

<a class="mainButton" href="#modal">Оставить заявку</a>

Класс можете задать любой, а вот в href напишите #modal — это будет id у контейнера с затенением и контактной формой.

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


<div class="remodal" data-remodal-id="modal" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc">

<div class="remodalBorder">

<img src="img/sendico.png">

  <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>

<form id="form">

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

        <input type="text" class="putName" name="name" placeholder="Ваше ваше имя" required>
        <input name="phone" type="tel" class="putPhone" placeholder="Введите номер телефона" required>
        <input type="submit" name="submit" class="btn" value="ОТПРАВИТЬ">
        <input type="hidden" name="formData" value="Заявка с сайта">

<a style="font-size:12px; text-align:center; color:rgba(255, 255, 255, .3);" href="#">Хочу такую форму на свой сайт</a>

    </form>

</div>

</div>

Добавив стили, выглядеть это стало так:

простая форма обратной связи на ajax
Для создания модального окна, использовалась библиотека Remodal. Это набор из css и js файлов, как раз для создания анимированных модальных окон. Можете скачать по ссылке или уже с моими правками в конце статьи.

Между тегами head подключаем стили:

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

А перед закрывающимся тегом body — добавляем скрипты:

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

Script.js — это скрипт для обработки формы. Тот самый Ajax, который позволяет нам осуществить всю процедуру без перезагрузки страницы:

$(document).ready(function () {
 $("form").submit(function () {
 // Получение ID формы
 var formID = $(this).attr('id');
 // Добавление решётки к имени ID
 var formNm = $('#' + formID);
 $.ajax({
 type: "POST",
 url: 'mail.php',
 data: formNm.serialize(),
 success: function (data) {
 // Вывод текста результата отправки
 $(formNm).html(data);
 },
 error: function (jqXHR, text, error) {
 // Вывод текста ошибки отправки
 $(formNm).html(error);
 }
 });
 return false;
 });
});

Не буду приводить исходный код css и js из файлов, отвечающих за модальное окно и форму, так как они достаточно объемы. Если что, смотрите в исходнике. А вот php обработчик во многом стандартный (если можно так сказать):

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (isset($_POST['name'])) {$name = $_POST['name'];}
    if (isset($_POST['phone'])) {$phone = $_POST['phone'];}
    // if (isset($_POST['email'])) {$email = $_POST['email'];}
    if (isset($_POST['formData'])) {$formData = $_POST['formData'];}

    $to = "site@sitename.com"; /*Укажите адрес, га который должно приходить письмо*/
    $sendfrom   = "support@sitename.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";
    $subject = "$formData";
    $message = "$formData
 <b>Имя пославшего:</b> $name
<b>Телефон:</b> $phone";
    $send = mail ($to, $subject, $message, $headers);
    if ($send == 'true')
    {
    echo '<center>

Спасибо за отправку вашего сообщения!

</center>';
    }
    else
    {
    echo '<center>

<b>Ошибка. Сообщение не отправлено!</b>

</center>';
    }
} else {
    http_response_code(403);
    echo "Попробуйте еще раз";
}?>

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

Вот такая ajax форма получилась. Извините, что не пытался объяснить подробно, как делался каждый элемент. Просто хотелось дать готовый результат, а описывать все анимации, появления — нет никакого смысла. Качайте исходник и внедряйте на свой сайт. А на сегодня — все. Всем удачи!


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

Ребята, настоятельно прошу тестировать форму на реальном или виртуальном сервере (хостинге). Убедитесь пожалуйста, что ваш сервер поддерживает php, у вас платный тариф и не тестовый период.  В противном случае, в 90% случаев форма работать не будет.

 

Не ждите письма у себя в почтовом ящике, если вы просто открыли индексный файл в браузере и нажали кнопку «Отправить». Php — это серверный язык!

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

Обновленная версия статьи находится тут

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

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

  • Влад

    Здравствуйте, Дмитрий.
    Очень понравилась ваша форма и решил адаптировать ее под свои нужды. Мне необходимо привязать эту форму к любой странице, а не как сейчас фома выводится на определенной html странице. К примеру я подключил вашу форму к CMS. Стили подключил в хедер до тега , скрипты в футер. Вывод кнопки сделал в статье CMS. Сама форма работает, но при нажатии на кнопку вызывающей форму меня перекидывает на главную страницу сайта, так как в коде для этой кнопки указан путь (href) — #modal. Не могли бы вы подсказать как исправить вашу форму так, чтобы при ее появлении меня не кидало на главную, то есть чтобы я оставался на текущей странице.
    И еще хотел узнать если мне нужно выводить две формы на одной странице. То мне необходимо добавить в код саму форму html(другую), обработчик mail.php для нее и добавить код в script.js?
    Спасибо.

    Ответить
  • dimadv7

    Здравствуйте, если на странице есть id=»modal», то при клике на ссылку с #modal, переход должен осуществляться туда. Что-то не так делаете. А насчет двух форм, то можете сделать и так, главное в айдишниках не запутаться.

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

    Все отлично, но как обычно есть одно маленькое но, после удачной отправки , сообщение о удачной отправки почты в неправильной кодировке? Кодировку файла mail.php менял но все тоже самое!

    Ответить
  • dimadv7

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

    Ответить
  • Роман

    Доброго времени суток. Очень понравилась форма, но… есть пара вопросов:
    имею такую кнопку в шаблоне :

    <a href="#" rel="nofollow">more</a>

    ( к ней хочу подключить форму),
    так же есть файл script.js (Ваш нужно дописать в дефолтный?) и index.html (здесь вообще мало понятно, как это все совместить), и внедрить Вашу замечательную форму?
    Я немного новичек, пытаюсь сам разобраться.
    Буду признателен за подсказку.

    Ответить
  • dimadv7

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

    Ответить
  • Шухер

    1. Не получается сделать две формы на одной странице. Вторая форма после нажатия сабмит выводит окно первого.
    2. Чтобы вы наглядно посмотрели, как вам отправить переделанные ваши исходники?

    Ответить
  • dimadv7

    Просто у форм должен быть разный id. Кроме того, использование двух и более одинаковых id на странице запрещено спецификацией.

    Ответить
  • Шухер

    Как это сделать?

    Ответить
  • Шухер

    И нужно ли редактировать для второй формы файлы яваскрипт?
    Для второй формы скопировал файлы яваскрипт в новую папку и в файле скрипт изменил mail.php на mail2.php. Что нужно еще в скрипте менять?

    Ответить
  • Катя

    Ну вам же сказали, id менять в форме и в скрипте. Если формы одинаковые, то создавать второй обработчик — не имеет смысла. То есть mail2.php — не нужен. Все, что нужно поменять id, если не редактировать сам скрипт, то да, создавать 2 скрипта.

    Ответить
  • Шухер

    Вторая форма после нажатия сабмит выводит окно первого.
    Ну так как же правильно поменять id в форме и в скрипте?

    Ответить
  • Шухер

    В первой форме при успешной отправке выводит окошко например — Спасибо. Вторая форма отличная от первой выводит тоже самое Спасибо, а должно Пожалуйста. Получается так, что везде срабатывает mail.php, а должен срабатывать отправщик mail2.php

    Ответить
  • dimadv7

    у первой формы id=form, а у второй формы делаем id=form1, при подключении скриптов, просто меняем все form, на form1, если формы одинаковые, обработчик можно не менять

    Ответить
  • Шухер

    Во второй форме поменял id на form2, в скрипте script.js тоже, все по одному, Нашел только две! Вы говорите меняем все form, а сколько их?

    Ответить
  • Шухер

    Пожалуйста сделайте пост на два Ajax форма обратной связи в модальном окне с разными формами на одной странице! Многим бы пригодилось. Спасибо!!!

    Ответить
  • Шухер

    Вместо второй формы установил модуль Обратного звонока от http://www.ext-joom.com/. После нажатия отправить — выводит надпись успешной отправки вашей формы. Не пойму почему срабатывает ваш скрипт. Как отвязать ваш скрипт?

    Ответить
  • Шухер

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

    Ответить
  • dimadv7

    Здравствуй, давай на «ТЫ», не понимаю, что вызвало у тебя столько сложностей… На почту отправил файл с 2 формами.

    Ответить
  • Шухер

    Здравствуй, не получается. Ну вот никак. Что-то со скриптом он срабатывает на все формы, где не надо, а именно mail.php.

    Ответить
  • dimadv7

    id=»form» — нигде больше не используется? У сторонних сервисов тоже?

    Ответить
  • Шухер

    Нет не используется (срабатывает оба отравщика — «твой» и другого разработчика, твой отпращик присылает пустые сообщения с полями имени и телефона и тд, родной отправляет все одекватно, также твой скрипт после успешной отравки выводит свое сообщение поверх родного)! Отправил обратно тебе переделанные формы, где id form и form1, там же mail.php и mail1.php (срабатывает всегда только mail.php), посмотри пожалуйста братец наглядно, может у тебя получится.

    Ответить
  • Шухер

    Мне кажется ваш скрипт срабатывает на все методы post

    Ответить
  • dimadv7

    Ты почту проверял? Там 2 формы и работают корректно. Одна не мешает другой.

    Ответить
  • Шухер

    Мешают друг другу там два отправщика. Срабатывает один. Ты мне прислал две одинаковые формы под один отправщик, такое подходит. Я уже забил на двойную форму. Оставил только одну и установил совсем другую форму от другого разработчика с другими id, php, js с модальным окном или обычной формой, но скрипты от твоей формы срабатывает на другие формы. Полный пипец. Я тут одно и тоже пишу по разному, не знаю как еще объяснить, не ужели недоходчиво объясняю.

    Ответить
  • Шухер

    Ты мне прислал две одинаковые формы под один отправщик, такое не* подходит.

    Ответить
  • Шухер

    На почту тебе отправил, попробуй его, наглядно увидишь проблему.

    Ответить
  • Шухер

    Вот что обнаружил:
    В форме id указал
    В script.js id оставил таким же — $(«form»)
    Итог форма обратной связи в модальном окне все равно работает. В форме , все равно будет все работать также отлично оставив без изменений .
    А если в script.js поменять $(«form») на $(«morf») и также указать в форме или на что нибудь другое то ничего не пашет.
    Люди шарящие помогите!!!!!!!!!!

    Ответить
  • Шухер

    В форме id указал morf
    В script.js id оставил таким же — $(«form»)
    Итог форма обратной связи в модальном окне все равно работает.
    А если в script.js поменять $(«form») на $(«morf») и также указать в форме id morf или на что нибудь другое то ничего не пашет.
    Люди шарящие помогите!!!!!!!!!!

    Ответить
  • dimadv7

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

    Ответить
  • dimadv7

    сейчас выслал, работают 2 формы с разными обработчиками

    Ответить
  • dimadv7

    Просто раньше мы брали не id=»form», а тег form (в скрипте).

    Ответить
  • dimadv7

    Вот смотри, в скрипте мы говорим, возьми тег form

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

    именно тег, не id. А ты сделай так:

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

    Ну и не удивительно, что когда ты менял тут form на morf, то формы переставали работать, так как таких тегов нет. А id в твоем случае ни на что не влиял.

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

    Привет! У меня такой вопрос! после отправки выдает сообщение об успешной отправке! я закрываю окно… еще раз нажимаю на кнопку вызова и вместо формы я вижу опять окно об успешной отправке! как сделать так, чтобы при повторном нажатии вызывалась опять чистая форма

    Ответить
  • Шухер

    Спасибо большое! Дело было не в бобине#!

    Ответить
  • Шухер

    Может для следующих мучеников стоит поправить(#) исходник. Еще раз большое спасибо!!!

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

    Привет! У меня аналогичный вопрос! после отправки выдает сообщение об успешной отправке! я закрываю окно… еще раз нажимаю на кнопку вызова и вместо формы я вижу опять окно об успешной отправке! как сделать так, чтобы при повторном нажатии вызывалась опять чистая форма

    Ответить
  • Роман

    Добрый день!
    Хочу прикрутить к opencart 2.0.
    Подключил все исходники. После всех описанных выше действий #modal кидает на главную.

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

    у меня проблема возникла..другие формы на сайте данные отправляют но не выдают ответа

    Ответить
  • dimadv7

    Я не работал с opencart. Не в курсе как там все устроено, но перекидовать на главную — не должно.

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

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

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

    1. — Зачем?
    2. Можно. Как? Поменять прозрачность на нужную у класса

    .remodal-overlay
    Ответить
  • Римма

    Здравствуйте! Форма просто замечательная! Но у меня тоже возник вопрос, когда я сделала две одинаковые. Как из различать? Например, у меня это заявка в один кружок, а , я прописала им разное value в строчке , но в заголовке всегда value первой.

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

    Если не хотите модифицировать javascript код, то придется подключить его 2 раза, при это нужно изменить:

    $("#айдиформы").submit(function () {

    То есть указывать свой id формы

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

    Спасибо! Это я тоже сделала. Пробовала прописать 2 id через запятую и пробовала продублировать её, заменив id, оба вариант почему-то присылают заголовок от первой формы.

    Ответить
  • dimadv7

    Отправил вам на почту архив с 2 работающими формами)

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

    Спасибо! Я сглупила и не меняла там, где modal и то, что с ним связано, поэтому отправляло с первым заголовком чтобы я не делала, с Вашими всё отлично работает :)

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

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

    Ответить
  • dimadv7

    А как вы уже пробовали? Какие ошибки выскакивают?

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

    Отличный скрипт, спасибо.
    Но есть одна досадная вещь. — «явное указание пути к php-файлу». Вот здесь __http://site-on.net/create/php/6-callback-and-feedback-for-site-joomla
    Приводится пример формы, которая маскирует путь к php -файлу (метод post, в Аяксе url). Сутки копаюсь, но не могу подойти к решению (маскировка php-файла) . Есть ли возможность в ЭТОМ скрипте не указывать явно (для пользователя) путь к php-файлу ?

    Ответить
  • Сергей Смирнов

    Ребят а как сделать так , что бы сия форма не влияла на все стили страницы сайта? Ставлю на главной у меня вся страница меняется в стиль формы.

    вот эти стили ставлю перед хэдом

    Ответить
  • dimadv7

    Она и не должна влиять, проверь классы, чтоб не совпадали. В чем проблема-то?

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

    От чего может быть при отправке вот так
    name=pp&phone=oi&submit=ОТПРАВИТЬ&formData=Обратная+связь#modal

    в адресной строке это появляется ну и форма конечно не отправляется

    Ответить
  • dimadv7

    От того, что GET запрос посылается, а не POST, наверное.

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

    Но я просто скопировал и вставил себе на сайт…
    Не отсылается, просто обновляется страница и передаются данные в строку.

    Ответить
  • dimadv7

    А php вообще работает?

    Ответить
  • Vektor

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

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

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

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

    Здравствуйте . Спасибо за форма ! ) все хорошо встало , письма приходят . Но есть одна загвоздка . когда появляется сообщение от успешной отправки ,мы закрываем окно . Потом нажимаем на кнопку что бы опять вызвать форму . а вместо формы — остается сообщение об успешной отправки . Подскажите как это можно исправить ? Спасибо

    Ответить
  • Катя

    Опять — 25. Зачем, зачем пользователю опять показывать поля, в место того, чтобы сказать,что он уже отправлял форму? Ты рассчитываешь, что этот процесс так понравиться ему и он будет делать это снова и снова? Ну если очень надо то выводи сообщение об успехе или провале в другом месте. Сейчас оно заменяет форму, а ты выводи выше или ниже.

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

    добрый день, письма приходят, но нет текста, просто пишет телефон: имя: а самого текста нет, как исправить?

    Ответить
  • dimadv7

    Привет. Изменения делал какие-нибудь в атрибутах name?

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

    привет, нет, никаких изменений кроме мейла не делал

    Ответить
  • dimadv7

    А другие формы есть на странице? Хотя — это и не важно, должно работать, если ничего не менял. Но все таки, поставь вот тут id своей формы:

    $("#айдиФормы").submit(function () {
    Ответить
  • Артём

    Добрый день. Ничего не происходит при нажатии кнопки оставить заявку. По инструкции и коментам прошелся уже раза 2. Единственная разница в том что у меня привязан jquery 1.9.1 вместо 1.11.2. В чем может быть проблема?

    Ответить
  • dimadv7

    Тестируете на сервере? он не бесплатный? Не тестовый период? Ошибок в консоли нет? PHP вообще отрабатывает?

    Ответить
  • Артём

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

    Ответить
  • Артём

    И причем тут php? Сама форма не появляется.

    Ответить
  • Артём

    Жму на кнопу «заказать». В адресной строке добавляется #modal и ничего не происходит

    Ответить
  • Артём

    Дело было в прокладке XD. А файл лежал в папке js.
    Поправил на js/remodal.min.js Заработало. Вот бы теперь узнать как модифицировать эту форму чтобы можно было делать вложение в письмо

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

    Добрый вечер, Дмитрий. Подскажи, пожалуйста, как сделать чтобы после нажатия кнопки «Отправить» посетителю открывалась новая страница «Спасибо» с расширением .html или .php? В данном варианте сообщение «Спасибо» появляется в том же модальном окне.

    Ответить
  • Руслан

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

    Ответить
  • ITшник

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

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

    +1 к вопросу. Если нашли решение, подскажите

    Ответить
  • Анатолий

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

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

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

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

    А почему игнорируется вопрос о сбросе формы после отправки? это так тяжело? скрипт крутой, но во если доработать сбросом благодарности что бы открылась чистая форма — будет прелесть!

    Ответить
  • Анатолий

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

    Ответить
  • Анатолий

    Денис, прочитай комментарии выше, уже давали ответ, почему не идет сброс

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

    Я извиняюсь, но не могу найти, подскажете где прочитать?

    Ответить
  • dimadv7

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

    Ответить
  • dimadv7

    Ясно, здорово, что удалось исправить, так в чем ошибка то была, если не секрет?)

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

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

    Ответить
  • Анатолий

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

    <a href="stranica.html" rel="nofollow">Политика конфиденциальности</a>

    И да, поправь путь к скрипту , вместо dist, должно быть js

    Ответить
  • Анатолий

    style=»font-size:12px; text-align:center; color:rgba(255, 255, 255, .3);» href=»#»>Хочу такую форму на свой сайт

    Ответить
  • Анатолий

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

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

    Ну это понятно, спасибо, а как сделать эстетично и красиво? как я описал выше, ведь костыли они и в африке костыли

    Ответить
  • Edward

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

    Ответить
  • dimadv7

    Посмотреть в инспекторе какой класс влияет и переопределить его

    Ответить
  • Edward

    Извините за глупый вопрос, я только учусь, а как переопределить класс?

    Ответить
  • dimadv7

    Значить найти тот, который мешает (тот, который встречается 2 раза) и одному из них задать другое имя.

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

    Когда нажимаю на «Отправить» перекидывает на папку со всеми документами сайта. Оставить заявку Что здесь нужно вместо #moda написать,не понимаю.

    Ответить
  • dimadv7

    Не понимаю о чем вы…

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

    Кнопка, по нажатию на которую будет открываться модальное окно:

    1
    a class=»mainButton» href=»#modal»Оставить заявку/a
    Класс можете задать любой, а вот в href напишите #modal — это будет id у контейнера с затенением и контактной формой. Что нужно вставить в #modal?

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

    на написанное сверху забей.У меня проблема вот какая:я все вставил и при нажатии на «отправить» ,вот что http://s017.radikal.ru/i402/1606/83/964094fef0ac.png

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

    После нажатия на Оставить заявку выскакивает ошибся.

    Ответить
  • dimadv7

    Ты же на сервере тестируешь верно? Если да, то похоже, что в php.ini не правильно настроен путь к сайту. Скачай исходник, проверь просто его на сервере. Работает?

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

    Здравствуйте, такой вопрос, форма открывается во всплывающем окне, после отправки я ее очищаю, далее выводится сообщение «Спасибо за вашу заявку», после этого если еще раз попробовать открыть форму то снова выводится сообщение «Спасибо за вашу заявку», хотелось бы чтобы при нажатии открывалась снова чистая форма а не данное сообщение, выше читал комментарии про то что необходимо сменить место вывода сообщения, можно на конкретном примере или коде это показать, заранее спасибо

    Ответить
  • dimadv7

    На следующей неделе сделаю статью, в которой учту эту «проблему», хотя я не понимаю, зачем вам всем по несколько раз получать сообщения от одного пользователя)) Сделаю, чтобы можно было повторно отправлять. Постараюсь объяснить, что имел ввиду, когда говорил о том, что выводить сообщение нужно в другом месте, возможно, сразу покажу, как сделать несколько форм на одной странице, еще рекапчу от гугл подключим, или это уже отдельной статьей…

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

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

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

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

    Ответить
  • Руслан

    ошибка при отправке, использовал только исходники

    Ответить
  • Руслан

    прошу прощения, все работает, была проблема с хостингом с отправкой через php mail

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

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

    Ответить
  • dimadv7

    У меня его уже не осталось, да и форма потеряла актуальность. Свежая версия — тут. Там и несколько форм в примере.

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

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

    Ответить
  • dimadv7

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

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

    Добрый день! Что-то на счёт обнуления формы всё так же глухо. Я так понимаю все горазды только писать, как всё просто. Создал событие onclick c перезагрузкой страницы, но на какие-то доли секунды снова показывается благодарственное окно и только потом идёт полная перезагрузка. Думаю, многие будут благодарны, если кто-то всё же реализует обнуление формы. Спасибо.

    Ответить
  • dimadv7

    Давно сделал форму, в которой все исправлено, а эту пометил как «Устаревшая». Новый вариант — тут. И сделать действительно просто, достаточно разобраться в переменных и получение/записи в тег.

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

    Спасибо за ответ. Я эту форму видел — это абсолютно другая форма, менять и возвращать заголовок, как по мне, совсем не то, чего хотели многие выше писавшие. Намного нагляднее, когда на действие (ввод и отправка данных) появляется действие с возможностью подтверждения (окно благодарности с кнопкой «ок»). Как это примерно и есть сейчас. Но вот проблема только одна — обнуление формы, возвращение ее после нажатия «ок». А так — форма отличная.

    Ответить
  • dimadv7

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

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

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

    Ответить
  • dimadv7

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

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

    Добрый вечер.
    Столкнулся с такой проблемой, на главной странице форма работает у меня ухожу в корень, форма перестаёт работать Not Found при отправке. Возможно проблема с шаблоном(джумла 2.5)
    Помогите, буду очень признателен
    studio-marketing.ru

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

    Решили вопрос? У меня та же беда

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

    Аналогично, не могу сделать 2 формы уже все перепробовал.
    Буду благодарен в помощи.
    Иды меня и тд, все полностью.
    Если у кого-то есть 2 формы на 2 обработчика, буду очень признателен

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

    Добрый день Дима, спасибо за форму. Я новичок, хочу использовать механику формы для модального окна bootstrap3. На сколько реально это реализовать? И с какой стороны подойти?

    Ответить
  • dimadv7

    Да вполне реально. Просто вырезать форму и вставить в модальное окно бутстрапа. Не понял в чем собственно проблема?

    Ответить
  • basseinomskru

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

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

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

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

    Подскажите плизь как прикрутить отправку файла к такой форме
    input type=»file» не работает

    Ответить
  • dimadv7

    используя serialize не получится передать файл, посмотрите в сторону formdata

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

    Здравствуйте.
    Почему то не работает отправка. Посылает на перезагрузку. Дело в расположении mail.php, я так понимаю? Я и в корень его ложил, и указывал полный путь, все равно страница перезагружается. Можете подсказать, в чем может быть подвох?

    Ответить
  • Руслан

    Отличная форма. Так и не смог разобраться как делать 2 формы на одной страницы. Вышлите пожалуйста на почту вариант с 2-мя формами. Новый вариант формы смотрел, он не совсем подходит, нужен именно этот вариант формы. Спасибо

    Ответить
  • Руслан

    Нужна только подстановка Темы письмат (разная тема для каждой формы)

    Ответить
  • Руслан

    Большое спасибо за форму — Разобрался сам

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

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

    Ответить
  • dimadv7

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

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

    А как мне сделать так, чтобы «спасибо» выводилось не вместо формы, а во всплывающем окне? Чтобы форма как была на своем месте, так и оставалась, но чтобы после нажатия «отправить сообщение» прост овсплыло окно «Спасибо» Но не браузерное (alert) , а обычное со стилями.

    Ответить
  • dimadv7

    А как вы уже пробовали? Какая ошибка выскакивала? На каком этапе загвоздка?

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

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

    $("#form , #form-1, #form-2, #form-3, #form-4").submit(function () {
         var formID = $(this).attr('id');
         var formNm = $('#' + formID);
         $.ajax({
             type: "POST",
             url: '/wp-content/themes/el1t-landing/mail.php',
             data: formNm.serialize(),
             success: function (data) {
             $(formNm).html(data);
             },
             error: function (jqXHR, text, error) {
             $(formNm).html(error);
             }
         });
         return false;
         });
    

    У меня сейчас вот такой код стоит, но выводит сообщение «спасибо» вместо полей инпут, то есть между тегами

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

    Добрый день подскажите как закрыть окно remodal автоматически после отправки и показа сообщения Спасибо за заявку!. Использовал скрипт Unimail для формы.
    Вот код

     	<div class="remodalBorder">
    
    		<button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
    
    	<form class="popup-1">
    
    		<div class="success"><span>Спасибо за заявку!</span></div>
    
    		<!-- Hidden Required Fields -->
    		<input type="hidden" name="project_name" value="project_name">
    		<input type="hidden" name="admin_email" value="admin_email">
    		<input type="hidden" name="form_subject" value="Тема">
    		<!-- END Hidden Required Fields -->
    
    		<div class="formhead"><strong>Обратный звонок</strong></div>
    		<p>Оставьте ваши контактные данные.</p>
    
    		<input type="text" name="Имя" placeholder="Ваше имя..." required>
    		<input type="text" name="Телефон" placeholder="Ваш телефон..." required>
    
    			<button class="button button-white">Отправить</button>
    
    
    			
    		</form>
    
    	</div>
    
    </div>

    javascript ( //Popup-1
    $(«form.popup-1»).submit(function() { //Change
    var th = $(this);
    $.ajax({
    type: «POST»,
    url: «mail.php», //Change
    data: th.serialize()
    }).done(function() {
    $(th).find('.success').addClass('active').css(«display», «flex»).hide().fadeIn();
    setTimeout(function() {
    $(th).find('.success').removeClass('active').fadeOut();
    th.trigger(«reset»);
    }, 1000);
    });
    return false;
    }); ) //javascript

    Все работает нормально но после отправки данные в поля сбрасываются и показывается сообщение спасибо, буду благодарен если дополните код js что бы после после показа сообщения спасибо окно remodal закрывалось.
    Ссылка на unimail: __https://github.com/agragregra/uniMail

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

    Помог этот код)

    setTimeout(function() {
    			var inst = $.remodal.lookup[$('[data-remodal-id=modal]').data('remodal')];
    				inst.close();
    			}, 3000);

    Полная версия

     	//Popup-1
    	$("form.popup-1").submit(function() { //Change
    		var th = $(this);
    		$.ajax({
    			type: "POST",
    			url: "mail.php", //Change
    			data: th.serialize()
    		}).done(function() {
    			$(th).find('.success').addClass('active').css("display", "flex").hide().fadeIn();
    			setTimeout(function() {
    				$(th).find('.success').removeClass('active').fadeOut();
    				th.trigger("reset");
    			}, 1000);
    			setTimeout(function() {
    			var inst = $.remodal.lookup[$('[data-remodal-id=modal]').data('remodal')];
    				inst.close();
    			}, 3000);
    		});
    		return false;
    	});
    Ответить
  • dimadv7

    В случае успешной отправки, нужно вызвать модальное окно. То есть тут:

    success: function (data) {
    //вызов
    }
    
    Ответить
  • Александр

    Добрый день. После нажатия отправить выдает ошибку Not Found.что не так)

    Ответить
  • dimadv7

    Пути к файлам неправильно прописаны.

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

    Пути поправил, Спасибо за отправку вашего сообщения!
    Но, письма мне на почту не приходят. Почту проверил, указана верная

    Ответить
  • dimadv7

    Не с mail.ru работаете?

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

    нет, gmail.ru

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

    на yandex то же не шлет

    Ответить
  • dimadv7

    Спам проверяли?

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

    Все проверил. на почту не шлет, 3 ящика уже)

    Ответить
  • dimadv7

    Тестируете на реальном сервере, не тестовый период, не бесплатный?

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

    Реальный сервер с рабочим сайтом.

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

    Заработало, как ни странно само по себе, видимо глюк на стороне хостера)

    Ответить
  • dimadv7

    Отлично)

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

    Добрый день!
    Форма работает, но только со страниц типа site.ru/post.html. Если добавляется категория, например site.ru/category/post.html, то выдается ошибка:
    Warning: require_once(/var/www/u0343288/data/www/acconting-service.ru/libraries/joomla/document/html/renderer/head.php): failed to open stream: No such file or directory in /var/www/u0343288/data/www/acconting-service.ru/templates/carservice/error.php on line 28

    Fatal error: require_once(): Failed opening required '/var/www/u0343288/data/www/acconting-service.ru/libraries/joomla/document/html/renderer/head.php' (include_path='.:') in /var/www/u0343288/data/www/acconting-service.ru/templates/carservice/error.php on line 28

    Ответить
  • dimadv7

    Для CMS есть же соответствующие плагины, которые прекрасно работают с конкретной cms. А у вас путь, видимо, нарушается, задайте его динамически.

    Ответить
  • WahaWaher

    Кому интересно. Универсальный плаг обратной связи https://github.com/WahaWaher/sendmail-js
    Любые поля форм + файлы, авто оформление в таблицу и отправка на почту. jq php phpmailer ajax

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

    Спасибо за отличное решение, несколько перепробовал, но это самое удачное!

    Ответить
  • dimadv7

    И вам спасибо, за отзыв)

    Ответить
  • Вячеслав

    Здраствуйте,, данная форма не плохая действительно. Добавил на сайт и все хорошо работало. Но только как включил протокол https:// оно перестало работать, точнее отправлять форму на почту. А потос переносило данные с формы в адресную строку

    Ответить
  • dimadv7

    Вячеслав, проверял на https, в том числе и на этом блоге, все отлично работает. Сделайте вывод ошибок php, посмотрите что в консоли, нет ли там ошибок?

    Ответить

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

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