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

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

В этой небольшой заметке я покажу вам, как шаг за шагом создать красивую контактную форму на чистом CSS без использования изображений. Форма будет иметь поля со следующими данными: имя, адрес электронной почты, URL-адрес, тема и текст сообщения. Для кроссбраузерности мы воспользуемся вендорными префиксами, однако, для сокращения кода, здесь мы рассмотрим верстку без них. Скачать архив.

Создаем форму на HTML

Для начала немного пояснений к форме.

  • Input type = email используется для обозначения поля где пользователь может ввести адрес электронной почты. Браузеры, которые поддерживают этот тип поля смогут определить, ввел ли пользователь корректный адрес электронной почты или нет.
  • Input type = url используется для проверки ввода правильного или допустимого URL-адреса.
  • Require = required определяет состояние элемента формы, как требуется. Браузеры, которые поддерживают этот атрибут, блокируют отправку формы, до тех пор, пока все обязательные поля не будут заполнены.
  • Placeholder этот атрибут представляет собой подсказку, чтобы пользователь знал, что и в каком формате вводить данные. Заполнитель исчезает при нажатии на поле.

Создание полосатого фона

Для создания эффекта почтового конверта, начнем с заливки фона полосатым градиентом.

Свойство repeating-linear-gradient позволяет создать бесконечно повторяемый линейный градиент. Сначала мы наклонили полосы на угол в 45 градусов, а затем последовательно раскрасили полосы и задали им ширину в пикселах. Теперь у нас есть градиентный фон. Осталось добавить светло серый фон. Воспользуемся псевдоклассом after:

Оформляем заголовок H1

Для заголовка H1, я выбрал шрифт Questrial, для тела контактной формы — Droid Sans, а для амперсанда — шрифт Alice. Все эти шрифты есть в каталоге шрифтов от Google, поэтому, все, что мне нужно сделать — это использовать API-код от Google:

Теперь оформляем заголовок.

Добавим пиктограммы без использования картинок

Мы сделаем это с помощью шрифтовых иконок. Вы можете использовать, тот иконочный шрифт, который во вложении, а можете использовать любые другие, мне нравится составлять пакеты иконок с сайта flaticon.com. Преимущества использования шрифтов в нашем контексте — очевидно. Мы можем манипулировать размером, цветом и даже анимацией иконок. Чего не скажешь об обычных изображениях. Кроме того, мы всегда выигрываем в качестве отображения на retina дисплеях.

Теперь можно оформить наши поля ввода данных в неактивном и активном состоянии.

Оформление кнопки «Отправить» и подписей

Для кнопки «Отправить» мы используем тип поля type=submit . К сожалению, для оформления такого типа полей, мы не сможем воспользоваться псевдоклассами :before и :after . Поэтому я внедрил спецсимвол непосредственно в код HTML. Конечно, это не лучшее решение, так что вы можете его просто удалить.

Чтобы форма имела законченный вид, давайте добавим приятные цвета и переходы к подписям при наведении на них курсором.

Вместо заключения

Я надеюсь, что эта небольшая запись помогла вам лучше понять возможности HTML5 и CSS3. Еще раз подчеркну, что это лишь заготовка, которую вы можете использовать как основу для своих разработок. Во вложении к записи форма обратной связи адаптивна.

27 марта 2012 | Опубликовано в Веб-дизайн | 6 Комментариев »

Редко какой веб-сайт обходится без формы контактов. И пускай форма для контактов — не первая страница сайта и не самый важный элемент дизайна, но все же именно этот элемент играет важнейшую роль в процессе взаимодействия пользователя с сайтом (и, соответственно, собственно с компанией-владельцем). Форма контактов должна быть предельно проста, прозрачна, удобна и функциональна. При этом — броская и оригинальная (чтобы запомниться и не заскучать). Да, эти принципы всем известны. Но, согласитесь, иногда придумать что-то новое — не так то и просто. Предлагаем вашему внимания подборку сайтов с интересным и простым решением формы контактов.

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

