Форма обратной связи для Blogger

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

Что такое форма обратной связи?

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

Blogger: форма обратной связи не работает

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

Blogger: Как добавить форму обратной связи

На данной странице я подготовил для пользователей Blogger две стильных формы обратной связи, плюс бонусом идет фиксированный вариант формы.

1. Первая форма

Описание:
3 строки, Имя, Email, Текст сообщения, Кнопки отправить и очистить форму, Иконки, Темный фон.

Установка:
1) В разделе Дизайн Добавьте новый гаджет, перейдите на вкладку Другие гаджеты, в списке выберите Форма для связи.

2) Теперь создайте страницу или сообщение, перейдите на вкладку HTML и вставьте следующий код:

HTML <div id="twist_blogger_cntct_form">
<div class="wrap-me">
<form name="contact-form">
<span class="name-bg">Ваше имя</span><br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Ваше Имя..." size="30" type="text" value="" /><br />
<br />
<span class="email-bg">Ваш Email*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Ваш email..." size="30" type="text" value="" /><br />
<br />
<span class="message-bg">Ваше сообщение*</span><br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="сообщение..." rows="5"></textarea><br />
<span class="send-bg"><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Отправить" /></span>
<span class="clear-bg"><input class="contact-form-button contact-form-button-submit clear-button" type="reset" value="Очистить" /></span>
<br />
<div style="max-width: 100%; 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>
<style>
div#ContactForm1 {display: none !important;}
/****** Contact Form Designed by www.TwistBlogger.com ******/
div#twist_blogger_cntct_form {
    padding: 50px 0px;
    border-radius: 2px;
    color: #1D1D1D;
    font-size: 15px;
    font-weight: bold;
    position: relative;
    background-color: #404040;
    font-family: sans-serif;
}
div#twist_blogger_cntct_form .wrap-me {
    margin: 0 auto;
    display: block;
    padding: 30px 20px;
    background-color: #F3F3F3;
    max-width: 440px;
    width: 100% !important;
    border-top: 65px solid #FF0000;
    box-sizing: border-box;
}
div#twist_blogger_cntct_form .wrap-me:before {
    content: '\f0e0';
    position: absolute;
    font-family: FontAwesome;
    font-weight: normal;
    margin-top: -88px;
    margin-left: -23px;
    left: 50%;
    display: inline-block;
    font-size: 28px;
    width: 53px;
    height: 53px;
    border-radius: 50px;
    text-align: center;
    color: #FFFFFF;
    box-sizing: border-box;
    border: 2px solid #FFFFFF;
    line-height: 49px;
}
input#ContactForm1_contact-form-name, #ContactForm1_contact-form-email, #ContactForm1_contact-form-email:hover, #ContactForm1_contact-form-email:active {
    padding: 5px;
    margin-top: 4px !important;
    box-shadow: none!Important;
    max-width: 300px;
    width: 100%;
    border: 1px solid #D2D2D2;
    line-height: 1em;
    min-height: 31px;
    background: #FEFEFE;
    font-family: sans-serif;
    margin-bottom: 15px;
    border-radius: 0px;
}
.contact-form-email-message, .contact-form-email-message:active, .contact-form-email-message:hover {
    padding: 5px;
    margin-top: 4px !important;
    box-shadow: none!Important;
    max-width: 400px;
    width: 100%;
    border: 1px solid #D2D2D2;
    line-height: 1em;
    min-height: 80px;
    background: #FEFEFE;
    font-family: sans-serif;
    margin-bottom: 10px;
    border-radius: 0px;
}
/***** Focus *****/
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
    outline: none;
    background: #FFFFFF !important;
    color: #444;
    border-color: rgb(236, 235, 235) !important;
    box-shadow: 0 0 5px rgba(241, 241, 241, 0.7) !important;
    transition: all 0.3s ease-in-out !important;
}
/**** Submit button style ****/
.contact-form-button-submit:hover {
    color: #FFFFFF;
    background: #0083FF !important;
}
.contact-form-button-submit {
    background: #19B3EA;
    display: table;
    font-size: 17px;
    margin: 0 !important;
    border-radius: 0 !important;
    max-width: 100%;
    width: 100%;
    min-width: 100%;
    height: 32px;
    line-height: 0.5em;
    letter-spacing: 0.5px;
    font-family: sans-serif;
    font-weight: normal;
    cursor: pointer;
    outline: none!important;
    color: #FFFFFF;
    border: 1px solid #fff !important;
    text-align: center;
    padding: 0px 0px 0px 15px;
    text-transform: capitalize;
    transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
}
/**** Submit button on Focus ****/
.contact-form-button-submit:focus, .contact-form-button-submit.focus {
  border-color: #FFFFFF;
  box-shadow: none !important;
}
/**** Error message ****/
.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;
}
/**** Submit Button On Success Message ****/
.contact-form-button-submit.disabled, .contact-form-button-submit.disabled:hover, .contact-form-button-submit.disabled:active {
    opacity: 0.9;
}
/****** Success Message *****/
.contact-form-error-message-with-border {
    background: #000000;
    border: 1px solid #5A5A5A;
    bottom: 0;
    box-shadow: none;
    color: #FDFDFD;
    font-size: 15px;
    font-weight: normal;
    line-height: 35px;
    margin-left: 0;
    opacity: 1;
    position: static;
    text-align: center;
    height: 35px;
    margin-top: 45px;
}
.contact-form-cross {
    height: 14px;
    margin: 5px;
    vertical-align: -8.5%;
    float: right;
    width: 14px;
    border-radius: 50px;
    border: 0 !important;
    cursor: pointer;
}
.contact-form-success-message-with-border {
    font-weight: normal;
    background-color: #000;
    border: 1px solid #FFF;
    color: #FFF;
    line-height: 35px;
    margin-left: 0;
    font-size: 13px;
    opacity: 1;
    position: static;
    text-align: center;
    height: 35px;
    margin-top: 45px;
}
/* Extra Stuff */
div#twist_blogger_cntct_form span.name-bg {
    background-color: #E8F2FF;
 }
div#twist_blogger_cntct_form span.email-bg {
    background-color: #FFE8E8;
}
div#twist_blogger_cntct_form span.name-bg, div#twist_blogger_cntct_form span.email-bg {
    display: inline-block;
    max-width: 300px;
    line-height: 21px;
    width: 100%;
    color: #696969;
    padding: 3px 5px;
    margin: 0px 0px 4px;
    box-sizing: border-box;
    height: 30px;
    border: 1px solid #E4E0E0;
    padding-left: 39px;
}
div#twist_blogger_cntct_form span.name-bg:before {
    content: '\f007';
    background-color: #60A2FF;
 }
div#twist_blogger_cntct_form span.email-bg:before {
    content: '\f1fa ';
    background-color: #FF530B;
}
div#twist_blogger_cntct_form span.name-bg:before, div#twist_blogger_cntct_form span.email-bg:before, div#twist_blogger_cntct_form span.message-bg:before {
    font-family: FontAwesome;
    text-align: center;
    margin: -4px 0 0px 0px;
    font-weight: normal;
    padding: 0;
    line-height: 27px;
    width: 28px;
    height: 28px;
    display: table;
    position: absolute;
    margin-left: -40px !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 0 !important;
    color: #FFFFFF;
}
div#twist_blogger_cntct_form span.message-bg {
    background-color: #EBFFE8;
    display: inline-block;
    max-width: 400px;
    line-height: 21px;
    width: 100%;
    color: #696969;
    padding: 3px 5px;
    box-sizing: border-box;
    height: 30px;
    border: 1px solid #E4E0E0;
    padding-left: 39px;
    margin: 0px 0px 4px;
}
div#twist_blogger_cntct_form span.message-bg:before {
    content: '\f0e0';
    background-color: #20CC00;
}
div#twist_blogger_cntct_form span.send-bg {
    height: 32px;
    display: inline-block;
    float: left;
    max-width: 45%;
    width: 100%;
    margin-top: 15px;
    transition: all 0.4s ease-in-out !important;
}
div#twist_blogger_cntct_form span.send-bg:before {
    content: '\f1d8';
 }
