Html скрипт формы обратной связи: Делаем форму обратной связи на сайте

Как я делаю формы обратной связи. Часть 1. FormIt+Fancybox | Блог

09.06.2017

Инструкция

Уведомление об использовании cookie, IP-адреса и местоположения

Пример уведомление об использовании информации

Читать

24.05.2017

Инструкция

Выводим вложенный MIGX в MIGX через Fenom

Инструкция как вывести поля MIGX во вложенной таблице MIGX через Fenom

Читать

17.02.2017

Инструкция

Выгрузка для каталога Facebook

Подготавливаем файл со списком товаров для каталога Facebook

Читать

08.01.2017

Инструкция

SEO требования к сайтам (первичное SEO)

Список правил по SEO (первичное SEO)

Читать

05.07.2016

Инструкция

Автозакрытие fancybox через время

Улучшаем форму обратной связи

Читать

17 апреля 2016, 18:05

Инструкция

FormItFancybox


Средняя оценка:

Всего голосов: 5

На любом сайте обязательно должна быть форма обратной связи. В этой статье/инструкции я расскажу как делаю такие формы на сайтах клиентов, и как это сделано на моём сайте

Все формы можно разделить на две группы: обычные и всплывающие. В данном материале речь пойдёт о всплывающей форме обратной связи

И еще на мой вгляд идеальная форма обратной связи должна обладать следующим функционалом:

  • Маска ввода телефона и email
  • Защита от ботов(каптча)
  • Авто-ответ клиенту
  • Сохранение заявок в админке

1. Скачиваем и устанавливаем FormIt и Recaptchav2

Как скачивать и устанавливать дополнения описывать не буду — в интернете есть куча материалов на эту тему.

2.Скачиваем и подключаем maskedinput.js

Этот скрипт дает возможность задавать маску ввода телефона

3. Скачиваем с официального сайта Fancybox

Загружаем Fancybox на сайт и подключаем стили и скрипты:

4. Создаем отдельный шаблон для формы обратной связи

Делаем именно отдельный шаблон с минимальным наполнением для того чтобы в всплывающем окне ничего лишнего не было

5. Создаем два документа и задаем им шаблон созданный в предыдущем шаге

В одном размещаем вызов FormIt.

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

6. Создаем необходимые чанки

6. В нужном месте вставляем вызов всплывающего окна

Готово! Данный код мною был установлен на многих сайтах и является 100% рабочим.

Если возник какой либо вопрос — пишите — помогу)