Несколько вариантов формы контактов для Блоггер и установка её на отдельной странице

форма связи
Здравствуйте, все кто читает мои шпаргалки. Спасибо новым читателям, кто недавно присоединился к моему блогу. Я обычно просматриваю профиль новых ПЧ и их блоги. И обратила внимание на то, что многие новички игнорируют гаджет Форма связи.

Форма обратной связи очень важна для блога. Это инструмент, который позволит посетителям очень быстро связаться с вами. Бывают случаи когда  кто - то захочет обратиться к вам приватно - предложить сотрудничество, задать какие - то вопросы. Да и это уменьшит количество спама, так как нет необходимости давать открыто в блоге ваш электронный адрес.

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

Сегодня хочу вам предложить 3 кода формы связи для Блоггер. И расположим их не в сайтбаре блога, а более профессионально, на отдельной странице

Единственное, на что нужно обратить внимание, это последовательно выполнять все шаги. Это важно.

Пример 1. Для любителей минимализма самая простая форма контактов. Вот так она выглядит.

контактная форма для Блоггер


Как установить форму на отдельную страницу.

Шаг 1. Сначала обычным путём добавляем гаджет форма связи и устанавливаем его где - нибудь в самом низу макета блога (потом мы его уберём).

Шаг 2. Идём в админпанель и создаём новую страницу. Даём ей своё уникальное название, типа СВЯЗЬ С АВТОРОМ.  Переходим в режим HTML и устанавливаем следующий код. Скопируйте его сначала в блокнот.

<form name="contact-form">
Имя
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<br />
Адрес e-mail <span style="color: red; font-weight: bolder;">*</span>
<br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

Сообщение<span style="color: red; font-weight: bolder;">*</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<br />
<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>
<style type="text/css">

#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>
<style>
#ContactForm1{
display:none;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
display: block;
  width: 100%;
  max-width: 400px;
  -moz-box-sizing: border-box; box-sizing: border-box;
  margin-bottom: 2%;
  padding: 5px 2px 2px 5px;
}

#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{
background: #fffff7;
}
#ContactForm1_contact-form-email-message {
  display: block;
  width: 100%;
  max-width: 400px;
  -moz-box-sizing: border-box; box-sizing: border-box;
  margin-bottom: 2%;
  padding: 5px 2px 2px 5px;
}
#ContactForm1_contact-form-email-message {
  max-width: 100%;
}
#ContactForm1_contact-form-submit {
width: 101px;
height: 35px;
float: left;
color: #FFF;
padding: 0;
margin: 10px 0 3px 0 0;
cursor: pointer;
background: #5E768D;
border: 1px solid #556f8c;
border-radius:3px;
}
#ContactForm1_contact-form-submit:hover {
background:#435c74;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 450px;
margin-top:35px;
}</style>


Можно изменить размеры, цвет и ширину полей на ваш вкус. Также и текст. Если вы сейчас вернётесь в обычный режим то уже её увидите. Здесь же перед публикацией поставьте галочки в параметрах не разрешать комментарии и использовать тег <br> при переносе слов. Нажмите на картинку для увеличения.


Смело публикуйте страницу. Всё должно получиться.



Шаг 3.  Возвращаемся в раздел дизайн и удаляем, ранее созданный виджет Форма связи.

Перейдите на страницу формы связи и попробуйте написать сообщение. Где оно появится будет написано в конце поста.

Пример 2. Вот как она выглядит. При наведении курсора кнопка отправить меняет цвет. Настройки рассмотрим ниже.

форма контактов

Как в примере один, сначала добавляем гаджет форма связи. Далее нужно зайти в раздел шаблон - изменить HTML и пред строкой ]]></b:skin> (прочитайте об этом здесь, кто пока не знает как просто это сделать) вставьте вот такой малюсенький код

div#ContactForm1 {
  display: none !important;
}


Таким способом мы запретили показ созданного гаджета на боковой панели. Сохраняем изменения.

Копируйте следующий код сначала в блокнот

