Главная » Уроки » Пример верстки контактной формы для сайта с помощью CSS3

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

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

 

Контактная форма с помощью CSS3

 
Сегодня, в этом уроке, постараюсь показать наглядный пример верстки контактной формы для сайта с помощью магии (свойств и правил) CSS3, без дополнительных файлов изображений в оформлении. Мы вместе с вами, выстроим основной html-каркас, используя свойства и правила CSS с новыми функциями CSS3, сформируем легкий для восприятия, оригинальный стиль формы обратной связи.

Для начала, можете посмотреть пример того, что должно получиться в итоге:

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

HTML-разметка контактной формы

Не стал выдумывать ничего нового, все по стандартам, разве что для группирования элементов формы использовал элемент <fieldset> и <label> для связи с элементами формы. Хотя, это тоже хорошо всем знакомый и стандартный макет форм.
 

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

 
В заголовке формы, в качестве примера прописал произвольный текст, от фонаря так сказать. Вы можете в последствии, либо прописать свой заголовок, либо вставить какую-нибудь картинку, или же вовсе отказаться от заголовка, удалив из макета теги <h2></h2>.
Макет HTML контактной формы готов, осталось выстроить, как нам это необходимо, все основные элементы её формирующие <form>, <fieldset>, <input>, <textarea> и <button> и правильно оформить их в CSS.
 

CSS-код контактной формы

С помощью прекрасных особенностей свойств CSS3, создадим иллюзию полноценной, объемной картинки. Добавим внутренних и внешних теней box-shadow, используя свойство border-radius плавно закруглим углы элементов формы, с помощью функции линейного градиента -linear-gradient создадим симпатичную кнопку.

Все необходимые стили с комментариями:
 

#form{
    border: 1px solid #D3D3D3;
    background: none repeat scroll 0 0 #FFFFFF;
/* закругляем углы */
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
/* добавляем тени для блока*/
    -webkit-box-shadow: 0 0 5px #CCCCCC, 1px 1px 0 #FFFFFF inset, -1px -1px 0 #FFFFFF inset, 0 0 15px #DDDDDD inset;
    -moz-box-shadow: 0 0 5px #CCCCCC, 1px 1px 0 #FFFFFF inset, -1px -1px 0 #FFFFFF inset, 0 0 15px #DDDDDD inset;
    box-shadow: 0 0 5px #CCCCCC, 1px 1px 0 #FFFFFF inset, -1px -1px 0 #FFFFFF inset, 0 0 15px #DDDDDD inset;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 10px;
    text-align: left;
/* устанавливаем необходимую ширину формы в зависимости от дизайна
 ** форма отлично растягивается */
    width: 100%;
    max-width: 600px;
}
#form h2{
/* оформляем заголовок формы
 ** цвет, размер и семейство шрифта */         
    border-bottom: 1px dashed #CCCCCC;
    color: #3F647F;
    font: 24px Monotype Corsiva,Arial;
    margin: 10px 26px;
    padding: 0 5px 10px 0;
/* добавляем тени к тексту */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	}
#form fieldset{
/* формируем блоки элементов внутри формы */
    margin:0;
    padding:0;
    border:none;	
    float:left;
    display:inline;
    margin-left:26px;
}
/* формируем подписи к полям ввода */	
#form label{display:block;color:#5B5B5B;margin-bottom:1px;}	
#form input, #form textarea{
    font:13px Trebuchet MS, Arial, Helvetica, Sans-Serif;
    color:#6B6B6B;
/* отключаем бордюры у инпутов и текстового поля */
    border: none;
/* закругляем углы полей ввода */
    -moz-border-radius:.3em;
    -webkit-border-radius:.3em;
    border-radius:.3em;		
    background-color: #F7F7F7;
    padding:3px;
