Инструкция по созданию формы обратной связи

Сначала предлагаем Вам ознакомиться со статьей о регистрации на сайте и добавлении проекта — «С чего начать».

Подробнее о возможностях и преимуществах форм в нашем конструкторе Вы можете узнать в разделе «Формы обратной связи»

Создание виджета

Для создания формы обратной связи, выберите виджет на странице проекта, во вкладке «Добавить виджеты».

Откроется страница с пустой областью просмотра.

Страница поделена на 2 части: левый блок – все настройки виджета, область просмотра – отображаются все изменения левого блока.

В мобильной версии блок слева скрыт, а правая панель с кнопками отображается в виде иконок. Чтобы открыть левый блок нажмите на кнопку «Панель инструментов».

Чтобы закрыть панель инструментов, нажмите на кнопку «Закрыть».

Выбор из готовых решений

Нажмите на кнопку «Библиотека готовых решений» в левой панели настроек. Откроется блок с готовыми формами.

Кликните на любой подходящий Вам виджет. Появится окно с подтверждением выбора.

Нажмите на кнопку «Да. Загрузить». После этого форма со всеми настройками появится в области просмотра. В левой панели подгрузятся элементы со всеми настройками.

Далее Вы можете изменить текст, добавить или удалить элементы и отредактировать виджет под свои цели и дизайн, согласно инструкции ниже.

Общие настройки

1. Показывать форму на мобильных или на компьютерах. Если вы хотите показывать форму только на мобильных, то оставьте только галочку «На мобильных» и наоборот.

2. Тип размещения. На ваш выбор 2 типа размещения:

Всплывающий при клике на кнопку. В таком случае на всех страницах сайта будет размещена кнопка, дизайн и расположение которой вы ниже настроите. А при клике по кнопке будет появляться форма. При выборе этого типа размещения, под пунктом появится поле с галочкой «Своя кнопка». Отметьте, если Вы хотите, чтобы виджет отображался при клике на кнопку, которая уже есть на Вашем сайте. Если проставить галочку, то ниже появятся блок «Укажите id кнопки или адрес ссылки» с 2 полями: «Id кнопки» и «Адрес ссылки».

Если Вы знаете id кнопки – укажите его. Если нет возможности назначить или узнать id, то Вы можете указать ссылку в Вашей кнопки в виде «#open_1212». Адрес ссылки может быть и другим, главное чтобы он был уникальным, начинался на «#» и был указан в этом поле. Обратите внимание, что нужно заполнить только одно поле на выбор.

Встроить в страницу. В таком случае форма, будет размещена только на тех страницах и  в том месте, где вы разместите код-отметку для виджета.

Код-отметка имеет вид: <div id=”in_1212”>Форма</div>, где 1212 – это номер Вашего виджета. Она нужна только для того, чтобы программа понимала, что вставить нужно именно в это место на этой странице.

Скопируйте код и вставьте на вашу страницу в режиме html-кода.

3. Email для получения заявок. Укажите электронный адрес, на который будут приходить заявки.
Если нужно указать несколько электронных адресов – указывайте их через запятую: email@mail.ru,email2@mail.ru

4. От кого приходит письмо. Заголовок в Вашей почте в поле «От кого».  По умолчанию указывается Digital. Но для интеграции с CRM и просто для удобства Вы можете указать любой свой.

5.  Эффект появления. Красивый эффект анимации при появлении виджета.  Есть разные способы, попробуйте – в области просмотра сразу отобразится выбранный вариант.

6. Яндекс Цель. Если Вы хотите отслеживать достижения цели в Яндекс-Метрике, то создайте  в ней новую цель, выберите тип «Javascript событие» и введите ее произвольное название латинскими буквами. Потом это название вставьте в указанное поле в панели управления виджетом.

7. Передавать UTM-метки. При отмеченной опции, вместе с заявкой Вам будет приходить информация откуда пришел посетитель, является ли источник рекламным или органическим.

Заголовки и стили

В этом блоке настраиваются общие стили виджета.

1. Ширина виджета – фиксированная ширина виджета. Но не больше ширины родительского блока или окна сайта, в зависимости от типа виджета.

2. Высота виджета. Аналогично ширине.

3. Закруглить края. Мягкое оформление контура виджета. Можно оставить с острыми краями или сделать более закругленным.

4. Цвет фона виджета. Как и в любом другом поле с палитрой можно выбрать люой цвет из палитры. Для копирования цвета, нажмите на пипетку, подведите к нужному цвету и кликните на него.

5. Текстура фона. Кликните на поле и появятся блоки с различными текстурами. Обратите внимание, что некоторые текстуры лучше отображаются на светлом фоне, а некоторые – на темном. Кликните на любую из них, чтобы выбрать. Она сразу отобразится на фоне виджета в области просмотра.

Чтобы блоки исчезли, кликните на любое место за пределами списка с текстурами.

6. Цвет фона вне виджета. Если выбран тип виджета «Всплывающий при клике на кнопку», то можно выбрать цвет затемнения или осветления фона за пределами виджета.

7. Прозрачность фона за пределами виджета.  От абсолютно прозрачного до полностью непрозрачного.

8. Матовость. Интересный эффект матового стекла фона за пределами виджета. Чем прозрачнее фон, тем лучше виден этот эффект.

9. Выберите шрифт. Шрифт назначается для всех текстовых элементов сайта. Выбирайте наиболее подходящий под стили Вашего сайта.

Далее идет блок кнопок, отвечающих за отображение заголовка виджета.

10. Текст заголовка. Здесь нужно написать текст, который будет в оглавлении формы обратной связи. Если оставить поле пустым, то заголовок не будет выводится.

11-12. Размер и цвет заголовка.

13. Выделить шрифт – сделать шрифт заголовка жирным.

14. Наклонный шрифт – выделить заголовок курсивом.

15. Выровнять заголовок по левому краю, по центру или по правому краю.

Последние 2 пункта настраивают отображение во всех остальных текстовых элементах.

16-17. Размер и цвет текста в стандартных пунктах формы обратной связи.

Параметры кнопки

Кнопка отображается в при выборе типа размещения «Всплывающий при клике на кнопку», если не отмечен галочкой пункт «Своя кнопка» в общих настройках. И показывается на всех страницах Вашего сайта. При клике на нее, на сайте поверх страницы всплывает виджет формы.

1. Здесь Вы можете настроить ширину и высоту кнопки. Задать цвет ее фона, выбрать иконку и цвет иконки.

2. Для Вас большой выбор иконок, среди которых Вы можете выбрать подходящую под стили Вашего сайта. Для открытия списка иконок, кликните по ней.

В списке иконок выберите подходящую.

3. Цвет самой иконки также можно менять. Например, сделать ее белой на зеленом фоне или красной на белом – выбирайте любые сочетания цветов фона и самой иконки.

4. Также Вы можете сделать ее круглой или квадратной, увеличивая цифру в пункте «Закругление краев».

5. Тип кнопки. На Ваш выбор 3 типа кнопки:

«Стандартная» — обычная кнопка без дополнительных эффектов.

«С переливом» —  спокойный эффект перелива кнопки.

«Пульсирующая» — мягкий эффект пульсирования, который будет привлекать внимание посетителей к кнопке.

6. Чтобы определить подходящее место, выберите из значения в пункте «Размещение на странице».

После выбора появится пункт «Отодвинуть от края». Зависит от выбора положения кнопки. Например, если Вы хотите разместить в нижнем правом углу, то отодвинуть можно от нижнего и правого края, на любое значение.

Попробуйте – все изменения тут же отображаются в области просмотра справа.

Последний пункт «Яндекс Цель для кнопки». Если вы хотите отслеживать не только отправленные заявки, но и сколько раз кликнули по кнопке, чтобы запустить виджет, создайте цель в Яндекс Метрике с типом «Javascript событие», укажите ее название и вставьте название в это поле.

Пункт «Поле формы»

Под параметрами кнопки идет блок «Добавить элемент».

Нажмите на него и появится список с элементами. Сначала добавим «Поле формы».

Появится сообщение с подтверждением. Если Вы уже совершили какие-то изменения в виджете, то выберите «Да. Сохранить и добавить элемент».

