Как я делаю формы обратной связи. Часть 1. FormIt+Fancybox
На любом сайте обязательно должна быть форма обратной связи. В этой статье/инструкции я расскажу как делаю такие формы на сайтах клиентов, и как это сделано на моём сайте
Все формы можно разделить на две группы: обычные и всплывающие. В данном материале речь пойдёт о всплывающей форме обратной связи
И еще на мой вгляд идеальная форма обратной связи должна обладать следующим функционалом:
- Маска ввода телефона и email
- Защита от ботов(каптча)
- Авто-ответ клиенту
- Сохранение заявок в админке
1. Скачиваем и устанавливаем FormIt и Recaptchav2
Как скачивать и устанавливать дополнения описывать не буду - в интернете есть куча материалов на эту тему.
2.Скачиваем и подключаем maskedinput.js
Этот скрипт дает возможность задавать маску ввода телефона
3. Скачиваем с официального сайта Fancybox
Загружаем Fancybox на сайт и подключаем стили и скрипты:
4. Создаем отдельный шаблон для формы обратной связи
Делаем именно отдельный шаблон с минимальным наполнением для того чтобы в всплывающем окне ничего лишнего не было
5. Создаем два документа и задаем им шаблон созданный в предыдущем шаге
В одном размещаем вызов FormIt.
В другом документе помещаем текст об успешной отправке заявки.
6. Создаем необходимые чанки
6. В нужном месте вставляем вызов всплывающего окна
Готово! Данный код мною был установлен на многих сайтах и является 100% рабочим.
Если возник какой либо вопрос - пишите - помогу)
Всё сделал аналогично, почти всё работает!
Кроме «re_message»
Клиенты не получают встречного письма.
Вот моя форма!
Помогите пожалуйста!
[[!FormIt? &hooks=`recaptchav2,spam,email,redirect` &emailTpl=`defaultFeedbackReport` &emailTo=`[[++vcms_email_to]]` &emailFrom=`[[++vcms_email_from]]` &emailSubject=`Сообщение с сайта [[++site_name]]` &submitVar=`send-fi` &redirectTo=`10` &validationErrorMessage=`<p class="formMessage bg-danger">[[%formit.validation_error_text? &namespace=`formit` &topic=`default`]]</p>` &validate=`name:required, useremail:email:required, text:required:stripTags` &fiarTpl=`re_message` &fiarSubject=`Письмо с сайта [[++site_url]]` &fiarFrom=`[[++vcms_email_to]]` ]] [[!+fi.validation_error_message]] <form action="[[~[[*id]]]]" method="post" role="form" enctype="multipart/form-data"> <input type="hidden" name="nospam:blank" value="" /> <fieldset> <div class="form-group has-feedback[[!+fi.error.name:notempty=` has-error`]]"> <label class="control-label" for="name">ФИО</label> <input type="text" required class="form-control" placeholder="Введите имя" id="name" name="name" value="[[!+fi.name]]" /> <span class="glyphicon glyphicon-user form-control-feedback"></span> </div> <div class="form-group has-feedback[[!+fi.error.useremail:notempty=` has-error`]]"> <label class="control-label" for="useremail">Email</label> <input type="text" required class="form-control" placeholder="Введите email" id="useremail" name="useremail" value="[[!+fi.useremail]]" /> <span class="glyphicon glyphicon-envelope form-control-feedback"></span> </div> <div class="form-group has-feedback[[!+fi.error.phone:notempty=` has-error`]]"> <label class="control-label" for="phone">Телефон</label> <input type="text" required class="form-control" placeholder="Введите телефон" id="phone" name="phone" value="[[!+fi.phone]]" /> <span class="glyphicon glyphicon-phone form-control-feedback"></span> </div> <div class="form-group has-feedback[[!+fi.error.file:notempty=` has-error`]]"> <label class="control-label" for="file">Добавить файл</label> <input type="file" class="form-control" id="file" name="file" value="[[!+fi.file]]" /> <span class="glyphicon glyphicon-file form-control-feedback"></span> </div> <div class="form-group[[!+fi.error.text:notempty=` has-error`]]"> <label class="control-label" for="text">Сообщение</label> <textarea required class="form-control" rows="5" id="text" name="text">[[!+fi.text]]</textarea> </div> <strong>Пройдите проверку безопасности</strong> [[!recaptchav2_render]] [[!+fi.error.recaptchav2_error]] </div> <div class="clearfix"> <input type="submit" class="btn btn-primary" name="send-fi" value="Отправить" /> </div> </fieldset> </form>Вы забыли указать хук автоответа — FormItAutoResponder.
&hooks=`recaptchav2,spam,email,redirect,FormItAutoResponder`
а в inline окне скролла нет почему то
и второе — как в моем случае выводить ответ Спасибо после отправки заказа в том же открытом окне типа inline
У меня форма открывается не во всплывающем окне, а просто происходит переход на id с формой, fancybox и jquery подключены
А можно код увидеть?
При запонении и отправке формы выводится сообщение «Произошла ошибка при попытке отправить почту. Пустое тело сообщения»
Не знаете с чем это может быть связано?
Так навскидку могу сказать что не указан или не существует чанк письма на почту указанный в &emailTpl. Чтобы ответить точно — покажите код.
Рекапча и маска телефона тоже не работает.
Я установил все по инструкции.
При нажатии на «Отправить заявку»
Выводится сообщение:
«The requested content cannot be loaded.
Please try again later.»
Помогите пожалуйста разобраться.
Ресурсы опубликованы? Код проверяли ещё раз, после вставки?
Но вот сейчас пишет после ввода Имени, e-mail и телефона:
«Произошла ошибка при попытке отправить почту. Пожалуйста, введите хотя бы один адрес e-mail получателя.»
Если как в моей инструкции —
То указана ли почта в системной настройке — emailsender?
Спасибо.
1) в чанк с формой добавил скрытое поле — />
2) в вызов добавил — &emailTo=`[[+addressTo]]`,
3) и к кнопке «Связаться» добавил событие onclick по которому нужный адрес подставляется в скрытое поле
Форму проверяли без всплытия? Отправка сообщений работает?
А Вам не подходит вот такая реализация?
Ссылка
Все сделал по инструкции, только подключил fancyBox 3, так на сайте написано что 2 устарел. В результате получается не всплывающее окно, а переход на новую страницу шириной во весь экран
Судя по документации в fancybox3 изменился код вызова. Если Вы всё правильно подключили(стили и скрипты), то вызвать окно нужно вот таким кодом:
В моей форме тоже не работает FormItAutoResponder
Может, Вы сможете разобраться в чём дело?
[[!AjaxForm? &snippet=`FormIt` &hooks=`spam,email,FormItAutoResponder,coupon_number` &form=`getcoupon_form` &formSelector=`ajax_form_coupon` &formFields=`promocode,name,phone,email` &fiarTpl=`getcoupon_form.tpl` &fiarSubject=`Ваш купон - СКИДКА ВНУТРИ` &fiarToField=`email` &emailSubject=`Ваш купон - СКИДКА ВНУТРИ` &emailTo=`mail@mail.ru` &emailFrom=`mail@mail.ru` &emailTpl=`getcoupon_form.tpl` &validate=`name:minLength=^2^,email:required,phone:required` &validationErrorMessage=`В форме содержатся ошибки!` &name.vTextRequired=`Пожалуйста, укажите, как к вам обращаться` &phone.vTextRequired=`Оставьте свой номер телефона, чтобы мы могли с вами связаться` &email.vTextRequired=`Купон высылается на Email` &successMessage=` <h3 style="text-align: center;">Ваше сообщение отправлено</h3> <p style="text-align: center;">Наши специалисты свяжутся с вами в ближайшее время.</p> ` ]]А покажите чанк — getcoupon_form
<form method="post" action="[[~[[*id]]]]" onsubmit= "ym('XXXXXXX','reachGoal','otpravka_luboi_formi'); return true;">