Форма связи | Blogger

Форма связи внутри "Сообщения" или Страницы"Страницы"

Шаг 1. Подключаем гаджет

В "Шаблоне" после (или в другую b:section с гаджетами):

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>...</b:widget>
добавить
  <b:widget id='ContactForm1' locked='false' title='Форма для связи' type='ContactForm'>
    <b:includable id='main'/>
  </b:widget>

Шаг 2. Настраиваем стили

Внешне будет похожа на форму комментариев, тоже в рамочке. внешний вид формы обратной связи для Blogger

В редакторе форматирования "Сообщения" или Страницы"Страницы" переходим в режим "HTML" и вставляем:

<style>
[name="contact-form"] {
  margin: 0 8px;
  padding: 18px 22px 10px;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(229, 229, 229) rgb(229, 229, 229) rgb(238, 238, 238);
  border-radius: 2px;
}
#ContactForm1_contact-form-name,
#ContactForm1_contact-form-email,
#ContactForm1_contact-form-email-message {
  display: block;
  width: 100%;
  max-width: 400px;
  -moz-box-sizing: border-box; box-sizing: border-box;
  margin-bottom: 2%;
  padding: 5px 2px 2px 5px;
}
#ContactForm1_contact-form-email-message {
  max-width: 100%;
}
</style>

<form name="contact-form">
Как к Вам обращаться:
<input id="ContactForm1_contact-form-name" class="contact-form-name" name="name" type="text" placeholder="например, Мария Петровна" x-autocompletetype="name"/>
Email для связи:
<input id="ContactForm1_contact-form-email" class="contact-form-email" name="email" type="email" placeholder="например, ivanova@yandex.ru" x-autocompletetype="email"/>
Ваше сообщение:
<textarea id="ContactForm1_contact-form-email-message" class="contact-form-email-message" name="email-message" rows="5" placeholder="Здравствуйте,"></textarea>
<input id="ContactForm1_contact-form-submit" class="contact-form-button contact-form-button-submit" type="button" value="Отправить" />
<div id="ContactForm1_contact-form-error-message"></div>
<div id="ContactForm1_contact-form-success-message"></div>
</form>

Форма связи в боковой колонке

Во вкладке "Дизайн" добавляем гаджет форма связи blogger "Форма для связи". Он находится в списке "Другие гаджеты". где найти гаджет форма связи Blogger

Rookee — инструменты для привлечения клиентов на сайт
в f t
наверх ↑

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

Юлия Алешкина
Большое спасибо!
Завтра гляну нюансы тут. Я установила по описанию, на которое Вы меня первоначально направили. Сделала подходящие стили и т.п., но меня смущает 2 момента: это мой эл.адрес (у меня стоит там gmail (как основной адрес при входе в блог и гугл)а пользуюсь я другой...и изменить не получается..., а второе-при тестовой отправке сообщения себе изменяется кнопочка "отправить"-текст на ней становится жирным, при обновлении страницы это исчезает потом)
NMitra
1) Электронный адрес берётся из аккаунта. У некоторых почтовых сервисов, например, Яндекс.Почты, можно к электронному ящику привязать несколько email. То есть у себя я вижу почту с нескольких email.
2) От стилей зависит. В статье я стандартные решила оставить. У всех разные шаблоны... А тут хоть с комментариями в одном цвете будет.
Юлия Алешкина
NMitra, большое спасибо! сделала по Вашему примеру! всё работает (и ничего не пришлось перенастраивать под свой стиль! - удобно очень)
Внесу свои дополнения, что в настройках страницы, созданной под форму обратной связи для красоты, так сказать, поставить галочку в параметрах Комментарии-Не разрешать, скрывать.

Плюс сделала сбор писем на 1 ящик- уже проверила - всё приходит :)

Благодарю за помощь и отклик.
NMitra
Вот и отличненько ))
Анонимный
спасиб! всё работает)
Zoya (Aziza)
Здравствуйте, Наталья! Попробовала сделать форму связи внутри сообщения. Но вот бы кнопку "Отправить" сделать виднее. Подскажите решение, пожалуйста.
Zoya (Aziza)
Вот страница http://poxudeniye.blogspot.ru/ENTER-SLIDE-2-LINK-HERE
NMitra
Здравствуйте, страницы не обнаружила

#ContactForm1_contact-form-submit {
padding: 10px; /* отступ */
font-size: 200%; /* размер шрифта */
}
Zoya (Aziza)
Спасибо за скорый ответ, Наталья! Это надо вставить после
#ContactForm1_contact-form-email-message {
max-width: 100%;
?
NMitra
Да.
Anatoly Bhutov
а как насчет капчи?
NMitra
По-видимому, никак или попробуйте обратиться к разработчику.
Анонимный
интересная тема спасибо
Анонимный
подскажите, если нет в шаблоне atribution1 после которого нужно вставить, что делать? Остальная часть кода встала отлично, но почему не отправляется сообщение..
NMitra
После
<b:section-contents id='sidebar-right-1'>

Или
<b:section-contents id='sidebar-right-1'/>
заменить на
<b:section-contents id='sidebar-right-1'>
<b:widget id='ContactForm1' locked='false' title='Форма для связи' type='ContactForm'>
<b:includable id='main'/>
</b:widget>
</b:section>

Обратите внимание на слеш (/) после id='sidebar-right-1'
Елена Чуева
Огромное спасибо за форму обратной связи, вы единственный, у которого все работает. А у меня на главной странице работает, а внутри сообщения страницы (Контакты) нет. Что я сделала не так?
Вт мой блог http://mirargo.blogspot.com/.
NMitra
Две формы - два гаджета, чтобы скрипт подключить. Проверьте, пожалуйста, чтобы id был разным у
b:widget type='ContactForm'
Например,
id='ContactForm1'
и
id='ContactForm2'
Елена Чуева
NMitra, вы лучшая, все получилось, огромное вам спасибо, вы супер. Вставила все заработало, еще раз спасибо!!!