Почему бы не оставить свои контакты на бумаге, как в старые добрые времена? Лаконично и понятно.

Форма контактов в виде открытки — оригинально и броско.

Творческое решение, которые создается с помощью использования оригинального шрифта. Имитация доски объявлений — заметно, ярко и приятно взгляду.

Еще один пример красивого и визуально привлекательной контактной формы — банка колы, смартфон — небольшие детали, которые располагают пользователя к общению.

Оригинально. Согласитесь — напоминает чем-то наш рабочий стол.

7. Ctrln

Приятный внешний вид формы контактов настраивает на семейно-дружную атмосферу. Почтовый красный ящик — аллюзия к переписке по почте.

Читайте также:  Фото самого большого телефона в мире сенсорный

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

Простой, несложный дизайн формы контактов, и к тому же — аллюзия к переписке с живым человеком (портрет)

Привычно и легко — напишите письмо и подпишите конверт. Всю информацию доставят адресату.

Заполните форму контаков и ваши письма отправят на нужный почтовый ящик.

12. Xruiz

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

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

14. Fseid

Этот контакт сформирован как доска объявлений, где можно размещать различные уведомления с помощью скрепки и флэш-контактов.

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

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

Очень динамичная форма контактов с массой интерактивных элементов для создания пользовательского интереса веб-сайта. Есть чему удивиться.

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

Этот контакт — простота в лучшем виде, легкость и свежесть.

20. Svn2ftp

Свежий подход к дизайну контактной формы. Некоторые элементы оживляют вебсайт, способстуют взаимодействию пользователя со страницей.

Вы просто должны перейти к нижней части веб-страницы, чтобы найти эту прекрасную форму контактов.

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

Простой и чистый дизайн, и в тоже время алюзия к газетному объявлению.

Красивое сочитание цветов, предельная ясность и четкость. При этом — отсутствие навязчивости.

25. Rescueseo

Эта контактная форма работает вместе с определенным SEO пакетом, который вы выбираете, тем самым упрощая задачу пользователя объяснить, что именно он хочет получить от компании.

Одно из правил создания контактных форм — придерживаться стилистики сайта. Для этого ресурса — даже больше — придерживаться тематики сайта. При этом простая и несложная контактная форма не заставит вас долго мучиться над заполнением полей.

Новый и инновационный подход размещения контактной формы — в верхней части веб-страницы, подчеркивая тем самым его важность.

Melonfree использует концепцию минимализма, сохраняя простой, но привлекательный дизайн. А фигурки дизайнера и разработчика напоминают, что это не абстрактный сайт, который спрашивает ваши контактные данные «для галочки», а компания действительно заинтересована в связи с пользователем.

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

Zeropixel контактная форма несколько отличается от других особенно в плане разработки и использования цвета.

31. 1minus1

У сайта 1minus1 нет отдельный контакт-страницы, но, скорее, контактные формы выглядят как вспывающие окна на экране при нажатии кнопки «контакт» .

32. Syropia

Syropia также использует концепцию «почтовый конверт», правда разрабатывает ее совершенно по своему.

33. Agencyp

Кажется форма контактов на этом сайте ничем не отличается от другихб но это не так. Присмотритесь внимательнее.

Чрезвычайно инновационный подход к проектированию контактной формы — ненавязчиво, но с четкой акцентацией. Еще один элемент — фотоновый рисунок, который успокаивает и располагает пользователя поделиться своей контактной информацией.

Связаться с нами? Что может быть проще — наберите телефонный номер и с вами пообщается девушка с приятным голосом. По меньшей мере именно на такую мысль наталкивает контактная форма на этом сайте, и, надо признать, располагает оставить свои координаты. Очередной раз убеждаешься — психология в создании сайта играет не последнюю роль.

36. CPLX

Отправка сообщений в облака. В стиле этого проекта, а, главное — непринужденно и со вкусом.

37. Bio-Bak

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

Напишите ваше сообщение на бумаге, заполните имя и электронный адрес в конверт и отправьте письмо веб-мастеру. Разве это не интересно?

Читайте также:  Что значит home office

В дополнение к контактной форме, на этом сайте представляется и другая информация от компании, такая ​​как номер телефона и адрес электронной почты, чтобы пользователь мог связаться с компанием напрямую. Таким образом — это как будто диалог в контактной форме — мы вам свои контакты, а вы нам — ваши.

Уродливая карикатура в контактной форме — для этого сайта весьма уместный штрих, который завершает рисунок сайта и демонстрирует элемент игры.

Концепт письма весьма охотно эксплуатируется в создании контактных форм. Это и не удивительно, ведь фраза «отправить письмо» даже у продвинутого юзера все равно ассоциируется с почтовым письмом.

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

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

Дата публикации: 2013-02-08

От автора: давайте рассмотрим создание функциональной формы html5, производящей валидацию пользовательских данных на стороне клиента. Сделав это, мы улучшим ее с помощью CSS, в том числе CSS3!

Шаг 1: Формирование представления о функциональности

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

Адрес электронной почты

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Нам нужно убедиться, что пользователь вводит информацию правильно. Чтобы этого добиться, применим новые техники валидации на стороне клиента HTML5. А как насчет пользователей, у которых нет возможности использовать формы HTML5? Можно просто применить валидацию со стороны сервера, но наша статья не об этом.

Шаг 2: Разработка формы

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

Видите, нашу форму составляют следующие элементы:

Заголовок
Обозначение обязательных для заполнения полей

Названия полей ввода

Поля ввода данных
Текст-заполнитель

Подсказки к полям

Кнопка «Отправить» (Submit)

Теперь, когда вы определили, какие элементы составляют нашу форму, можно создавать разметку HTML.

Шаг 3: Первичный код HTML

Вплоть до этого момента HTML-файл в браузере пока пуст. Это – просто начальный код для страницы HTML5.

Шаг 4: Форма HTML

Давайте создадим форму HTML (оставим метод action пока пустым, так как проверка данных на стороне сервера в этом учебнике не раскрывается):

Шаг 5: Элементы формы HTML

Для получения организованного и структурированного контента своей формы, обернем ее элементы (label, input и т.д.) в список. Так что начнем мы с создания заголовка формы и первого элемента input:

Подсказки для полей формы

Как видно из макета, мы собираемся сделать форматированные подсказки для полей ввода электронного адреса “email” и вебсайта “website”. Поэтому добавим свои подсказки под поля ввода, где это нужно, и назначим им класс, чтобы можно было позже определить им стили.

Остальные элементы input

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

Шаг 6: Добавляем атрибут placeholder

Одно из первых усовершенствований, которые предлагает HTML5 для веб-форм (с которым вы, возможно, уже знакомы) – это способность установить текст-подсказку. Он показывается, когда поле ввода либо пустое, либо находится не в фокусе.

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

Подсказка: Назначьте placeholder’у стили

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

В современных браузерах поддержка атрибута placeholder налажена довольно хорошо (кроме IE9, к сожалению). Если вам реально требуется поддерживать его во всех браузерах, можно посмотреть решение проблемы в javascript.

Шаг 7: Основной CSS

Чтобы создать для формы некую структуру, давайте добавим немного основного CSS. Я прокомментирую вам правила:

Удалите стиль :focus

Webkit автоматически добавляет к input-ам стили, когда те находятся в фокусе. Так как мы будем добавлять собственные стили, то стили по умолчанию нужно отменить:

Типографские стили

Давайте определим элементам своей формы типографские стили:

Стили списка

Давайте назначим стили элементам списка, чтобы придать форме структуру:

Читайте также:  Msi z77a g43 биос

Кроме того, добавим тонкую рамку к верхнему и нижнему разделам формы. Выполнить это можно, применив селекторы :first-child и :last-child. Они выбирают, как подразумевается в их названиях, первый и последний элементы списка ul.

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

