Дизайн контактных форм: 40+ оригинальных примеров
27 марта 2012 | Опубликовано в Веб-дизайн | 5 Комментариев »
Редко какой веб-сайт обходится без формы контактов. И пускай форма для контактов — не первая страница сайта и не самый важный элемент дизайна, но все же именно этот элемент играет важнейшую роль в процессе взаимодействия пользователя с сайтом (и, соответственно, собственно с компанией-владельцем). Форма контактов должна быть предельно проста, прозрачна, удобна и функциональна. При этом — броская и оригинальная (чтобы запомниться и не заскучать). Да, эти принципы всем известны. Но, согласитесь, иногда придумать что-то новое - не так то и просто. Предлагаем вашему внимания подборку сайтов с интересным и простым решением формы контактов.
Здесь форма контактов помещается в нижней части страницы при нажатии кнопки «связаться».Конструкция выглядит оригинально, особенно если сравнивать с другими подобными контактными формами.
2. Try Triangle
Почему бы не оставить свои контакты на бумаге, как в старые добрые времена? Лаконично и понятно.
3. Asvalia
Форма контактов в виде открытки — оригинально и броско.
4. Фото Marcol
Творческое решение, которые создается с помощью использования оригинального шрифта. Имитация доски объявлений - заметно, ярко и приятно взгляду.
Еще один пример красивого и визуально привлекательной контактной формы — банка колы, смартфон — небольшие детали, которые располагают пользователя к общению.
6. Stan Gursky
Оригинально. Согласитесь — напоминает чем-то наш рабочий стол.
7. Ctrln
Приятный внешний вид формы контактов настраивает на семейно-дружную атмосферу. Почтовый красный ящик — аллюзия к переписке по почте.
Разные яркие цвета дают возможность акцентировать внимание на различных кнопках-сигналах и полях, которые необходимо заполнить.
9. Carsonified
Простой, несложный дизайн формы контактов, и к тому же — аллюзия к переписке с живым человеком (портрет)
10. David Hellmann
Привычно и легко — напишите письмо и подпишите конверт. Всю информацию доставят адресату.
11. Step2reality
Заполните форму контаков и ваши письма отправят на нужный почтовый ящик.
12. Xruiz
Творческий дизайнер как и полагается разработал эту визуально привлекательную форму контактов — ненавязчивую, но интересную.
13. Silly Poems
Нет больших изображений, ни типографических элементов, а простая форма контакта с красивым и простым фоном, и этого, конечно, достаточно, чтобы захватить внимание.
14. Fseid
Этот контакт сформирован как доска объявлений, где можно размещать различные уведомления с помощью скрепки и флэш-контактов.
15. La Masa Mimatta
Несколько таинственная но привлекательная форма контактов, которая не требует много информации, чтобы отправить запрос к веб-мастеру. Между тем — имитация живого общения в письмах.
16. Fundo Лос Paltos
Контактная информация также предоставляется в том случае, если вы хотите связаться с ними по телефону или факсу наряду с электронной почтой. Очередной вариант псевдо «обмена контактами» с пользователем.
17. Five Cent Stand
Очень динамичная форма контактов с массой интерактивных элементов для создания пользовательского интереса веб-сайта. Есть чему удивиться.
Случайная и непритязательная форма контактов, которая отличается от всех других форм в этой подборке. Имитация живово общения в формате писем.
Этот контакт — простота в лучшем виде, легкость и свежесть.
20. Svn2ftp
Свежий подход к дизайну контактной формы. Некоторые элементы оживляют вебсайт, способстуют взаимодействию пользователя со страницей.
Вы просто должны перейти к нижней части веб-страницы, чтобы найти эту прекрасную форму контактов.
Вы можете чувствовать себя, как будто вы пишете на бумаге, но на самом деле это не так. Обычный блокнот, казалось бы, но нет, это контактная форма.
23. Harmony Republic
Простой и чистый дизайн, и в тоже время алюзия к газетному объявлению.
24. Corvusart
Красивое сочитание цветов, предельная ясность и четкость. При этом — отсутствие навязчивости.
25. Rescueseo
Эта контактная форма работает вместе с определенным SEO пакетом, который вы выбираете, тем самым упрощая задачу пользователя объяснить, что именно он хочет получить от компании.
26. Reverend Danger
Одно из правил создания контактных форм — придерживаться стилистики сайта. Для этого ресурса - даже больше — придерживаться тематики сайта. При этом простая и несложная контактная форма не заставит вас долго мучиться над заполнением полей.
27. Webfoo London
Новый и инновационный подход размещения контактной формы — в верхней части веб-страницы, подчеркивая тем самым его важность.
28. Melonfree
Melonfree использует концепцию минимализма, сохраняя простой, но привлекательный дизайн. А фигурки дизайнера и разработчика напоминают, что это не абстрактный сайт, который спрашивает ваши контактные данные «для галочки», а компания действительно заинтересована в связи с пользователем.
Быстрая и эффективная форма контактов, организованная без особых сложностей и путаницы. Это действительно полезно для таких сайтов, которые предполагают частое общение с пользователями.
30. Zeropixel
Zeropixel контактная форма несколько отличается от других особенно в плане разработки и использования цвета.
31. 1minus1
У сайта 1minus1 нет отдельный контакт-страницы, но, скорее, контактные формы выглядят как вспывающие окна на экране при нажатии кнопки «контакт» .
32. Syropia
Syropia также использует концепцию «почтовый конверт», правда разрабатывает ее совершенно по своему.
33. Agencyp
Кажется форма контактов на этом сайте ничем не отличается от другихб но это не так. Присмотритесь внимательнее.
34. Freestyle Night
Чрезвычайно инновационный подход к проектированию контактной формы — ненавязчиво, но с четкой акцентацией. Еще один элемент — фотоновый рисунок, который успокаивает и располагает пользователя поделиться своей контактной информацией.
35. Ultranoir
Связаться с нами? Что может быть проще — наберите телефонный номер и с вами пообщается девушка с приятным голосом. По меньшей мере именно на такую мысль наталкивает контактная форма на этом сайте, и, надо признать, располагает оставить свои координаты. Очередной раз убеждаешься — психология в создании сайта играет не последнюю роль.
36. CPLX
Отправка сообщений в облака. В стиле этого проекта, а, главное — непринужденно и со вкусом.
37. Bio-Bak
Пожалуй самая необычная и причудливая контактная форма. Проще заглянуть на сайт и все увидеть воочию. Скажу только одно: контактная форма вполне в стиле сайта и его названия.
Напишите ваше сообщение на бумаге, заполните имя и электронный адрес в конверт и отправьте письмо веб-мастеру. Разве это не интересно?
39. ElectricPulp
В дополнение к контактной форме, на этом сайте представляется и другая информация от компании, такая как номер телефона и адрес электронной почты, чтобы пользователь мог связаться с компанием напрямую. Таким образом — это как будто диалог в контактной форме — мы вам свои контакты, а вы нам — ваши.
40. Fabric Adecaricaturas
Уродливая карикатура в контактной форме — для этого сайта весьма уместный штрих, который завершает рисунок сайта и демонстрирует элемент игры.
41. Z-Index Media
Концепт письма весьма охотно эксплуатируется в создании контактных форм. Это и не удивительно, ведь фраза «отправить письмо» даже у продвинутого юзера все равно ассоциируется с почтовым письмом.
42. Social Snack
Сеть социальных закусочных, как и полагается, используют интерактивную форму контактов — надпись аля от руки и «облако мысли» создают эффект доброжелательности и непринужденности.
Бланк появляется при нажатии на кнопку «связаться» и запрашивает имя, адрес электронной почты и собственно дает возможность написать ваше сообщение, которое вы хотите отправить. Ничего экстра, но сделано оригинально, особенно робот, который приподносит эту надпись.
Автор - 1stwebdesigner
Перевод — Дежурка
27 марта 2012 в 12:55
+1
27 августа 2012 в 5:22
что за блевота?
25 мая 2014 в 13:52
не ну реально блевота :-!