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

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

Читать

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

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

Читать

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

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

Читать

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

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

Читать

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

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

Читать

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


Средняя оценка:
Всего голосов: 2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

logo
8847

Оцени и поделись ;)

Пожалуйста, оцените по 5 бальной шкале