Заголовок формы

Назначим стили разделу заголовка своей формы. Он включает тэг заголовка и уведомление, которое информирует пользователей о том, что звездочка (*) обозначает поля, обязательные для заполнения.

Элементы input

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

Теперь добавим несколько дополнительных визуальных стилей CSS. Некоторые из них видны только пользователям современных браузеров.

Шаг 8: Добавляем интерактивность с помощью CSS3

Давайте добавим немного интерактивности. Мы заставим выбранное в данный момент поле увеличиваться путем добавления отступа.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Шаг 9: Атрибут required в HTML5

Теперь пора заняться долгожданным: инструментами управления формой HTML5.

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

Итак, продолжим и добавим атрибут required во все элементы своей формы (потому что нам нужно, чтобы они все были заполнены).

Шаг 10: Стили обязательных для заполнения полей

Вы, возможно, заметите, что в визуальном плане от добавления атрибута required ничего не изменилось. Мы собираемся назначить стили обязательных для заполнения полей с помощью CSS. В этом примере каждое поле в качестве фонового изображения получит красную звездочку. Чтобы это сделать, нам нужно сначала добавить padding справа input-а, где будет находиться фоновое изображение (так будет предотвращено наложение текста, если запись окажется длинной строкой):

Теперь воспользуемся псевдоселектором CSS :required для того, чтобы выбрать все элементы формы с нужным атрибутом. Я сделал в photoshop’е простую иконку с красной звездочкой размером 16×16 px, которая послужит визуальным индикатором поля, обязательного к заполнению.

Что происходит при отправке формы?

Прямо сейчас при отправке формы с использованием элементов HTML5 различные браузеры действуют по-разному. Большая часть браузеров воспрепятствует отправке и покажет пользователю подсказку, отмечающую первое обязательное к заполнению поле, в которое не введено значение. Визуальные стили и поддержка таких полей довольно широки. К счастью, в будущем такое поведение будет стандартизировано.

В quirksmode можно посмотреть поддержку текущим браузером атрибута required.

Подсказка:

На самом деле в webkit назначить стили сообщению в поле-«пузыре» можно с помощью следующего:

Шаг 11: Понимание новых атрибутов type и валидации на стороне клиента в HTML5

Валидация HTML5 работает в соответствии с атрибутом type, установленном в полях формы. Годами HTML поддерживал лишь горстку атрибутов type, таких, как type=»text», но у HTML5 имеется более дюжины новых типов ввода данных, включая электронную почту и url, которые мы и собираемся использовать в своей форме.

Сочетая атрибуты ввода type с новым атрибутом required, теперь браузер способен делать валидацию данных пользователя на клиентской стороне. Если браузер пользователя не поддерживаем новые атрибуты type, такие как type=»email», он просто по умолчанию вернется к type=»text». Действительно, это довольно забавно. По сути, у вас есть обратная совместимость со всеми браузерами в мире, ура!

Так что происходит, если браузер на самом деле поддерживает новые атрибуты type? Для браузеров десктопов визуально нет никакой разницы (кроме определенной пользовательскими правилами CSS). Поле type=»text» выглядит точно так, как поле type=»email». Однако для браузеров мобильных устройств в отношении пользовательского интерфейса разница имеется.

Пример: iPhone

iPhone от Apple’а распознает типы формы и динамично изменяет экранную клавиатуру, предоставляя требуемые по контексту символы. Например, все электронные адреса требуют следующих символов: “@” и “.” И iPhone предоставляет эти символы, когда у input-a задан соответствующий тип.

Шаг 12: Изменение атрибутов type

Поля нашей формы уже установлены по умолчанию на type=»text». Но теперь требуется изменить атрибут типа в полях, предназначенных для электронной почты и вебсайта на соответствующий тип HTML5.

Ссылка на основную публикацию
Adblock detector