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

Готовый код /

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

Форму мы будем делать с помощью Bootstrap 3

Что нужно знать о форме обратной связи InSales

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

2) Поле from автоматически подставляется в качестве отправителя
3) Поле content никак не валидируется и мы можем подставлять туда любые данные

4) Количество форм на сайте может быть сколько угодно

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

Процесс создания формы заказа звонка

  1. Подключаем Bootstrap на сайт с помощью CDN (т.е. не нужно заливать файлы на свой сайт)
  2. 
    <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>
    
  3. Добавляем форму обратного звонка. Форму можно разместить в любое места сайта, она будет выезжать при нажатии кнопки:
    
    <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 мы заполняем автоматически, а человеку нужно только заполнить поле с телефоном и именем
  4. Размещаем кнопку, которая будет открывать форму. Я делаю кнопку прикрепленной к краю экрана, там она всегда на видном месте.
  5. 
    <div class="callback">
      <a href="#contact" data-toggle="modal"></a>
    </div>
    
Собственно на этом и все.

Самым главным минусом такого варианта форму — отсутствие валидации введенных данных. Не исключен вариант что вместо телефона отправят пустой текст.

Однако если нужно быстро сделать форму — это самый простой вариант и делается буквально за несколько минут.

16 комментариев

poison67
Есть простой способ валидации через параметр «required»
<input class="form-control" type="text" placeholder="Ваш телефон" name="feedback[phone]" required />
wonder
Все верно, такой вариант тоже подходит и работает на ура:)
lastendcommerce
При отправке сообщения появляется блок с текстом «сообщение успешно отправлено»
За него отвечае, в блоке добавляю другой текст, Но ничего не меняется.


как поменять данный текст?
wonder
Скиньте пример своего сайта, где можно посмотреть то, как у вас это все выглядит
lastendcommerce
Здравствуйте,

Вот пример на главной shop-35372.myinsales.ru/
Я вывел форму не в popup а как блок, это не важно, суть та же, при отправке данных с форма выскакивает не изменяемая даже через js сообщение «Сообщение успешно отправлено.»
wonder
Найдите у себя код:

                  if ( response.status == 'ok' ) {
                  	$('.contact_form').fadeOut('fast');	
                  	$('#thanks').fadeIn('fast');
                  } 

И замените его на:

                  if ( response.status == 'ok' ) {
                  	$('#feedback_form').fadeOut('fast');
                        $('#thanks').text('Моё новое сообщение');	
                  	$('#thanks').fadeIn('fast');
                  } 
lastendcommerce
Все так-же остался тексn без изменений.
комментарий был удален
wonder
Полагаю проблема в ошибке
Bootstrap's JavaScript requires jQuery

Если её исправите — все начнет работать.
tokyr
Здравствуйте! А можно подробней про шаг 1 в Процесс создания формы заказа звонка. Как и куда Подключаем Bootstrap на сайт с помощью CDN? Код в шаблон нужно вставить? А какой?
wonder
Здравствуйте!

Бутстрам подключается в файле layout (там где подключаются все скрипты). Код приведен в статье
tokyr
Спасибо за ответ. А можно для «деревянных» прям в виде скриншотов в какое место кода в файле layout вставить код по шагу 1 и код по шагу 2 описанных в статье? Пожалуйста!!!
wonder
Я то могу вам сделать эти скриншоты — но они вам не помогут, т.к. код все равно придется адаптировать под ваш магазин. Этот код изначально расчитан на более продвинутых пользователей
VladimirIvanov
Здравствуйте, после нажатия на кнопку «Отправить» перекидывает на страницу /client_account/feedback.
Можно ли этого избежать и остаться на той же странице?
wonder
Такого быть не должно, видимо вы что-то не правильно сделали или не подключили все скрипты.
a2media
не доступен код по ссылке «ГОТОВЫЙ КОД» в начале статьи!!!
ведет на insalesclub. ru/blog/insales-snippets/
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.