Новое в блоге
Loading...
24 мая 2013 г.

Установка виджета Blogger «Форма для связи» на статическую страницу блога

Привет дорогие читатели моего блога! Только недавно я рассказал о новом виджете от  Blogger "Форма для связи" и как предполагал, даже не предполагал, а был уверен, что найдут способ вывести эту контактную форму на статическую страницу блога.

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

Я бы все таки, предпочел установить контактную форму для связи с автором блога на отдельную статическую страницу (всегда так делаю) или хотя бы на страницу сообщений.А ссылку на страницу, вывел бы в меню блога. Теперь давайте друзья, я объясню вам, как установить виджет Bloggera "Форма для связи" на статическую страницу. Посмотрите как будет выглядеть эта форма, на скриншоте ниже:
"Форма для связи" на статической странице
Как установить виджет Bloggera "Форма для связи" на отдельную статическую страницу блога

Для начала нам нужно добавить сам виджет, на боковую панель блога или в подвал:

Нажать Дополнительные гаджеты 
Добавить гаджет
Пускай пока поторчит гаджет на боковой панели. Идём дальше. Создайте новую статическую страницу (если есть страница с формой, то можно просто поменять код) и в режиме 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 для переноса строк". Как показано на скриншоте:

Параметры
Нажмите готово. Шагаем дальше.Теперь нам нужно добавить стиль CSS для формы и заодно скрыть виджет с глаз долой, на боковой панели блога. В шаблоне находим тег: ]]></b:skin> и чуть выше добавляем код:

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

Готово. Ссылку на страницу с формой для связи, можете вывести в меню вашего блога. Всем пока. До новых встреч. Удачи и успехов вам.

Автор этого замечательного трюка - Kang Ismet.

Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями:

30 коммент. :

  1. Спасибо! Форму на страницу добавила, но последний код не нашла ]]>, у меня такого нет((( Что делать?

    ОтветитьУдалить
    Ответы
    1. Привет Людмила!Посмотрите внимательно,такой тег должен быть обязательно.

      Удалить
  2. Спасибо! всё работает прекрасно.

    ОтветитьУдалить
  3. Здравствуйте, Сергей. Я обыскала все и по несколько раз, но знака такого в html не нашла. Я правда, форму поставила в нижний гаджет, у меня бокового нет. Я в html нашла этот виджет. Может быть код поставить перед ним?

    ОтветитьУдалить
    Ответы
    1. Привет Евгения!Тег ]]></b:skin> во всех шаблонах есть.Там все стили находятся.Постарайтесь найти.

      Удалить
  4. Wow! Спасибо, получилось. Спрятался под стрелкой.

    ОтветитьУдалить
  5. Боже, я так давно пыталась это сделать! Столько способов перепробовала, описанных на других сайтах! Сейчас все получилось! Просто ОГРОМНОЕЕЕЕЕЕЕ спасибо! Просто слов нет! У меня есть еще кое-какие вопросы, попробую отыскать их на вашем сайте, надеюсь найду! Буду вашим читателем!

    ОтветитьУдалить
    Ответы
    1. Привет, Елизавета! Рад за вас, что получилось. Зачем вам другие сайты когда есть мой(шутка).Если что, можете поискать ещё здесь - http://shkolablogger.ru/ Удачи.

      Удалить
  6. Круто, давно хотел себе также сделать, спасибо автору, попробую внедрить.

    ОтветитьУдалить
  7. Спасибо! Все получилось, но не могу понять куда отсылаются сообщения от посетителей блога, ни на одну почту не пришло, сама пробовала отправить. Как настроить свою почту в форме обратной связи?

    ОтветитьУдалить
    Ответы
    1. Привет,Инна!У вас есть почта gmail.com?Всегда на её должно приходить.

      Удалить
    2. Сергей с удовольствием читаю Ваш блог.Большое спасибо.Честно говоря никуда больше и не суюсь с вопросами.
      вопрос к Вам -я то же не могу найти тег ]]>Может потому что пользуюсь новым интерфейсом или шаблон не стандартный.С уважением.

      Удалить
    3. У меня тоже всё получилось.И тоже,как у Ирины на почту gmail.com не пришло.

      Удалить
  8. Зачем поганить код шаблона, он и так я думаю у всех изменён до не хочу разными прибамбасами. Ведь для обратной связи есть куча сервисов где можно сгенерировать код и вставить на статическую страничку. На этом блоге я встречал где то посты о таких сервисах, посмотрите поищите, а код шаблона если есть другой вариант лучше не изменять. ПС это сугубо моё мнение.

    ОтветитьУдалить
  9. Спасибо большое автору за этот код. Очень удобно и просто классно!!!

    ОтветитьУдалить
  10. Всё сразу получилось, спасибо Вам огромное. Очень полезный пост!

    ОтветитьУдалить
    Ответы
    1. Пожалуйста! Справились - Вы молодец! (h)

      Удалить
  11. Здравствуйте!
    У меня виджет формы связи остался вместе со второй формой на отдельной странице. Когда я удаляю html код встроенного в боковую панель виджета, не работает созданная форма связи. Подскажи, пожалуйста, как я могу решить данную проблему

    ОтветитьУдалить
  12. Привет! Удалите всё(СТРАНИЦУ И ДВЕ ФОРМЫ ДЛЯ СВЯЗИ) и проделайте всю операцию заново.

    ОтветитьУдалить
  13. "У вас есть почта gmail.com?Всегда на её должно приходить." А можно поменять емейл адрес не на gmail.com, а на другой почтовій сервер?

    ОтветитьУдалить
    Ответы
    1. Можно попробовать изменить адрес почты Настройки - Сообщении и комментарии - Контроль за комментариями - Запросы на модерацию по электронной почте для и указать новую почту. Попробуйте, а я вам напишу. Только сообщите мне когда. Может получится. :)

      Удалить
  14. Добрый день! Скажите, что может быть неисправно, если виджет вообще не работает? Ни на отдельной странице, ни в столбце блоге. Еще в январе он прекрасно присылал письма, теперь же пишут, что письмо отправлено, но на почту не приходят!

    ОтветитьУдалить
  15. Добрый день! Скажите, в чем может быть причина. Перестала работать форма связи вообще, пишут, то сообщение отправлено, но на почту не приходит. Ни родной гаджет, ни код для отдельной страницы. Я все тысячу раз удаляла и переустанавливала, но тщетно. Последний раз приходили письма 14 января, после этого тишина, хотя пишут и ждут ответа...
    Спасибо!

    ОтветитьУдалить
    Ответы
    1. Привет, Анна! Обычно это связано с неполадками на Blogger, у них часто то одно не работает то другое. Вот чтобы вам не мучится воспользуйтесь любым сервисом который представляет форму для связи бесплатно, если решите тогда дам ссылку на инструкцию. 8-)

      Удалить

 
Footer