div#twist_blogger_cntct_form span.send-bg:before, div#twist_blogger_cntct_form span.clear-bg:before {
    font-family: FontAwesome;
    text-align: center;
    font-weight: normal;
    margin: 0;
    background-color: #000;
    padding: 0;
    line-height: 27px;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    border: 1px solid #fff;
    border-right: 0 !important;
    color: #FFFFFF;
}
div#twist_blogger_cntct_form span.clear-bg {
    display: inline-block;
    float: right;
    margin-top: 15px;
    max-width: 45%;
    width: 100%;
}
div#twist_blogger_cntct_form span.clear-bg:before {
    content: '\f021';
 }

input.contact-form-button.contact-form-button-submit.clear-button:hover {
    background-color: #E83434 !important;
}
div#twist_blogger_cntct_form .clear-button {
    color: #FFFFFF;
    border: 1px solid #FFF !important;
    background-color: #FF2C2C;
    float: right;
    display: table;
    height: 32px;
}
</style>

3) Опубликуйте страницу \ сообщение.

4) Перейдите в раздел Тема - Изменить HTML найдите в конце тег </body> и перед ним вставьте код:

<style>div#ContactForm1 {display:none!important;}</style>

5) Сохраните тему и проверьте работу виджета.

2. Вторая форма

Описание:
Вторая форма более новая и создана в стиле Material Design. Имеет три строки для ввода данных и кнопку Отправить.

Установка:
1) Создайте сообщение или страницу, перейдите на вкладку HTML, здесь вставьте код:

HTML <style scoped="scoped">
.ante{float:none;position:relative;margin-bottom:45px;margin-right:10px}.ante input,.ante textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.ante input:focus,.ante textarea:focus{outline:none}.ante label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.ante input:focus ~ label,.ante input:valid ~ label,.ante textarea:focus ~ label,.ante textarea:valid ~ label{top:-20px;font-size:14px;color:#1bbc9b}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#1bbc9b;transition:.2s ease all}.bar:before{left:50%}.bar:after{right:50%}.ante input:focus ~ .bar:before,.ante input:focus ~ .bar:after,.ante textarea:focus ~ .bar:before,.ante textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.ante input:focus ~ .highlight,.ante textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.ante input:focus ~ label,.ante input:valid ~ label,.ante textarea:focus ~ label,.ante textarea:valid ~ label{top:-20px;font-size:13px;color:#1bbc9b}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{color:#fff!important;background:#1bbc9b;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px}
input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
#ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
</style>

<br />
<br />
<form name="contact-form">
<div class="ante">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>
<div class="ante">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>Email</label>
</div>
<div class="ante">
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
<span class="highlight"></span>
<span class="bar"></span>
<label>Message</label>
</div>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />

<br />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</form>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '1958902922838602951';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1958902922838602951','//ВАШАССЫЛКА.blogspot.com/','1958902922838602951');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '1958902922838602951', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

2) Строки выделенные красным цветом смените на ID своего блога, его можно найти в верхней строке браузера, когда находитесь в панели управления блога. Строку выделенную желтым смените на ссылку совего блога.

3) Опубликуйте страницу и проверьте работу виджета.

Дополнительная информация

Такой вопрос, если в форме не указывается моя почта куда приходит сообщение? А приходит оно на ваш имейл, привязанный к вашему аккаунту Гугл. Но это еще не все, чтобы найти его в своей почте gmail нужно вверху перейти из вкладки Несортированные во вкладку Соцсети.

3. Фиксированная форма связи для Blogger

