Самый простой вариант оформить гаджет формы обратной связи на CSS



Для новичков в блоговедении...

Всем привет. В статье Как изменить стиль родного  гаджета 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, измените на свою. Фон картинки должен быть прозрачным. Или подбирайте фон полей под фон изображения.

На все вопросы отвечу в комментариях, также работает форма для связи. Всем пока и Удачи! Спасибо за посещение Блога для блогов.

Почитайте другие статьи по теме:

TEXT.RU - 100.00%


Автор статьи ✎ Olga Protasova Выпуск ✹ 7/13/2016 Ярлыки ►


Открыть комментарии →

0 коммент. :

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


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *