Как сделать Форму обратной связи на Blogger?

Форма обратной связи | 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. Настраиваем стили

Внешне будет похожа на форму комментариев, тоже в рамочке.

В редакторе форматирования "Сообщения" или "Страницы" переходим в режим "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, можно посмотреть все пошаговые видеоуроки на моем канале. СМОТРЕТЬ ЗДЕСЬ

Вы находите данную статью полезной или интересной? Поделитесь ею, пожалуйста, с другими - просто нажмите на кнопки ниже: