» » Форма обратной связи Блоггер

Форма обратной связи Блоггер

Если у вас на сайте стоит гаджет Обратная связь, то будьте готовы к тому, что её будут в основном использовать для мусора и спама. Проверено на собственном опыте.  То мошенники оставляют сообщения, то реклама на иностранном языке. 
мошенники
Если это вас не беспокоит, то представляю вашему вниманию несколько интересных контактных форм с зарубежных сайтов.

Установка формы

Устанавливается она, если вы её никогда ранее не устанавливали, так:
Заходим в Дизайн/Добавить гаджет/Контактная форма.
Установка формы
Затем, что бы форма не была видна там, где вы её установили, заходим в Тема-Изменить XTML.
шаблон
В шаблоне ищем тег ]]></b:skin> и выше него добавляем код:
#ContactForm1{display: none !important;}
Теперь сохраняем шаблон, и переходим к вкладке Страницы, нажимаем Добавить страницу.
В редакторе страницы отмечаем нужные настройки, пишем название, например Контакты.
Пишем нужный текст, и в режиме XTML добавляем любой понравившийся код из предложенных ниже.
Добавить страницу

Форма 1

Форма 1

<style> .tb-contact-form-widget{background-color:#A4A4A4;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL-I9yTbPmOzdQL4UZcg_TuJJisWvgnYP984_Y1_nWkFYdmG98bx9sAfw1OBfVjyeGxx8sH7tmA76VsgE03XYUskAAfyChYkts9FH3wHmzMzeWtz_cCAdzHrjdBKQ_rPyvOeWgHp09vc_c/s1600/to-contact-img-2.jpg");background-repeat: repeat;background-position: 100% 100%;color:white;padding:25px;} .srbtn{display:inline-block;} .cform-button, .btn-reset{background-color:#f1f1f1;padding:5px 30px;} .cform-button:hover {background-color: #2980b9;color: #fff;} .btn-reset:hover {background-color: red;color: #fff;} .tb-contact-form-widget h3{text-align:center;margin:20px 0;padding:10px 0;border-top: 1px dotted #f5f5f5;} .c-form-name, .c-form-email { width: 50%; max-width: 50%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff; -webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF; box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;} .c-form-email-message { width: 95%; max-width: 95%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px;box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff; -webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;} .c-form-name, .c-form-email, .c-form-email-message input:focus{background-color: #FFF;box-shadow: 0 0 0 1px #fce0cc inset;border-color: #f5e5c6;outline: none; -moz-box-shadow: 0 0 0 1px #f2e8c9 inset; -webkit-box-shadow: 0 0 0 1px #E8C291 inset;} #ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-message{width:100%;margin-top:35px;} </style> <br />
<div class="tb-contact-form-widget">
<form name="contact-form">
<div class="form-name">
<i class="fa fa-pencil-square-o"></i> Имя: <br />
<input class="c-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div>
<div class="form-email">
<i class="fa fa-envelope-o"></i> E-mail *: <br />
<input class="c-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div>
<div style="clear: both;">
</div>
<div class="form-message">
<i class="fa fa-keyboard-o"></i> Сообщение *:<br />
<textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br />
<div class="srbtn">
<input class="cform-button" id="ContactForm1_contact-form-submit" type="button" value="Отправить" /><input class="btn-reset" type="reset" value="Очистить" /></div>
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

Цвета в коде можно поменять на свои. Так же как и текст.

Форма 2 

Форма 2

<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer { display:none !important;} #main-wrapper { width:98%!important;} .post { width:98%!important; }
</style>
 <br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
.bsads{
margin-bottom:10px;
border-bottom:solid 1px #ffffff;
padding-top:10px;
font-size:13px
}
.bsads-right-min{
border-left:solid 1px #ffffff;
height:Auto;
padding-left:10px
}
</style>
 <br />
<div class="ads">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%px;">
<tbody>
<tr>
<td><div class="bsads-right-min">
<style>
#ContactForm1{
display:none;
}
#contact_wrap {
margin: auto;
width: 500px;
height: 450px;
padding: 25px;
border-radius: 1em;
border-top:1px solid #dbdbdb;
border-right:1px solid #b2b2b2;
border-left:1px solid #dbdbdb;
border-bottom:1px solid #9d9d9d;
background-color:#c1a7ff;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f8f8ff', endColorstr='#5854ab');
background-image:-webkit-linear-gradient(top, #a8b57a 0%, #9384b6 50%, #8e74cc 100%);
background-image:-moz-linear-gradient(top, #a8b57a 0%, #9384b6 50%, #8e74cc 100%);
background-image:-ms-linear-gradient(top, #a8b57a 0%, #9384b6 50%, #8e74cc 100%);
background-image:-o-linear-gradient(top, #a8b57a 0%, #9384b6 50%, #8e74cc 100%);
background-image:linear-gradient(top, #a8b57a 0%, #9384b6 50%, #8e74cc 100%);
box-shadow: 1px 1px 5px #ccc;
}
#contact_wrap h3{
color: #ffffff;
font-family:Georgia;
font-size: 20px;
font-style:italic;
font-weight:bold;
margin: 0 -36px 20px -36px;
padding: 12px;
text-align: center;
text-shadow: 2px 0 0 #8269af;
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #c1a7ff;
position: relative;
}
#contact_wrap h3:before {
content: ' ';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: #333 transparent transparent transparent;
}
#contact_wrap h3:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent #333;
}
#ContactForm1_contact-form-name{
width: 180px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh063tNh1JmG1qDgC6VYC0Ic9KGqnzSlIiJH1a32OxXXvApmRMP2MgNL3b98ejDhkVFFpVdqgWlK4CA5N6L4nRxNhNIgOWxm5HSdTnFNIjCxAkXzFjL_AIKbMw6HWpqw3rrcDP12F6VwHcK/s1600/BS+user.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email{
width:180px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRaCiKtoXeZiHgdvowhylRW2caBclyV6Kq0IVUVxJo5hbrlCydrP5z34YnA6btZBjYyBD-upebduObrScbXRpX25TiWTB_x6mzNar-HexdND35VFbLkK23h0ElTRagPXFNplw0NkXh6DLC/s1600/BS+pen.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email-message{
width: 450px;
height: 285px;
margin: 5px auto;
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqkDWupYQ6-6LT5kOZaioOIsnXRDXsiANWekwG34bizpM9nmp1IQYphINXna7qUU6mqgBexBYl5EmnKanM8KI1hDBpYbycEbTdQ6eD_jZBsyBQofB7JyqdX_39rJX-iYp4zCSadummaNUl/s1600/BS+message.png)no-repeat 10px 10px;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-submit {
width: 95px;
height: 30px;
float: right;
color: #FFF;
padding: 0;
cursor:pointer;
margin: 25px 0 3px 0 0;
background-color:#c1a7ff;
border-radius:4px;
text-shadow: 1px 0 0 #8e74cc;
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #9384b6;
border:1px solid #8e74cc;
}
#ContactForm1_contact-form-submit:hover {
background:#c1a7ff;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 320px;
margin-top:35px;
}
</style>
 <br />
<div id="contact_wrap">
<h3>
Контактная форма</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Имя" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Текст сообщения" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Отправить" />
<br />
<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>
</div>
<style type="text/css">
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>
</div>
</td></tr>
</tbody></table>
</div>
</div>
</div>


Менять можно почти всё: размер, тени, цвет, текст.
Покажу что можно поменять:
Красным выделила размер гаджета
Синим градиент и цвет фона
Оранжевым цвет ленты
Голубым цвет текста на ленте
Розовым цвет кнопки

Онлайн сервисы 

В такие формы для связи можно добавить, к примеру, капчу.

https://www.google.com/intl/ru_ru/forms/about/
В гугл формах можно сделать очень неплохие на вид формы для связи.

https://formm.ru/
Неплохая бесплатная форма связи, можно настроить цвет, размеры. Добавить капчу и поле для отправки файла.
бесплатная форма связи
http://main-ip.ru/genform
Можно менять размеры и цвет, добавлять поля.
менять размеры и цвет

Ваши комментарии:

Комментарии со спамом удаляются.