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

07.08.2013

гаджет форма для связи
 Не так давно среди гаджетов от разработчиков 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;
}




82 комментария:

  1. Спасибо, полезная новинка. Надо будет убрать форму от стороннего сайта и поставить родную.

    ОтветитьУдалить
  2. Отвечаю оперативно на ваши посты потому что подписан на новые сообщения по мылу )Вот http://main-ip.ru/ интересный сервис по генерированию кода для обратной связи. Напишите про него пост думаю всем будет интересно.Много разных вариантов настройки формы обратной связи.Себе на сайте его поставил. Создаёш страницу, вставляеш код в HTML режиме, сохраняеш и всё готово.

    ОтветитьУдалить
    Ответы
    1. Спасибо за подписку и оперативные комментарии (o). У Вас нормально код от приведенного Вами сервиса работает?

      Удалить
  3. Подскажите чуть подробнее в п4 и 5. тег ]]>? нашла его. и что с ним делать? как и куда вставить код из п.5?

    ОтветитьУдалить
    Ответы
    1. Просто уже перепробовала и так и сяк. и серые и розовые тона не получаются. заранее спасибо за ответ

      Удалить
    2. Нужный код вставляете перед "]]>".

      Удалить
  4. Зд! Скажите:- только зарегистрированные пользователи могут пользоваться обратной связю, или все -со всего мира, моя знакомая пыталась отправить сообщение но на мою почту так ничего и не приходит?Спасибо!
    Если не трудно -сделайте на моем сайте (в обратной связи)сообщение, куда оно (сообщение от Вас )должно прийдти?
    http://myguitara08.blogspot.com

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, Юлия! Не нашла на Вашем сайте форму обратной связи. Отвечаю здесь. Ваша знакомая, наверно, в строку "Электронная почта" вводила адрес Вашей почты, а должна была свой. Вам же письмо должно прийти на тот электронный ящик, который Вы указали в качестве администратора (при регистрации аккаунта Google).

      Удалить
    2. Спасибо! Возможно.... есть новая форма связи , симпатичная , не знаю стоит ли ее устанавливать...

      Удалить
    3. Мария, проверьте форму обратной связи, она такая симпатичная, компактная(это Blogger ввел новую форму) и далее:-почему я не получила Ваше сообщение о ранее заданом вопросе? -А СЕЙЧАС Я К ВАМ ПОПАЛА ИЗ ПОИСКА...:))

      Удалить
    4. Виновата... я ее убрала, -а Вы в загадке.... не работала она у меня.....Чет мне не нравиться этот Блогспот, возможно будет, как на Народ . ру....Сейчас на социалках можно прилично зарабатывать...

      Удалить
    5. Народ.ру сейчас, кажется, с Юкоз объединился. Насчет заработка на социалках - поделитесь идеями через страничку "Контакты"?

      Удалить
  5. Ух ты как здорово! Спасибо. :)

    ОтветитьУдалить
  6. Количество блокирующих скриптов на странице: 1. Количество блокирующих ресурсов CSS на странице: 2. Они замедляют отображение контента.

    Все содержание верхней части страницы отображается только после загрузки указанных далее ресурсов. Попробуйте отложить загрузку этих ресурсов, загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML.
    Используйте асинхронные версии следующих скриптов:
    http://pagead2.googlesyndication.com/pagead/show_ads.js
    Оптимизируйте работу CSS на следующих ресурсах:
    http://www.blogger.com/static/v1/widgets/305307800-widget_css_mobile_2_bundle.css
    http://www.blogger.com/dyn-css/authorization.css?targetBlogID=7862762613597210328&zx=81dce73d-bda6-48ea-8f7c-0d28d0eb6a7c

    Если указывать в заголовках HTTP дату или срок действия статических ресурсов, браузер будет загружать уже полученные ранее ресурсы с локального диска, а не из Интернета.
    Сжатие HTML-кода (в том числе встроенного кода JavaScript или CSS) позволяет сократить объем данных, чтобы ускорить загрузку и обработку.
    Правильный формат и сжатие изображений позволяет сократить их объем.

    Есть сервиз гугловский, что ли -он проверяет сайты на правильность кода сайта, скорость и прочее, так вот, я не пойму где это нужно редактировать и кто с этим сталкивался, пробовала и новый сайт создавать , но те же данные показывает,. может это у Blogger такой глюк?
    вот сервиз:http://developers.google.com/speed/pagespeed/insights/?url=www.myguitara08.blogspot.com

    ОтветитьУдалить
    Ответы
    1. Если я правильно поняла - этот сервис платный. Оптимизация, конечно, нужна. Но я небольшой спец. в этом. Будем искать информацию.

      Удалить

    2. Вот здесь, наконец нашла:)- пробуйте и отпишитесь, спасибки за отзыв.


      https://developers.google.com/speed/pagespeed/insights/?hl=ru&utm_source=wmx&utm_campaign=wmx_otherlinks&url=http%3A%2F%2Fmyguitara08.blogspot.com%2F2013%2F10%2Faljbinoni-adazhio.html

      Удалить
    3. Полезный сервис. Спасибо за ссылку! Надо поподробнее разобраться.

      Удалить
  7. добрый день,
    подскажите как поменять цвет кнопки "отправить"

    ОтветитьУдалить
    Ответы
    1. Если не ошибаюсь, то в CSS коде - предпоследний абзац.
      }
      #ContactForm1_contact-form-submit:hover {
      background:#ff00ff;
      }
      Заменить background:#ff00ff на свой.

      Удалить
    2. а че дома никакой краски нет?:)

      Удалить
  8. Добрый день!
    Спасибо большое! Я справилась.
    Только что это за странная штука под формой вылезает?

    Подписаться на: Сообщения (Atom)

    часть "Сообщения (Atom)" кликабельная. Нажимаю на нее и выкидывает в код.
    вот адрес страницы. не пойму, как от этого избавится.((
    http://vietmamka.blogspot.ru/p/blog-page_5474.html
    Спасибо за помощь!

    ОтветитьУдалить
    Ответы
    1. Здравствуйте! Убрать эту надпись можно по инструкции в статье: http://samasajt.blogspot.ru/2013/06/ubiraem-podpisatca-na-atom.html

      Удалить
  9. Мария, добрый день!
    Подскажите, пжл. я создала гаджет Форма для связи сбоку, потом удалила и решила отдельно создать на странице мне не понравился внешний вид и решила вернутся с первому варианту но система пишет, Форма для связи Уже добавлено, что делать? Как вернут этот гаджет?

    ОтветитьУдалить
    Ответы
    1. Здравствуйте! Вы вставляли в режиме редактирования страницы HTML вставьте вот этот код:

      <form name="contact-..... из пункта 2 при добавлении формы обратной связи на отдельную страницу? Если да, то проделайте шаги в обратном порядке.

      Удалить
    2. Отдельную страницу которую я создала, с обратной связью удалила.
      Теперь хочу с правой стороны блога расположить форму обратной связи. Самую простую форму без заморочек.

      Удалить
  10. Мария, спасибо я разобралась.

    ОтветитьУдалить
  11. Создал форму обратной связи на отдельной странице, но она не отправляет ничего никуда!

    ОтветитьУдалить
    Ответы
    1. у меня сперва работала,потом я видимо,что -то нахимичила в шаблоне и перестал
      а может Гуле денежки захотелось поиметь:)

      Удалить
    2. Здравствуйте, Сергей. А в качестве обычного гаджета форма обратной связи работает? Дайте ссылку на Ваш блог.

      Удалить
    3. Дизайн-вставляете в сообщени и все на всех сообщениях будет эта форма.

      Напишите мне, что-нить в форме обратной связи...

      Удалить
  12. Все уже заработало! На всех страницах работает, а гаджет вставила на главную, никаких страниц
    не создавала...Видно Blogspot ,что-то испытывал. Напишите мне, что-нить для проверки, Спасибо!

    ОтветитьУдалить
  13. У вас приличный блог, регистрируйтесь в Блогун и зарабатывайте.Я всего два месяца и уже
    заработала на интернет, телефонию и мобильную связь и еще на счету остались деньги/
    Тематика любая. Очень хорошая система, высоковат процент, но зато не кидает, вовремя
    отвечает техподдержка. Я работаю в других биржах, но там цены маленькие и заказов мало.
    Если попадете, то можно и на работу свою не ходить, да , даже с социальными сетями можно работать
    https://blogun.ru/spilledcdhbafg.html

    ОтветитьУдалить
  14. Мне так быстро дали тиц 10, хотя посещений мало, почему?
    http://myguitara08.blogspot.com

    ОтветитьУдалить
  15. Скажите пожалуйста, а куда приходят сообщения "обратной связи", где указывать e-mail?

    ОтветитьУдалить
    Ответы
    1. Сообщения через форму обратной связи должны приходить на тот e-mail, который у Вас был указан при создании аккаунта Google.

      Удалить
  16. Вот спасибо !
    У меня все получилось - все отлично,
    Вы умеете разложить по полочкам что и как :)

    ОтветитьУдалить
  17. Все получилось и установилось, вот только при нажатии отправить ничего не происходит (((
    Вот http://soap-magazin.blogspot.ru/p/email-menyembunyikan-elemen-dalam.html

    ОтветитьУдалить
    Ответы
    1. Скорее всего, гаджет обратной связи не работает из-за динамического шаблона Blogger. Выход: 1) сменить шаблон; 2)использовать другую форму обратной связи, например: http://samasajt.blogspot.ru/2014/06/bolee-100-form-obratnoj-svjazi.html

      Удалить
  18. Здравствуйте. Что то сообщение не приходят с обратной связи. Что то не так сделал? Спасибо

    ОтветитьУдалить
    Ответы
    1. В строку "Адрес E-mail" читатели должны написать адрес своей электронной почты. А сообщения из формы должны приходить на е-mail, указанный при входе в аккаунт.

      Удалить
  19. У меня то-же ничего не происходит. Сообщение не отправляется :(

    ОтветитьУдалить
    Ответы
    1. Здравствуйте! Скажите, а адрес электронной почты, на который Вы ждете ответ - совпадает с тем адресом, который Вы указывали при создании аккаунта Blogger?

      Удалить
  20. Всем рекомендую, взять отличную форму связи здесь http://main-ip.ru/genform. Все просто замечательно работает. Настраиваемый дизайн и простота установки!

    ОтветитьУдалить
  21. Здравствуйте, Мария,

    К сожалению, у меня форма обратной связи тоже не работает. Пробовала изначально поставить её, пользуясь инструкцией с другого блога, но сообщения не отправлялись, а теперь и здесь такая же проблема… Адрес «отправителя» и тот, на который жду проверочное сообщение, разные. В чём может быть проблема?

    ОтветитьУдалить
    Ответы
    1. Здравствуйте! Причин может быть несколько: 1) конфликт с шаблоном (динамический или от сторонних разработчиков); 2) форма не работает на отдельной странице - попробуйте поставить просто как гаджет, который виден на всех страницах. Еще можно использовать контактную форму такую: http://samasajt.blogspot.ru/2014/06/bolee-100-form-obratnoj-svjazi.html

      Удалить
    2. Да, действительно, у меня шаблон сторонних разработчиков и ещё немного переделан под себя. Попробовала поставить как гаджет, видимый на всех страницах, — сообщение до меня дошло со второй попытки :-) Завтра ещё попытаюсь проверить работоспособность контактных форм по Вашей ссылке, спасибо.

      Получается, проблема именно в шаблоне?

      Удалить
  22. Спасибо Мария, работает отлично. Уже воспользовалась не одним Вашим советом. Мастерю свой первый блог ))) http://1-sovet.blogspot.com

    ОтветитьУдалить
  23. Мария, подскажите, не могу найти ]]>. Вообще такого нет. И форму обратной связи вставить удалось, но сообщения с нее не отправляются. Что можно сделать?

    ОтветитьУдалить
  24. Добрый вечер)) Подскажите, что я делаю не так: обратная связь не активна - делала все как написано, но на почту ничего не приходит

    ОтветитьУдалить
    Ответы
    1. Здравствуйте) Может быть конфликт с шаблоном (если он от сторонних разработчиков). Еще нюанс: письма должны прийти на тот электронный ящик, который Вы указали в качестве администратора (при регистрации аккаунта Google).

      Удалить
  25. Добрый день, сделала как вы сказали, но форма обратной связи не работает. Помогите, ну очень нудно http://mirargo.blogspot.com/p/blog-page_11.html#kup

    ОтветитьУдалить
    Ответы
    1. Попробуйте этот вариант: http://samasajt.blogspot.ru/2014/06/bolee-100-form-obratnoj-svjazi.html

      Удалить
  26. Аналогичная фигня, не работает форма обратной связи. На техподдержку гугла писал, там один хмырь лишь левые отписки даёт, никакой конкретной помощи.

    ОтветитьУдалить
    Ответы
    1. Есть сторонние сайты для создания форм http://samasajt.blogspot.ru/2014/06/bolee-100-form-obratnoj-svjazi.html

      Удалить
  27. Здравствуйте. Вопрос один: Можно ли в "родную форму обратной связи" добавить ещё одно поле (телефон) или для этой цели надо ставить новый скрипт?

    ОтветитьУдалить
  28. Мария, здравствуйте! А код самого спойлера напишите, пожалуйста.

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. Ищите код спойлера в статье http://samasajt.blogspot.ru/2016/02/kak-publikovat-kod-v-bloge.html

      Удалить
  29. Большое спасибо! Всё функционирует.

    ОтветитьУдалить
  30. Анонимный24.02.2016, 12:59

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

    4. Нажмите кнопку Изменить HTML. Ставим курсор внутри рамки с кодом и при помощи клавиш Contrl+F ищем тег ]]>.

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

    РАСШИФРУЙТЕ ЧТО ВЫ НАПИСАЛИ)))))))))))

    ОтветитьУдалить
    Ответы
    1. Здравствуйте! Про резервное копирование читайте здесь: http://samasajt.blogspot.ru/2013/01/blog-post_17.html
      В шаг 4 добавила скриншот))))

      Удалить
  31. Здравствуйте!Подскажите, а куда будут приходить сообщения, отправленные по форме обратной связи, созданной через гаджет блоггера?

    ОтветитьУдалить
    Ответы
    1. Здравствуйте! На ту почту, которую Вы указали при создании аккаунта Google/Blogger.

      Удалить
  32. Здравствуйте! Создала Обратную связь в блоге, но письма так и не доходят! Не могу понять, что не так!http://belorustv.blogspot.ru/

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. Отправила Вам сообщение через форму обратной связи на Вашем блоге. Сообщение должно придти на ту почту, которую Вы указали при создании аккаунта Google (или при создании блога на Blogger). Пришло?

      Удалить
  33. Владимир13.03.2016, 17:32

    Мария, несколько дней назад обратил внимание, что давно не приходят письма, проверил форму обратной связи, и точно - google что-то поменяли, скрипт нужно править.

    ОтветитьУдалить
    Ответы
    1. У вас не заработала форма?

      Удалить
    2. Здравствуйте. Проблемы с формой наблюдаются у многих. Можно воспользоваться другими формами обратной связи http://samasajt.blogspot.ru/2014/06/bolee-100-form-obratnoj-svjazi.html

      Удалить
  34. Что бы работала форма обратной связи, нужно исключить 4 шаг, а стили самой формы вставлять не в код html, а непоследственно на странице обратной связи. Т.е. на шаге 2 вставляем стили в этот блок

    style type="text/css
    /* Menyembunyikan elemen dalam postingan */
    #comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
    СЮДА ВСТАВИТЬ КОД
    style

    4 шаг игнорировать.

    ОтветитьУдалить
    Ответы
    1. PS Вот мая форма связи, можете отправить мне письмо и убедиться что все работает. http://zrobleno.blogspot.com/p/contact.html

      Удалить
    2. Благодарю, Виктор, за комментарий. Надеюсь, что это поможет читателям блога.

      Удалить
    3. Пожалуйста.

      PS моя опечатка: мАя > мОя :)

      Удалить
  35. Здравствуйте!
    У меня почему-то не работает кнопка "Отправить"
    Протестировала форму Виктора. У него все работает.
    Пожалуйста, подскажите, почему это может быть?
    http://internet-eko.blogspot.com/p/blog-page_4.html

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

      Удалить
  36. Анонимный08.03.2017, 6:22

    Здравствуйте! А как установить в блог такой же виджет рейтинга статей "нравится, не очень", как у вас?

    ОтветитьУдалить
    Ответы
    1. О рейтинге статей https://samasajt.blogspot.ru/2015/01/rejting-statej-dlja-bloga-ili-sajta.html

      Удалить
  37. Досадно, но в Фаерфоксе форма почему то не работает - не активны поля ввода информации.

    ОтветитьУдалить
    Ответы
    1. К сожалению, "родная" форма не всегда корректно работает. Вы можете воспользоваться другим сервисом https://samasajt.blogspot.ru/2014/06/bolee-100-form-obratnoj-svjazi.html

      Удалить
  38. Здравствуйте!Пытаюсь сделать форму обратной связи по Вашему руководству, но увы...не нахожу строку "]]>". Сама форма работает но интерфейс сменить не пойму как...(((

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. Попробуйте поискать просто b:skin

      Удалить
    2. ...нашел "]]>" - спасибо за помощь! )

      Удалить

Загляните и на другие страницы ^