Как сделать форму обратной связи по типу Заказать звонок или Быстрый заказ на Bootstrap и Ajax

Как сделать форму обратной связи по типу Заказать звонок или Быстрый заказ на Bootstrap и Ajax
  Всем привет, как модно говорить сейчас. Я уже рассказал, как сделать две формы обратной связи или формы типа «Заказать звонок» здесь и вот здесь. И сразу получил вопросы и пожелания различного рода. Поэтому вот Вам третья статья и третья, надеюсь последняя, форма обратной связи (или Перезвонить мне) во всплывающем окне. Партнёр спрашивает меня: не лень писать статьи, дай просто готовую форму для скачки и всё. А я подумал, что можно голодному дать еды, а можно дать работу, чтобы сам себя накормил. Вот я и даю работу. Те, кто слабо подготовлен, почитают, попробуют сделать сами, глядишь чему-то и подучатся. Ну вот вся преамбула.

 Форма обратной связи во всплывающем окне с использованием Bootstrap-Ajax

Чем она отличается от двух предыдущих? А тем, что чуть посложнее и использует  ajax, т.е. отправка и сообщения об ошибках будут происходить в том же модальном окошке без перезагрузки страницы. Ориентируюсь на Opencart 2.x.x , но можно установить на любую CMS , Joomla или Wordpress к примеру. Главное, чтобы к шаблону сайта был подключён Bootstrap и jquery
Возьмём готовую красивую форму , вот демо http://codebases.com/ajboot/ А берётся она на https://github.com/devkiran/ajboot Можете скачать её, посмотреть. Там даже API от карт GOOGLE вставлена, так что можно для сайта очень красивую и функциональную форму вставить.
   А для своих нужд мы её переделаем немного. Про то, как сделать всплывающее модальное окошко я уже рассказал в предыдущих статьях. Так что вот здесь уже и окно сделано, и форма туда вставлена. форма быстрый заказ в модальном окне для Opencart, Joomla, wordpress Для меня такая обширная форма не нужна. Я упростил её, оставил только имя. Телефон, поле для сообщения и сделал простейшую проверку на человечность в виде примера. Сейчас модная такая штука есть, которая, кстати,  присутствует в Opencart 2, называется reCaptcha. По опыту знаю, как раздражают все эти каптчи. Гугловская вроде проста, нажал и всё. А вот и нет! В случае ошибки выскакивает окно проверки с картинками, где по-английски предлагают выбрать три штуки, где нарисованы цветы, или еда, или ещё чего-то. А Вы знаете уровень своих посетителей? Так я Вам скажу: 90% процентов впадут в ступор. Я лично изготовил несколько пробных форм с разными проверками и дал на пробу пользователю с низким уровнен. Справился без проблем мой тестовый юзер с проверкой простым примером. Хотя Вы можете вместо примера сделать контрольный вопрос, к примеру «Он говорит МЯУ, напишите кто это?!», а в ответе будет «КОТ» . Только не делайте ответ больше трёх букв, а то кое-кому и три-то проблема напечатать.
Вот так выглядит форма, которая нужна мне.
 Я не удалил то, что мне не нужно, а закомментировал. И дал пояснения. Вы можете просто удалить закомментированное, а можете раскомментировать и тем самым задействовать. Задействовать очень просто: если нужен Вам чекбокс, то удалите /* перед блоком чекбокса и */ после. Только обратите внимание: раскомментировать нужно в ТРЁХ местах ( в коде, который вставляем в футер сайта, в файле contact.php и в файле custom.js) . Я подписал все блоки, так что не ошибётесь. Ну и наоборот, если Вам что-то не нужно, то закомментируйте.
 Теперь ставим там, где Вам нужно ссылку
 
 <a data-toggle="modal" href="#myModal" ><i class="icon-plus"></i> ЗАКАЗАТЬ ЗВОНОК</a>
 
Или кнопку:
 
<button class="btn btn-primary navbar-btn" data-toggle="modal" data-target="#myModal">Заказать звонок</button>
 
И всё.
Решение вполне универсальное. Теперь, как сделать правильно. Скачивайте по ссылке внизу архив.
 Конкретно для Opencart 2 делаем так:
 
  • Содержимое form.html копируем и вставляем в конец файла footer.tpl  Вашего шаблона перед тегом </body>
  • Файл custom.js кладём  в папку по пути  ВАШ_САЙТ\catalog\view\javascript
  • Файл contact.php кладём в корень сайта, не забыв поправить там внизу email на свой
  • Выводим ссылку на вызов формы <a data-toggle="modal" href="#myModal" ><i class="icon-plus"></i> ЗАКАЗАТЬ ЗВОНОК</a>
