Форма обратной связи средствами CSS
+2

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

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

  1. Для начала нужно подготовить некоторые элементы нашей будущей формы, а именно изображения фона и иконки. Вы можете использовать те, что использовал я в уроке и есть в архиве с исходниками, а можете для уникальности, вставить свои.
  2. Следующим шагом необходимо создать html документ с кодом самой формы, на данный момент без стилей оформления
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
      <title>Форма обратной связи средствами CSS</title>
    </head>
    <body>
        <form class="form" method="post" action="script.php">
        <h2>Обратная связь</h2>
        <img src="icon.png" alt="contact" class="icon"/>
        <p>Ваш Email:
        <input type="text" name="userMail" class="formInput"/>
        </p>
        <p>Ваше имя:
        <input type="text" name="userName" class="formInput"/>
        </p>
        <p>Ваше сообщение:
        <textarea rows="1" cols="1">
        </textarea>
        </p>
        <p>
        <input type="submit" value="Отправить" class="formSubmit"/>
        </p>
        </form>
    </body>
    </html>
    

    Код состоит из одной формы, для которой мы указываем класс, чтобы в дальнейшем назначить ей стили CSS. А также в значении свойства action указываем скрипт для обработки полученных данных. Для полей ввода использовались элементы input и textarea. Из кода все это видно, и надеюсь, сложностей вызвать не должно.

  3. Теперь займемся внешним оформлением нашей формы.

    Я буду вставлять таблицы стилей непосредственно в код страницы html с помощью элемента style. Однако можно использовать и внешнюю таблицу стилей. Подробнее о способах связи таблиц CSS с документами html я уже писал ранее.

    Зададим свойства для самой формы

    .form {
    	border:thin solid #eaeaea;
    	display:inline-block;
    	padding:30px 30px 0px 30px;
    	-moz-box-shadow: 2px 2px 3px #f2f2f2;
    	-webkit-box-shadow:  2px 2px 3px #f2f2f2;
    	box-shadow: 2px 2px 3px #f2f2f2;
    	background-color: #efefef;
    	background: url('fon.jpg');
    	position:relative;}
    

    Здесь важными являются свойства display:inline-block; для того чтобы форма приняла нужный размер, и position:relative; для последующего позиционирования некоторых внутренних элементов.

    Теперь оформим нашу форму заголовком и симпатичной иконкой

    .form h2{
    	margin:0;
    	margin-bottom:20px;
    	font-family: Tahoma, sans-serif;
    	font-size:30px;
    	color:#555;
    	}
    .icon {
    	position:absolute;
    	right:30px;
    	top:20px;
    	}
    

    С заголовком все очень просто, а для иконки обязательно укажите position:absolute;. Это нужно для того, чтобы позиционировать иконку с помощью абсолютных значений внутри родительского элемента (в нашем случае, формы), для которого мы применили относительное позиционирование.

    Обозначим абзацы и текст в них

    .form p {
    	margin:0;
    	margin-bottom:20px;
    	font-family: Tahoma, sans-serif;
    	color:#555;
    	font-size:15px;
    	}
    

    Текст я использую серый (#555), чтобы он не смотрелся очень контрастным по отношению к фону.

    Следующим шагом нам нужно определить внешний вид наших форм ввода input

    .form input, .form textarea{
    	display:block;
    	margin-top:10px;
    	width:400px;
    	padding:10px;
    	box-shadow: 2px 2px 3px #e3e3e3;
    	-moz-box-shadow: 2px 2px 3px #e3e3e3;
    	-webkit-box-shadow: 2px 2px 3px #e3e3e3;
    	border:1px solid #e9e9e9;
    	}
    .form textarea{
    	height:100px;
    	}
    

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

    И мы подошли к последнему элементу создаваемой нами формы, а именно, к кнопке «Отправить».

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

    .form .formSubmit{
    	background: #cfe7fa;
    	background: -moz-linear-gradient(top,  #cfe7fa 0%, #6393c1 100%);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cfe7fa), color-stop(100%,#6393c1));
    	background: -webkit-linear-gradient(top,  #cfe7fa 0%,#6393c1 100%);
    	background: -o-linear-gradient(top,  #cfe7fa 0%,#6393c1 100%);
    	background: -ms-linear-gradient(top,  #cfe7fa 0%,#6393c1 100%);
    	background: linear-gradient(top,  #cfe7fa 0%,#6393c1 100%);
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=0 );
    	border-radius:8px;
    	-moz-border-radius:8px;
    	-webkit-border-radius:8px;
    	border:1px solid #6393c1;
    	box-shadow:inset 0px 0px 6px #dcebf1;
    	-webkit-box-shadow: inset 0px 0px 6px #dcebf1;
    	-moz-box-shadow: inset 0px 0px 6px #dcebf1;
    	text-shadow: -1px -1px 0px #5f90b0;
    	filter: dropshadow(color=#5f90b0, offx=-1, offy=-1);
    	color:#fff;
    	font-family: Tahoma, sans-serif;
    	text-transform:uppercase;
    	font-size:20px;
    	width:422px;
    	}
    .form .formSubmit:hover {
    	background: #6393c1;
    	background: -moz-linear-gradient(top,  #6393c1 0%, #cfe7fa 100%);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6393c1), color-stop(100%,#cfe7fa));
    	background: -webkit-linear-gradient(top,  #6393c1 0%,#cfe7fa 100%);
    	background: -o-linear-gradient(top,  #6393c1 0%,#cfe7fa 100%);
    	background: -ms-linear-gradient(top,  #6393c1 0%,#cfe7fa 100%);
    	background: linear-gradient(top,  #6393c1 0%,#cfe7fa 100%);
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6393c1', endColorstr='#cfe7fa',GradientType=0 );
    	cursor:pointer;
    	}
    

Изготовление сайтов можно заказать в агентстве «Бенефис».

+2
Понравилась запись? Подпишитесь по RSS или E-mail!
Категории: WEB-разработка. Прямая ссылка на запись.

Комментарии к записи Форма обратной связи средствами CSS: 5

  1. Юрий сказал(а):

    Спасибо за полезный урок! Наконец-то смогу сделать красивую форму!

  2. Эрик сказал(а):

    спасибо! выручил)

  3. Евгений сказал(а):

    Спасибо отличная форма, только подскажите как сюдя прописать свой email?)))

  4. Александр сказал(а):

    А где php обработчик?

    • remak сказал(а):

      Урок только о создании внешнего вида (html + css). Дальше уж вы сами под ваши нужны (проверка на спам, отправка, может быть сохранение в БД и т.п.)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *