2 августа 2013 г.

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

Занимаюсь сайтом и продолжаю мучить 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.
Сложно предположить, насколько увеличится количество спама после установки такой формы обратной связи. Но надо попробовать, чтобы понять. Удалить то всегда можно)

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

49 комментариев :

  1. Вот еще ссылка

    http://main-ip.ru/genform/register/

    Все оч. просто и быстро.

    Правда нужна небольшая регистрация, но добавляется проверочный код. Использую второй год, спама (ттт) ни разу не было. :)

    ОтветитьУдалить
  2. Спасибо. Капча мне как раз и не нравится. посмотрим как будет без нее работать.

    ОтветитьУдалить
  3. Леночка, вот только на днях очень сильно задумалась! Ты как будто прочитала мои мысли :)) Благодарна тебе безмерно за информацию и столь подробное описание. Пошла разбираться!

    ОтветитьУдалить
  4. Девочки, пжл) Рада, если будет полезен.

    ОтветитьУдалить
  5. Лена, ты гуманитарий? та ну на)))) Столько полезного узнала от тебя, и не только про устройство блога, и про шитьё в частности. Спасибо что делишься с нами своим умением.

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

      Удалить
  6. Лена, спасибо за информацию! Тоже давно такую штуку хотела! :)

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

    ОтветитьУдалить
  7. Я вот себе давно хотела такую штуку поставить, но у меня не находит ]]> :(

    ОтветитьУдалить
    Ответы
    1. Ой :) Тег не находит в Шаге 3. Пишет красным по белому "0 из 0")))

      Удалить
    2. и у меня не находит, не так и не так... как не искала(((

      Удалить
  8. Лена, спасибо за ценную информацию!

    ОтветитьУдалить
  9. Елена, огромное Вам спасибо!
    Вчера все сделала, следуя Вашим указаниям, и все получилось! Ура!
    Еще хотела одну страницу создать и, собственно, создала, поместила её вверх, рядом с ярлычком "Форма обратной связи", но, увы, ничего не отображается.
    Сейчас попробую кое-что. Если не получится, то буду у Вас просить помощи.

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

    ОтветитьУдалить
  11. Лен, огромное спасибо!!! У меня стоял формуляр на боковой панельке, не знака, как разместить её на отдельной странице.
    Все получилось !!! Использовала твою форму, она мне по цвету подходит ;)

    ОтветитьУдалить
  12. Здравствуйте, все сделала так, как написано у Вас, сообщение не могу отправить себе на почту... С бокового гаджета получилось, а с того, который на странице не вышло! Нажимаю "отправить" не реагирует! Подскажите, что делать?

    ОтветитьУдалить
    Ответы
    1. пробовать заново, возможно с кодом проблемы, посмотрите ничего ли вы не удалили (именно код кнопки посмотрите)

      Удалить
    2. Переделала - работает!!! Ура:3 А, сели не секрет, как сделать красивый дизайн блога? А то у меня какой-то не очень красивый... :)

      Удалить
    3. ) 2 варианта - или заказать , или сделать самой

      Удалить
  13. Спасибо за полезную информацию и материал. Поставил, заработало всё и сразу =) отправил проверочное сообщение, которое получил на емайл. Еще раз Спасибо!

    ОтветитьУдалить
  14. Этот комментарий был удален автором.

    ОтветитьУдалить
    Ответы
    1. Здравствуйте! В шапку меню нужно добавлять ссылку на страницу, на которой есть код формы. О меню писала здесь - http://dushechki.blogspot.com/2012/10/blog-post_7.html

      Удалить
  15. Спасибо! )) всё просто и понятно

    ОтветитьУдалить
  16. Спасибо! Все получилось! Долго правда искала я в HTML этот b:skin, поиск не находил, еле нашла как то сама))

    ОтветитьУдалить
  17. Лена, спасибо! У меня вечные проблемы с этой формой обратной связи. Вот только кнопка отправить почему-то получилась с надписью kirim... И как от нее избавиться не понимаю.

    ОтветитьУдалить
  18. Не заработали ни одна из форм на динамическом шаблоне

    ОтветитьУдалить
  19. Спасибо вам огромное за этот пост) Давно искала как сделать это! Может быть это только у меня так было, но код CSS, который уже вставляем в шаблон, у меня не воспринимался. Знающий человек прописал мне тег style (в скобочках <>) в начале и в конце кода. И все заработало!
    Настроила цвета и теперь в восторге) Вот как у меня получилось:
    http://ritalifestyle.blogspot.ru/p/contact.html

    ОтветитьУдалить
  20. просто супер все работает! спасибо!!!!

    ОтветитьУдалить
  21. Здорово! Спасибо, Елена за полезную информацию. Только пытаюсь настраивать свой блог. Только у меня как и у Алины вместо кнопочки отправить отображается надпись kirim. Попыталась найти с помощью поиска в шаблоне, но ничего не нашлось. Как же поменять надпись?

    ОтветитьУдалить
    Ответы
    1. Здравствуйте! надпись есть...
      ищите
      input id="ContactForm1_contact-form-submit" type="button" value="Kirim"
      Я просто заменила его на слово "отправить" и всё замечательно работает)))
      Огромное спасибо, Елена, за подробную информацию!

      Удалить
  22. Благодарю за полезную информацию!
    Наконец-то нашла именно ту форму обратной связи, которая мне нужна. Главное, что это форма специально для Blogger.

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

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. У меня была подобная ситуация... письма не доходили, переустановила гаджет, а потом обнаружила, что все письма улетали в СПАМ...

      Удалить
  24. полчаса искала этот "kirim", пока не дошло, что нужно искать в коде страницы, а не шаблона :)

    ОтветитьУдалить
  25. Все сделала как у вас, письма не доходят, что не так и как это проверить? Вот здесь форма?

    ОтветитьУдалить
  26. Елена, спасибо большое за информацию!
    Я сделала все, но появился вопрос :) Не знаете, как можно кнопку "отправить" тоже в центр поставить?
    http://www.cultive.kz/p/e-mail-menyembunyikan-elemen-dalam.html
    Спасибо заранее!

    ОтветитьУдалить
  27. Отлично. Добавил форму обратной связи на свой блог.
    ExcelGuide: Как сделать это в Excel

    ОтветитьУдалить
  28. Елена, сделала все по инструкции и несколько раз, не приходят письма из формы обратной связи. Комментарии на одобрения приходят на мой мейл администратора, а письма с обратной связи на тот же мейл не приходят. В чем может быть причина? Спасибо

    ОтветитьУдалить
  29. У меня такая же проблема как у Kinezia. Письма не приходят

    ОтветитьУдалить
  30. И у меня не приходят письма. Ни на емайл администратора. Ни на дополнительный - никуда. Хоть гаджетом. Хоть отдельной страницей. Нету!

    ОтветитьУдалить
  31. И у меня письма не приходят, кнопка нажимается, пишет, что сообщение отправлено

    ОтветитьУдалить
  32. А мне очень помогла ваша форма) Несколько дней мучалась, но теперь все работает) Спасибо. У

    ОтветитьУдалить

Я с большим удовольствием читаю ВСЕ ваши комментарии! Спасибо!!!