Контактная форма для блога.
Для более подробного знакомства с этой темой я рекомендую вам посмотреть мой пост "Формы".
Очень нужная функция для блога это создание страницы контактов, для того, чтобы с вами было проще связаться.
Очень нужная функция для блога это создание страницы контактов, для того, чтобы с вами было проще связаться.
Мы все знаем. Что путешествуя по просторам интернета
мы часто находим что – нибудь интересное и если нет формы для того, чтобы
связаться с автором, то очень редко записываем e-mail, и того реже - пишем по таким
адресам. Такая система связи очень удобна как для пользователя. Так и для
автора блога. Вы будете получать письма сразу в свой почтовый ящик, а
пользователь не потеряет ваши данные и сможет сразу с вами связаться при
необходимости.
Итак, что тут долго разговаривать, идем в Дизайн - Добавить гаджет – Другие гаджеты – Форма для связи.
Итак, что тут долго разговаривать, идем в Дизайн - Добавить гаджет – Другие гаджеты – Форма для связи.
Да, стоит напомнить, что добавлять гаджет лучше всего на самый низ страницы.
Дело в том, что он не будет виден на всех страницах вашего блога.
Теперь создаем новую страницу, называем её Контакты, Contacs или Обо мне, это кому как нравится. Открываем ее HTMLкод и все что там есть удаляем безжалостно! Вставляем свой код :
Теперь создаем новую страницу, называем её Контакты, Contacs или Обо мне, это кому как нравится. Открываем ее HTMLкод и все что там есть удаляем безжалостно! Вставляем свой код :
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div id="contactf">
<form name="contact-form">
<label
for="ContactForm1_contact-form-name">Ваше имя<br />
<input class="contact-form-name"
id="ContactForm1_contact-form-name" maxlength="50" name="name"
placeholder="Введите Ваше Имя:" type="text" />
</label><br />
<br />
<label
for="ContactForm1_contact-form-email">Ваш E-mail<span style="color: red; font-weight:
bolder;">*</span> <br />
<input class="contact-form-email"
id="ContactForm1_contact-form-email" name="email"
placeholder="Укажите Ваш E-mail:" type="text" />
</label><br />
<br />
<label
for="ContactForm1_contact-form-email-message">Сообщение <span style="color:
red;"><b>*</b></span></label> <br />
<textarea class="contact-form-email-message"
cols="74" id="ContactForm1_contact-form-email-message"
name="email-message" placeholder="Введите текст сообщения..." rows="15"
type="text"></textarea><br />
<br />
<input class="contact-form-button
contact-form-button-submit" type="reset" value="Очистить" />
<input class="contact-form-button
contact-form-button-submit"
id="ContactForm1_contact-form-submit" name="submit"
type="button" value="Отправить" /> <br />
<br />
<div style="max-width: 100%; text-align:
center; width: 75%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div
id="ContactForm1_contact-form-success-message">
</div>
<br />
<br
/></div>
<div style="font-size: x-small; text-align:
right;">
<a href="http://abcinblog.blogspot.ru/"
target="_blank" title="Contact Form for Blogger"><span
style="color: #838383;">Контактная форма для Blogger</span></a></div>
</form>
<style type="text/css">
#ContactForm1{
display:none!important;
}
</style>
</div>
</div>
Далее идем в Шаблон – Изменить HTML – и ищем знакомое нам сочетание - ]]></b:skin>.
Можно через форму поиска. А можно просто прокрутив код вниз. У меня это 611 строка.
CSS код , который я привожу ниже , вставляем перед ]]></b:skin> .Сохраняем и все.
Полностью готовая форма:
/*Форма обратной связи*/
#contactf {
font-size: 12px;
font-family: "Verdana",sans-serif;
background-color: #F2FCE8;
text-align: left;
font-weight: bold;
padding: 3px 10px 3px 10px;
color: rgb(0, 0, 0);
border: 3px solid rgb(190, 190, 190);
text-shadow: 0px 1px 0px rgb(204, 204, 204);
box-shadow: 0px 1px 3px rgb(112, 107, 107), 1px 1px
0px rgba(162, 162, 162, 0.4) inset;
margin: 15px 3px;
text-transform: uppercase;
line-height: 2;
}
#ContactForm1{ display:none!important;}
.contact-form-name, .contact-form-email,
.contact-form-email-message {
max-width: 50%;
width: 100%;
height: 30px;
font-weight:bold;
}
.contact-form-email:hover, .contact-form-name:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 5px 15px 5px 28px;
height: 30px;
}
.contact-form-email-message:hover {
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 10px;
}
.contact-form-button:hover {
text-decoration: none;
}
.contact-form-button:active {
position: relative;
top: 1px;
}
.contact-form-email-message {
background: #FFF;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
display: inline-block;
font-family: arial;
padding: 10px;
vertical-align: top;
max-width: 75%!important;
width: 70%!important;
height: 150px;
border-radius: 4px;
text-align: justify;
max-height: 300px;
}
.contact-form-name {
background: #FFF
url(https://sites.google.com/site/moybestik/home/name_my3.png) no-repeat 7px
6px;
padding: 5px 15px 5px 28px;
width: 100%;
max-width: 75%px;
}
.contact-form-email {
background: #FFF
url(https://sites.google.com/site/moybestik/home/my_email3.png) no-repeat 7px
8px;
padding: 5px 15px 5px 28px;
width: 100%;
max-width: 75%px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.contact-form-name {
background: #FFF url(https://sites.google.com/site/moybestik/home/name_my3.png)
no-repeat 7px 6px;
padding: 15px 15px 15px 28px;
}
.contact-form-email {
background: #FFF
url(https://sites.google.com/site/moybestik/home/my_email3.png) no-repeat 7px
8px;
padding: 15px 15px 15px 28px;
}
.contact-form-email:hover, .contact-form-name:hover{
padding: 15px 15px 15px 28px;
}
.contact-form-button {
height: 28px;
}
label {
cursor:pointer;
}
}
/*Форма обратной
связи - конец*/
Здесь вы можете изменить цвет фона ( отмечены красным), выше можете изменить шрифт и его размер.
Если есть желание изменить картинки, то поменяйте url(https://…) на свой. Если не помните, как это сделать, то прочитайте - Как загрузить свои картинки в интернет.
Здесь все уже на ваше усмотрение и вы можете вдоволь наиграться с этим кодом, подогнав его под тот дизайн, который вам нужен.
Письма вы будете получать на свой gmail почтовый ящик. Где вы можете сделать для них отдельную папку. Так что, все очень красиво, удобно и главное – функционально!Хотите хорошо разбираться в коде - посмотрите введение в HTML & CSS
