Гаджет "Обратная связь" для Blogger

 Не так давно среди гаджетов от разработчиков Blogger появился новый - форма для связи. Гаджет очень полезен тем, что позволяет организовать обратную связь с читателями и посетителями блога. И отвечать на вопросы не только в комментариях.



Добавить форму обратной связи несложно:

1. Зайти в пункт Дизайн Вашего блога, нажать Добавить гаджет.

2. Выбрать Дополнительные гаджеты > Форма для связи

 И сохранить его:

Добавить гаджет обратной связи можно в любой сайдбар или в нижнюю часть блога. 

Но если Вы захотите разместить форму "Обратная связь" на отдельной странице,  то для этого нужно проводить изменения в коде шаблона. Идею я взяла здесь (http://shkolablogger.ru/vyivodim-vidzhet-bloggera-forma-dlya-svyazi-na-otdelnuyu-staticheskuyu-stranitsu.html).

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>




Справа в настройках пункта Параметры выберите пункт Использовать клавишу Enter для переноса строк:

Нажмите кнопку Готово и затем Публиковать страницу.

3. Перейдите в пункт Шаблон >> Резервное копирование и восстановление. Загрузите резервную копию шаблона на свой компьютер.

4. Нажмите кнопку Изменить HTML. 

Ставим курсор внутри рамки с кодом и при помощи клавиш Ctrl+F ищем тег ]]></b:skin>. 

5. Вставка следующего кода определит стили CSS формы обратной связи (оформление, цвета) и уберет этот гаджет с боковой панели блога (он будет отображаться только на статичной странице).

Предлагаю Вам три варианта стилей  - для блогов разного цветового оформления. Выбираете нужный код и вставляете его перед  ]]></b:skin>.

1) Если Ваш блог на сером фоне, то Вам подойдет код для формы обратной связи в серых тонах, который я взяла из блога с инструкцией по прикреплению гаджета к отдельной странице (см. выше)

Посмотреть:

/* 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;
}

 Если Вас устроит конечный вариант, то можете оставить все как есть. 

2) Если Вам нужна форма обратной связи сиренево-фиолетовая, то у меня получилась такая:

А это код для нее:

Посмотреть:

/* CSS Contact Form */
#ContactForm1{
display:none;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width: 300px;
height:auto;
margin: 5px auto;
padding: 10px;
background: #eec0ee;
border: 1px solid #4b0082;
color:#660099;
}
#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: #eec0ee;
border: 1px solid #4b0082;
color:#660099;
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: #6e1d9e;
border: 1px solid #556f8c;
border-radius:3px;
}
#ContactForm1_contact-form-submit:hover {
background:#ff00ff;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 450px;
margin-top:35px;
}

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: #ccccff;
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: #ccccff;
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;
}