Стили для виджета Форма для связи Blogger

Приветствую вас, дорогой гость и читатель! Наша тема на сегодня - как поменять стили/оформление родного виджета Blogger "Форма для связи". Хочу предложить вам, дамы и господа, набор стилей оформления виджета "Форма для связи", с помощью которых вы можете  изменить стандартный/простой вид/дизайн на более привлекательный. Стилей CSS 4 штучки, надеюсь, что каждый пользователь Blogger сможет подобрать оформление под свой дизайн блога, да и просто - какой понравится. Есть и для девчат, с бантиком. Единственное условие, что требуется для смены дизайна контактной формы, это естественно - родной виджет Blogger "Форма для связи" был установлен у вас в блоге.

И так, все предлагаемые стили устанавливаются в шаблон блога чуть выше строки ]]></b:skin>. Только не пишите, что её не существует, она есть обязательно. Просто надо искать повнимательней и использовать поиск по коду Ctrl + F.

Стиль виджета Форма для связи вариант 1

 Данное оформление под дерево и с печатью производится с помощью этого кода Css:

/* Contact Form, wooden Style
----------------------------------------------- */
/* Main Container */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border:none;
background: url(http://3.bp.blogspot.com/-9kj5zCuK64M/VhZYg-TVv1I/AAAAAAAABKU/sx4gLcedE3Q/s1600/wood%2B_texture5.jpg);
color: #000;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
/* Style the inner container */
.contact-form-widget div.form {
background: #fff;
background-image: url(//lh4.googleusercontent.com/-tXb0r3XoQlU/UyjaViCJFrI/AAAAAAAAKIY/3HV7tKODyIQ/s133/stamp.png);
background-repeat: no-repeat;
background-position: 95% 85%;
padding: 1px 10px;
}
/* Style fields */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Message field */
.contact-form-email-message {
width: 60%;
max-width: 60%;
padding: 5px;
}
/* button to send */
.contact-form-button-submit {
width: 25%;
max-width: 35%;
height: auto;
background: #28597a;
padding: 2px 5px;
border-radius: 5px;
border: none;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* send button when hovering  */
.contact-form-button-submit:hover{
background: #a14248;
border: none;
}

В коде вы можете изменить цвет кнопки, размер шрифта и так далее. Едем дальше.

Форма для связи Blogger стиль номер 2

Красивый стиль для девчат, с бантиком:

Такой стиль оформления можно сделать при помощи этого кода CSS:

/*  Contact Form, Girly Style 
----------------------------------------------- */
/* main  Container */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border-top: 35px solid #d44897;
border-bottom: 10px solid #d44897;
background: url(//lh4.googleusercontent.com/-wz6C40j6prM/Uyjo-r3lQSI/AAAAAAAAKIo/eTCpE9uVrCw/s55/pink.png);
color:#424242;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
border-radius: 18px;
}
/* Style the inner container */
.contact-form-widget:before {
background-image: url(//lh5.googleusercontent.com/-_eWCqxEwGfo/UyjxeoqeutI/AAAAAAAAKJE/r96690O9TG4/s160/lazo.png);
background-repeat: no-repeat;
background-position: 100% 0;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
/*  Styles fields  */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Message field  */
.contact-form-email-message {
padding: 5px;
}
/* send button */
.contact-form-button-submit {
width: 25%;
max-width: 35%;
height: auto;
background: #d44897;
padding: 2px 5px;
border-radius: 2px;
border: none;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* send button when hovering */
.contact-form-button-submit:hover{
background: #d1f6ff;
color: #424242;
border: none;
}

Здесь, также меняйте шрифт, размер и цвет по своему усмотрению. Красота и почему я не девчонка.

Оформление Blogger виджета Форма для связи № 3

Базовый строгий стиль:

Такой строгий стиль можно придать контактной форме с помощью такого кода CSS:

/* Contact Form, Basic Style 
----------------------------------------------- */
/* Main counter */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
float: left;
padding: 10px;
background: #F5F5F5;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 5px;
}
/* Style field */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
border-radius: 40px;
}
/* Message field */
.contact-form-email-message {
padding: 5px;
border-radius: 5px;
}
/* send button */
.contact-form-button-submit {
float: right;
width: 25%;
max-width: 35%;
height: auto;
background: #28597a;
padding: 2px 5px;
border-radius: 15px;
border: none;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* send button to move the cursor */
.contact-form-button-submit:hover{
background: #4a7694;
border: none;
}

В коде CSS можете тоже кое что изменить, на ваше усмотрение. Побежали далее. Следующая очень красивая контактная форма в металлическом стиле и с тенью.

Контактная форма Blogger - стиль металлика № 4

Такой стиль форме придаёт следующий код CSS:

/* Contact Form, Metallic Style 
----------------------------------------------- */
/* Main Container */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border-top: 35px solid #424242;
border-bottom: 25px solid #424242;
background: url(//lh3.googleusercontent.com/-dJy1C7rwmEQ/Uyj-q5JD1cI/AAAAAAAAKJU/oaOXETgXO3c/s128/metal.gif);
color:#424242;
text-shadow: 1px 1px 1px #FFFAFB;
box-shadow: -6px 6px 6px 0px rgba(50, 50, 50, 0.65);
border-radius: 18px;
float: left;
}
/* Style the inner container */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
box-shadow:inset 1px 1px 5px 1px #808080;
}
/* Styles fields */
.contact-form-email-message {
padding: 5px;
}
/* send button   */
.contact-form-button-submit {
width: 40%;
max-width: 40%;
height: auto;
border: none;
border-top: 1px solid #9c9c9c;
background: #424242;
background: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#575757));
background: -webkit-linear-gradient(top, #424242, #575757);
background: -moz-linear-gradient(top, #424242, #575757);
background: -ms-linear-gradient(top, #424242, #575757);
background: -o-linear-gradient(top, #424242, #575757);
padding: 2px 5px;
border-radius: 8px;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
margin-bottom: 10px;
float: right;
}
/*  send button when hovering */
.contact-form-button-submit:hover{
background: #424242;
color: #ccc;
border: none;
}

Всё также, в этом коде можно кое что поменять, хотя и зачем, и так красота. Очень надеюсь, товарищи, кому нибудь этот пост пригодится, а я на этом с вами прощаюсь, не на долго. Удачи всем. Пока, пока.