Форма связи - Контакты на отдельной странице Blogger

  Форма обратной связи размещённая на статической странице Blogger. Позволяет организовать полноценную страницу Контакты для Вашего блога на Блоггер (Blogspot). При помощи которой посетители могут связаться с автором блога.

  Для решения этого вопроса на помощь придёт гаджет "Форма связи" Блоггера. Который устанавливается как обычный гаджет в боковой панели. Моё мнение - не самый удачный способ размещения данного гаджета.
  Поэтому предлагаю Вам рецепт размещения данной формы на отдельной статической странице.

  Для этого всё равно нужно установить гаджет "Форма обратной связи" в боковую панель или в нижнюю часть блога. Так как без него наша страница "Контакты" работать не будет. Забегу на перёд - в результате он будет скрыт.

  Через меню блога переходим в раздел "Дизайн", нажимаем "Добавить гаджет". В открывшемся окне выбираем вкладку "Другие гаджеты". Здесь и находится "Форма для связи", выбираем её и жмём "Сохранить".

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

  Теперь переходим непосредственно к созданию Страницы Контакты.
В меню блога заходим в раздел "Страницы", кликаем на "Создать страницу" и выбираем пункт "Пустая страница".

  Теперь нужно задать уникальный адрес для будущей Страницы "Контакты". Так называемый - Человеку Понятный Урл (ЧПУ).

  Для этого в область "Заголовок страницы" пишем желаемое название латиницей. Например Contacs или Contacs us. И нажимаем "Сохранить". В результате вид ссылки на страницу будет иметь вид http://Ваш_блог/p/contacs-us.html или http://Ваш_блог/p/contacs.html. После сохранения можно задать любой заголовок для страницы.

  Далее переходим к внедрению HTML кода формы связи.
Выбираем вкладку HTML редактирования страницы и удаляем весь код, который там есть. В пустую область вставляем код Формы Связи:

<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" name="name" placeholder="Введите Ваше Имя:" maxlength="50" 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='text-align: right; font-size: x-small;'> <a href='http://www.best-for-blogger.ru/2014/02/forma-svjazi-blogger.html' 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>

  Осталось добавить CSS стили в шаблон блога.

  В меню блога выбираем раздел "Шаблон". На всякий случай делаем резервную копию шаблона. Далее нажимаем "Изменить HTML".

  В любом месте шаблона кликаем левой кнопкой мыши и при помощи комбинации кнопок Ctrl+F вызываем функцию "Поиск по шаблону". И ищем строку - ]]></b:skin>

  И перед ней вставляем CSS стили Формы для связи:

/*Форма обратной связи*/
#contactf {
font-size: 12px;
font-family: "Verdana",sans-serif;
background-color:#fcfcfc;
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 (http://1.bp.blogspot.com/-aYAZKHxj784/UvdMwkai6pI/AAAAAAAAAu0/rwasg8cq43s/s320/name.png) no-repeat 7px 6px;
padding: 5px 15px 5px 28px;
width: 100%;
max-width: 75%px;
}
.contact-form-email {
background: #FFF url(http://1.bp.blogspot.com/-jnXFbfAxUvk/UvdMwtu4AVI/AAAAAAAAAuw/OO-GmlqlU88/s320/email.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(http://1.bp.blogspot.com/-aYAZKHxj784/UvdMwkai6pI/AAAAAAAAAu0/rwasg8cq43s/s320/name.png) no-repeat 7px 6px;
padding: 15px 15px 15px 28px;
}
.contact-form-email {
background: #FFF url(http://1.bp.blogspot.com/-jnXFbfAxUvk/UvdMwtu4AVI/AAAAAAAAAuw/OO-GmlqlU88/s320/email.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;
}
}
/*Форма обратной связи - конец*/

  Просматриваем шаблон если всё в порядке - Сохраняем его.
Не забываем нажать на кнопочку "Публикация" в нашей новой странице "Контакты".

Теперь можно перейти на созданную страничку "Контакты". Она должна у Вас получиться вот такой:

Можете её сразу и протестировать, отправить сообщение. Оно придёт в Ваш почтовый ящик Gmail.


  Смотрите также:
- Как заработать на собственном блоге
- Как вставить рекламный блок объявлений Google AdSense в любом месте блога на Блоггер (Blogspot)
- Как вставить блок рекламы от Google AdSense в блог на Blogger (Блогпост)
- Google AdSense — регистрация, создание рекламного блока его настройка
- Регистрация в поисковых системах
- Как изменить шаблон в Blogger
- Закрыть внешние ссылки
- Убрать внешние ссылки из Шаблона
- Вставить Facebook Like Box в Blogger
- Гаджет - Ссылка на это сообщение
- Кнопки социальных сетей от Pluso

 Если статья оказалась Вам полезной буду признателен если Вы порекомендуете её или сам блог "Best-For-Blogger.ru" своим друзьям и знакомым воспользовавшись кнопками социальных сетей. Или оставите на своём веб-ресурсе обратную ссылку.

 С наилучшими пожеланиями, всегда Ваш Алексей Иванович! До новых встреч на страницах нашего блога "Лучшее для Blogger". Оставляйте комментарии, подписывайтесь на обновления.

URL На эту статью:

http://www.best-for-blogger.ru/2014/02/forma-svjazi-blogger.html

Вставьте этот HTML код к себе на страницу:

<a href="http://www.best-for-blogger.ru/2014/02/forma-svjazi-blogger.html">Форма связи - Контакты на отдельной странице Blogger</a>

LinkBack Widget