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

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

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

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

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

Добавить гаджет Форма связи Blogger

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

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

Создать статическую страницу Blogger

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

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

ЧПУ для страницы Blogger

  Далее переходим к внедрению 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".

Изменить шаблон Blogger

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

Поиск в шаблоне Blogger

  И перед ней вставляем 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;
}
}
/*Форма обратной связи - конец*/

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

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

Форма связи Blogger

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


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

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

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

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


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

27 комментариев :

Лана Гордон комментирует...

Добрый день!

У меня контактная форма, как гаджет в боковой панели, работает, и я получаю сообщения на почту, но когда пробую поставить её на отдельную страницу, как описано в посте, то ничего не работает. Пыталась не только с помощью вашей инструкции сделать. В чём может быть проблема?

Алексей Иванович комментирует...

Лана - для начала перепроверьте правильность выполнения всех пунктов с точность до одной строчки, до одного символа!
В случае если контактная форма связи на отдельной странице не заработает, свяжитесь со мной при помощи контактной формы моего блога. Попробуем решить Вашу проблемку.

Павел Култышев комментирует...

Спасибо, помогло!

Алексей Иванович комментирует...

Павел Култышев - рад, что моя статья "Форма связи для Blogger" оказалась для Вас полезной. И у Вас получилось создать полноценный раздел Контакты на отдельной статической странице Вашего блога.

Darina Kassymova комментирует...

Здравствуйте! Спасибо за пост, все работает, но когда я указываю e-mail в графу Ваш e-mail, то сообщение приходит туда, а не на на мою почту, которая связана с блогом

Алексей Иванович комментирует...

Darina - я отправил Вам письмо через страницу "Contact me" на вашем блоге. Проверьте свою почту в сервисе Gmail. Странный глюк Вы описываете. Я проверил как работает "Форма связи для Блоггер" в моём блоге. Работает как положено, письмо приходит по запланированному адресу, а не на E-MAIL из пункта "ВАШ E-MAIL*". Могу предположить, что данная проблема появилась в результате не корректного изменения кода "Формы связи" при внедрении его в блог. Попробуйте переустановить всё заново со 100% точностью. Как описано выше в статье.

Анна Тимохина комментирует...

Добрый день! С некоторых пор у меня перестала работать форма обратной связи вообще. Ваш код я попробовала, и тоже не работает. Может ли это быть связано с почтой или с шаблоном?

Алексей Иванович комментирует...

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

Анна Тимохина комментирует...

Я переустанавливала неоднократно, спам проверяла! Все тщетно. Честно говоря странно, так как недавно он работал.

Алексей Иванович комментирует...

Анна - ещё есть такая особенность у формы для связи - если часто (два раза за десять минут) отправлять автору письма, то форма приостанавливает свою работу на некоторое время. Скорее всего это способ борьбы со спамом.
Я отправил Вам письмо через Вашу страничку "Написать Автору", если Вы его получите - отпишитесь на тот Email указанный в письме.

Maxim Shulga (aka MaxBeard) комментирует...

Добрый день. Отличная статья, но похоже эта форма не работает на динамических шаблонах. Есть идеи?

Алексей Иванович комментирует...

Maxim Shulga - да, есть такая проблема. Подходящего решения пока нет.

Инна Рукодельник комментирует...

Спасибо)Все работает)

Алексей Иванович комментирует...

Инна Рукодельник - Не за что! Читайте другие статьи блога, Вы найдёте в них много полезной информации для себя Вашего блога.

Акмесоюз комментирует...

Спасибо вам! Это лучшее объяснение. Я перед этим целый день искала, как всё правильно сделать, многое перепробовала и только ваш совет с наглядными картинками помог. Читаю ваш блог дальше, уверена, возьму много полезного.

Алексей Иванович комментирует...

Акмесоюз - и Вам спасибо, искренне считаю что лучшая похвала для любого вебмастера/блогера - это видеть что его труды не пропали бесследно в закаулках интернета. А востребованы и действительно приносят пользу!

Оксана комментирует...

Спасибо большое,все понятно,все получилось!

Алексей Иванович комментирует...

Оксана - не за что. Очень хорошо, что у Вас получилось установить форму обратной связи на своём блоге! Т.к. не всем блогерам это удаётся сделать из-за особенностей шаблонов их блогов.

PuLsE (PoolOl) комментирует...

Большое спасибо. Статья помогла

Алексей Иванович комментирует...

PuLsE (PoolOl) - всегда рад быть полезным!
Читайте другие статьи моего блога - уверен вы найдёте много полезной информации для себя и своего блога.

AVON в Беларуси комментирует...

Здр!Очень полезная и подробная публикация! Но у меня возникли трудности ((( При создании страницы нет пункта "пустая страница"((( не знаю важно ли это. Если следовать дальше, то при нажатии "Сохранить",вид ссылки на страницу получается ооочень длинный (((
Уже выяснила что родной гаджет обратной связи на странице не работает (((
Помогите чайнику!!! Пожалуйста!

Alex Vishbru комментирует...

У меня сразу два трабла - не приходят сообщения через форму связи и не получается создать отдельной вкладкой.
Подробности следующие - сообщения не приходят на мой ящих когда заполняю через форму связи с гаджета.
Не могу создать отдельную вкладку - делаю все что у вас написано (или почти все, может что то не так понял), гаджет обратной связи со страницы пропал, но отдельной вкладки нет, могу открывать отдельную вкладку контактов у себя через предпросмотр страниц, как сделать чтобы она появилась на главной, может я что то не так сохранил?
буду благодарен за ответ

Alex Vishbru комментирует...

все, поместить страницу удалось, забыл опубликовать)) но сообщения все равно не приходят

Михаил Цулейскираи комментирует...

Сообщения ны мыло не приходят. Что может быть, скажите пожалуйста

Ирина Топчий комментирует...

Спасибо большое! ВСЕ просто, но ОЧЕНЬ красиво! И работает.

Евгений комментирует...

Спасибо за инфу! Супер!

Ольга Мисейко комментирует...

СПАСИБО!!! ВЫ СУПЕР!!! ЗДОРОВЬЯ ВАМ И ВДОХНОВЕНИЯ !!!!

Вернуться к началу