Главная » HTML & CSS » CSS - Макет Контактной Формы

CSS — Макет Контактной Формы

Много раз рассказывал о различных решениях создания контактных форм, подробно расписывал варианты вёрстки и оформления с помощью CSS3.
Сегодня хочу представить вам ещё один css-макет оригинальной формы обратной связи. Ничего не обычного и сколь-нибудь вычурного, всё просто, стандартный html-каркас формы помещённый в div-контейнер, поля ввода размещены в отдельные секции, а плавающие размеры позволяют корректно отображаться при просмотре на экранах различных пользовательских устройств.
 
CSS - Макет контактной формы
 
Дизайн формы с нотками минимализма, спокойные не выразительные тона оболочки, слегка размытые границы полей ввода с встроенными шрифт-иконками от Font Awesome. Для базового контейнера добавил лёгкую внешнюю тень. В итоге получился вполне себе автономный блок с встроенной формой обратной связи.
Стили шрифт-иконок Font Awesome вы можете скачать или же подключить непосредственно с сайта разработчика: CSS контактной формы выделил в отдельный файл style.css, это больше для демо, вам же лучше всего скопировать стили относящиеся к форме и вставить их в свой файл стилей.
При формировании html-каркаса использовал как стандартные теги форм и базовый блочный элемент div, так и тег <section> из обоймы Html5. Поля ввода «Имя» и «E-mail» разбил на две колонки, что позволяет им, при уменьшении размеров основного блока, выстраиваться вертикально, не разрушая общую структуру формы.
 

<div class="contact">
    <form action="#">
        <fieldset>					
            <div class="row">
                <section class="col col-2">
                    <label class="input">
                        <i class="fa fa-append fa-user"></i>
                        <input type="text" placeholder="Имя" required>
                    </label>
                </section>
                <section class="col col-2">
                    <label class="input">
                        <i class="fa fa-append fa-envelope-o"></i>
                        <input type="email" placeholder="E-mail" required>
                    </label>
                </section>
            </div>
            <section>
                <label class="input">
                    <i class="fa fa-append fa-tag"></i>
                    <input type="text" placeholder="Тема">
                </label>
            </section>               
            <section>
                <label class="textarea">
                    <i class="fa fa-append fa-comment"></i>
                    <textarea rows="4" placeholder="Сообщение" required></textarea>
                </label>
            </section>             
            <button type="submit" class="button">Отправить</button>
        </fieldset>						
    </form>
</div>
.contact {
  max-width: 467px;
  min-width: 320px;
  margin: 0 auto;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 8px rgba(0,0,0,.3);
}
.contact * {
  outline: none;
  border: 0;
  background: none;
}
form fieldset {
  display: block;
  padding: 25px 30px;
}
form .row {
  margin: 0 -15px;
}
form .col-2 {
  width: 50%;
}
form .col {
  float: left;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
form .row:after {
  content: '';
  display: table;
  clear: both;
}
 form section {
  margin-bottom: 20px;
}
form .input, form .textarea, form .radio, form .checkbox, form .button {
  position: relative;
  display: block;
}
form .fa-append {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 29px;
  height: 29px;
  padding-left: 3px;
  border-left: 1px solid #e5e5e5;
  font-size: 15px;
  line-height: 29px;
  text-align: center;
  color: #ccc;
}
.fa {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-user:before {
  content: "\f007";
}
.fa-envelope-o:before {
  content: "\f003";
}
.fa-tag:before {
  content: "\f02b";
}
.fa-comment:before {
  content: "\f075";
}
form .input .fa-append + input, form .textarea .fa-append + textarea {
  padding-right: 46px;
}
form .input input, form .textarea textarea {
  display: block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 100%;
  height: 39px;
  padding: 8px 10px;
  outline: none;
  border: 2px solid #e5e5e5;
  border-radius: 0;
  background: #fff;
  font: 13px/19px 'Open Sans', Helvetica, Arial, sans-serif;
  color: #404040;
  appearance: normal;
  -moz-appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.3s;
  -o-transition: border-color 0.3s;
  -ms-transition: border-color 0.3s;
  -moz-transition: border-color 0.3s;
  -webkit-transition: border-color 0.3s;
}
form .textarea textarea {
  height: auto;
  resize: none;
  overflow:auto;
}
form .input:hover input,
form .textarea:hover textarea,
form .checkbox:hover i {
   border-color: #00BDAB;
}
form .input input:focus,
form .textarea textarea:focus,
form .checkbox input:focus + i {
	border-color: #009688;
}
form .button {
  float: right;
  height: 39px;
  overflow: hidden;
  margin-left: 20px;
  padding: 0 20px;
  outline: none;
  border: 0;
  background-color: #009688;
  font: 300 13px/39px 'Open Sans', Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -webkit-transition: opacity 0.2s;
}
form .button:hover {
  opacity: 1;
}
@media screen and (max-width: 470px){
	.col, .col-2 { float: none !important; width: 100% !important;}
}

 
Как я писал выше, в форме используется новый элемент содержащийся в HTML5 <section>, Internet Explorer ниже 9-й версии не поддерживает новые элементы, а значит необходимо подключить Javascript файл html5.js к HTML документу, который позволит IE-шке увидеть и понять эти элементы.
Делается это просто, в разделе <head></head> поместите следующее:

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Пользователи всё чаще для просмотра сайтов используют мобильные телефоны, небольшие ноутбуки, планшетные устройства, такие как iPad или Playbook и т.д. Поэтому, привычный дизайн с фиксированной шириной больше не прокатывает. С помощью media queries задав CSS правила для размера экрана меньше 470px, попытался сделать блок формы более-менее адаптивным, надеюсь получилось)). Чтобы сделать блок формы резиновым использовал проценты (%), а во избежание каких бы то ни было противоречий применил !important.

Internet Explorer 8 и более ранних версий не поддерживает CSS3 media queries. Выправить положение можно, добавив Javascript файл css3-mediaqueries.js в работу.

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

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

На этом пожалуй и всё. Исходники как всегда бережно упаковал в архив и забросил на Яндекс.Диск:

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

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Один комментарий
  1. Спасибо взял себе на сайт для адаптации в форму для участие в акции «розыгрыш iPhone 5c»

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru