Форма обратной связи в блоге на отдельной странице

Занимаюсь сайтом и продолжаю мучить blogger)

Сегодня в моем блоге появилась новая функция - возможность написать мне письмо прямо из блога.

Для этого нужно зайти на страницу КОНТАКТЫ и воспользоваться формой обратной связи.

Вот так выглядит форма:

Сообщения, отправленные с помощью такой формы, приходят на электронную почту (как и уведомления о добавленных комментариях).

Добавить такую форму обратной связи в блог можно с помощью стандартного (нового) гаджета blogger-а.

Но! Стандартный гаджет добавляется только на боковую колонку или в подвал. 

А мне, конечно, хотелось, чтобы вся эта красота помещалась на отдельной страничке с моими контактами.

Ответ нашелся в интернете))  Автор этого чудесного рецепта - Kang Ismet. Спасибо ему!

Как установить гаджет "форма для связи" на отдельную страницу в блоге?

Шаг 1. Установим гаджет "Форма для связи" в наш блог.

1. Идем Настроить-Дизайн-Добавить гаджет (боковая колонка или подвал - неважно).

Открывается окно гаджетов:

2. Выбираем закладку "Дополнительные гаджеты" (помечена галочкой).

3. И устанавливаем гаджет "Форма для связи" (помечен галочкой на след. картинке):

4. После установки гаджет становится видимым сбоку или в подвале.

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


Шаг 2.  Размещаем гаджет "Форма для связи" на отдельной странице.

1. Создаем статическую страницу, на которой мы хотим установить форму для связи.
Это делается просто: Настроить-Страницы-Создать страницу.

Я использовала уже имеющуюся страничку КОНТАКТЫ.

2. Заходим на нужную нам страницу.

3. Настраиваем её.
Для этого справа вверху находим кнопку "Параметры".

Выставляем параметры таким образом:

Жмем "Готово"

4. Добавляем на страницу код формы обратной связи.

Для этого переключаемся на режим HTML (вверху слева).
И вставляем на страничку вот такой код:

<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>

Если мы переключимся в режим "Создать", то увидим уже готовую форму обратной связи.
Слова "имя", "адрес email", "сообщение" можно заменить на другие.

Шаг 3. Настраиваем стиль формы для связи и скрываем гаджет с главной страницы блога.

1. Идем в Настроить-Шаблон-Изменить HTML.
(Не забываем делать резервную копию перед любыми изменениями в коде шаблона).

2. Заходим в шаблон. Жмем "Изменить Шаблон".

3. С помощью горячих клавиш Ctrl+F (или функции "Поиск") находим тег    ]]></b:skin>

4. Вставляем перед ним вот такой код:

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

5. Нажимаем "Сохранить шаблон"

Всё готово)

Конечно, это код автора, мне он по стилю слегка не "того"))

Я его переделала под свой блог.

Изменила параметры color, background, border, font-family. 

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

Коды цветов тоже можно найти в инете. Набрав в поисковике, например, "цвета HTML". Или воспользоваться фотошопом (как делаю я), чтобы посмотреть коды того или иного цвета.

Большое спасибо Ане за дополнение! В своем блоге "Теремошка" она подробно написала о том, как настроить стиль гаджета. Теперь вы легко сможете изменить его цвета и размеры "под себя".

Размещу и свой код, если моя форма для связи ближе вам по стилю, можно использовать его:

/* CSS Contact Form */
#ContactForm1{
display:none;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width: 300px;
height:auto;
margin: 5px auto;
padding: 10px;
background: #ffffff;
border: 1px solid #07aaa0;
color:#777;
font-family:Verdana, sans-serif;
}
#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: #ffffff;
border: 1px solid #07aaa0;
color:#777;
font-family:Verdana, sans-serif;
}
#ContactForm1_contact-form-submit {
width: 101px;
height: 35px;
float: left;
color: #373839;
padding: 0;
margin: 10px 0 3px 0 0;
cursor: pointer;
background: #ffffff;
border: 1px solid #07aaa0;
border-radius:3px;
font-family:Verdana, sans-serif;
font-size:14px;
}
#ContactForm1_contact-form-submit:hover {
background:#d5d7d7;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 450px;
margin-top:35px;
}


Вот и все на сегодня)

P.S.
Сложно предположить, насколько увеличится количество спама после установки такой формы обратной связи. Но надо попробовать, чтобы понять. Удалить то всегда можно)

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