Виджет Форма для связи на статической странице

Просмотров: 428

kontaktВсем привет! Сегодняшняя тема у нас будет - как вывести виджет "Форма для связи" на статическую страницу блога. Дорогие друзья, в предыдущей статье я рассказал о том, как установить виджет для Blogger Форма для связи с автором блога, однако размещение контактной формы на боковой панели, не очень удачное место для этого. Я бы предпочел поставить контактную форму на статическую страницу или страницу сообщений. Чем мы сейчас и займёмся, дамы и господа.

Сейчас я объясню, как установить виджет Blogger "Форма для связи" на статическую страницу.

Посмотрите как будет выглядеть эта форма, на скриншоте ниже:

Contact_ Form
Виджет Bloggera "Форма для связи"

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

В первую очередь вам необходимо добавить виджет "Форма для связи" на боковую панель или в подвал блога.

gadget
Нажать дополнительные гаджеты
forma
Форма для связи в Blogger

Затем, создайте новую статическую страницу (можно на старой просто заменить код) и в режиме 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 для переноса строк":

parametryj
Выставить параметр

Нажмите готово. Идём дальше. Нам нужно добавить стиль 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

С уважением, Сергей


17 комментариев к “Виджет Форма для связи на статической странице”

  1. Сергей, не получилось убрать виджет с боковой панели.
    В шаблоне нашел лишь строку:
    >
    добавил ваш код сверху и получил набор символов над шапкой.
    Подскажите, пожалуйста, что сделал не так?

    Ответить
    • Привет Алексей!Код не отображается .Прежде чем добавлять код, надо его кодировать.

      Ответить
          • Здравствуйте еще раз. В шаблоне нет строки ]]> Где и как ее найти? Помогите, пожалуйста! Заранее спасибо.

        • Привет,Карина!Такая строка обязательно должна быть,перед ней стили блога находятся.Посмотрите повнимательней.

          Ответить
    • У меня была та же история. Я выбрала другое (ночное) время суток и все получилось. Экспериментируйте. Удачи Вам!

      Ответить
  2. Спасибо! Все получилось с первого раза! Подписалась на ваш блог, очень интересно и доступно разъясняете.

    Ответить
  3. Огромное спасибо, Сергей! Давно мечтал именно о таком исполнении «Обратной связи». Всё доходчиво написано и без воды.

    Ответить
  4. Сергей, здравствуйте! Очень содержательный сайт. Огромное Вам спасибо. Я установила виджет «Форма для связи» на статическую страницу блога, переделав её на «Записки в храм». Все получилось, только вот записки почему-то не приходят на мой электронный адрес. В отчете показывает, что отправлено, а в почте ничего нет. Что сделала не так? Если Вам известен готовый виджет «Записки в храм», дайте ссылку. Буду очень благодарна. С меня лайк.

    Ответить
    • Привет, Галина!
      А вы проверьте в настройках блога указан ваш почтовый адрес. 🙂 А готовые формы для связи с автором здесь, есть записи на блоге. Поищите через поиск или в содержании блога.

      Ответить

Оставьте комментарий