Форма обратный звонок для сайта html

Форма обратный звонок для сайта html

Дата публикации: 2016-09-06

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

Итак, мы с Вами будем делать популярное ныне решение, когда изначально сама форма обратного звонка не видна на странице, а вместо нее есть некая кнопка. Клик по кнопке откроет форму в модальном окне и клиенту остается ее лишь заполнить.

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

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

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

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

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

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

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

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

Скрыть при щелчке (хтмл атрибут):
onclick="document.getElementById(‘айдишник элемента’).style.display = ‘none’;"

Показать:
onclick="document.getElementById(‘айдишник элемента’).style.display = ‘block’;" 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
Огромное Вам Спасибо за помощь, советы и ваш труд.

Читайте также:  Новый сплинтер селл 2018

Марина. Марина Добрый день Наташа!
Все проблемы с отправкой и кодировкой — РЕШЕНЫ!
Проблема была у хостинга ( их настойки)
СПАСИБО большое за вашу помощь и ваш труд! Вы делаете неоценимое дело для людей, которые еще не все знают о создании сайтов и всех примыкающих к этому функций!
С Уважением, Марина.
Марина Доброй ночи! Наташа, в письме админу данные из письма (заказать звонок) проявляются вот так
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?

Читайте также:  Флешка убийца компьютера своими руками

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

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

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

Конечно, в большинстве случаев модальные окна делают с применением javascript, но сегодня мы попробуем обойтись только средствами css, и не будем нагружать наш landing page лишним скриптом.

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

О том, как настроить контактную форму можно почитать в этих статьях:

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

Будем реализовывать такой функционал: 🙂

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

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

Html структура очень проста. Размещаем эту ссылку в нужное место на сайте. Туда, где вы планируете вывести кнопку «заказать обратный звонок»:

Теперь нужно создать контейнер модального окна:

Я добавил небольшую контактную форму, получилось так:

Не стал публиковать таблицу стилей, можете скачать исходник здесь:

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

Как вы могли заметить, я написал, что использовал less. Посмотрите на структуру. Я не использовал и 5% от возможностей препроцессора (только вложенность), так как только начал изучать его, но планирую в будущем чаще применять. Вот хотел спросить у вас, как лучше. Не против ли вы, если примеры кода будут не в CSS а less? У меня Google chrome и Яндекс браузер отказались компилировать less в css без открытия файла через Денвер или OpenServer. На Мазила и IE — проглотили. Так что, скорее всего, буду выкладывать обычные CSS стили.

А на сегодня — все! Всем пока!

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

Ссылка на основную публикацию
Уроки нлп для начинающих
Если вы хотя бы немного интересуетесь психологией, то о нейролингвистическом программировании (НЛП), наверное, тоже слышали. В статье мы постараемся объяснить...
Технология etth что это
ETTH — Ethernet To The Home (ETTH) is a specific application of Fiber to the premises (FTTP) that first emerged...
Технология nfc в наушниках что это
NFC — это аббревиатура от английского Near Field Communication. С помощью этой технологии становится возможным обмен данными между различными устройствами,...
Уроки ворд 2010 для начинающих
Microsoft Office 2010 — бесплатные обучающие уроки для чайников с нуля. Получите необходимые навыки профессиональной работы с пакетом Microsoft Office...
Adblock detector