Для новичков в блоговедении...
Всем привет. В статье Как изменить стиль родного гаджета Google Форма для связи мы вносили изменения в шаблон блога. Для новичков, недавно созданных блогов, этот способ оформления будет трудно выполним.Сегодня расскажу самый простейший вариант изменить стиль формы для связи, работать будем только в макете блога, в шаблон изменить шаблон залезать не будем.
Первое, надо добавить и сохранить гаджет формы обратной связи в нужном месте макета блога. Идем дизайн-добавить гаджет, слева нажимаем другие гаджеты, жмем сохранить, скриншот:
Далее в дизайне снова нажимаем добавить гаджет, вкладка HTML, и вставляем скопированный ниже код CSS стилей. Пример оформления, скриншот:
Стили CSS, скопируйте
<style>
/* Contact Form Container */
.contact-form-widget {
width:auto;
font-size:14px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #f8fcff;
color: #0e5198;
border: 1px solid #c0c0c0;
border-radius: 5px;
}
/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
background: #f8f8ff;
border:1px dotted #c0c0c0;
}
/* Submit button style */
.contact-form-button-submit {
border: 2px dotted #2db3e9;
background: #0e5198;
color: #ffffff;
widht auto;
height:35px;
border-radius:5px;
font-size:12px;
}
/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #f8f8ff;
width: auto;
color: #444444;
border: 1px solid #0e5198;
}
</style>
Настройки: зеленым офрмление всего блока формы; голубым оформление полей имени, e-mail адреса и сообщения; фиолетовым кнопка отправить сообщение; коричневым стиль кнопки отправить при наведении мыши; Гаджет можно установить сразу под формой для связи, или сохранить в футере блога.
Если немного пофантазировать, то в поле имени, электронного адреса и сообщения можно добавить картинку. Получится такое оформление формы для связи:
Стили CSS, скопируйте:
<style>
/* Contact Form Container */
.contact-form-widget {
width:auto;
font-size:16px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #fff;
color: #0e5198;
border: 3px double #03b4cc;
border-radius: 5px;
}
/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
background:url(https://3.bp.blogspot.com/-G_JTl9sKXig/V4WFY4BU_iI/AAAAAAAANj0/VlKL1Xbs1J8CTBIhzk7l0DLS38xWFwxXQCLcB/s1600/bze.gif) no-repeat left transparent;
padding-left: 35px;
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:5px;
font-size:12px;
}
/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #f8f8ff;
width: auto;
color: #444444;
border: 1px solid #0e5198;
}
</style>
Синим выделен url адрес картинки. Размер желательно 16х16 px, измените на свою. Фон картинки должен быть прозрачным. Или подбирайте фон полей под фон изображения.
На все вопросы отвечу в комментариях, также работает форма для связи. Всем пока и Удачи! Спасибо за посещение Блога для блогов.
Почитайте другие статьи по теме:
Рекомендуемый контент:
