Форма обратной связи для blogger (blogspot)

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

Как сделать форму обратной связи

Добавить форму можно многими способами. Постараюсь хотя бы вкратце о них вам написать.

Виджет "Форма для связи"

На блогохостинге Blogger есть стандартный гаджет «Форма связи». Устанавливается в боковую панель или в подвал блога. Форма по сути не плохая, но имеет один минус, занимает много места и не скрыта. Добавляется как обычный гаджет. Административная панель Blogger > Дизайн > Добавить гаджет > Другие гаджеты > Форма связи.

Рис. 1. Виджет "Форма для связи"

Для молодых блогов и для блогов с одной тематикой вариант не плохой, но гаджет не доработан, поэтому наверное не включен в список основных.

Я лично в другом своем блоге установила форму связи от Blogger и мне очень нравится. По моему не дурно и оригинально?! А вы как думаете?

Рис. 2. Виджет "Форма для связи" | Пример

Можно разместить форму связи на статистической странице и дать ей название «Контакты».
 

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

Как создать  форму обратной связи на отдельной странице

Для начала устанавливаем гаджет «Форма связи» как я описала выше. Форма появится у вас в блоге, но мы с помощью HTML и СSS изменим дизайн и стандартная форма будет скрыта.

Заходим в админку блога, открываем вкладку страницы и создадим новую страницу «Контакты». В редакторе страниц нет функции постоянная ссылка, поэтому нужно создать ЧПУ самим и обязательно на первом этапе.

В названии страницы пишем латинскими буквами название страницы к примеру: kontakty. Вот такой будет у нас url страницы: https://yablogger.info/p/kontakty.html. Более подробно в статьях как настроить постоянные ссылки и как пользоваться сервисом транслитерации для перевода русского текста в латыницу читайте тут.

Дали название странице и сразу нажимаем публикация, что бы появился красивый адрес. Затем снова возвращаемся в редактор страниц, изменяем название на русском.

Нажимаем вкладку редактора HTML, удаляем все не нужное что там есть, вставляем код, нажимаем создать, форма связи появится на страничке, публикуем страницу.

<br />
<div id="contactf">
<form name="contact-form">
<label for="ContactForm1_contact-form-name">Ваше имя<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" maxlength="50" name="name" placeholder="Введите Ваше Имя:" type="text" /> </label><br />
<br />
<label for="ContactForm1_contact-form-email">Ваш E-mail<span style="color: red; font-weight: bolder;">*</span> <br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Укажите Ваш E-mail:" type="text" /> </label><br />
<br />
<label for="ContactForm1_contact-form-email-message">Сообщение <span style="color: red;"><b>*</b></span></label> <br />
<textarea class="contact-form-email-message" cols="74" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Введите текст сообщения..." rows="15" type="text"></textarea><br />
<br />
<input class="contact-form-button contact-form-button-submit" type="reset" value="Очистить" />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" name="submit" type="button" value="Отправить" /> <br />
<br />
<div style="max-width: 100%; text-align: center; width: 75%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
<br />
<br /></div>
</form>
<style type="text/css">
#ContactForm1{
display:none!important;
}
</style>
</div>

Рис. 3. Виджет "Форма для связи" на отдельной странице

А теперь добавим стили СSS для формы обратной связи в шаблон блога, немножко украсим и придадим форме красивый стиль. Заходим в административную панель Blogger > Шаблон > Изменить HTML.

Ставим курсор мышки в окно шаблона, нажимаем на клавиатуре сочетание клавиш Ctrl+F, в появившемся окне поиска по шаблону ищем строку ]]></b:skin>  и выше этой строки, нажимаем Enter, что бы появилась новая строчка вставляем код:

/*Форма обратной связи*/ 
#contactf {
font-size: 12px;
font-family: "Georgia",sans-serif;
background-color:#ffffff;
text-align: left;
font-weight: bold;
padding: 3px 10px 0px 10px;
color: rgb(0, 0, 0);
border: 1px solid rgb(102, 187, 221);
text-shadow: 0px 0px 0px rgb(204, 204, 204);
box-shadow: 0px 0px 0px rgb(112, 107, 107), 0px 0px 0px rgba(162, 162, 162, 0.4) inset;
margin: 15px 3px;
text-transform: uppercase;
line-height: 2;
}
#ContactForm1{ display:none!important;}
.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: 50%;
width: 100%;
height: 30px;
font-weight:bold;
} 
.contact-form-email:hover, .contact-form-name:hover{
border: 1px solid #66bbdd;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 5px 15px 5px 28px;
height: 30px;
}
.contact-form-email-message:hover {
border: 1px solid #66bbdd;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 10px;
}
.contact-form-button:hover {
text-decoration: none;
}
.contact-form-button:active {
position: relative;
top: 1px;
}
.contact-form-email-message {
background: #FFF;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
display: inline-block;
font-family: Georgia;
padding: 10px;
vertical-align: top;
max-width: 75%!important;
width: 70%!important;
height: 150px;
border-radius: 4px;
text-align: justify;
max-height: 300px;
}
.contact-form-name {
background: #FFF url (http://1.bp.blogspot.com/-aYAZKHxj784/UvdMwkai6pI/AAAAAAAAAu0/rwasg8cq43s/s320/name.png) no-repeat 7px 6px;
padding: 5px 15px 5px 28px;
width: 100%;
max-width: 75%px;
}
.contact-form-email {
background: #FFF url(http://1.bp.blogspot.com/-jnXFbfAxUvk/UvdMwtu4AVI/AAAAAAAAAuw/OO-GmlqlU88/s320/email.png) no-repeat 7px 8px;
padding: 5px 15px 5px 28px;
width: 100%;
max-width: 75%px;
}
 @media screen and (-webkit-min-device-pixel-ratio:0) {
.contact-form-name {
background: #FFF url(http://1.bp.blogspot.com/-aYAZKHxj784/UvdMwkai6pI/AAAAAAAAAu0/rwasg8cq43s/s320/name.png) no-repeat 7px 6px;
padding: 15px 15px 15px 28px;
}
.contact-form-email {
background: #FFF url(http://1.bp.blogspot.com/-jnXFbfAxUvk/UvdMwtu4AVI/AAAAAAAAAuw/OO-GmlqlU88/s320/email.png) no-repeat 7px 8px;
padding: 15px 15px 15px 28px;
}
.contact-form-email:hover, .contact-form-name:hover{
padding: 15px 15px 15px 28px;
}
.contact-form-button {
height: 28px;
}
label {
cursor:pointer;
}
}
/*Форма обратной связи - конец*/

Нажимаем «Просмотреть шаблон», если все нормально, сохраняем. Теперь возвращаемся на страничку которую мы создали, там должна появится новая форма для связи, а стандартная форма установленная в сайдбаре или в футере (подвале) должна исчезнуть.
 

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

Рис. 4. Виджет "Форма для связи"

 
Далее не забываем проверить как работает контактная форма, пишем себе сообщение, заходим в почту аккаунта Google и смотрим результат.

Создать форму обратной связи онлайн с помощью бесплатных сервисов

С помощью онлайн-сервисов очень удобно добавлять форму в блог. Все что требуется, зарегистрироваться на сервисе, изменить цвет, размер и надписи. Получить код, добавить на статистическую страницу в редакторе HTML, зарегистрировать форму для того что бы она работала.

Зарегистрировать форму это значит, после того как добавили код, вернуться снова на сайт где создавали форму и указать точный адрес страницы где установлен код и E-mail на который вам будут отправляться сообщения.

Google Формы https://www.google.com/intl/ru_ru/forms/about/

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

Онлайн сервис для создания формы обратной связи http://www.formm.ru Форма связи похожа на форму с main-ip, разница в названиях и капча слева.

Сайт  где можно создать красивую форму для связи
http://main-ip.ru/genform

Сервис онлайн  Оникон для  создания формы обратной связи http://onicon.ru/stranica-aktivnoy-formy. Уникальная активная форма связи для блога/cайта (генератор лидов) работает круглосуточно. Сервис платный, 14 дней бесплатных.

На этом сайте можно заказать и онлайн чат. Услуга платная. 14 подарочных дней.

Ну вот дорогие мои, жду ваших отзывов и дополнения к выше сказанному. Делитесь в комментариях по теме своими полезными ресурсами.