Всем привет! Сегодняшняя тема у нас будет - как вывести виджет "Форма для связи" на статическую страницу блога. Дорогие друзья, в предыдущей статье я рассказал о том, как установить виджет для Blogger Форма для связи с автором блога, однако размещение контактной формы на боковой панели, не очень удачное место для этого. Я бы предпочел поставить контактную форму на статическую страницу или страницу сообщений. Чем мы сейчас и займёмся, дамы и господа.
Сейчас я объясню, как установить виджет Blogger "Форма для связи" на статическую страницу.
Посмотрите как будет выглядеть эта форма, на скриншоте ниже:
Как установить виджет "Форма для связи" на статическую страницу блога в 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 для переноса строк":
Нажмите готово. Идём дальше. Нам нужно добавить стиль 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
С уважением, Сергей
Сергей, не получилось убрать виджет с боковой панели.
В шаблоне нашел лишь строку:
>
добавил ваш код сверху и получил набор символов над шапкой.
Подскажите, пожалуйста, что сделал не так?
Привет Алексей!Код не отображается .Прежде чем добавлять код, надо его кодировать.
Здравствуйте! Извините, как это сделать?
Привет,Карина!Что именно сделать?
Здравствуйте еще раз. В шаблоне нет строки ]]> Где и как ее найти? Помогите, пожалуйста! Заранее спасибо.
Привет,Карина!Такая строка обязательно должна быть,перед ней стили блога находятся.Посмотрите повнимательней.
У меня была та же история. Я выбрала другое (ночное) время суток и все получилось. Экспериментируйте. Удачи Вам!
Спасибо! Все получилось с первого раза! Подписалась на ваш блог, очень интересно и доступно разъясняете.
Пожалуйста!Стараюсь объяснять в доступной форме.
Спасибо! Помогли.
Пожалуйста, Дмитрий!
Огромное спасибо, Сергей! Давно мечтал именно о таком исполнении «Обратной связи». Всё доходчиво написано и без воды.
Спасибо, понадобится
большое спасибо! в очередной раз — все просто и понятно.
Всегда пожалуйста, Ирина! 🙂
Сергей, здравствуйте! Очень содержательный сайт. Огромное Вам спасибо. Я установила виджет «Форма для связи» на статическую страницу блога, переделав её на «Записки в храм». Все получилось, только вот записки почему-то не приходят на мой электронный адрес. В отчете показывает, что отправлено, а в почте ничего нет. Что сделала не так? Если Вам известен готовый виджет «Записки в храм», дайте ссылку. Буду очень благодарна. С меня лайк.
Привет, Галина!
А вы проверьте в настройках блога указан ваш почтовый адрес. 🙂 А готовые формы для связи с автором здесь, есть записи на блоге. Поищите через поиск или в содержании блога.