Настройка формы обратной связи в Adobe Muse

Всем привет! Продолжаем цикл лекций по веб-дизайну и разработке сайтов в замечательной программе Адобе Мьюз. Сегодня я расскажу вам, как из серой и неприметной формы стандартного функционала сделать яркую и привлекательную форму обратной связи. Многие из вас, дорогие читатели, наверняка уже поняли, что качественная форма играет на сайте важнейшую роль. Она определяет конверсию, влияет на поведенческие факторы, служит связующим звеном между заказчиком и исполнителем. Настройка формы обратной связи в Adobe Muse на первый взгляд непроста и таит в себе множество подводных камней. Отчасти это так. Однако, уверяю вас – если вы внимательно изучите данное пособие и сделаете всё поэтапно, создание формы обратной связи станет для вас делом 5 минут, и ваши сайты заиграют новыми красками! Поехали.

Облачный сервис Битрикс24 помогает бизнесу работать.
Бесплатно. Неограниченно. Онлайн. Создать БЕСПЛАТНО.

Форма обратной связи Muse.

Для начала откроем Muse и создадим в нем новый проект. После чего сразу приступим к созданию формы в произвольном пустом месте. Кликните Окно – > Библиотека мини-приложений. В открывшемся окне разверните вкладку Формы и, зажав ЛКМ, вытяните Простой контакт в рабочую область проекта:

Настройка формы обратной связи в Adobe Muse

(Кликните по картинке для увеличения)

Перед нами стандартная форма обратной связи Muse. Она, хоть и функционирует на все 100, выглядит по современным меркам дизайна кошмарно и не способна привлечь внимание посетителя. Предлагаю сделать из неё “конфетку” 🙂 Наша форма будет выполнять функцию сбора контактных данных для обратного звонка, поэтому поле Сообщение мы удаляем. Кликаем, пока не выделится его фрейм, и жмем delete. Вместо него вставим поле для ввода номера телефона. Для этого кликаем по синему кружку с треугольником и в открывшемся окне ставим галочку Номер сотового телефона (в этом же окне вы можете добавлять и другие стандартные поля):

Настройка формы обратной связи Adobe Muse

(Кликните по картинке для увеличения)

Далее удалим надписи над полями формы обратной связи и выровняем сами поля по вертикали, притянув их мышкой на равные промежутки:

Настройка формы обратной связи

Adobe Muse уроки. Красивая форма обратной связи.

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

форма обратной связи в Adobe Muse

Теперь определим обязательность ввода данных пользователем. Снова кликнем по полю, чтобы появился синий кружок, и с его помощью вызовем окно параметров конкретного поля. Поставьте галочку Обязательное поле, после чего отправка формы обратной связи станет недоступной, если данное поле останется пустым. Я сделал обязательными полями имя и номер телефона, так как люди не очень-то любят оставлять свой e-mail из-за постоянного спама. Также, я подредактировал сами надписи, добавив звездочки для зрительного удобства:

форма обратной связи Muse

В последующих уроках по Adobe Muse мы подробнее разберем незадействованные поля формы, а сейчас мы увеличим высоту полей форм. Выделите фрейм поля и растяните его мышкой до 40 пикс. Заметьте, что все три поля увеличиваются одновременно. После этой процедуры надписи полей остались прижатыми к верхним границам, что смотрится не совсем красиво. В этом случае я просто увеличиваю интерлиньяж текста (Интерлиньяж есть межстрочное расстояние, а значит, увеличивая его, я использую его не по прямому назначению. Однако это помогает регулировать вертикальную позицию однострочного текста). В своем примере я увеличил интерлиньяж до 130%:

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

С полями пока всё. Настало время обратить внимание на кнопку отправки, ведь в красивой форме обратной связи должна быть красивая кнопка! Выделим фрейм кнопки и внесём следующие изменения: оранжевая заливка, радиус скругления 40, толщина обводки 0. Приблизительные размеры кнопки 200 * 50 пикс.:

adobe muse уроки

Теперь подредактируем текст “Отправить” внутри кнопки. Все изменения вы можете видеть на скриншоте. Я поменял шрифт, его размер и цвет, сделал все буквы заглавными и увеличил интерлиньяж до 150% (в дальнейшем я увеличил его до 160%):

уроки Adobe Muse

(Кликните по картинке для увеличения)

Всего пара взмахов мышкой, а кнопку уже не узнать! Но это ещё не конец. Давайте оживим нашу кнопку эффектами наведения. Если вы новичок, у вас могут возникнуть затруднения на этом этапе, у меня они, признаюсь, возникали. Однако, как только я развил “ловкость рук” и внимательность, всё стало на свои места. В Adobe Muse у каждой кнопки есть 4 так называемых Состояния, это:
– Стандартное
– Курсор над кнопкой
– Нажата кнопка мыши
– Идет отправка

