форма обратного звонка для сайта html css
Как сделать форму Обратный звонок на сайте
Дата публикации: 2016-09-06
От автора: приветствую вас, друзья. Из этой статьи вы узнаете, как сделать форму Обратный звонок на сайте. Эта форма достаточно популярна на сайтах продающей тематики: интернет-магазинах и лендингах. Форма обратного звонка помогает человеку быстро задать вопрос менеджеру и получить обратную связь. Приступим?
Итак, мы с Вами будем делать популярное ныне решение, когда изначально сама форма обратного звонка не видна на странице, а вместо нее есть некая кнопка. Клик по кнопке откроет форму в модальном окне и клиенту остается ее лишь заполнить.
В этой статье мы создадим лишь саму форму, ну а отправку и обработку формы реализуем уже в следующих статьях. Исходные файлы вы можете скачать по ссылке.
Прежде всего нам, конечно же, потребуется форма и кнопка для вызова этой формы. Давайте создадим их. Чтобы не писать самому стили, я подключу фреймворк Bootstrap и использую его стили. К слову, если Вы еще ни разу не работали с Bootstrap, тогда обязательно изучите этот замечательный CSS фреймворк.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
В этой статье мы рассмотрим, как создать удобное модальное окно для пользователей, которым нужно заказать обратный звонок.
Обратный звонок улучшает юзабилити коммерческого сайта, так как пользователю легче оставить свой номер телефона, чем звонить самому. Кроме того, гораздо приятнее связаться с интернет-магазином за его счет, чем тратить свои средства на связь. Такой дополнительный сервис стимулирует посетителей стать клиентами, то есть увеличивает конверсию.
HTML и CSS реализация обратного звонка на сайте
Как реализовать обратный звонок на сайте средствами HTML и CSS? Для этого нужно создать соответствующую форму. Давайте рассмотрим следующий пример такого решения.
В этой форме располагаются поля для ввода телефона, имени пользователя и кнопка «Заказать».
Файл css, можно посмотреть здесь:
Полученные данные можно обработать средствами PHP: проверить номер телефона на валидность, а в случае ошибки – отправить пользователю сообщение на E-mail для уточнения данных и удобного времени звонка.
Список файлов, которые нам понадобятся для реализации функционала модального окна:
Для подключения скриптов следует пройти следующие шаги, редактируя код последовательно, от хедера к футеру.
В секции header нужно подключить скрипты jquery.maskedinput.js, modernizr.custom.js и не забываем про jquery.min.js. Последний файл представляет собой библиотеку jQuery, без которой другие скрипты не смогут работать, скрипт можно подключить прямо из JavaScript библиотеки Яндекса:
Обратите внимание, что маска телефона задается с помощью скрипта jquery.maskedinput.js.
В футере сайта мы подключаем скрипты classie.js, modalEffects.js и cssParser.js. Скачать эти скрипты можно здесь.
Готовое решение, которое бы сочетало в себе хорошее модальное окно с функцией обратного звонка найти не просто. В этой статье мы объединили их в одно целое и создали свой эффективный вариант.
Создаем бесплатный callback-виджет с SMS и Telegram-оповещением
В этой статье мы пошагово создадим виджет обратного звонка с красивой минималистичной анимацией и отправкой уведомлений на почту, на свой номер телефона и в мессенджер Telegram через бота. Виджет подойдет абсолютно для любого сайта на HTML или на любой CMS.
Демонстрацию можно посмотреть по ссылке.
Зачем нужен callback-виджет?
Есть масса сервисов, которые предоставляют различные настраиваемые виджеты обратного звонка — с возможностью подключить АТС, интегрировать с CRM (amoCRM, Битрикс24), с оповещением в Telegram, по СМС и так далее. За такой богатый функционал нужно платить ежемесячно, покупать минуты или выбирать тариф по карману. Стоимость подобных виджетов стартует примерно от 200 рублей в месяц.
Используя виджет, о котором мы поговорим в этой статье, вы получите навечно бесплатное, независимое и настраиваемое под любые нужды решение — с возможностью отправки заявки на почту, в Telegram и по СМС. Также с помощью вебхуков можно подключить отправку данных в CRM (если есть такая возможность на стороне самой CRM).
Минус такого виджета – отсутствие возможности онлайн-звонка. Но, думаю, это не большой минус, а скорее плюс, так как часто менеджеры не успевают ответить на звонок, и компания получает негатив от потенциального клиента. А в случае с виджетом мы принимаем заявку, выводим сообщение о том, что перезвоним в течение определенного времени, и у клиента не возникает негатива. Поэтому минус виджета может быть и плюсом.
Итак, приступим к созданию виджета.
Разметка HTML + CSS
Так как виджет «сквозной» и устанавливается на все страницы, нам необходимо понимать, с какой страницы был заказан обратный звонок, чтобы оперативно помочь клиенту. Для этого нам понадобится скрытое поле в форме, которое будет передавать эту страницу, значение поле должно быть таким:
Второе скрытое поле будет передавать тему заявки — в данном случае это «Обратный звонок».
Теперь добавим небольшой скрипт открытия формы по клику на кнопку. Для этого нам понадобится подключить библиотеку jQuery и написать небольшой скрипт отправки. Если у вас уже подключена библиотека, то этого делать не стоит.
Далее оформим все с помощью CSS. Вы можете добавить этот код в свой файл стилей или создать новый.
Форма заказа обратного звонка с сайта без перезагрузки страницы на PHP, HTML и Jquery
Сегодня мы все чаще сталкиваемся с необходимостью использования формы заявки обратного звонка на сайте. Причем выигрывают скрипты, которые отправляют форму без перезагрузки страницы, то есть асинхронно при помощи jаvascript.
Как это сделать мы рассмотрим в данном материале.
Как создать несложную форму читайте в статье.
Создаем форму обратного звонка на HTML
На первом этапе нужно создать саму форму обратного звонка. Я постараюсь рассмотреть при этом самый стандартный вариант такой формы. Итак, какие поля для ввода информации потребуются?
Пропишем все поля при помощи HTML кода:
Обратите внимание, что мы сразу создаем кнопку “Заказать звонок”. Добавляем “ required” для того, чтобы браузер сделал эти поля обязательными для заполнения. Контейнер div в форме предназначен для вывода сообщений об ошибке.
Отправляем данные формы обратного звонка без перезагрузки страницы
Посетителю сайта будет намного удобнее, если форма отправиться без переадресации на другую страницу, особенно, если это лэндинг (одностраничный сайт). Тем самым может получиться так, что вы сами уводите посетителя со своей главной страницы. Поэтому делаем отправку данных формы заказа обратного звонка без перезагрузки страницы, то есть асинхронно.
Для этого используем jаvascript с библиотекой Jquery. Не забудьте подключить одну из последних библиотек Jquery на страницу с формой, иначе отправка не будет работать.
На первом этапе нужно получить данные из формы и проверить, не пустые ли они.
Создаем переменную “dannie” для функции асинхронной отправки:
if(otpravka)
<
$.post(‘senda.php’, dannie, function(otvet) <
rezultat = ‘
Обработка данных формы заказа обратного звонка на сервере при помощи PHP
На следующем этапе нужно получить и обработать ответ на сервере. Для этого создаем файл “senda.php”.
Проверяем следующим условием, откуда отправлнны данные и каким способом. Если это не асинхронная отправка Jquery, то прекратить работу скрипта и показать сообщение об ошибке:
Мы отправляли асинхронно данные формы обратного звонка при помощи Jquery. Принимаем эти данные следующим PHP кодом:
Сразу же проверяем эти данные на заполнение. Вы ведь не хотите получать пустые данные на 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);
>
Отправляем данные на почту:
Если письмо отправлено, то отправляем ответ об успешной отправке письма с данными пользователя на почту владельца сайта.
Как сделать кнопку «Заказать обратный звонок»
Всем доброго времени суток. Сегодня речь пойдет о модальных окнах, и на их примере мы реализуем кнопку «Заказать обратный звонок«. Наверняка вы видели на множестве лендингов такую кнопку, при нажатии на которую появляется контактная форма с затемнением общего фона. Именно такой функционал мы и реализуем сегодня.
Конечно, в большинстве случаев модальные окна делают с применением javascript, но сегодня мы попробуем обойтись только средствами css, и не будем нагружать наш landing page лишним скриптом.
И напоследок, скажу, что я не заморачивался с дизайном контактной формы, просто хотел передать суть того, как реализуется подобный эффект, так что прошу сильно не пинать. Просто опишу основные моменты, а вы потом подправите, как вам будет угодно.
О том, как настроить контактную форму можно почитать в этих статьях:
Для того, чтобы статья не получилась очень длинной, я приведу только html разметку, а остальное вы сможете посмотреть, скачав исходник.
Будем реализовывать такой функционал: 🙂
Первое, что нужно сделать, это подключить таблицу стилей (less), представленную в исходнике. Я очень подробно описал его комментариями, посмотрите и внесите правки.
Html структура очень проста. Размещаем эту ссылку в нужное место на сайте. Туда, где вы планируете вывести кнопку «заказать обратный звонок»:
Теперь нужно создать контейнер модального окна:
Я добавил небольшую контактную форму, получилось так:
Не стал публиковать таблицу стилей, можете скачать исходник здесь:
Если нет желания создавать подобную кнопку самому, рекомендую обратить внимание на онлайн консультантов, которые позволяют реализовать эту функцию и имеют много других дополнительных возможностей.
60 комментариев
Добрый день
Когда, Нажимаю на скачать исходник появляется такая страница со знаками: gyazo.com/2aada13a1d4dbc076c78a28cb535774c
и не получается скачать..
А как можно в место кнопки «Заказать обр. звон.» сделать текст? и как вариант картинку!
Удалить текст между тегами «a», воспользоваться тегом img и прописать путь к картинке. Или удалить текст и написать свой
Дима, привет. Ты отлично все объясняешь, поэтому я решил спросить у тебя 🙂 Я сейчас делаю лэндинг, который отчасти и интернет-магазин сразу. И вот столкнулся с такой, проблемой, что мне нужны работающие формы заказа как описана в этой статье, потом полная, из трех строчек, да еще и во всплывающем окне, которые будет открываться в другом всплывающем окне (описании товара). Сразу я боюсь запутаться в коде, так как до ЖаваСкрипт и ПХП добрался совсем недавно и пока лишь учусь (а точнее, привыкаю и набиваю руку). Поэтому просто-напросто боюсь запутаться в стилях и незнакомом пока что коде скриптов. Суть вопроса вот в чем: если мне нужно две формы заказа хотя бы на сайте, я могу использовать просто два разных пхп-скрипта твоего же авторства, или для начала, чтобы не запутаться в структуре файлов и основного файла, лучше обойтись одной?
Привет, давай по порядку. У тебя есть уже кнопка заказать обратный звонок, при клике по ней всплывает модальное окно. Теперь ты хочешь поместить туда форму из статьи https://smartlanding.biz/sozdanie-formy-obratnoj-svyazi.html.
Если ты хочешь добавить несколько форм, то тебе достаточно менять id action и name формы, например: