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

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

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

В этом видеоуроке вы узнаете как создается всплывающая форма обратной связи в программе 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.

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

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

Оставить комментарий

Подтвердите, что Вы не бот — выберите самый большой кружок: