Форма обратной связи на html5. HTML5 и CSS3 форма обратной связи в виде конверта. Ваше сообщение отправлено
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»
Для реализации выезжающей формы обратной связи для быстрой отправки сообщения.
Итак, мы завершаем цикл уроков по версте сайта с нуля с flat дизайном. Напомню, что на мы верстали шапку сайта. На - секцию с картинкой на весь экран. На - галерею с работами портфолио. На - трехколоночный макет. И как завершающим этапом, сегодня мы делаем верстку формы обратной связи и подвала.
Вот, что у нас должно получиться.
Я не буду здесь приводить весь код, он слишком большой. Код целиком и готовый результат вы можете увидеть на jsfiddle.
Моя задача показать вам принципы верстки, так сказать логику, как думает верстальщик, глядя на макет. Сначала он мысленно разбивает весь макет на большие секции. Затем каждую секцию внутри делит на маленькие блоки. Смотрите на скриншоте ниже.
Сама форма обратной связи помещена в теге div с классом part_2_of_3 и занимает она две трети от ширины родителя.
Затем идет второй блок в теге div с классом part_1_of_3 . Занимаемая им ширина - соответственно одна треть от родительского блока.
В CSS стилях:
Con{
display: block;
float:left;
margin: 3% 0 3% 1.5%;
}
.con:first-child{
margin-left:0; /* прижатие блока с формой к левому краю */
}
.part_2_of_3 {
width: 66%; /* ширина блока с формой */
}
.part_1_of_3 {
width: 32%; /* ширина блока с информацией */
}
.cont-form{
padding-bottom: 25px; /* отступ снизу от формы блока */
}
.cont-form div{
padding: 5px 0 15px;
}
.cont-form input,.cont-form input,.cont-form textarea{
width: 42%; /* ширина полей для ввода текста и емейла */
padding: 15px;
display: block;
outline: none;
background-color: #fff; /* цвет ячеек формы */
color: #888282; /* цвет вводимого текста формы */
font-size: 0.8em; /* размер шрифта вводимого текста формы */
float:left;
margin-right: 2em; /* отступ справа */
font-style: italic; /* вводимый текст курсивом */
border: 2px solid #cacaca; /* граница ячеек формы */
}
.cont-form input{
margin-right: 0em; /* отступ справа */
}
.cont-form textarea{ /* значения для текстовой области формы */
padding: 18px; /* все поля в текстовой области */
display: block;
width: 93%; /* ширина формы текстовой области */
height:180px; /* высота формы текстовой области */
background-color: #fff; /* wdtn фона текстовой области */
outline: none;
color: #888282; /* цвет вводимого текста в текстовую область */
font-size: 0.8em; /* размер шрифта текстовой области */
font-style: italic; /* курсив для текстовой области формы */
border:2px solid #cacaca;
margin-bottom: 2em;
}
.cont-form input {
font-family: Verdana, sans-serif;
font-size: 1em;
color:#fff;
padding: 0.7em 1.4em;
margin-right: 2%;
background-color: #a97b7b;
border:none;
display: block;
cursor: pointer;
outline: none;
text-transform: uppercase; /* трансформация в заглавные буквы */
float: right;
}
.comp_add p {
font-size:0.8em;
color:#525252;
line-height: 1.8em;
margin-bottom: 2%;
}
.comp_add a{
font-size:1.1em;
color:#525252;
line-height: 1.8em;
margin-bottom: 2%;
}
.list2 li img{
margin-top: 4px;
float:left;
}
.list2 li .icon{
float:left;
padding-left: 1em;
}
Верстка подвала
С версткой подвала дело обстоит намного проще. Внутри тега footer , находится блок div с копирайтом и ссылкой.
В данной статье речь пойдет о динамической форме обратной связи, которая при изменении размера окна, будет становится адаптивной к просмотру. То есть форма обратной связи будет доступна для просмотра на всех видах устройств, на персональных компьютерах, ноутбуках, смартфонах и планшетах.
Форма обратной связи будет состоять из 3 полей ввода данных - имя, адрес электронной почты и текст письма. Все поля будут обязательны для заполнения, отправить пустое письмо будет нельзя. Поле ввода адреса электронной почты дополнительно будет проходить валидацию на правильность ввода. Данные будут представлены в html коде, стили оформления формы обратной связи будут прописаны в отдельном CSS файле. По принципу данного скрипта возможно создание по аналогии большего или меньшего количества полей ввода.
Преимущества использования данной формы заключаются в непрерывной работе сайта и динамической отправки данных из формы, без перезагрузки страницы. А также нужно отметить удобство просмотра на мобильных устройствах.
В файле send.php править следующие строки: $to = "admin@site.ru"; $subject= "Message from site.ru"; $header="From: site.ru";;
Написать письмо
$(function() { $("#loader").hide(); $("form").submit(function(e) { var name = $("#name").val(); var email = $("#email").val(); var message = $("#message").val(); var data = "name=" + name + "&email=" + email + "&message=" + message; if(data) { $.ajax({ type: "POST", url: "./send.php", data: data, beforeSend: function(html) { $("#loader").show(); $("#submit").hide(); }, success: function(html){ $("#loader").hide(); $("#result").html(html); } }); } return false; }); });
В этой статье мы научимся верстать формы на примере обратной связи и использовать для них семантическую разметку, рассмотрим несколько тонкостей и нюансов, и постараемся сделать максимально одинаковое отображение нашей формы в различных браузерах, вплоть до IE6.
Последнее обновление статьи — 27.08.2013 .
Быстрый старт
Для создания формы используется тег
Попробуем добавить поля для заполнения имени пользователя, электронной почты и кнопку отправки формы:
Для создания строк чаще всего используются теги
Можно использовать вариант со списком определений, ненумерованным списком или таблицей, что семантически будет тоже вполне корректно:
- Поля формы выстроены с помощью списка определений:
- Вариант ненумерованного списка:
- Таблица в качестве разметки:
Обратите внимание на то, что мы также задаем атрибут name для всех полей, чтобы потом получать доступ к ним с помощью сценариев. name должен быть уникален и желательно присвоить ему тоже самое значение, что и для id . Также мы явно задаем пустое значение value для того чтобы застраховаться от ошибок в браузерах.
Итак, вот что мы имеем на данный момент, пока без оформления CSS:
Форма обратной связи
Сейчас наша форма выглядит довольно просто и скучно, давайте усложним ее, добавим дополнительные поля и сделаем оформление, например вот так:
Дизайн формы
Как видите, мы добавили сюда возможность выбора опции из списка с помощью тегов
В коде видно, что используются возможности HTML5, такие как тип поля email , атрибуты placeholder и required (они позволяют обойтись без валидации формы на JS) — их мы рассмотрим чуть позже. Для старых браузеров мы позволим частичное graceful degradation, например опустим текстовые подсказки в полях (хотя их можно реализовать с помощью jQuery и плагинов), а проверку введенных данных сделаем с помощью JS и PHP. Для поддержки IE ниже 9-ой версий CSS3 свойств подключим скрипт PIE .
Валидация формы на HTML5
Давайте добавим валидацию нашей формочке. С HTML5 реализовать это достаточно просто, поэтому рассмотрим именно этот вариант.
Например, сделаем поле обязательным для заполнения.
Как видите, был добавлен всего лишь один атрибут required . Теперь при попытке отправки формы с пустым полем появится уведомление:
Внешний вид сообщения различается в браузерах и к сожалению не изменяется.
Также для поля ввода электронной почты мы можем указать тип email:
Это означает, что в данном поле подразумевается именно электронный адрес и элемент получит соответствующую валидацию. Наглядно продемонстрировано на скриншоте:
Аналогичная ситуация с полями url , date и number:
Все очень легко, без скриптов на JS/PHP.
Валидация в HTML5 работает по умолчанию, но ее возможно и отключить — добавим элементу
Особенности верстки элементов формы
textarea
В браузерах на движке webkit можно изменять размер