Форма для обратной связи двухколоночная

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

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

Демо-пример

Установка на сайт

1. Код в таблице внизу вставить в раздел head или файл стилей сайта:

Для выделения текста сделайте щелчок мышью.
Для увеличения окна, «подцепите» мышью правый нижний угол.


<style type="text/css">

#contactform{
width: 100%;
font-size: 16px; /* Primary font size of form. Contained elements' font size are all relative to this setting */
}


#contactform input, #contactform textarea{
width: 98%;
border-radius: 5px;
border: 1px solid gray;
font: normal 1.5em auto; /* 24px, or 16px x 1.5 */
padding: 0.4166666666666667em; /* 10px, or 24px x 0.4166666666666667 */
box-shadow: 0 0 10px gray inset;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#contactform textarea{
resize:vertical; /* allow vertical resize of textarea */
height: 200px;
}


#contactform input:focus, #contactform textarea:focus{
box-shadow: 0 0 10px green inset;
}


#contactform input[type="radio"], #contactform input[type="checkbox"]{
padding: 0;
width: auto;
height: auto;
border-radius: 0;
}

#contactform select{
width: 80%;
font-size: 1.5em;
border: 2px solid #eee;
}

#contactform .formcolumn{ /* column div inside form */
width: 49%;
float: left;
}

#contactform .formcolumn:first-of-type{
margin-right: 2%; /* 2% margin after first column */
}

#contactform .formcolumn label, #contactform .formcolumn fieldset{
font: bold 0.8em Verdana; /* font size is 12.8px, or 16 x 0.8 */
text-transform: uppercase;
display: block;
margin-top: 2em;
margin-bottom: 3px;
}

#contactform fieldset{
width: 98%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#contactform .formcolumn label:first-child, #contactform .formcolumn fieldset:first-child{
margin-top: 0; /* first label or fieldset within each column should not no top margin */
}

#contactform fieldset ul{
list-type: none;
margin: 0;
padding: 0;
}

#contactform fieldset ul li{
display: inline-block;
margin-bottom: 5px;
margin-right: 1em;
}

#contactform div.buttons{
clear: both;
text-align: center;
}

#contactform input.button{
margin-top: 1.5EM;
width: 50%;
box-shadow: 0 0 10px gray;
text-transform: uppercase;
cursor: pointer;
min-width: 100px;
max-width: 600px;
color: white;
font-weight: bold;
letter-spacing: 7px;
text-shadow: 0 -2px 1px #8a8a8a;
background: rgb(169,3,41);
background: -moz-linear-gradient(top,  rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1)));
background: -webkit-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -o-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -ms-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: linear-gradient(to bottom,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
}

#contactform input.button:active{
text-shadow: 0 0 1px #8a8a8a;
background: rgb(109,0,25);
background: -moz-linear-gradient(top,  rgba(109,0,25,1) 0%, rgba(143,2,34,1) 56%, rgba(169,3,41,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(109,0,25,1)), color-stop(56%,rgba(143,2,34,1)), color-stop(100%,rgba(169,3,41,1)));
background: -webkit-linear-gradient(top,  rgba(109,0,25,1) 0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
background: -o-linear-gradient(top,  rgba(109,0,25,1) 0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
background: -ms-linear-gradient(top,  rgba(109,0,25,1) 0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
background: linear-gradient(to bottom,  rgba(109,0,25,1) 0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d0019', endColorstr='#a90329',GradientType=0 );
}

@media screen and (max-width: 480px){ /* responsive form settings, when window width is 480px or less */

	#contactform{
	font-size: 14px; /* decrease form font size */
	}

	#contactform .formcolumn{
	width: 100%;
	float: none;
	}
	
	#contactform .formcolumn:first-of-type{
	margin-right: 0; /* remove right margin from first form column */
	}

	#contactform .formcolumn:nth-of-type(2){
	padding-top: 2em; /* add padding to top of 2nd form column, so there is a gap between the 1st and 2nd column */
	}

	#contactform select{
	width: 98%;
	}

}
</style>

2. А этот код скопируйте и расположите в разделе body:


<form id="contactform">

<div class="formcolumn">

<label for="yourname">Ваше имя:</label>
<input type="text" id="yourname">

<label for="youremail">Ваш Email:</label>
<input type="email" id="youremail">

<fieldset>
<legend>Пол:</legend>
<ul>
<li>Мужчина: <input type="radio" id="male" name="sex"></li>
<li>Женщина: <input type="radio" id="female" name="sex"></li>
</ul>
</fieldset>

</div>

<div class="formcolumn">

<fieldset>
<legend>Навыки:</legend>
<ul>
<li>JavaScript: <input type="checkbox" id="javascript"></li>
<li>CSS: <input type="checkbox" id="css"></li>
<li>PHP: <input type="checkbox" id="php"></li>
<li>Photoshop: <input type="checkbox" id="ruby"></li>
<li>Реклама: <input type="checkbox" id="python"></li>
</ul>
</fieldset>

<label for="dept">Отдел:</label>
<select id="dept">
<option value="3">Разработчик</option>
<option value="2.1">Отдел кадров</option>
<option value="3">Продажи</option>
<option value="4.1">Обслуживание клиентов / Поддержка</option>
<option value="5.2">Учет</option>
</select>

<label for="feedback">Ваше сообщение:</label>
<textarea id="feedback"></textarea>

</div>

<div class="buttons">
<input class="button" type="submit" value="Отправить!">
</div>

</form>

<p style="text-align:center">

Copyright <? echo date("Y"); ?> <a href="#">ваш сайт.ru</a>. Все права защищены.

</p>

Спасибо за внимание. Посещайте мой сайт. Пока! L.M.

Ваше мнение по материалу, изложенному на сайте

Служба поддержки