Всплывающая форма обратной связи

Всплывающая форма обратной связи

В этом видеоуроке вы узнаете как создается всплывающая форма обратной связи в программе Adobe Muse с помощью использования стандартного мини-приложения программы.

Всплывающая форма обратной связи

В сегодняшнем видеоуроке, как создавается всплывающая форма обратной связи в программе Adobe Muse. Открываем программу Adobe Muse, заходим в File -> Новый сайт -> окей. Открываем в режиме дизайна домашнюю страницу и приступим.

Всплывающая форма обратной связи. Составные элементы.

Создавать элемент “всплывающая форма обратной связи” мы будем с помощью библиотеки мини-приложений впрограммы Adobe Muse. Я буду использовать стандартную библиотеку без всяких сторонниих виджетов. Открываем библиотеку мини-приложений программы Adobe Muse и ищем здесь кнопки. Давайте создадим сразу кнопку. “Кнопка состояния“. Перетаскиваем ее на рабочее поле, получаем вот такую кнопочку. Нам понадобится ещё форма обратной связи. Идем в формы -> простой контакт, и перетаскиваем на рабочее поле. Итак, у нас ест кнопка и есть форма. Теперь мы будем использовать еще один элемент, который называется lightbox. Но мы возьмем пустую форму и перетащим ее на рабочее поле. Итак, у нас есть три элемента: кнопка, форма обратной связи и пустой элемент из раздела “Композиции“. Я закрою библиотеку мини-приложений.

Всплывающая форма обратной связи. Редактирование.

Лайтбокс. Давайте посмотрим. У нас есть элемент lightbox, состоящий из трех триггеров и одного рабочего элемента, в котором будет располагаться основная информация. Я сразу удалю 2 триггера, поскольку они нам будут не нужны. Я выделяю триггер и нажимаю на кнопку Delete. Далее давайте здесь изменю надпись, например, “Отправить сообщение”. Удалю лишний элемент, расположу текст посередине кнопки и немного увеличу шрифт. Вот такая кнопка у нас будет. Может быть, не совсем красивая, но вы сделаете по своему усмотрению.

Композиция. Далее все очень просто. Нам необходимо расположить кнопку в триггер lightbox, а форму обратной свзи нужно расположить в основное окно lightbox. Делается это очень просто. Выделяем нашу форму обратной связи и перетаскиваем ее правой кнопкой мышки в основное поле lightbox. Основное поле lightbox выделится синей рамкой. Это означает, что наш элемент привязался к этому полю. Отпускаем правую кнопку мыши и все: наша форма расположена в элементе lightbox, в основном поле.

Подкорректируем немного размер. Я бы еще убрал заливку и обводку. Это у нас триггер, триггер нашего lightbox. Сюда мы должны расположить кнопку. Я немножко растяну размер и точно таким же образом я перетаскиваю кнопку в триггер lightbox. Он подсвечивается синей рамкой, и я отпускаю кнопку мыши. Далее подровняю так же размер триггера под размер кнопки и уберу здесь обводку и заливку.

Всплывающая форма обратной связи. Настройка лайтбокса.

Далее нам необходимо настроить сам lightbox. Нажимаем на стрелочку сбоку и делаем следующие настройки: положение выставляем lightbox и здесь выставляем: кнопка – нажата. Так же мы можем выбрать здесь элемент перехода, это будет элемент анимации: как будет появляться наша форма при нажатии кнопки “Отправить сообщение”. Давайте сейчас выйдем из режима редактирования и посмотрим, что же у нас получилось. Нажимаем режим просмотра и видим, что у нас на странице нашей есть только одна кнопка “Отправить сообщение”. Если мы ее сейчас нажмем, то у нас выскакивает наша контактная форма, которую мы можем заполнить и нажать кнопку “Отправить”. Вот так все просто.

Чтобы нам не мешало в будущем при редактировании страницы эта вся громоздкая конструкция, мы можем в настройках убрать галочку “Показать элемент lightbox при редактировании”. Это позволит нам скрыть основное поле lightbox и перемещать только кнопку по нашей странице. Давайте я размещу ее вот здесь, и мы посмотрим еще раз, как это все работает. Мы нажимаем кнопку “Отправить сообщение” и всплывает наша контактная форма, где человек вводит имя, e-mail, сообщение и нажимает кнопку “Отправить”.

Итак, в этом видеоуроке мы научились созданию элемента сайта “всплывающая форма обратной связи” с помощью использования стандартных виджетов программы Adobe Muse.

На этом все, дорогие друзья. Подписывайтесь на мой канал, ставьте лайки к этому видео, смотрите мои  видео на канале и оставляйте комментарии внизу под этой статьёй и под видеоуроками в YouTube.

Автор, Дмитрий Шаповалов.