Форма обратного звонка в InSales. Простая версия

Функция которая нужна довольно многим магазинам, расскажу как реализовать самый простой вариант, без проверок на заполненные поля и прочее. Многим такая реализация подойдет, а для остальных — полный вариант выложу позже.
Форму мы будем делать с помощью Bootstrap 3
Что нужно знать о форме обратной связи InSales
1) Доступные поля для отправки:feedback[from] — *Обязательное поле с e-mail'ом пользователя
feedback[content] — *Обязательное поле с сообщением
feedback[name] — Имя пользователя
feedback[phone] — Телефон, не проходит валидацию на корректный номер телефона
feedback[subject] — Тема письма
2) Поле from автоматически подставляется в качестве отправителя
3) Поле content никак не валидируется и мы можем подставлять туда любые данные

4) Количество форм на сайте может быть сколько угодно
Часто приходиться слышать вопрос — можно ли в магазине на InSales кроме формы обратной связи сделать форму обратного звонка — можно, и не только их, количество не ограничено
Процесс создания формы заказа звонка
- Подключаем Bootstrap на сайт с помощью CDN (т.е. не нужно заливать файлы на свой сайт)
- Добавляем форму обратного звонка. Форму можно разместить в любое места сайта, она будет выезжать при нажатии кнопки:
<div id="contact" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 class="modal-title">Заказать обратный звонок:</h3> </div> <div id="thanks" class="alert alert-success" style="display: none;"></div> <form id="feedback_form" action="/client_account/feedback" method="post" class="modal-body" role="form"> <input type="hidden" name="feedback[subject]" value="Заказ обратного звонка"> <input type="hidden" name="feedback[content]" value="Поступил заказ обратного звонка. Перезвоните как можно скорее."> <input type="hidden" name="feedback[from]" value="{{account.email}}"> <div class="form-group"> <input class="form-control" type="text" placeholder="Ваше имя" name="feedback[name]"> </div> <div class="form-group"> <input class="form-control" type="text" placeholder="Ваш телефон" name="feedback[phone]"> </div> <div class="modal-footer"> <button id="feedback_commit" class="btn btn-default" type="submit" title="Отправить" form="feedback_form">Отправить</button> </div> </form> </div> </div> </div>
Из особенностей — поля Email, Content, Subject мы заполняем автоматически, а человеку нужно только заполнить поле с телефоном и именем
- Размещаем кнопку, которая будет открывать форму. Я делаю кнопку прикрепленной к краю экрана, там она всегда на видном месте.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="callback">
<a href="#contact" data-toggle="modal"></a>
</div>
Самым главным минусом такого варианта форму — отсутствие валидации введенных данных. Не исключен вариант что вместо телефона отправят пустой текст.
Однако если нужно быстро сделать форму — это самый простой вариант и делается буквально за несколько минут.
16 комментариев
За него отвечае, в блоке добавляю другой текст, Но ничего не меняется.
как поменять данный текст?
Вот пример на главной shop-35372.myinsales.ru/
Я вывел форму не в popup а как блок, это не важно, суть та же, при отправке данных с форма выскакивает не изменяемая даже через js сообщение «Сообщение успешно отправлено.»
И замените его на:
Bootstrap's JavaScript requires jQuery
Если её исправите — все начнет работать.
Бутстрам подключается в файле layout (там где подключаются все скрипты). Код приведен в статье
Можно ли этого избежать и остаться на той же странице?
ведет на insalesclub. ru/blog/insales-snippets/