После сообщения об успешном добавлении, страница перезагрузится и слева появятся настройки пункта, а в области просмотра отобразится само поле с параметрами по умолчанию.

Вы можете отредактировать название блока для удобства, кликнув по нему.

1. Название поля – введите заголовок и он появится в области просмотра.

Также Вы можете отредактировать название прямо в области просмотра. Для этого наведите курсор на текст в области просмотра – появится карандаш. Кликните по нему и название перейдет в режим редактирования. Любой клик за пределами названия – выход из режима редактирования.

2. Тип поля.

2.1. Текст(Имя/Фамилия – стандартное поле ввода короткой информации.  Отображается по умолчанию при добавлении блока «Поле формы».

2.2 Телефон – поле для ввода телефона.

2.3 Число – числовое поле. подходит для ввода целых чисел со стрелками вверх/вниз.

2.4 Email – для ввода электронного адреса

2.5 Дата – при выборе отображается поле с календарем справа для выбора даты.

2.6. Многострочный текст, подходит если Вы хотите дать возможность клиенту указать дополнительные пожелания или оставить комментарий/примечание к заявке.
2.7. Галочка (чекбокс) – подходит, если Вы хотите дать пользователю возможность выбрать несколько значений.  При выборе этого типа ниже появится поле «Список значений», в котором нужно ввести значения – каждое с новой строки.

2.8-2.9. Радиокнопки и список значений отображаются по разному, но имеют одинаковый принцип: когда клиент может выбрать только один вариант из предлагаемых Вами.

Список вариантов также указываются в поле слева «Список значений». Каждый вариант указывается с новой строки.

3. Отметьте галочкой пункт «Обязательное» — если данное поле должно быть обязательно заполнено или выбрано.

Вы можете добавить любое количество полей формы.

Обратите внимание: при наведении на любой блок в области просмотра – появляется четырехсторонняя стрелочка над ним. Если ее зажать, то можно переместить блок ниже или выше, чтобы изменить порядок отображения.

Также можно перемещать блоки в левой части, тогда в области просмотра они тоже переместятся согласно размещению слева. Для этого зажмите двухстороннюю стрелку слева от названия блока.

«Изображение»

В пункте «Добавить элемент» выберите «Изображение» и подтвердите добавление во всплывающем окне.

Выберите нужное изображение в первом поле «Выберите файл» и загрузите его в виджет. После добавления он появится слева от блоков в нужном шаге и слева в блоке в маленьком превью.

Определите его размещение на странице:

Слева – будет находиться слева от других блоков в шаге.

Справа – справа от других блоков.

В потоке – изображение будет находится среди блоков. Здесь его можно будет перемещать – выше или ниже блоков.

На фоне – изображение станет фоновым для текущего шага.

В зависимости от расположения можно отрегулировать другие настройки блока:

1. Для позиции «Слева» или «Справа» — можно настроить:

• Ширину
• Закругление краев блока
• Вертикальное расположение «Сверху», «По центру», «Снизу».
• Анимацию при появлении и при наведении.
• Добавить ссылку на картинку

2. Для размещения «В потоке»:

• Ширину
• Закругление краев блока
• Горизонтальное расположение «Слева», «По центру», «Справа».
• Анимацию при появлении и при наведении.

3. Для размещения на фоне:

Разместить фон:

• «Растянуть на весь блок» — в таком случае картинка располагается на весь блок по меньшей высоте или ширине, а выступаящая часть обрезается
• «Сверху» — картинка помещается полностью на фон и выравнивается вертикально сверху.
• «По центру» — картинка полностью помещается внутри шага выравниваясь вертикально по центру.
• «Снизу» — аналогично, но выравнивается вертикально по нижней части шага.

«Текст»

Вы можете добавить примечания, акции и разместить их в нужном месте.

Для этого в списке «Добавить элемент» выберите элемент «Текст».

 В сообщении-подтверждении выберите «Да. Сохранить и добавить элемент».
Появится блок с текстом.

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

Для переноса текста на новую строку, в нужном месте нажмите «Enter».

Чтобы вставить ссылку в тексте, выделите курсором текст, который будет ссылкой и нажмите кнопку «Вставить/Удалить ссылку».

В появившемся окне укажите ссылку и нажмите кнопку «Вставить».

Чтобы удалить ссылку, поставьте курсор внутри текста с ссылкой и нажмите опять на кнопку «Вставить/Удалить ссылку».

Появится окно с ссылкой и кнопкой «Удалить» посередине. Нажмите на нее и ссылка исчезнет.

Выберите цвет и размер текста. Можно сделать текст жирным или курсивом. Выровнять текст по центру, слева или справа.

Также Вы можете задать фон этому блоку. По умолчанию он прозрачный. Сначала снимите галочку рядом с пунктом «Прозрачный фон», потом выберите подходящий цвет в палитре.

Расстояние от текста до края блока. Укажите значение, если хотите увеличить расстояние внутри текстового блока.

«Оценки»

В пункте «Добавить элемент» выберите «Оценки».

В появившемся окне подтверждения выберите «Да. Сохранить и добавить элемент». После этого блок оценок появится слева и в области просмотра.

1. Тип оценок.

На Ваш выбор: Цифры

Смайлики

Звезды

Далее идут настройки заголовка

2. Заголовок поля. Напишите Ваш вопрос к посетителям.

3. Цвет заголовка. Выберите цвет текста для вопроса.

 4. Размер заголовка. Укажите размер

За ними – настройки самих оценок.

5. Цвет оценок. Звездам и цифрам можно задать любой цвет по Вашему выбору.

6. Размер оценок. Отрегулируйте размер оценок.

В конце – общие настройки блока оценок.

7. Фон блока. Если нужно задать фоновый цвет – снимите галочку с пункта «Прозрачный фон», нажмите на цветовой круг и выберите подходящий цвет.

8. Расстояние от текста до края блока. Увеличивайте размер от элементов внутри блока до краев. Проверить работу блока Вы можете прямо в области просмотра панели управления.

Согласие на обработку данных

Обязательное поле для отправки формы. Рекомендуем его добавить. Оно уже содержит стандартный текст, Вам нужно будет только добавить ссылки на согласие на вашем сайте и на политику конфиденциальности.

Нажмите на «Добавить элемент», в выпадающем списке выберите значение «Согласие на обработку персональных данных» и подтвердите добавление во всплывающем окне.

После добавления элемента, страница перезагрузится и согласие появится слева и в области просмотра. В левом блоке 2 раза кликните по тексту согласия, чтобы изменить его.

Также Вы можете отредактировать текст в области просмотра. Для этого наведите курсор на него – справа появится зеленый карандаш. Нажмите на карандаш и перейдете в режим редактирования текста.

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

После того, как Вы отпустите мышку, ниже появится окошко, в которое нужно вставить ссылку.

Укажите ссылку и нажмите кнопку «Вставить». Выделенный текст сразу изменится по цвету – ссылка вставилась.

Чтобы отредактировать или удалить ссылку, поставьте курсор внутрь текста с ссылкой и кликните. Появится окно с ссылкой и кнопкой «Удалить».

Для редактирования – измените адрес ссылки и нажмите «Вставить», чтобы удалить – нажмите «Удалить».

Далее в блоке Вы можете изменить размер и цвет шрифта текста согласия и цвет ссылок.

«Кнопка заказа»

Чтобы добавить кнопку заказа, нажмите на «Добавить элемент» в панели слева. В списке выберите пункт «Кнопка заказа». В сообщении-подтверждении нажмите на кнопку «Да. Сохранить и добавить элемент».

После перезагрузки слева появится блок «Кнопка заказа», а в области просмотра появится сама кнопка с настройками по умолчанию.

Вы можете изменить надпись, настроить цвет фона и текста.

Если отметите галочкой пункт «Показать кнопку отмены», то в области просмотра появится кнопка «Очистить». А слева появятся настройки для нее, в которых в также можете изменить надпись, цвет фона и текста.

Сохраните все настройки и нажмите кнопку «Запустить».
Поздравляем! Вы создали свою первую форму обратной связи!

Демо виджета формы обратной связи