Оформление гаджета Форма для связи
Обновлено: 27.03.2020 г.
Здравствуйте дорогие блоггеры. В одном из постов у меня в блоге есть информация как добавить контактную форму blogger. Там мы так же добавляем гаджет, а затем вставляем код и создаем страницу с формой для связи.
В этом сообщении я хочу Вам показать: первое - как можно красиво оформить гаджет Форма для связи для боковой панели. У многих блоггеров вижу в блогах добавлен такой гаджет, и выглядит он у всех одинаково. Давайте мы это исправим и попробуем оформить гаджет в своем стиле.
Кто не знает как добавить гаджет формы, прочитайте в статье по ссылке выше. Установите в нужное место макета блога. Дальше идем в шаблон (делаем резервную копию шаблона)-изменить шаблон, находим строку <b:skin>...</b:skin> (рядом с самой первой стрелкой), прокручиваем вниз и выше строки ]]></b:skin> вставляем скопированный ниже код CSS
/* Contact Form Container */
.contact-form-widget {
width:auto;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #f8f8ff;
color: #0e5198;
border: 2px solid #d1d1d1;
border-radius: 15px;
}
/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
border:2px dotted #cccccc;
}
/* Submit button style */
.contact-form-button-submit {
border: 2px dotted # 2db3e9;
background: #0e5198;
color: #ffffff;
widht auto;
height:35px;
border-radius:7px;
font-size:12px;
}
/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #cdc9a5;
width: auto;
color: #444444;
border: 1px solid #FAFAFA;
}
}
Настройки: выделенное оранжевым-оформление самого блока формы; желтым-это поле электронного адреса и сообщения; розовым-вид кнопки отправить; фиолетовым-цвет поля и границ рамки, когда нажмете отправить, всплывает окно-ваше сообщение отправлено.
Теперь второе: кто желает сэкономить место в боковой панели, можно установить форму на статическую страницу, и создать вкладку в меню навигации. Посмотрите примеры
На скриншоте показана форма и на боковой панели, и на странице. Чтобы установить форму на страницу делаем такие шаги: добавляем гаджет формы куда-нибудь в самый низ макета блога. Вставляем стиль CSS в шаблон-изменить шаблон. Здесь же в шаблоне вверху нажимаем список виджетов
Нажимаем ContactForm1
Все, что у меня выделено на скриншоте, надо удалить
<b:widget id='ContactForm1' locked='false' title='Форма для связи' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
продолжение кода
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:includable id='main'>
<b:if cond='data:title != ""'>
продолжение кода
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Выделенное голубым оставляете, красным-удаляете. Дальше осталось самое простое. В черновике blogger нажимаем-создать страницу и в режиме HTML вставляем скопированный ниже код
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p>Имя</p>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<p>E-mail *</p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<p>Сообщение *</p>
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Отправить'/>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</form>
</div>
</div>
</div>
Можете вписать свои надписи, нажимаем опубликовать страницу и любуемся установленной формой для связи. Сбегайте в демо блог и посмотрите живой пример формы. Получилось совсем даже не плохо, да и гаджет родной, а не сторонний.
Ширина гаджета у меня установлена автоматически (width: auto;), Вы можете вписать например 500px; или 350px; У меня на сегодня все. Пишите отзывы, делитесь с друзьями в социальных сетях. Всего Доброго, До свидания.
Рекомендуемый контент:
Правда, красиво получилось и других не надо.
ОтветитьУдалитьВика здравствуй. Согласна, при желании можно многое сделать и с родными гаджетами Google, и не засорять блог сторонними виджетами.
УдалитьЗдравствуйте Ольга!
УдалитьСпасибо за науку! красивую форму с Вашей помощью поставил да
только вот как её переместить или в подвал или на боковую панель?
Когда её вставляю через HTML редактор то она становится как бы одной из страниц сайта,которая со временем исчезнет в дерях
блога.
Спасибо!!!
Akhmed Astanou, здравствуйте. Код HTML формы, который вставили в редакторе на страницу, вставьте дизайн-добавить гаджет, сохраните в нужном месте макета блога
Удалить