<style>
.twist_blogger_cntct_form_wrap {
  margin: 0 auto;
 width: 450px;

  padding: 0 10px;
  position: relative;
  background-color: #FDFDFD;
}
.twist_blogger_cntct_form_wrap:after, .twist_blogger_cntct_form_wrap:before {
  content: '';
  display: table;
  clear: both;
}

div#twist_blogger_cntct_form {
  padding: 20px 20px 10px 20px;
 background: #006600 ; /*----Цвет фона  формы----*/
  border-radius: 2px;
  margin: 20px auto 20px;
  color: #FFF;
  font-size: 16px;
  max-width: 460px;
}
input#ContactForm1_contact-form-name, .contact-form-email, .contact-form-email:hover, .contact-form-email:active, .contact-form-email-message, .contact-form-email-message:active, .contact-form-email-message:hover {
  padding: 5px;
  box-shadow: none!Important;
  min-width: 286px;
  max-width: 360px;
  width: 100%;
  border: 0 !important;
  line-height: 1em;
  min-height: 31px;
  background: #FCFCFC;
  margin-bottom: 15px;
}

.contact-form-button-submit {
  background: #999966 ; /* Цвет кнопки  */
  font-size: 12px;
  letter-spacing: 2px;
  cursor: pointer;
  outline: none!important;
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,1);
  border-radius: 5px;
  min-width: 286px;
  max-width: 360px;
  width: 100%;
  text-transform: uppercase;
  height: 50px;
  margin-top: 10px!important;
  transition: all 300ms ease-;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
}

.contact-form-button-submit:hover {
  border: 1px solid;
  color: #FFFFFF;
  background: #669966; !important; /* Цвет кнопки при наведении*/
}

.contact-form-button-submit:focus, .contact-form-button-submit.focus {
  border-color: #FFFFFF;
  box-shadow: none !important;
}

/* Сообщение об ошибке или об отправке */

.contact-form-error-message-with-border .contact-form-success-message {
  background: #f9edbe;
  border: 1px solid #f0c36d;
  bottom: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  color: #666;
  font-size: 12px;
  font-weight: bold;
  padding-bottom: 10px;
  line-height: 19px;
  margin-left: 0;
  opacity: 1;
  position: static;
  text-align: center;
}
</style>

<br />
<div class="twist_blogger_cntct_form_wrap">
<div id="twist_blogger_cntct_form">
<form name="contact-form">
Ваше имя<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Укажите Ваше имя..." size="30" type="text" value="" /><br />
<br />
Ваш E-mail*<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Укажите Ваш E-mail..." size="30" type="text" value="" /><br />
<br />
Ваше сообщение*<br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Введите текст сообщения..." rows="5"></textarea><br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Отправить" /><br />
<div style="max-width: 260px; text-align: center; width: 100%;">
<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>
<br /></div>
</div>
</div>
</div>


Я указала, где можно изменить цвет под ваш дизайн. Далее всё, как в примере 1 шаг 2.

Пример 3. Очень красивая контактная форма.


Устанавливается аналогично первому примеру и  расписывать не буду.

Код.

<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>
</form>
<style type="text/css">
#ContactForm1{
 display:none!important;
}
</style>
<style>
#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;
}
}</style>
</div>
</div>
</div>


В строчках, отмеченных синим цветом прописаны адреса иконок в полях ввода. Можно поменять на свои или совсем их удалить.

Вот так мы создали связь посетителей с автором блога. Когда, по каким - то причинам, они не хотят задавать вопросы или предложения в комментариях.

Естественно возникнет вопрос, куда приходят письма через такую форму контактов. 

Письма мгновенно доставляются на адрес администратора блога, который он указал при создании аккаунта Блоггер. Если администраторов несколько, на почту каждого. Посмотрите, где их увидеть во входящих письмах Gmail. Раздел Соцсети.



Все контактные формы, которые опубликованы в сообщении рабочие. Я их все протестировала. Если вдруг что - то пойдёт не так повторите установку снова. Не нужно менять порядок. Об этом было в самом начале сообщения.

Возможно вам понравиться форма связи с GOOGLE DOCS.

Всем спасибо за внимание. Что не понятно пишите в комментариях. До встречи.


здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


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

  1. Виктория, как интересно! Я тоже хочу такую форму связи! Появится новая страница в блоге? А если у меня в сайдбаре уже стоит форма связи, она исчезнет? Я все правильно поняла?

    ОтветитьУдалить
    Ответы
    1. Да, Ирина, Если все шаги , как описано в статье сделать по порядку, её в сайдбаре не буде. Она останется только на новой странице. Можешь посмотреть
      http://dlynaglydnosti.blogspot.ru/p/cdzpm.html
      http://test-tri.blogspot.ru/p/blog-page_65.html

      Удалить
  2. Спасибо, сделала страницу с обратной связью - 3-ий вариант. Только если убираю форму обратной связи из сайтбара, то на странице форма обратной связи не работает.
    Оставила и в сайтбаре тоже.

    ОтветитьУдалить
    Ответы
    1. Светлана, у меня такая же эта форма стоит. И на этом блоге http://www.dela-domashnie.ru/p/blog-page_7.html
      Не должна она отображаться в сайтбаре. В коде прописан запрет показа #ContactForm1{ display:none!important;} попробуйте в шаблоне поставить div#ContactForm1 {
      display: none !important;
      }
      как во 2 варианте . Может порядок нарушили.

      Удалить
  3. Поставила код и все получилось! Спасибо! Может и правда, порядок нарушила. Я столько раз переделывала, что уже и запуталась.

    ОтветитьУдалить
    Ответы
    1. Светлана, ну вот и здорово. Как говорится терпения и ещё раз терпения и всё получится.

      Удалить
  4. Доброго времени суток Вика, у меня форма goo.gl/qEqStR почему-то не работает? шаг 1 вставила форму в гаджет; шаг 2 создала страницу вставила вариант№ 3, шаг3 удалила гаджет. Потом опять поставила гаджет и вставила в шаблон div#ContactForm, все равно не работает! Может это в настройках goo.gl/5B6dj6 надо указать какую-то другую эл.почту? С уважением Тата

    ОтветитьУдалить
    Ответы
    1. Тата, ничего сказать не могу. Зачем такие заморочки. Обычная родная форма от Блоггер. Не пойму зачем goo.gl/qEqStR

      Удалить
  5. Доброго времени суток, Вика спасибо разобралась, теперь отправляет, а как узнать на какую почту?

    ОтветитьУдалить
    Ответы
    1. Письма мгновенно доставляются на адрес администратора блога, который он указал при создании аккаунта Блоггер. Если администраторов несколько, на почту каждого. Посмотрите, где их увидеть во входящих письмах Gmail. Раздел Соцсети.( это есть в сообщении)

      Удалить
  6. Спасибо Вика, нашла в разделе Соцсети, этот раздел как-то раньше не замечала. С уважением Тата

    ОтветитьУдалить
  7. Здравствуйте, Вика. Установил форму по 3 примеру, все внешне выглядит прекрасно, а вот сообшения на почту почему то не приходят. Проверял во всех папках.

    ОтветитьУдалить
    Ответы
    1. Дополнение. После того как вновь установил гаджет связи, заработала и на установленной форме отправка сообшений

      Удалить
  8. Vladimir, я заглянула к Вам на http://vladimirkalinin.us/kontakty там другая форма стоит, или где посмотрет нужно. Тут скорее всего Вы порядок установки нарушили. Ещё раз протестировала на тестовом. всё работает, как и на этом блоге. Где я могу вам попробовать отправить.

    ОтветитьУдалить
  9. Если гаджет стоит, то форма работает идеально, если я убираю гаджет, нет отправления сообшения

    ОтветитьУдалить
    Ответы
    1. Vladimir Возможно Вы не установили запрет на показ. Как в комментарии 2.а и 3. Попробуйте все шаги снова по порядку сделать.

      Удалить
  10. Спасибо, все получилось. Я думал, что скрывать нужно только для 2 примера.

    ОтветитьУдалить
    Ответы
    1. Так и должно всё получиться. Удачи. Спасибо Вам.

      Удалить

Пользовательский поиск
Foto Saya
My Photo