Форма обратной связи для сайта

Форма обратной связи для сайта

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

В данном уроке вы узнаете как создается форма обратной связи для сайта в программе Adobe Muse. Узнаете об основных настройках и параметрах стандартного виджета (мини-приложения) программы для создания контактных форм. Просто, понятно, доступно.

Форма обратной связи для сайта. Создание.

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

Сейчас я быстро набросаю небольшой дизайн: создаю блок, сделаю ему какую-нибудь заливку или какую-нибудь надпись («Сайт для сбора контактов» или «Форма для сбора контактов»). Для того, чтобы узнать как создается форма обратной связи для сайта, заходим в стандартную библиотеку Muse — «библиотека-мини-приложений» она называется. Нажимаем. И здесь во вкладочке формы выбираем простой контакт и перетаскиваем правой кнопкой мышки на рабочее поле. Вот мы перетащили, я поставлю сбоку пока. И в принципе наша форма уже практически рабочая.

Форма обратной связи для сайта. Настройки.

Что мы здесь можем настроить? Давайте сразу посмотрим. Здесь мы можем добавить имя формы: любое имя формы, можете называть, как хотите. Я обычно называю латинскими буквами «Form1». Здесь вы можете написать свой e-mail, на который будет приходить информация, которую люди будут заполнять в форме. Далее вы можете указать, оставаться ли на текущей странице пользователю после отправки вам сообщения либо переходить по какой-либо ссылке, либо перейти на страницу сайта или скачать какой-нибудь файл. То есть у вас есть возможность указать человеку, куда перейти после нажатия кнопки «Отправить».

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

По умолчанию программа нам выставляет три поля: имя, e-mail, сообщение (чтобы человек ввел) и кнопка «Отправить». Мы можем добавлять или убирать стандартные поля, а также пользовательские поля. Стандартные поля (электронный адрес и имя) у нас уже есть. Далее можем добавить, например, номер сотового телефона (номер домашнего телефона я уберу), компания (название компании человек может ввести), номер рабочего телефона, домашний или рабочий адрес. Они выглядят одинаково, я сейчас нажму, здесь будет написано «домашний адрес», там будет написано «рабочий». Здесь будет несколько полей, которые должен будет заполнить человек: город, область, почтовый индекс, страну убираю. Рабочий адрес точно так же. Почтовый индекс, страна, рабочий адрес. Так же можно добавить название веб-сайта. Если у ваших пользователей есть свои веб-сайты, они могут здесь их указать, если вам необходима эта информация для сбора в контактной форме. Так же вы можете выбрать здесь один из двух видов капч, которые пользователь должен будет ввести для того, чтобы подтвердить, что он не робот. Это относится к стандартным полям.

Форма обратной связи для сайта. Пользовательские поля формы.

К пользовательским полям относятся такие поля, как однострочный текст, многострочный текст (может содержать и больше строк). Для того, чтобы удалить одно из полей, нужно выделить и нажать Delete. Еще в пользовательских полях вы можете добавить к форме различного вида флажки или группу флажков, или группу переключателей. Если мы добавляем флажок, то здесь человек может на что-то согласиться или не соглашаться, отметив checkbox (флажок). Если мы ставим группу флажков, человек может выбрать из предложенных вариантов какие-либо ему подходящие: либо все, либо только один, либо вообще может не выбирать ничего. Если мы ставим группу переключателей, мы пишем название группы переключателей и какие-то варианты, но чем отличается группа переключалей от группы флажков, то только тем, что здесь другого вида checkbox, здесь радио-кнопки в виде кружков, и с помощью этой группы переключателей человек может выбрать только один из вариантов. Если он выбирает один вариант, то во втором варианте автоматически снимается отметка. Дальше я вам еще это покажу.

Форма обратной связи для сайта. Редактирование дизайна.

И последний параметр, который мы можем указать — это редактировать блоки вместе либо редактировать каждый блок отдельно в этой форме. Что это значит? Если стоит checkbox «редактировать вместе», то, редактируя какое-то одно из полей, автоматически остальные поля растягиваются до таких же размеров. Если же checkbox снят, то мы сможем редактировать все поля по отдельности.

Давайте сейчас настроим какой-нибудь дизайн для этой формы, чтобы она была немного красивее. Я, например, выделю полностью всю форму и нажму на закладку «Текст», чтобы выбрать шрифт. Шрифт pt sans и цвет, например, черный выберу. Пускай будет хорошо видно. Может быть, сделаю его чуть-чуть серым, по 25 на каждый канал цвета. Разместим эту форму по центру. Так же мы можем передвинуть кнопку, информационное поле. И в принципе все, если только не сделать кнопку, например, красной: сделать ей заливку. Сделаем кнопку красной, а цвет текста в ней белый. Можем растянуть кнопку на всю ширину и сделать ее слегка побольше, а текст, например, 24 поставить. Вот такая будет кнопка.

Здесь так же, как и в предыдущем уроке, можем настраивать различные состояния кнопки. Я сейчас настрою цвета: оранжевый, когда курсор над кнопкой, для «нажата кнопка мыши» поставлю цвет снова красный и «идет отправка» пускай так и остается: серая кнопка. Вот так.

Форма обратной связи для сайта. Просмотр.

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

Форма обратной связи для сайта. Обязательные поля и напоминания.

Мы видим, что при нажатии кнопки «Отправить» у нас некоторые поля подсвечиваются красным. Давайте я вам сейчас объясню. Заходим в режим дизайна. У каждого поля формы есть настройки, где мы можем настроить, обязательное это поле или не обязательное для заполнения пользователем. Мы можем поставить напоминание, если оставлено пустым, убрать или добавить подпись над полем и поставить текст сообщения — это информационный небольшой блок, который будет нам подсказывать, например, что это поле обязательное. Если мы такие поставим везде галочки (на каждом обязательном поле), то человек сразу будет знать, что это необходимо заполнить обязательно.

На этом все, дорогие друзья. Теперь вы знаете, как добавляется форма обратной связи для сайта в программе Adobe Muse. А мы с вами прощаемся до следующих уроков. Смотрите видео на моем канале, подписывайтесь, ставьте лайки.

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

Автор видеоуроков и курсов,
Дмитрий Шаповалов.

2 комментария к “Форма обратной связи для сайта

  1. Здравствуйте. При снятии галочки с «напоминание, если оставлено пустым», когда открываю страницу для просмотра почему-то исчезает сообщение из блока (пустой формы). Есть возможность это как-нибудь пофиксить?

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

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