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

В инструментах Blogger появился виджет "Форма для связи". Однако, есть одно неудобство. По умолчанию эта форма устанавливается на боковую панель блога. Гораздо удобнее и привычнее вынести ее на отдельную страницу.

Чтобы такая форма на отдельной странице работала, виджет на боковую панель установить все же придется, однако мы его потом скроем, и его не будет видно.

1.Установка виджета "Форма для связи" на боковую панель (сайдбар).

Дизайн => Добавить гаджет => Другие гаджеты => Форма для связи => Сохранить. 

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

2. Вставляем форму на статическую страницу.

Чтобы создать новую страницу воспользуемся меню в настройках блога: Страницы => Создать страницу. 
В режиме HTML вставляем на страницу такой код:
_________________________________________________________________
<form name="contact-form">
<p>
</p>
Ваше имя
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p>
</p>
Ваш Email <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="Отправить" />
<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.Добавляем стиль RSS для формы.

На этом этапе понадобится правка HTML-кода шаблона, поэтому делаем резервную копию шаблона.

В шаблоне с помощью сочетания клавиш CTRL+F находим строку:
_________________________________________________________________

]]></b:skin>

_________________________________________________________________

И прямо перед ней вставляем такой код:
_________________________________________________________________
/* 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: #8b0808;
border: 1px solid #8b0808;
border-radius:3px;
}
#ContactForm1_contact-form-submit:hover {
background:#680b0b;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 450px;
margin-top:35px;
}
_________________________________________________________________

Это позволит применить стиль RSS к форме обратной связи и скрыть гаджет "Форма для связи" с боковой панели блога. 

Фон полей (если курсор не установлен) - встречается 2 раза

Рамка полей (если курсор не установлен) - (2 раза) 

Цвет текста, введенного в поля -  (2 раза)

Цвет фона полей (если курсор установлен)

Цвет текста кнопки "Отправить"

Цвет фона кнопки "Отправить" (если курсор не наведен)

Цвет рамки кнопки "Отправить"

Цвет фона кнопки "Отправить" (если курсор наведен)

4.Настройка виджета "Страницы".

Чтобы сделать видимой статическую страницу с формой для связи необходимо перейти в раздел Дизайн и нажать кнопку "Изменить" виджета "Страницы" либо добавить данный виджет, если он отсутствует.

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

Теперь у нас появилась полноценная форма для связи на статической странице.

Идею я взяла здесь.

Сделаем свой блог лучше! Удачи!