Пример верстки формы обратной связи. Верстка форм

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

Из этой статьи вы узнаете, как создать форму обратной связи полностью на HTML5 и CSS3.

(Кликните по изображению, чтобы увидеть форму в натуральную величину)

C помощью CSS3 можно создать бесконечное множество форм обратной связи. В этой статье говорится о том, как создать форму обратной связи в виде конверта .

Name: Email: Message:

Контейнеры form-wrapper и form-inner потребуются нам для того, чтобы применить к ним определенные стилевые правила.

Вместо того чтобы добавлять классы в каждый элемент формы, возможно вы захотите использовать селекторы атрибутов, например, input . Но для своего примера я решил сделать так, чтобы в браузере IE6 форма не плыла. Если вы игнорируетестарые браузеры, такие как IE6, смело упрощайте ваш HTML и CSS код.

Я использую атрибут for тега label , так как он увеличивает юзабилити. Атрибут for связывает элемент label с соответствующим полем формы; значением атрибута служит ID поля.

HTML5

В HTML5 к полям формы можно добавить атрибут placeholder .

Атрибут placeholder – устанавливает замещающий текст. Текст отображается в поле формы серым цветом и пропадает, когда на поле наведен фокус.

Контейнеры

Используя свойство CSS3 box-shadow и градиенты, мы создадим форму обратной связи в виде конверта. Ниже вы можете видеть начальный CSS стиль:

#form-wrapper { width: 700px; height: 400px; margin: 0 auto; padding: 20px; position: relative; border: 1px solid #ddd; background-color: #fff; background-image: -moz-repeating-linear-gradient(135deg,#844049,#844049, #fff 50px, #fff 150px, #3e4996 100px, #3e4996, #fff 200px, #fff 300px); background-image: -webkit-gradient(linear, left top, right bottom, color-stop(5%, #fff), color-stop(5%, #fff), color-stop(15%, #844049), color-stop(15%, #fff), color-stop(25%, #fff), color-stop(25%, #fff), color-stop(35%, #3E4996), color-stop(35%, #fff), color-stop(45%, #fff), color-stop(45%, #fff), color-stop(55%, #844049), color-stop(55%, #fff), color-stop(65%, #fff), color-stop(65%, #fff), color-stop(75%, #3E4996), color-stop(75%, #fff), color-stop(85%, #fff), color-stop(85%, #fff), color-stop(95%, #844049), color-stop(95%, #fff)); background-image: -webkit-repeating-linear-gradient(135deg,#844049,#844049, #fff 50px, #fff 150px, #3e4996 100px, #3e4996, #fff 200px, #fff 300px); background-image: -o-repeating-linear-gradient(135deg,#844049,#844049, #fff 50px, #fff 150px, #3e4996 100px, #3e4996, #fff 200px, #fff 300px); background-image: -ms-repeating-linear-gradient(135deg,#844049,#844049, #fff 50px, #fff 150px, #3e4996 100px, #3e4996, #fff 200px, #fff 300px); background-image: repeating-linear-gradient(135deg,#844049,#844049, #fff 50px, #fff 150px, #3e4996 100px, #3e4996, #fff 200px, #fff 300px); } #form-wrapper:before, #form-wrapper:after { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7); -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } #form-wrapper:after { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); right: 10px; left: auto; }

Кнопка

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

#form-wrapper .button { float: right; margin: 10px 0 0 0; padding: 7px 15px; cursor: pointer; color: #fff; font: bold 13px Tahoma, Verdana, Arial; text-transform: uppercase; overflow: visible; /* IE6/7 fix */ border: 0; background-color: #7089b3; background-image: -moz-linear-gradient(#a5b8da, #7089b3); background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b8da), to(#7089b3)); background-image: -webkit-linear-gradient(#a5b8da, #7089b3); background-image: -o-linear-gradient(#a5b8da, #7089b3); background-image: -ms-linear-gradient(#a5b8da, #7089b3); background-image: linear-gradient(#a5b8da, #7089b3); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr="#a5b8da", EndColorStr="#7089b3"); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; text-shadow: 0 1px 0 rgba(0,0,0,.3); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7); } #form-wrapper .button:hover { background-color: #a5b8da; background-image: -moz-linear-gradient(#7089b3, #a5b8da); background-image: -webkit-gradient(linear, left top, left bottom, from(#7089b3), to(#a5b8da)); background-image: -webkit-linear-gradient(#7089b3, #a5b8da); background-image: -o-linear-gradient(#7089b3, #a5b8da); background-image: -ms-linear-gradient(#7089b3, #a5b8da); background-image: linear-gradient(#7089b3, #a5b8da); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr="#7089b3", EndColorStr="#a5b8da"); } #form-wrapper .button:active { background: #64799e; position: relative; top: 2px; -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset; box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset; }