Правки делаются в ТРЁХ файлах. Если Вам не нужно, к примеру, поле для сообщения, то найдите моё поснение такого вида <!--текст сообщения--> везде и удалите или закомментируйте блок.
 
 
ПРОЙДИТЕ БЫСТРУЮ РЕГИСТРАЦИЮ И УВИДИТЕ ССЫЛКУ НА СКАЧКУ
Запись только для зарегистрированных

Ну и посмотрите этот мультфильм, кто не видел. И в нашем говённом мире есть место самопожертвованию

 

Комментариев: 19 RSS

При отправке, форма исчезает, но сообщение не появляется.

В firebug пишет POST ответ:

{"errors":[],"success":1,"message":"\u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e

\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043e \u0411\u043b\u0430\u0433\u043e\u0434\u0430

\u0440\u0438\u043c \u0412\u0430\u0441 qwert, \u0443\u0434\u0430\u0447\u043d\u043e\u0433\u043e \u0412

\u0430\u043c \u0434\u043d\u044f !"}

Это где не работает? На ДЕМО? Проверил, работает и отправляет. Возможно проблемы были у хостера, сайт падал, вот Вы и попали в такой период. А если у Вас не сработало, когда сделали по туториалуgrin, тогда не знаю

Добрый день.

Возможно установка двух и более модульных окон на одной странице?

Это появляется, когда отправляю из модального окна (bootstrap)

если форма просто в теле страницы, но все ок.

Но если выводить в окне, то такая фигня

Где подправить, чтобы можно было использовать несколько форм на одной странице?

Пробовал делать отдельные php, отправляется, но вот succes-message почему-то не появляется

Проблема когда используешь более одной формы на странице (лендинг)

У форм разное кол-во полей.

Пробовал для каждой формы свои отдельные js и php

менял естественно id для каждой формы уникальны

одна форма(первая) работает, она непосредственно на странице.

остальные две в модальных окнах, при нажатии сабминта белый экран с кодом post:

{"errors":{"name-call":"\u043d\u0430\u0437\u043e\u0432\u0438\u0442\u0435\u0441\u044c, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430 ","phone-call":"\u043d\u043e\u043c\u0435\u0440 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430"},"success":0}

как бы пост такой и должен быть, но почему он не обрабатывается и не появляется в виде ошибок в .help-block

Не успеваю с одной просьбой разобраться, как поступают кучей новые.grin Ладно, выложу другую под неск. окон

Здравствуйте. Была реализована возможность нескольких форм? Очень бы пригодилось. Спасибо за статью!

Уважаемый автор! колупаю 2 дня эту форму и дело практически не движется с места. извелся уже smile буду благодарен, если подскажете что да как.

На моем сайте http://**** вверху есть большая белая кнопка, которая вызывает модальное окно

Суть в том, что при нажатии "отправить" открывается в браузере http://**** Белый экран с символами, как и у многих (в стиле "{"errors":[],"success":1,"message":"\u0421\u043e\u043e")

При этом письмо приходит нормально. Как это побороть?

Следующий момент - не получается вызвать модальное окно ссылкой, только кнопкой, а это критично для меня. на странице эту форму должно вызывать 6 ссылок и одна кнопка. как можно обойти это ограничение?

и еще, я не понял как работает custom.js В теле не нашел обращения к этому файлу

Пожалуйста помогите разобраться, мозг кипит)

Здравствуйте! Все сделал по инструкции, но при клике на кнопку не выводится кнопочка, давайте вместе поправим меня? ))

Как этот при клике на кнопку "не выводится кнопочка" ? А, собственно, какая кнопочка должна выводится? При нажатии на кнопку должна выводится форма. Где делали? На Opencart или на чём-то другом?

У кого выходит ошибка в стиле "{"errors":[],"success":1,"message":"\u0421\u043e\u043e"):

Вам необходимо подключить сам яваскрипт:

script type="text/javascript" src="catalog/view/javascript/custom.js" /script

теги режутся.

Добрый день. А для 1.5 подойдет данная форма или есть модификации?

{"errors":{"sc":"\u043e\u0442\u0432\u0435\u0442\u044c\u0442\u0435 \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430"},"success":0}

Вот такую ошибку выдает.

Под 1.5 тоже можно, тут без разницы. Вообще на любую CMS можно

Автору огромное спасибо и респект!

Парни все у кого не работает форма обратной связи и пишет ошибку такого вида

{"errors":{"sc":"\u043e\u0442\u0432\u0435\u0442\u044c\u0442\u0435 \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430"},"success":0}

Просто в файле footer.tpl перед кодом вызова самой формы вставьте строку

И все работает без ошибок. Всем удачи!

Оставьте комментарий!

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

Комментарий будет опубликован после проверки

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)