Выбрать состояние можно, кликнув по нему в левой части верхней панели Muse, предварительно выделив фрейм кнопки. По умолчанию всегда стоит Стандартное состояние, и все три остальных состояния по умолчанию копируют его почти полностью (если кнопка сделана с нуля, то на 100% полностью). Чтобы задать эффект наведения курсора на кнопку, выберите в списке состояние Курсор над кнопкой. Обратите внимание, что теперь все вносимые изменения будут касаться только текущего состояния! Предлагаю сделать вертикальную градиентную заливку от светло-оранжевого к нашему оранжевому:

Adobe Muse форма обратной связи

(Кликните по картинке для увеличения)

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

Adobe Muse форма

(Кликните по картинке для увеличения)

Adobe Muse форма обратной связи.

Итак, остались последние штрихи. Следующим шагом я сделал подложку формы. Выберите инструмент Прямоугольник (клавиша М) и нарисуйте фрейм размерностью примерно 400 * 460 пикс. Залейте его цветом и задайте радиус скругления в 35 пикс. Затем, кликнув по нему ПКМ, выберите Упорядочить – > На задний план, после чего надвиньте форму обратной связи на центр прямоугольника:

Красивая форма обратной связи

(Кликните по картинке для увеличения)

Наблюдательные читатели заметили, что у кнопки отправки появилась тень. Сделать её довольно легко. Просто выделите кнопку, кликните на верхней панели Эффекты и поставьте галочку Тень. Параметры моей тени следующие: цвет черный, непрозрачность 29%, размытие 0, угол 45, смещение 5.
Теперь снова вернемся к полям формы и приукрасим их дополнительно. По умолчанию у полей формы имеется светло-серая обводка в 1 пиксель. Давайте уберём её, кликнув по полю и сделав толщину обводки 0. Также добавим небольшое скругление, в 4 пикс. На этом же этапе можно задать белую заливку полей, так как изначально она несколько темнее истинно белого цвета:

Красивая форма обратной связи muse

(Кликните по картинке для увеличения)

Применим к полям простой эффект наведения. Для этого выделим фрейм поля и слева наверху выберем состояние Не пустое. Как вы заметили, у полей 5 различных состояний, нас интересует второе в списке. После этого раскройте параметры Эффектов и отметьте галочку Свечение. Теперь, при наведении курсора мыши, каждое поле формы будет выделяться мягким белым свечением:

как сделать форму обратной связи

(Кликните по картинке для увеличения)

Чего-то не хватает, вам так не кажется? Конечно же, заголовка, который будет привлекать внимание посетителя и побуждать к действию. Давайте напишем надпись “Оставьте заявку, и мы перезвоним вам!” с помощью инструмента Текст:

как сделать красивую форму обратной связи

(Кликните по картинке для увеличения)

Следующий важный шаг, который многие упускают при настройке формы обратной связи в Adobe Muse, это настройка окошка сообщения формы. По умолчанию оно скрыто от глаз, и вы даже можете не подозревать о его существовании. В этом окошке выводятся сообщения об успешной отправке формы, либо об ошибке отправки, и в стандартном варианте оно также выглядит серо и неприметно. Исправим этот недостаток. Выделите фрейм всей формы и проведите курсором мышки в нижней её части, рядом с кнопкой отправки. Как только вы нащупаете фрейм сообщения формы, кликните по нему. У него есть 3 состояния: успешно отправлено (стандартное), идёт отправка и ошибка отправки. Поменяйте их стили на более крупные и заметные. Вот изменения, которые я внес в своем примере:

как сделать красивую форму обратной связи в adobe muse

(Кликните по картинке для увеличения)

Как вы видите, я изменил шрифт, его размер и цвет. Помимо этого я растянул фрейм сообщения до ширины полей формы и отцентровал его. Аналогичным образом я подредактировал оставшиеся два состояния. Ну и напоследок я покажу, как задать электронный адрес, на который будут приходить заявки с вашей формы. Для этого снова выделите фрейм формы и кликните по синему кружку с треугольником. В открывшемся окне вбейте желаемый e-mail и нажмите enter. Если вы хотите, чтобы форма приходила на несколько адресов, перечислите их через запятую без пробела:

сделать форму обратной связи

(Кликните по картинке для увеличения)

Здесь же можно поменять и Имя формы, чтобы получателю было проще ориентироваться во входящих письмах. Вот и всё! Рабочий вариант формы обратной связи из данной статьи вы можете найти по этой ссылке.

Спасибо за внимание! Теперь вы знаете как сделать красивую форму обратной связи в Adobe Muse. Если у вас возникли вопросы по Адобе Мьюз, пишите нам на электронную почту:

webplus.studio@inbox.ru

Ответим всем 🙂

Комментарии (2)

    • В свойствах формы, вызываемых по нажатию синего треугольника, есть пять плюсиков. Жмём на любой – добавляем нужный тип поля. Чтобы переименовать, щелкаем по полю два раза.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

18 + 1 =


webplus создание сайтов в казани

Copyright © 2008 - 2024 | Webplustudio. Создание сайтов недорого в Казани.

Наш профиль в Инстаграм
Мы Вконтакте

Политика конфиденциальности