Обновить

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

Вставьте PHP скрипт http://jsfiddle.net/catalinred/3hLKP/ в файл, например, sendemail.php .
Конечно, потребуется заменить [email protected] на вашу почту (куда вы захотите получать сообщения).
Ваш HTML код необходимо будет изменить на:

1. Плагин для создания онлайн форм «jFormer»

Создание контактных форм: обратной связи, комментирования, форма входа, форма регистрации с проверкой правильности ввода информации.

2. Пошаговая форма регистрации с использованием jQuery

Аккуратная форма с пошаговым заполнением. Снизу указан индикатор заполнения формы.

3. Пошаговая форма

Заполнение формы в несколько шагов с проверкой правильности заполнения.

4. Контактная форма для сайта

Проверка правильности ввода ифнормации осуществляется «на лету» перед отправкой сообщения с использованием javascript.

5. Анимированное переключение между формами на jQuery

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

6. Выезжающая PHP форма обратной связи

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

7. PHP форма регистрации с использованием jQuery и CSS3

Форма с проверкой правильности ввода информации.

8. PHP форма регистрации в стиле Facebook

Симпатичная форма регистрации, реализованная с помощью CSS, PHP и jQuery.

9. jQuery контактная форма «SheepIt»

Реализована возможность перед отправкой сообщения добавлять новые поля.

10. Контактная форма «Fancy AJAX Contact Form»

Симпатичная аккуратная PHP форма обратной связи с проверкой правильности ввода информации. Технологии: CSS, PHP, jQuery.

11. Система авторизации/регистрации на сайте 12. Форма отправки данных

С проверкой правильности заполнения.

13. Плагин jQuery «Contactable»

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

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

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

Структура полей формы обратной связи

имя отправителя
почтовый адрес
телефон
компания отправителя
сайт отправителя
продукт (направление)
список необходимых услуг
дополнительная информация
антиспам / защита от роботов

Особенности и возможности

блокировка кнопки «отправить» до выполнения необходиых условий
простой селектор для проверки и защиты от роботов
дополнительная кнопка «очистить все поля»

Что входит в форму обратной связи?

HTML разметка (создание макета)
Стилизация полей формы на CSS/SCSS
jQuery + js
PHP обработчик

Создание HTML разметки

И так, давайте посмотрим на разметку формы:

Представьтесь, пожалуйста: * Укажите ваш email: * Укажите ваш телефон: * Напишите, из какой вы компании: Укажите ваш сайт: Продукт: Выберите услугу: Услуга не выбрана Услуга_ Услуга_ Услуга_ Услуга_ Услуга_ Услуга_ Услуга_ Услуга_ Доп. информация: Я Робот Я человек Очистить Поля отмеченные звездочкой * являются обязательными для заполнения.

Здесь есть три первых поля, у которых указан id и некое js-событие onkeyup="checkParams()" (они понадобятся нам позднее). Для них будет проводиться обязательная проверка правильности ввода данных. За это отвечает атрибут required . Если вам необходимо убрать или сделать обязательным другое поле, просто удалите/добавьте этот атрибут.

Несколько дополнительных полей, не являющихся обязательными.

Селектор выбора предоставляемых услуг select .

Поле дополнительной информации textarea .

Селектор для проверки на «человечность» — Я работ | Я человек.

Две кнопки: Отправить и Стереть информацию в заполненных полях.

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

Оформление формы CSS/SCSS

Все поля формы стилизованы при помощи CSS flexbox (Flexible Box Layout Module) и разбиты на группы дополнительными классами. Разумеется, вы можете создать свои собственные стили. Если вы владеете CSS, то задать оформление для всех элементов формы сможете без проблем, тут даже не потребуется моя помощь.

