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

12.01.2014 12.01.2014 NMitra

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

Шаг 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

в f t

наверх ↑

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

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

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

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

#ContactForm1_contact-form-submit {
padding: 10px; /* отступ */
font-size: 200%; /* размер шрифта */
}
Zoya: Спасибо за скорый ответ, Наталья! Это надо вставить после
#ContactForm1_contact-form-email-message {
max-width: 100%;
?
NMitra: Да.
Unknown: а как насчет капчи?
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'
Elena: Огромное спасибо за форму обратной связи, вы единственный, у которого все работает. А у меня на главной странице работает, а внутри сообщения страницы (Контакты) нет. Что я сделала не так?
Вт мой блог http://mirargo.blogspot.com/.
NMitra: Две формы - два гаджета, чтобы скрипт подключить. Проверьте, пожалуйста, чтобы id был разным у
b:widget type='ContactForm'
Например,
id='ContactForm1'
и
id='ContactForm2'
Elena: NMitra, вы лучшая, все получилось, огромное вам спасибо, вы супер. Вставила все заработало, еще раз спасибо!!!

Извините, комментарии в рамках данной статьи не предусмотрены.