Доброго времени суток. Как ваши дела? Сегодня решил разобрать то, как устроена форма обратной связи, работающая без перезагрузки страницы. То есть это такая контактная форма, после заполнения и отправки которой не осуществляется переход на другую страницу.
Если у вас нет необходимости в реализации данного эффекта, то вы можете создать обычную контактную форму и отправить пользователя на страницу благодарности. Но для некоторых лендинг пейдж - это жизненно необходимый элемент. Давайте приступим…
Отправка данных формы без перезагрузки страницы
Будем реализовывать такую структуру:
После отправки сообщения, в верхнем поле текст будет меняться на заданный. Думаю, с этим понятно. Продолжим...
Первое, что необходимо сделать - это подключить библиотеку jquery. Я не буду больше писать, как это делать. Думаю, все, кто хоть немного разбираются в верстке - уже знают, как она подключается. А может запишу внеочередную статью и буду давать ссылку на нее.
Для того, чтобы отправка формы осуществлялась без перезагрузки страницы нам придется воспользоваться технологией ajax. Необходимо между тегами <head></head> подключить следующий скрипт:
<script>
function AjaxFormRequest(result_id,formMain,url) {
jQuery.ajax({
url: url,
type: "POST",
dataType: "html",
data: jQuery("#"+formMain).serialize(),
success: function(response) {
document.getElementById(result_id).innerHTML = response;
},
error: function(response) {
document.getElementById(result_id).innerHTML = "Возникла ошибка при отправке формы. Попробуйте еще раз";
}
});
}
</script>
В этой строке напишите сообщение, которое будет выводиться при неудачной отправке данных формы:
document.getElementById(result_id).innerHTML = "Возникла ошибка при отправке формы. Попробуйте еще раз";
Кроме того, при такой реализации формы, посетителя сайта может смутить то, что его контактные данные остаются видны, после отправки. Для того, чтобы отчистить поля, нужно добавить перед последней закрывающейся скобкой следующие строки:
$(':input','#formMain')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
То есть, теперь должно выглядеть так:
<script>
function AjaxFormRequest(result_id,formMain,url) {
jQuery.ajax({
url: url,
type: "POST",
dataType: "html",
data: jQuery("#"+formMain).serialize(),
success: function(response) {
document.getElementById(result_id).innerHTML = response;
},
error: function(response) {
document.getElementById(result_id).innerHTML = "
Возникла ошибка при отправке формы. Попробуйте еще раз
";
}
});
$(':input','#formMain')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
}
</script>
Это, так сказать, универсальный скрипт, который очистит не только поля форм, но и checkbox и радиокнопки, если таковые присутствуют в вашей форме.
Теперь следует создать совершенно обыкновенную форму, с одной единственной особенностью в input (е), отвечающем за отправку данных формы:
<div class="wrapper">
<div class="form">
<div id="messegeResult">Оставьте ваши контакты и наш консультант свяжется с вами </div>
<form method="post" action="" id="formMain">
<input id="name" type="text" name="name" placeholder="Введите ваше имя" maxlength="30" autocomplete="off" />
<input id="telephone" type="Tel" name="telephone" placeholder="Введите ваш телефон" maxlength="30" autocomplete="off"/>
<input id="button" type="button" value="Заказать обратный звонок" onclick="AjaxFormRequest('messegeResult', 'formMain', 'form.php')"/>
</form>
</div>
</div>
В этой строке нужно указать то сообщение, которое будет выводится до отправки данных формы:
<div id="messegeResult"> Оставьте ваши контакты и наш консультант свяжется с вами </div>
Почти готово, теперь необходимо создать обработчик, для нашей формы. Создаем файл form.php и помещаем в него следующий код:
<?php
if($_POST)
{
$to = "почта@mail.ru"; //куда отправлять письмо
$from = 'почта@mail.ru'; // от кого
$subject = "Проверка почты"; //тема
$message = 'Имя: '.$_POST['name'].'; Телефон: '.$_POST['telephone'].';';
$headers = "Content-type: text/html; charset=UTF-8 \r\n";
$headers .= "From: <почта@mail.ru>\r\n";
$result = mail($to, $subject, $message, $headers);
if ($result){
echo "Cообщение успешно отправленно. Пожалуйста, оставайтесь на связи";
}
}
?>
Здесь пишем сообщение, которое увидит пользователь, после нажатия на кнопку "Заказать обратный звонок":
echo " Cообщение успешно отправленно. Пожалуйста, оставайтесь на связи ";
Не забывайте прописывать доктайп и указывать кодировку UTF-8, а также прописывать свой адрес почты в трех местах.
В принципе - все. Этот "скелет" позволит отправлять данные формы без перезагрузки страницы. Осталось лишь навести красоту, при помощи таблицы стилей. Если вам понравился внешний вид формы, которую на скриншоте в начале статьи, то скачивайте исходник.
Про более совершенную (во всех смыслах) ajax форму, которая работает как в модальном окне, так и без него описано тут
Если вам лень разбираться и самостоятельно делать форму, то рекомендую обратить внимание на конструктор форм обратной связи.
173 комментария
у вас на сервере ,если загрузить исходник, работает форма?
Не знаю, к счастью или нет, но исходники работают
Ну, а теперь поменяйте дизайн и все будет в порядке))) Кончено к счастью. Теперь мы знаем, что с сервером все в порядке)
Здравствуйте! Мой обработчик:
<?php
/* Здесь проверяется существование переменных */
if (isset($_POST['name'])) {$name = $_POST['name']; if ($name == '') unset($name); }
if (isset($_POST['phone'])) {$phone = $_POST['phone']; if ($email == '') unset($email); }
if (isset($_POST['wishes'])) {$wishes = $_POST['wishes']; if ($message == '') unset($message); }
/* Проверяем заполнены ли все поля */
if (isset($name) && isset($email) && isset($message)) {
/* Убираем все лишние пробелы и переносы строк, а также преобразуем все теги HTML в символы */
$name = htmlspecialchars(trim($name));
$phone = htmlspecialchars(trim($phone));
$wishes = htmlspecialchars(trim($wishes));
/* Сюда впишите свою эл. почту */
$address = "xxx@list.ru";
/* А здесь прописывается текст сообщения, \n - перенос строки */
$sub = "Сообщение с моего сайта!!!";
$mes = "Тема: Заказ обратного звонка!\nИмя: $name\nТелефон: $phone\nВаше сообщение: $wishes";
/* Отправка сообщения */
$email='Заказ ';
$verify = mail ($address,$sub,$mes,"Content-type:text/plain; charset = utf-8\r\nFrom:$email");
if ($verify == 'true'){
echo "Сообщение отправлено!";
}
else {
echo "Сообщение не отправлено!Повторите";
}
}
}
else{
echo "Вы заполнили не все поля!";
}
?>
Хочу использовать $verify вместо $result .
Можно ли в или где реализовать третий вариант результата заполнения формы? Я - чайник...
Виноват, в первых 3-х строчках имена одинаковые:
"if (isset($_POST['name'])) {$name = $_POST['name']; if ($name == '') unset($name); }
if (isset($_POST['phone'])) {$phone = $_POST['phone']; if ($phone == '') unset($phone); }
if (isset($_POST['wishes'])) {$wishes = $_POST['wishes']; if ($wishes == '') unset($wishes); }
Здравствуйте, Дмитрий! Извините, что намусорил... Пытаюсь запустить две формы на странице...не подскажете, а в Head надо что вносить? СПАСИБО!!!
Нет, нужно только менять id у форм, а так делать все точно так-же
Прекрасная форма! Работает и при размещении полей в таблице, и выводит изображение о состоянии, если заменить картинкой и вместо
if ($result){
echo "Cообщение успешно отправлено"; }
поставить картинки, например
($result){
echo ""; }
В кавычках типа img src='_mod_files/images/zapolnite.png'
Если используете несколько форм на странице, то для очистки полей формы после отправки предпоследние 5 строк скрипта из надо повторить со своим id формы
Привет, скажи а как можно скопировать код, не получается?
Так есть же исходник, вроде бы к каждой статье, который можно скачать и посмотреть как работает. А вообще ладно, сейчас сделаю, чтобы можно было все копировать.
Супер Спасибо! Сайт классный с массой полезной информации! Я разобрался, можно было скачать исходник и подсветить исходный код в файле index, от туда можно скопировать, но с сайта намного удобнее, отдельное спасибо!
Помогите, пожалуйста, не могу вставить 2 формы на одну страницу, id различные.
Было бы хорошо если прикрутили бы и проверку формы, и еще антиспам. Без проверки она и пустую форму отправляет
Подскажите в чем ошибка, как только не пробовал, никак не работает. Вот один из вариантов
Как сюда вставить код? Он удаляется из комментов...
Вставить код можно так [ html ] код [ /html ] - без пробелов в квадратных скобках. Но форма работает, скачайте исходник и просто замените почту. Убедитесь, что все работает. А потом уже вносите правки)
В том то и проблема что все то что есть и невкакую не работает. И изменения которые описаны в комментах пробовал ничего не помогает. Подскажите плиз где ошибка.
Тут только почту поставил, больше нигде ничего не менял.
Сюда код не получается вставить и так как вы описали и так тоже не вставляется
Должно работать.
Как тестируете, что не работает? Какая ошибка вываливается?
Здравствуйте! Спасибо за полезную статью, все что вы описали - работает.
Не могли бы вы мне помочь с кодом отправки данной формы в админку WordPress, для модерации комментариев. А то на почту отправляет, а в админку нет.
dimadv7, СПАСИБО - все прекрасно работает! Но не подскажете: Нашел внешний генератор popup, вставляется на сайт, ес-но, через скрипт... По умолчанию у той формы обработка всякими Гетреспонсами, а мне хочется использовать то, что у меня уже есть. Короче, как правильно прописать в теле формы полный адрес на form. php , который у нас в корневой папке? Или "это так не работает"?... СПАСИБО !!!
Здравствуйте, спасибо. Не совсем понял, в чем проблема, но путь прописать полный пробовали? От корня сайта то есть
DIMADV7, в том то и дело, что у меня, виноват, "знаний не хватает"...чтобы прописать полный путь к form php в коде страницы... Обращение в поддержку того сервиса успеха не имело:
Ajax Form Request (result_id,formMain,url); //you have to enter the correct parameters - это всё, что мне ответили...(пробелы сам наставил,чтобы не стерлось при отправке поста) Как правильно указать здесь полный url ? Файл php лежит в корневой папке сайта. СПАСИБО!
Я не совсем, все же, понимаю, что вы хотите сделать. Возьмите просто исходник, проверьте, работает ли он у вас на сайте. Ничего не меняйте, кроме почты. Когда заработает, пытайтесь вносить правки. И можете подробнее описать потом, что вы пытаетесь сделать? Для того, чтобы вставить код, нужно в квадратных скобках написать [ php ] код [ /php ], только без пробелов в скобках.
onclick="AjaxFormRequest('messegeResult_popup', 'formMain_popup', 'http://mysite/form.php')" не запускает...
dimadv7, спасибо за внимание. Постараюсь понять, что вы написали про [ php ] код [ /php ].
Моя проблемка: у меня на сайте стоит ваша форма и прекрасно работает. Но хорошего много не бывает, поэтому нашел удобный генератор попапов, в форму которого можно вставить свои атрибуты/имена формы, но... упс...- не работает так... А ооочень хочется, чтобы не привязываться к платным сервисами
Сгенерированный дизайн формы ставится на страницу
7 пробелов сам поставил, чтобы код не стерся
popup - это всплывающее окно, не пойму как оно мешает подключить форму. Чтобы вставить код вот так:
Нужно использовать такую конструкцию [ php ] код [ /php ], только пробел в скобках не ставить.
Если нужна форма в модальном окне, попробуйте эту
Если пытаетесь переделать свою, то не достаточно просто скрипт прописать, нужно следить за атрибутами name в форме. Нужно в обработчике брать информацию из соответствующих полей. То есть, если у вас есть поле с name="email", то в обработчике:
Кроме того, скрипт привязан к id формы (formMain), если у вас другой, то замените все formMain на свой.
Дмитрий, спасибо. Вдруг выкручусь, если мозгов хватит: попробую проверить скрипт src=' __www.leadsleap.com/widgetxgen/js.js?c=2915&u=yesss ... в части атрибутов формы Если найду причину, просто залью исправленный файл себе на сайт.
А подключить данную форму можно через include или iframe все-таки!?
Не понял вопрос, зачем вообще iframe?? Нужно открыть исходный код, и вставить форму...
Я все-таки подключил так:
создал папку, например callback туда загрузил все файлы и подключил
Скрипт-то работает! В избранное полубасу!! :))))
Еще сделал такую штуку, типа всплывающего окна:
<a href="javascript:void(0)" onClick="javascript:window.open('путь_к_файлу_index.html', 'Имя_окна', 'width=400, height=480, status=no, toolbar=no, menubar=no, left=40%, top=20%, scrollbars=no, resizable=no');">Обратный звонок</a>и прикольненько так получилось! :)
О.о
странно... пробовал на бесплатном хостинге - работает как часы. На платный хостинг поставил - пишет сообщение об ошибке отправки формы :(
Всем большой привет. И большая просьба!!
Сколько уже форм обратной связи не пробовал, ни одна не пашет.
Опять же? скачиваю на данный странице готовый код, вставляю, а он ни пашет.
__http://vector136.ru/hren/
Прошу помогите!!! Желаю всем добра и много гигов счастья!!!!
Хостинг не бесплатный, не тестовый период? Попробуй почту у хостера завести, иногда, в качестве борьбы со спамом, можно только на нее письма отправлять.
Пожалуйста, скажите как сделать защиту формы?
Я в пхп не силён совсем...
Кол-во символов не самый лучший вариант, т.к. в моём случае отправляемый текст может быть больше 30 символов
Вот тут современная статья, эту обновить нужно как-нибудь. Пока руки не доходят.
Исходные коды подробно прокомментированы, поэтому что либо еще тут писать смысла нет. Остается только выложить исходники вот они . Если сей код на сервер залить, то форма обратной связи заработает? Будут ли приходить мне на ящик уведомления?
Добрый день.
У Вас маленькая неувязочка:
$(':input','#formMain') .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected');Находится внутри функции, но форму Вы ищете не по переданному параметру, а на прямую указывая id.
И этот способ затирает стили о_О
Пардон, затирает автозаполнение
класм
А можно в форме сделать отправку на 2 почты или даже 3?
Здравствуйте! Сделала все в точности как вы написали, шаг за шагом - то кнопка отправки сообщения не работает!
Здравствуйте, хм, а что в консоли? Есть ошибки? И попробуйте исходник загрузить на свой сервер. Работает ли у вас он?
помогите мне с формой, не понимаю что и где должно вставляться. а то письма на приходят на почту. на опен сервере есть в лого что почта работает на реальном хосте нет
Реальный хост не бесплатный? не тестовый период? Хостер позволяет отправлять письма на бесплатные почтовые ящики и ящики которые созданы не специально для домена? То есть не вида info@sitname.ru. Очень часто можно отправлять письма только на почтовый адрес привязанный к домену.
Не знаю, что не так. Обычная форма с вашего сайта встала "на ура", а вот эта без перезагрузки что то капризничает. Ничего не менял, ставлю на тот же эксперимент Альпы домен - не отправляет письма и всё тут...
Добрый день, приходит пустое письмо((
Вот так: Имя: ; Телефон: ; Email: ; Сообщение: ;
Здравствуйте. Значит атрибут name у полей, не соответствует тому, который принимаете в обработчике.
Все скопировал.
В итоге Cannot set property 'innerHTML' of null
Подскажите пожалуйста, в чем проблема?
Скорее всего в момент исполнение скрипта, документ еще не загрузился, проверьте порядок подключения, чтобы было как в статье.
Здравствуйте Дмитрий! С удовольствием читаю все Ваши статьи. Они отличаются конкретикой, лаконичностью, краткостью и в то же время, понятливостью (если можно так выразиться).
У меня такой вопрос: как прикрутить данную форму на сайте через модальное окно?
Есть ли такая возможность?
Заранее спасибо.
С ув. Максим
Здравствуйте, спасибо большое. Да есть же форма подобная, но и с модальным окном. Вот тут. Но, думаю, и эту можно, а в чем собственно сложность? Можно как при помощи плагина какого-нибудь для модального окна. Но, думаю, в 2018 - это преступление подключать какой-то из плагинов. Просто делаем див, помещаем туда форму, скрываем его в css, а потом при клике на кнопку доавляем класс скрытом диву, и добавляем новому классу в css видимость.
Или просто менять видимость элемента при клике на кнопку:
Показать и скрыть элемент при клике можно так:
$('.toogle-element').on('click', function() { $(".toogled-element").fadeToggle(); }); // где toogle-element - элемент по которому кликаем, toogled-element - элемент который нужно показать или скрыть