Form { input, input, input, textarea, select { display: block; padding: 12px 15px; line-height: 1.5; width: 100%; font-size: 16px; border: 1px solid #ced4da; border-radius: .25rem; background-clip: padding-box; background-color: #fff; box-shadow: 0 1px 0 0 rgba(255, 255, 255, .05), inset 0 1px 2px 0 rgba(0, 0, 0, .05); &:focus { outline: none; } } .form-row { display: flex; flex-wrap: wrap; justify-content: space-between; .form-group:nth-child(1) { input { width: 95%; } } } .col-6 { position: relative; flex: 0 0 50%; max-width: 50%; } .pt-3 { padding-top: 1rem; } .form-group { margin-bottom: 1rem; label { line-height: 1.7; letter-spacing: .3px; text-transform: uppercase; font-size: 14px; font-weight: 900; } textarea { min-height: 110px; resize: vertical; } } }

Настройка PHP кода

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

Что здесь есть?

header("Refresh: 5; URL=https://www.site.ru"); — после заполнения формы ботом, отправляет на страничку с уведомлением и через 5 секунд возвращает на указанную в поле.
mail, name, phone, ... — настройка соответствия html полей. Здесь вам необходимо указать все соответствующие имена name="" в форме обратной связи. Таким образом, в поле services вам необходимо указать точно такой же порядок опций, что и в html разметке.
$mess — это тело сообщения, которое будет приходить в письме. Вы можете поменять их местами, изменить названия или просто удалить/закомментировать не нужные.
$headers — обязательная строка, указывающая кодировку письма. Если вы случайно сотрете или измените charset=utf-8 , то все ваши слова превратятся в иероглифы.
header — после успешного нажатия на кнопку, посетитель будет отправлен на страничку уведомления и через 5 секунд произойдет перенаправление на указанную страничку. Или же else { он получит увдомление об ошибке.

Дополнительные плюшки на js и jQuery

Ранее мы рассмотрели html шаблон формы, в котором видели добавленные id и функции у трех обязательных полей. Пришло время разобраться, для чего они были добавлены.

Посмотрите на js-код. Это блокиратор кнопки, который при disabled не дает посетителю нажать ее, прежде чем необходимые вам поля будут заполнены.

Мы вставляем id в необходимые поля и disabled в кнопку для того, чтобы привязать их к данному скрипту. Вы можете изменить их названия и количество, добавив/убрав нужные var-строки. Но, если вы добавите или уберете их, не забудьте изменить условия в строке if (name.length != 0 && email.length >= 6 && phone.length >= 10) { .

Как работает эта строка?

Все завязано на количестве символов в указанном поле, т.е. ее длине length .

if (name.length != 0 — указывает на то, что поле не должно быть пустым . Читается как — «если в поле число символов не равно нулю, то…»
&& — объединяет условия (и)
email.length >= 6 — кол-во символов должно быть больше или равно 6. Почему шесть? Я указал это число потому, что минимальный почтовый адрес состоит из 6 символов. Проверим? @bk.ru — 6 символов.
phone.length >= 10 — больше или равно десяти символам. Почему 10, а не 11 ? При заполнении этого поля, посетитель может указать свой телефон как с +7, так и через 8. Поэтому лучше указывать 10.

На этом все. Подключайте форму, тестируйте и пользуйтесь.

Если у вас остались вопросы, пишите в комментариях и не поскупитесь на оценку статьи. Заранее спасибо 🙂

Структура HTML Формы

Каждая строка у нас помещена в DIV контейнер, так гораздо удобнее располагать метки рядом с полем ввода. Вся форма помещена в DIV шириной 660px по центру страницы.

Написать письмо!

* Поля со звездочкой обязательны для заполнения

Ваше Имя *

E-mail Адрес *

Тема *

Сообщение *

Структура CSS Формы

Вся анимация выполнена с новыми свойствами CSS 3. Все фоны выполнены обыкновенными градиентами. Обратите внимание на анимацию кнопки. Тени при наведении тоже выполнена на CSS3.

/* form styles */
form .row {
display: block;
padding: 7px 8px;
margin-bottom: 7px;
}
form .row:hover {
background: #f1f7fa;
}

Form label {
display: inline-block;
font-size: 1.2em;
font-weight: bold;
width: 120px;
padding: 6px 0;
color: #464646;
vertical-align: top;
}
form .req { color: #ca5354; }

Form .note {
font-size: 1.2em;
line-height: 1.33em;
font-weight: normal;
padding: 2px 7px;
margin-bottom: 10px;
}

Form input:focus, form textarea:focus { outline: none; }

/* placeholder styles: http://stackoverflow.com/a/2610741/477958 */
::-webkit-input-placeholder { color: #aaafbd; font-style: italic; } /* WebKit */
:-moz-placeholder { color: #aaafbd; font-style: italic; } /* Mozilla Firefox 4 to 18 */
::-moz-placeholder { color: #aaafbd; font-style: italic; } /* Mozilla Firefox 19+ */
:-ms-input-placeholder { color: #aaafbd; font-style: italic; } /* Internet Explorer 10+ */

Form .txt {
display: inline-block;
padding: 8px 9px;
padding-right: 30px;
width: 240px;
font-family: "Oxygen", sans-serif;
font-size: 1.35em;
font-weight: normal;
color: #898989;
}

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

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

Последнее обновление статьи — 27.08.2013 .

Быстрый старт

Для создания формы используется тег , имеющий обязательный атрибут action , который содержит адрес скрипта, выполняющего обработку формы. Также сюда можно задать атрибут method для обработки формы методом GET (по умолчанию) или POST и атрибут name , который впоследствии будет служить для обращения к форме посредством JS/PHP. Таким образом, наша минимальная разметка будет выглядеть так:

...

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

Ваше имя Email

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

Ваше имя Email

Можно использовать вариант со списком определений, ненумерованным списком или таблицей, что семантически будет тоже вполне корректно:

Поля формы выстроены с помощью списка определений: Ваше имя

Вариант ненумерованного списка:

Ваше имя

Таблица в качестве разметки:

Ваше имя

Обратите внимание на то, что мы также задаем атрибут name для всех полей, чтобы потом получать доступ к ним с помощью сценариев. name должен быть уникален и желательно присвоить ему тоже самое значение, что и для id . Также мы явно задаем пустое значение value для того чтобы застраховаться от ошибок в браузерах.

Итак, вот что мы имеем на данный момент, пока без оформления CSS:

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

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

Дизайн формы

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

Обратная связь Ваше имя* Email* Выберите опцию Опция 1 Опция 2 Опция 3 Сообщение

В коде видно, что используются возможности HTML5, такие как тип поля email , атрибуты placeholder и required (они позволяют обойтись без валидации формы на JS) — их мы рассмотрим чуть позже. Для старых браузеров мы позволим частичное graceful degradation, например опустим текстовые подсказки в полях (хотя их можно реализовать с помощью jQuery и плагинов), а проверку введенных данных сделаем с помощью JS и PHP. Для поддержки IE ниже 9-ой версий CSS3 свойств подключим скрипт PIE .

Валидация формы на HTML5

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

Например, сделаем поле обязательным для заполнения.

Как видите, был добавлен всего лишь один атрибут required . Теперь при попытке отправки формы с пустым полем появится уведомление:

Внешний вид сообщения различается в браузерах и к сожалению не изменяется.

Также для поля ввода электронной почты мы можем указать тип email:

Это означает, что в данном поле подразумевается именно электронный адрес и элемент получит соответствующую валидацию. Наглядно продемонстрировано на скриншоте:

Аналогичная ситуация с полями url , date и number:

Все очень легко, без скриптов на JS/PHP.

Валидация в HTML5 работает по умолчанию, но ее возможно и отключить — добавим элементу атрибут novalidate:

...

Особенности верстки элементов формы textarea

В браузерах на движке webkit можно изменять размер , что бывает довольно удобно. Но очень часто это свойство ломает дизайн, поэтому приходится применять свойство resize: none для запрета изменения размера. Также возможно разрешить полю растягиваться только по горизонтали или вертикали.
(для Safari и Chrome)

IE для добавляет полосу прокрутки, чтобы ее убрать, необходимо прописать overflow: auto .

Подсветка полей в браузерах Chrome, Safari

При фокусе на полях в браузерах Chrome, Safari они начинают подсвечиваться. Чтобы убрать эту подсветку, нужно прописать такой CSS-код:

Input, textarea { outline: none; }

Пунктирная рамка в Firefox

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

Button::-moz-focus-inner, input::-moz-focus-inner, input::-moz-focus-inner, input::-moz-focus-inner { border: none; }

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

Убираем кнопку очистки текста и отображения пароля в IE10

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

::-ms-clear { display: none; }

Нестандартные элементы форм

Стилизация элементов форм рассмотрена в отдельных статьях.

Пример верстки формы обратной связи. Верстка форм

Новые статьи

Популярные статьи