Эта форма по сути ничем не отличается от обычной формы Blogger и выполняет все те же функции. Однако в некоторых случаях, например, когда владельцу сайта нужно показать пользователю, что мол вот смотри друг, я всегда на связи, пиши в любое время суток и я всегда отвечу. Так вот в таком случае лучше, когда форма связи всегда на виду (пользователь очень ленивый и не всегда захочет искать где там та форма находится) и с помощью фиксирования формы на каждой странице мы упростим задачу пользователей. Демо и процесс установки виджета вы можете посмотреть на видео. Скачайте код формы и следуйте указаниям на видео:

Заказать форму Обратной связи под дизайн сайта

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

Типы форм и их функциональность.

Формы обратной связи могут использоваться на любом сайте или блоге. Имеется ввиду не только платформа но и тематика. Теперь перечислим некоторые их типы.

1. Стандартная форма

Обычная или стандартная форма обратной связи включает в себя около трех основных полей:

Ваше Имя
Почта
Тестовое поле

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

2. Форма для заказа или покупки товаров

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

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

3. Форма для онлайн бронирования номеров отеля

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

4. Форма для анкеты - онлайн опросы

Иногда бывает весьма полезно узнать, что думают посетители о вашем сайте, о продукции, которую вы продаете или о сервисе, который предоставляете. В этом вам поможет форма для онлайн опроса. Мини пример такой анкеты на картинке ниже:

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

Функции или виджеты форм обратной связи

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

Список основных виджетов:

Добавление видео (youtube, vimeo и др.)
Слайдер с картинками
Проверочный список (отмечается галочками)
Загрузка документов с вашего ПК, сервисов Google Drive, Drop Box, Box
Загрузка картинок для работы над дизайнерскими проектами
Цифровая роспись
Таблицы
Списки
Кнопки соцсетей
Кнопка вызова по Скайпу
Календари
Калькуляторы
Карты с местом нахождения
Подтверждение E-mail (пользователь не отправит данные пока не подтвердит свою почту)
Капча от google recaptcha
Комментарии от disqus, facebook
Ваши твиты с Twitter
Часы
Справочник мобильных кодов для каждой страны
Таймер
Таймер обратного отсчета
Анимационные заголовки

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

Детали заказа

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

Стандартная форма - 10$
Остальные типы форм - от 20$

Если у вас возникли вопросы, задавайте их в комментариях, или на странице с контактами .

Комментарии и отзывы пользователей

Сергей Дрозд Очень пригодилось! Спасибо!

igori stoia Спасибо дружище! Просто спас от знания злостного HTML

YouCuber Спасибо вам огромное за урок!Очень полезно.Поставил на сайт всё работает.Удачи!

Роман Зырянов Отлично, всё работает!

Алина сергеева всем привет, кто пользовался подскажите, плиз. Капча есть?

Eugene Veprytskyi Алина сергеева, капча есть и другие прикольные штуки.

Vladimir Serpov Отличная информация. За неимением возможности быстро вникнуть в отправку через .js или php искал способ как-нибудь быстро сделать форму на сайт. Работает, спасибо!

Юрий Блинов Вы лучший, спасибо что описали сервис, это намного удобнее, чем писать ее в php

TERMINAL Production Спасибо, всё работает, вы заслуживаете больше читателей, удачи

KCEHIA Вот бы побольше таких уроков! Искала готовые скрипты, я ж не программист, но с этим уроком сама сделала форму онлайн записи с датой, с checkbox

Micro1001 Dobb Вообще супер! жду продолжения! Спасибо!)

Константин Базик Хороший урок, очень помог! Спасибо!

Oleksii Спасибо за урок. Все работает отлично.

Александр Все круто. Я использую такую форму. функциональна и проста. можно делать кучу форм из одного скрипта.

Mark Korvin 5/12/2019 Коммент.

Mark Korvin

Форма обратной связи для Blogger

Что такое форма обратной связи?

Blogger: форма обратной связи не работает