/* добавляем внутренние тени у инпутов и текстового поля */
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.1), inset 0 1px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.1), inset 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 5px rgba(0,0,0,0.1), inset 0 1px 2px rgba(0,0,0,0.3);
    color: #5B5B5B;
}
#form input {
/* устанавливаем ширину инпутов */
    width:224px;
}
/* изменяем оформление полей ввода при фокусе */
#form input:focus, #form textarea:focus {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.4);
    -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.4);
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.4);
    background: #F2F2F2;
    color: #333;
}
#form textarea{
/* устанавливаем ширину текстового поля */
    width:286px;
    height:120px;
    overflow:auto;
}
/* формируем нижний сектор формы */					
#form .submit{
    clear:both;
    padding: 0px 25px 20px;
    margin:0;
    float:right;
}
/* оформляем кнопку отправки */	
#form button{
/* устанавливаем необходимую ширину кнопки */
    width:120px;
    line-height:28px;
/* добавляем внешние тени */
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
    border: solid 1px #2f96b4;
/* закругляем углы кнопки */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #49AFCD;
/* градиентная заливка для современных браузеров */	
    background-image:-moz-linear-gradient(center top , #5BC0DE, #2F96B4);
    background-image: -webkit-linear-gradient(center top, #5bc0de, #2f96b4);
    background-image: -ms-linear-gradient(#5bc0de, #2f96b4);
    background-image:-o-linear-gradient(center top , #5BC0DE, #2F96B4);
    color:#fff;
    cursor:pointer;
    text-align:center;
/* градиент для IE6-9 */
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#5BC0DE', EndColorStr='#2F96B4', GradientType=0); 
}
/* изменяем оформление кнопки при наведении */
#form button:hover {
    border-color: #2C8BA5;
    box-shadow: none;
}
/* изменяем оформление кнопки при нажатии */
#form button:active {
    background-image:-moz-linear-gradient(#2F96B4, #5BC0DE); /* Firefox */
    background-image: -webkit-linear-gradient(#2F96B4, #5BC0DE); /* Chrome, Safari */
    background-image: -ms-linear-gradient(#2F96B4, #5BC0DE); /* IE-10 */
    background-image:-o-linear-gradient(#2F96B4, #5BC0DE); /* Opera */
    border-bottom: 1px solid #5BC0DE;
/* добавляем внутренние тени */
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
/* градиент для IE6-9 */
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#2F96B4', EndColorStr='#5BC0DE', GradientType=0);
}

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

*driver*

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

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

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

9 комментариев
  1. Alex:

    Отличная рабочая форма. Спасибо!

    Ответить
  2. Алексей:

    Подскажите куда вводить адрес почты, куда пользователи сайта будут писать?

    Ответить
    • driver:

      Алексей.

      Это всего лишь пример css-верстки контактной формы, для того чтобы форма работала к ней необходимо подключить ещё скрипт обработчик и уже в нём указывать E-mail, и другие параметры. Где взять обработчик почты и как его подключить к форме обратной связи, инфы предостаточно Тынц....

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

      Ответить
      • Алексей:

        Я все делаю через программу Website x5 думаю что вы знаете, там сама форма есть и её очень просто добавить но, как к ней привязать CSS стиль как в вашем примере я не знаю!

        Ответить
        • driver:

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

          Извините, чем смог тем помог, ковырять этот комбайн просто нет времени. Но на досуге поэкспериментирую с этим конвейером сайтов)))

          Удачи!

  3. Rublik:

    Обработчик почты бывает только php? У меня бесплатный конструктор сайтов и там php не предусмотрено к сожалению.

    Ответить
  4. Никодим:

    Сотни форм, почти на каждом сайте. И нигде нет формы с обработчиком. Влом сделать, или не может никто?

    Ответить
    • driver:

      Почему же не могём, могём)) Только вот статья совсем не о том, а инфы предостаточно: жмяк

      Да, и если без наездов, и распальцовки народ спрашивает, помогаю, мне не влом.

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

Отправляя к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