Dobrovoi Masterсделано с душой. Html контактная форма для сайта


Стиль контактной формы CSS

Всем доброго дня или ночи, это уж кого как вставило.

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

Контактная форма является неотъемлемой частью практически любого веб-сайта, будь то маленький бложок напоминающий междусобойчик, или же навороченный различными прибамбасами, монстроподобный интернет — ресурс типа Яши.Ничего радикального не предлагаю, всего лишь еще один вариант оформления контактной формы. Основываясь на идеях буржуинского веб-дизайнера Алена Гракалика, я постарался разложить по полочкам механизм построения формы, простой в исполнении, и в то же время имеющей вполне приличный вид. 

Контактная форма

 

 

HTML Разметка

В разметке использован элемент FIELDSET для группировки элементов внутри самой формы, это очень полезно когда присутствует дополнительный элемент, то есть можно объединить form и fildset для достижения горизонтального размещения дополнительного объекта (в нашем случае текстового поля), а так же разместить все элементы вертикально. 

<form action="/" method="post"> <fieldset> <label for="name">Имя *</label> <input name="name" size="30" type="text" /> <label for="email">Email *</label> <input name="email" size="30" type="text" /> <label for="web">Вебсайт (не обязательно)</label> <input name="web" size="30" type="text" /></fieldset> <fieldset> <label for="message">Сообщение:</label> <textarea cols="30" rows="10" name="message"></textarea></fieldset> <button>Отправить</button> </form>

<form action="/" method="post"> <fieldset> <label for="name">Имя *</label> <input name="name" size="30" type="text" /> <label for="email">Email *</label> <input name="email" size="30" type="text" /> <label for="web">Вебсайт (не обязательно)</label> <input name="web" size="30" type="text" /></fieldset> <fieldset> <label for="message">Сообщение:</label> <textarea cols="30" rows="10" name="message"></textarea></fieldset> <button>Отправить</button> </form>

 

CSS

При оформлении внешнего вида формы через стили CSS, чтобы добиться корректного отображения во всех браузерах, использовал метод оформления блоков с применением изображений для основного фона и для кнопки «отправить». Ну, а из за безудержной любви к новым функциям и техникам CSS3, не удержался и добавил в оформление полей ввода закругленные углы (border-radius), IEшка в этом случае пускай идет в ...оппу. 

#form1 { margin:1em 0; padding-top:10px; background:url(../images/form/form_top.gif) no-repeat 0 0; } #form1 fieldset { margin:0; padding:0; border:none; float:left; display:inline; width:260px; margin-left:25px; } #form1 p {margin:.5em 0;} #form1 label {display:block;} #form1 input, #form1 textarea { width:252px; border:1px solid #ddd; -moz-border-radius:.3em; -webkit-border-radius:.3em; border-radius:.3em; background:#fff url(../images/form/form_input.gif) repeat-x; padding:3px; } #form1 textarea { height:125px; overflow:auto; } #form1 p.submit { clear:both; background:url(../images/form/form_bottom.gif) no-repeat 0 100%; padding:0 25px 20px 25px; margin:0; text-align:right; } #form1 button { width:150px; height:37px; line-height:37px; border:none; background:url(../images/form/form_button.gif) no-repeat 0 0; color:#fff; cursor:pointer; text-align:center; }

#form1 { margin:1em 0; padding-top:10px; background:url(../images/form/form_top.gif) no-repeat 0 0; } #form1 fieldset { margin:0; padding:0; border:none; float:left; display:inline; width:260px; margin-left:25px; } #form1 p {margin:.5em 0;} #form1 label {display:block;} #form1 input, #form1 textarea { width:252px; border:1px solid #ddd; -moz-border-radius:.3em; -webkit-border-radius:.3em; border-radius:.3em; background:#fff url(../images/form/form_input.gif) repeat-x; padding:3px; } #form1 textarea { height:125px; overflow:auto; } #form1 p.submit { clear:both; background:url(../images/form/form_bottom.gif) no-repeat 0 100%; padding:0 25px 20px 25px; margin:0; text-align:right; } #form1 button { width:150px; height:37px; line-height:37px; border:none; background:url(../images/form/form_button.gif) no-repeat 0 0; color:#fff; cursor:pointer; text-align:center; }

 Вот и все, ваша контактная форма готова к использованию. Существует множество готовых решений в шаблонах HTML, в темах и плагинах для WordPress. Эта статья всего лишь пример того, как можно самому быстро и просто создать, или видоизменить существующую форму для контактов.

 

