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

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

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

<form name="contact-form">
<p></p>
Имя
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p></p>
Адрес e-mail <span style="color: red; font-weight: bolder;">*</span>
<p></p>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p></p>
Сообщение<span style="color: red; font-weight: bolder;">*</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style type="text/css">
/* Menyembunyikan elemen dalam postingan */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

Дополнение к шагу 3: Настраиваем цветовую гамму и размеры!

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

Давайте посмотрим подробнее!


/* CSS Contact Form */
#ContactForm1{
display:none;
}
Эта часть кода отвечает за поле ввода имени и мэила
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width: 300px; - ширина поля
height:auto; - высота поля (в данном случае лучше не менять)
margin: 5px auto; - регулирует расстояние между полями
padding: 10px; - расстояние между границей поля и курсором текста(в данном случае лучше не менять)
background: #f2f2f2; - цвет фона поля
border: 1px solid #ccc; - ширина и цвет рамки поля
color:#777; - цвет курсора в зоне активного поля (когда в него щелкнули)
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{
background: #fffff7; - цвет фона при активном поле (когда в него щелкают, чтобы писать)
}
 
Эта часть кода отвечает за поле ввода сообщения
 #ContactForm1_contact-form-email-message{
width: 450px; - ширина поля
height: 175px; - высота поля
margin: 5px auto; - регулирует расстояние между текстом названия поля и началом поля
padding: 10px; - расстояние между границей поля и курсором текста.
background: #f2f2f2; - цвет фона
border: 1px solid #ccc; - ширина и цвет бордюра
color:#777; - цвет мигающего курсора в зоне поля
font-family:Arial, sans-serif; - шрифт
}
 
Эта часть кода отвечает за кнопку подтверждения отправки 
#ContactForm1_contact-form-submit {
width: 101px; - ширина кнопки
height: 35px; - высота кнопки
float: left; - расположение кнопки
color: #FFF; - цвет текста внутри кнопки
padding: 0;  
margin: 10px 0 3px 0 0;
cursor: pointer; - форма, которую курсор принимает при наведении на кнопку. Лучше не менять:)
background: #5E768D; - цвет кнопки
border: 1px solid #556f8c; - ширина и цвет бордюра (может совпадать или нет с общим цветом кнопки)
border-radius:3px; - скругление углов, чем больше число, тем больше округляется окошко! Эту строчку можно скопировать и добавить к блокам сообщения и строчкам имени и мэила, тогда получится, как у меня)
}
#ContactForm1_contact-form-submit:hover {
background:#435c74; - цвет кнопки при наведении на нее курсора
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 450px;
margin-top:35px;
} - See more at: http://www.teremoshka.com/2013/08/ObratnaiaSviaz.html#sthash.vgR9QFXL.dpuf