1. Главная страница » Компьютеры » Php скрипт обратного звонка

Php скрипт обратного звонка

Автор: | 16.12.2019

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

Как это сделать мы рассмотрим в данном материале.

Как создать несложную форму читайте в статье.

Создаем форму обратного звонка на HTML

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

Пропишем все поля при помощи HTML кода:

Обратите внимание, что мы сразу создаем кнопку “Заказать звонок”. Добавляем “ required” для того, чтобы браузер сделал эти поля обязательными для заполнения. Контейнер div в форме предназначен для вывода сообщений об ошибке.

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

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

Для этого используем jаvascript с библиотекой Jquery. Не забудьте подключить одну из последних библиотек Jquery на страницу с формой, иначе отправка не будет работать.

На первом этапе нужно получить данные из формы и проверить, не пустые ли они.

var name = $(‘input[name=fio]’).val();
var tel = $(‘input[name=tel]’).val();
var otpravka = true;
if(name=="") <
otpravka = false;
>
if(tel =="") <
otpravka = false;
>

Создаем переменную “dannie” для функции асинхронной отправки:

Используем функцию .post. Она позволяет асинхронно, то есть без перезагрузки страницы, отправить любые переменные из формы:

if(otpravka)
<
$.post(‘senda.php’, dannie, function(otvet) <
rezultat = ‘

Мы проверяем значение переменной “otpravka”. Если оно true, тогда запускаем функцию .post. Далее проверяем значения, которые пришли в виде ответа с сервера. Условие “otvet.text” содержит сообщение с сервера. Это или успешная отправка данных или ошибка.

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

На следующем этапе нужно получить и обработать ответ на сервере. Для этого создаем файл “senda.php”.

Проверяем следующим условием, откуда отправлнны данные и каким способом. Если это не асинхронная отправка Jquery, то прекратить работу скрипта и показать сообщение об ошибке:

if(!isset($_SERVER[‘HTTP_X_REQUESTED_WITH’]) AND strtolower($_SERVER[‘HTTP_X_REQUESTED_WITH’]) != ‘xmlhttprequest’) <
$otvet_serv = json_encode(
array(
‘text’ => ‘Возникла ошибка при отправке данных’
));
die($otvet_serv);
>

Мы отправляли асинхронно данные формы обратного звонка при помощи Jquery. Принимаем эти данные следующим PHP кодом:

if(!isset($_POST["polz_name"]) || !isset($_POST["polz_tel"]))
<
$otvet_serv = json_encode(array(‘type’=>’error’, ‘text’ => ‘Заполните форму’));
die($otvet_serv);
>
$user_Name = filter_var($_POST["polz_name"], FILTER_SANITIZE_STRING);
$user_Phone = filter_var($_POST["polz_tel"], FILTER_SANITIZE_STRING);

Сразу же проверяем эти данные на заполнение. Вы ведь не хотите получать пустые данные на Email. Если в условии выше переменные пустые, то отправляется сообщение об ошибке “Заполните форму”.

Когда мы принимаем данные мы сразу проверяем их и отсеиваем специальные символы и тэги при помощи функции filter_var(). Ведь некоторые злоумышленники могут попытаться взломать сайт, используя вашу форму обратного звонка.

Обращаю ваше внимание на то, что функция filter_var() работает в версии PHP 5 и выше.

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

if(strlen($user_Name) ‘Поле Имя слишком короткое или пустое’));
die($otvet_serv);
>
if(!is_numeric($user_Phone))
<
$otvet_serv = json_encode(array(‘text’ => ‘Номер телефона может состоять только из цифр’));
die($otvet_serv);
>

Отправляем данные на почту:

$to_Email = "example@mail.ru";
$subject = ‘Запрос обратного звонка ‘.$_POST["polz_name"];
$message = "Имя: ".$user_Name.". Телефон: ".$user_Phone;
if(!mail($to_Email, $subject, $message, "From: example2@mail.ru
"))
<
$otvet_serv = json_encode(array(‘text’ => ‘Не могу отправить почту! Пожалуйста, проверьте ваши настройки PHP почты.’));
die($otvet_serv);
>else <
$otvet_serv = json_encode(array(‘text’ => ‘Спасибо! ‘.$user_Name .’, ваше сообщение отправлено.’));
die($otvet_serv);
>

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

Пример: «заказать звонок» .

Здесь сделано модальное окно и реализована простая функция php mail.

На HTML страницу добавляем

Создаём файл mail.php, куда вставляем

Я постаралась употребить как можно меньше кода и у меня это получилось. Вам остаётся подогнать форму под свой дизайн.

133 комментария:

Космо Мизраил Горыныч Шаг за шагом — и мы создадим свой блоговый движок хд

Читайте также:  Ck11s браслет артериального давления

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

Советую не делать всё на одном CSS. В целом, тут самые универсальные селекторы, но повесить событие на кнопку всё-таки надо на всякий случай.

Скрыть при щелчке (хтмл атрибут):
onclick="document.getElementBy ;"

Показать:
onclick="document.getElementBy ;" NMitra Движок вряд ли, но визитку сделаем 🙂

Можно, но мне лень заниматься тем, что уже через пару лет неактуально будет. :checked понимают даже мобильные сайты Космо Мизраил Горыныч Наташа, скрипты изучай. А лень — самый страшный порок! Ну, после само- и просто убийства.
Ну и что, что с CSS можно сделать вариант модального окна без скриптов, всё равно это останется на уровне велосипедов, и функционал минимальный.

Ко всем кнопкам вешай свойство cursor: pointer; , так курсор будет меняться при наведении и будет лучше ясно, что это кнопка, а не декорация. Поведенческий фактор х)

А движок блога и просто CMS нетрудно будет сделать =.= придётся немного mySQL изучить, но человеческие мозги — понятие растяжимое.
Давай ты сделаешь техническую начинку, а я сделаю лучшую скриптовую часть админки и виджетов с визуальными редакторами и асинхронностью?) Оформление пополам XD NMitra Конечно, что не могу сделать с помощью CSS, я иду искать в JavaScript. Что не могу в JavaScript — в PHP. Я тогда удивлена, почему зная JavaScript, ты не разбираешься в PHP. Там почти всё аналогично.

Таких движков достаточно 🙂 Да, для конкретного сайта это имеет место быть, а для массы не вижу смысла. Михаил70 Большой код очень. Это проблема для не спецов, вставить такой код. А зачем этот обратный звонок. Не проще ли просто указать номер телефона, а заказать услугу по mailto:, через обратную почтовую связь, на ящик. Я видел множество этих обратных звонков на визитках для бизнеса, они вообще то не работают, то есть проще написать на ящик или просто позвонить по указанному номеру. Но это всего лишь мое мнение. Михаил70 Проще указать mailto: с краткой рекомендацией по поводу вопроса. Клиент напишет и укажет свой номер телефонный, если захочет. NMitra Это для коммерческих сайтов. Человек не очень охотно выдает свои личные данные, а тут всего два поля нужно заполнить. Во-вторых, звонок на сотовый у многих компаний бесплатен. Пусть минимальная, но выгода. Анонимный 123 Анонимный Все работает отлично, но проблема с кодировкой. Русский текст приходит на почту в таком виде: п÷п╬п╩я▄п╥п╬п╡п╟я┌п╣п╩я▄.
На почту яндекса в нормальном виде. NMitra Пришли к такому варианту

$_POST[‘name’],
2 => $_POST[‘tel’],
);
$to = "name@mail.ru";
$subject = "=?utf-8?B?".base64_encode("заказ звонка ".$_SERVER[‘HTTP_REFERER’])."?=";
$headers = "Content-type: text/html; charset=utf-8
";
$message = $znach[2]." ".$znach[1];
mail($to, $subject, $message, $headers);
>
Header("Refresh: 8; URL=".$_SERVER[‘HTTP_REFERER’]);
?>
Анонимный Спасибо большое! Осилил))) Теперь красуется на сайте. Кому интересно, милости прошу ) www.enoantlife.ru
По началу не хотел отображать кнопку ЗАКАЗАТЬ. Вместо неё была тонкая короткая полоска.
Решил так:
Заменил на
Заказать

И еще попутно вопрос. Может кто знает в чем проблема. На моем втором сайте (клоне) эноант.рф этот скрипт не работает. Т.е все как положено появляется, форму заполняю, жму ЗАКАЗАТЬ — сообщение о том что перезвоним появляется. НО письма не долетают. Хостинг один и тот же на обоих сайтах. NMitra Хорошо получилось. В самом простом наверно опечатались, например, свой адрес эл. почты проверьте. Анонимный В том то и дело, что оба сайта являются зеркалами друг друга и хостятся в одном хостинге , зарегистрированы в одном профиле. Я нашел в mail.php строчку, где прописывается ящик получателя. Он остался таким же, как и ящик на который приходят письма с первого сайта. Может дело в том, что домен на русском языке? NMitra Я тестировала на рф домене, было без проволочек. Анонимный Наташа, пожалуйста подскажите. Можно ли на одной странице в трех местах поместить "обратный звонок"?. Вверху в виде кнопки а в двух других местах в виде форм данных. Буду ждать ответа. NMitra Можно. Размещайте несколько заказать звонок NMitra Вместо
#mail:checked + label <
нужно
#mail:checked

И смотреть весь код на странице. Теория
http://shpargalkablog.ru/2011/10/css-selectors.html
http://shpargalkablog.ru/2013/08/checked.html
http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html Анонимный Благодарю Вас.Пошла внедрять. Анонимный Почему то ругается на формат телефона. NMitra Уберите maxlength="11" и pattern="8d<10>" или укажите свой формат
Анонимный Спасибо Анонимный Пользуюсь отличным бесплатным скриптом обратного звонка от http://consultant-web.ru/callme/ Анонимный Здравствуйте, Наталья!
Подскажите, пожалуйста, где создать и куда разместить файл mail.php?
Огромное спасибо за Ваш блог и массу полезной информации.
Татьяна NMitra Здравствуйте, эммм. Даже не знаю как и пояснить. На хостинг, на котором находится сайт, Анонимный Наталья, спасибо за ответ.
Мой блог на гугл блоггер и к личному домену пока не подключен. Но блоггер же не поддерживает php? Будет работать, если файл загрузить на Google Disc?
Извините за большое количество вопросов. Заранее спасибо.
Татьяна NMitra Нет, Blogger не поддерживает PHP. Говорят, что скоро будет похожий гаджет. Tania Fujinaga Спасибо, Наталья! Анонимный А где создавать файл mail.php на сайте не пойму, везде кидаю
NMitra Туда где файл index.php и htaccess Анонимный Большое спасибо за скрипт! Отлично работает на хостинге NMitra Благодарствую за комментарий Марина Доброй ночи Наташа! Спасибо за ваш труд.
Все сделала как описано
Создала файл mail.php — залила его в корневую папку на хостинг
Все отлично открывается и проявлется
НО! Письма на почту ( с указанныи E-mail) Не приходят. Перебрасывает на страницу с надписью "Запрошенный ресурс не доступен"
Подскажите пожалуйста в чем может быть проблема?
Спасибо! NMitra Марина, здравствуйте. Можно узнать адрес вашего сайта? Марина Добрый день!
Наташа, с ( давнего) вашего позволения написала на вашу почту личку.
Очень надеюсь на ответ. Спасибо большое, что как всегда не отказали в помощи. Марина Наташа! Вы гений))))))))))))
Все получилось, добавила по совету driver http://dbmast.ru/
полный адрес mail.php
Огромное Вам Спасибо за помощь, советы и ваш труд.

Читайте также:  Adobe premiere создание проекта

Марина. Марина Добрый день Наташа!
Все проблемы с отправкой и кодировкой — РЕШЕНЫ!
Проблема была у хостинга ( их настойки)
СПАСИБО большое за вашу помощь и ваш труд! Вы делаете неоценимое дело для людей, которые еще не все знают о создании сайтов и всех примыкающих к этому функций!
С Уважением, Марина.
Марина Доброй ночи! Наташа, в письме админу данные из письма (заказать звонок) проявляются вот так
81111111111sa@yandex.ru Администратор ( т е в одну строчку слитно)
Подскажите пожалуйста, как сделать, чтобы данные выводились каждая на новой строке
81111111111
sa@yandex.ru
Администратор
Я искала по учебникам знак пробела в php, но ничего не проходит
Спасибо! NMitra Перенос строки — это

То есть вместо
$znach[2]." ".$znach[1]
нужно
$znach[2]."
".$znach[1] NMitra В php соединение переменных с текстом происходит с помощью точки. То есть можно написать и так
$znach[2]."
ФИО: ".$znach[1] Марина Доброе утро! Спасибо за ответ. Наташа, не проходит
сделала вот так $message = $znach[2]."
".$znach[3]."
".$znach[1];
в письме отобразилось с пробелами, но не на отдельной сточке
sa@yandex.ru 89999999999 Администратор Ирина
В чем может быть ошибка?
И еще
В строчке выдает ошибку, через перевод пишет, что PHP Предупреждение: Не удается изменить информацию в заголовке — заголовки уже прислал (выход начался в / главная / м /
xxxx / xxxxx.ru / public_html / почты / почте. PHP: 1) в / главная / м / xxxx /xxxxx.ru / public_html / почты / mail.php в строке 14
Спасибо! Марина Блин, скрипт не выводится у вас
В строчке после DOCTYPE html (наверное вам понятно про что я говорю) NMitra Код сначала преобразуйте http://shpargalkablog.ru/2010/12/napisat-kod-tekstom.html

Попробуйте вместо "
" использовать

"Не удается изменить информацию в заголовке — заголовки уже прислал" — эх, не понимаю что это и как исправить NMitra
тоже в кавычках "
" Марина Ой Спасибо Наташа.
Про заголовки напишу на почту, может и вам это пригодится.
))))))))))) Еще вопрос.
Хочу добавить доп поле в форму и нужно позицию Название (товара например)
сделала name и ))))) выдало и имя и название одинаково. Подскажите пожалуйста как правильно прописать
в 1 => $_POST[‘name’],

а может у вас ссылочка есть на этот материал ( именно как прописывать позиции )
СПАСИБО.

В скрипте
$znach = array(
1 => $_POST[‘name’],
2 => $_POST[‘tel’],
);
mail("name@yandex.ru", "заказ звонка ".$_SERVER[‘HTTP_REFERER’], $znach[2]." ".$znach[1]); // письмо на свой электронный ящик, измените на свой email
>

$znach = array(
1 => $_POST[‘name’],
2 => $_POST[‘tel’],
3 => $_POST[‘catalog’],
);
mail("name@yandex.ru", "заказ звонка ".$_SERVER[‘HTTP_REFERER’], $znach[2]." ".$znach[1]." ".$znach[3]);
> NMitra По хорошему, форма заказать звонок должна быть как можно проще. В заголовке письма указывается на URL страницы сайта, где человек воспользовался формой. С большой долей вероятности, что ему нужен будет именно этот товар. Марина Я у вас способная ученица)))
было два поля ( до моего сообщения вам) 1 => $_POST[‘name’], 2 => $_POST[‘tel’],
я сделала четыре 1 => $_POST[‘name’], 2 => $_POST[‘Email’], 3 => $_POST[‘tel’], 4 => $_POST[‘name’],
ведь правильно?! )))
Но не знала как прописать там, где name, Email и т д . Как прописывать значения . Вот теперь понятно — catalog
По второму совету, все правильно, именно со страницы нужного ему товара человек и будет нажимать эту ссылку
Я вашу форму немного расширила именно для использования как обратная связь. ВСЕ РАБОТАЕТ! )))
Если б вы знали, СКОЛЬКО я перелопатила информации, чтобы сделать независимую форму обратной связи. Вы ГЕНИЙ!
Минимум скрипта и стилей вашего кода и стильная форма готова.
Спасибо еще раз Наташа! NMitra Смотрите, каждому input присваиваем свой индивидуальный name, например, name, Email, tel. Тогда получается неправильно
1 => $_POST[‘name’], 2 => $_POST[‘Email’], 3 => $_POST[‘tel’], 4 => $_POST[‘name’],
Зачем два раза использовать одинаковый name?