Источник: http://grakalic.com/

dbmast.ru

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

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

С помощью формы можно создать подписку на обновления сайта; коммерческим ресурсам она понадобится как удобная форма заказа и поможет увеличить доход. Установленная форма позволит автору не афишировать свой e-mail и защитит почтовый ящик от спама. А её аккуратный и привлекательный внешний вид отлично впишется в юзабилити сайта и добавит ему большой плюс.

Можно создать форму на Html несколькими способами

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

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

Для создания формы можно использовать готовые скрипты или конструкторы и генераторы форм. Проще всего использовать генераторы, причём ip-whois (http://ip-whois.net/forma-obratnoj-svyazi/) создаёт форму специально для сайтов Html. Сервис предлагает 4 варианта формы, цвета которых можно корректировать. Настраиваемая ширина полей позволит подогнать форму под размеры сайдбара.

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

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

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

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

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

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

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

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

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

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

Установка формы обратной связи плагином Вордпресс

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

Для WordPress лучшим плагином считается Contact Form-7, пользующийся большой популярностью. Для защиты от спама можно поставить дополнительный плагин, с реализацией функции капчи. Но многие владельцы сайтов выбирают плагин Akismet, который осуществляет общую защиту ресурса от спама. Он со своей функцией великолепно справляется, так что в дополнительных плагинах защиты с помощью капчи, возможно, нет необходимости.

После установки плагина Contact Form-7 в левой части административной панели сайта появится строчка Контакты (CF7). Она ведёт на страничку плагина, где предлагается небольшой код, умещающийся в одну строку. Его нужно вставить в то место, где предполагается размещение формы контактов. Код вставляется только в HTML-режиме, то есть, в текстовом, но не визуальном редакторе! Для каждого сайта он свой, чужим кодом без установки плагина воспользоваться нельзя.

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

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

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

Для WordPress написано несколько плагинов, отвечающих за функцию «контакты», но Contact Form-7 является лучшим. При выборе версий этого плагина нужно обратить внимание на цифры, стоящие после семёрки.

Чем они выше, тем новее версия. Если не нравится форма комментариев в выбранном шаблоне, которая там встроена по умолчанию, то с помощью этого плагина её легко можно заменить. Тогда все контактные формы на сайте будут однотипными и оформлены в одном стиле. Некоторые пользователи считают, что этот плагин тяжеловат и заменяют его кодами или скриптами.

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

А вы уже поставили себе на сайт форму обратной связи?

Следующий урок: Как узнать на каком движке сделан сайт.Предыдущий урок: Айфон это что такое?

Хочешь быть умнее, чем другие? Зарабатывать больше? Читай еще:

prosmo3.ru

Дизайн контактных форм: 40+ оригинальных примеров

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

1. Aterlier Detour 

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

2. Try Triangle

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

3. Asvalia

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

4. Фото Marcol

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

5. Square 1 Media

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

6. Stan Gursky

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

7. Ctrln

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

8. Denise Chandler

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

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

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

18. Red Bull Soapbox Racer

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

19. Camping ilfrutteto

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

20. Svn2ftp

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

21. Just Dot

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

22. In my Bubble

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

23. Harmony Republic

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

24. Corvusart

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

25. Rescueseo

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

26. Reverend Danger

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

27. Webfoo London

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

28. Melonfree

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

29. Hit Digital 

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

30. Zeropixel

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

31. 1minus1

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

32. Syropia

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

33. Agencyp

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

34. Freestyle Night

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

35. Ultranoir

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

36. CPLX

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

37. Bio-Bak 

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

38. Lunalunerafestival

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

39. ElectricPulp

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

40. Fabric Adecaricaturas

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

41. Z-Index Media

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

42. Social Snack

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

 

43. World-Arcade

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

Автор - 1stwebdesigner

Перевод — Дежурка



Комментарии

Оставить ответ

Похожие статьи

Случайные статьи

www.dejurka.ru