Читайте также:  Morphvox pro настройка женского голоса

Те, у кого был блог на Blogger легко осваивают код )) Марина А я про это и спрашивала вас, что и какие значения обозначают и как их правильно вписывать)))
Вы ответили и суть я поняла (можно устанавливать любые значения) , а здесь забыла исправить — конечно в п4 catalog как вы и сказали. Нашла в инете значения такие
Time, datetime, number, address, City, fullname, head, Region day ну и т д .
Блог на Blogger есть (неплохой), но пока сейчас в замороженном виде, так как море интересного по созданию именно сайтов. Вот сейчас осваиваю webasyst и джумлу ))) Жутко интересно, особенно когда получается)))
Сейчас пытаюсь встроить позицию с выпадающим списком (очень нужно для выбора времени заказа авто)
HtML понимаю как сделать (
clas s=". "> (это должен быть выпадающий список или с прокруткой)

Здравствуйте уважаемые читатели Site on! Данный урок станет основоположником небольшого ответвления в разделе PHP. Здесь мы будем рассматривать решения реальных практических задач (так называемые кейсы), которые могут встретиться вам на пути к созданию ваших собственных веб-проектов. Другими словами в статьях данной подкатегории вы сможете найти готовые решения и наработки, которые сразу же можно внедрять в разрабатываемые вами сайты, в том числе и в ваши CMS!

Сделать форму обратной связиcallback (обратный звонок), которая будет отправлять сообщение владельцу магазина по электронной почте. Форма должна иметь приятный интерфейс, быть «лёгкой», безопасной и быстро редактируемой под любые нужны. Также необходимо встроить данную форму в шаблон Joomla 2.5 + VirtueMart 2.

P.S. Форма будет работать на любом движке, не только в Joomla, так как сделана на чистом PHP.

Рабочий результат вы можете увидеть на данной странице слева по центру.

Любая подобная форма обязана иметь свой анти-спам, при этом необязательно заставлять своих посетителей вводить трудноразличимые буквы с картинки! О том, как сделать дружелюбную для посетителя проверку на спам, чтобы не потерять конверсию, я напишу в следующей статье, а здесь я в деталях расскажу и выложу заготовки, как сделать приятную форму обратной связи используя PHP, HTML, CSS и немного JS для красивого эффекта.

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

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

Внутри которого указываются поля, заполняемые пользователями, и кнопка «отправить»:

Разберём каждую строчку более детально! Начнём с первой:

Не ругайтесь на то, что я повесил обработку яваскрипта прямо в атрибут тега, это уже совсем другая история 🙂

Записываем CSS в ваш основной файл стилей (обычно это что-то типа: general.css, template.css, style.css) и не забываем изменить во второй строчке путь до картинки:

JS можно разместить в любом месте на странице или вынести в отдельный файл:

PHP:

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

Скачать картинку «обратная связь» вы можете сохранив данный рисунок:

Вы можете изменить положение формы обратной связи, чтобы она была справа, а не слева. Для этого вам нужно отредактировать пару значений в CSS, а также повернуть саму картинку. При этом вам НЕ нужно изменять JS, HTML и PHP.

Если вы хотите из формы обратной связи сделать классический обратный звонок (только имя и телефон), вы можете просто удалить тег textarea, при этом не забудьте удалить проверку на него в файле callback.php.

Поздравляю, вы только что сделали свою собственную стильную форму обратной связи, задействовав при этом всего две строчки JS, пару строк CSS, а также совсем немного PHP и HTML. Если статья вам понравилась, предлагаю подписаться, чтобы не пропустить выход новых статей и кейсов, спасибо за внимание и удачи!

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *