Как сделать обратную связь на сайте html: 3 способа. Как сделать форму обратной связи на html?

Leave a Comment / Html / By /

Добавление виджетов обратной связи

TILDA HELP CENTER

На Тильде есть собственные виджеты обратной связи и интеграция со сторонними сервисами.

Собственные виджеты Тильды расположены в категории «Форма и кнопка».

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

Расположение (в какой части экрана будет размещен ваш виджет) можно настроить только для настольных компьютеров (разрешение от 980px и выше). Для мобильных устройств (разрешения от 0 до 980px) виджет будет зафиксирован в правой нижней части экрана.

Чтобы получить данные из виджета (телефон, email или сообщение), нужно подключить сервисы приема данных.

Как подключить формы приема данных

Виджет для заказа обратного звонка

При просмотре на мобильном, нажатие на кнопку вызывает функцию звонка. В версии для компьютеров — открывает форму, в которой можно оставить телефон для связи.

Добавьте на страницу блок BF901 (Библиотека блоков > Форма и кнопка > Виджет для заказа обратного звонка)

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

Чтобы информация отправились в сервис приема данных, в меню «Контент» отметьте галочкой подключенный сервис.

В мобильной версии клик по кнопке активирует функцию звонка в телефоне.

Чтобы функция сработала, необходимо заполнить поле «телефон».

Также вы можете добавить призыв к действию рядом с круглой кнопкой. Рекомендуемая длина фразы — два-три слова.

Виджет для отправки сообщений

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

Перейдите в ваш проект на Тильде и добавьте на страницу блок BF902N (Библиотека блоков > Форма и кнопка > Виджет для отправки сообщений)

После этого необходимо подключить сервис приема данных , а затем в меню «Контент» блока виджета, установить галочку напротив подключенного сервиса.

Сохраните изменения и опубликуйте страницу.

Виджет с формой подписки

Клик на кнопку открывает форму, в которой можно оставить email.

Добавьте на страницу блок BF903 (Библиотека блоков > Форма и кнопка > Виджет с формой подписки)

Подключите сервис приема данных, который будет собирать email пользователей, подписавшихся на вашу рассылку. Затем в настройках блока установите галочку напротив подключенного сервиса.

Сохраните изменения и опубликуйте страницу.

Виджет с номером телефона

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

Добавьте на страницу блок BF904 (Библиотека блоков > Форма и кнопка > Виджет с формой подписки)

В меню «Контент» укажите номер телефона и добавьте дополнительную информацию о том, кому посетитель сайта будет звонить.

Виджет с мессенджерами

Клик на кнопку открывает окно с ссылками на социальные сети, по которым посетитель сайта может перейти.

Добавьте на страницу блок BF905 или BF905A (Библиотека блоков > Форма и кнопка > Виджет с формой подписки). Блоки отличаются по дизайну, но остальные настройки одинаковые.

В меню «Контент» у блока с виджетом задайте заголовок, описание, текст рядом с виджетом, и ссылки на нужные социальные сети. Значки соцсетей отобразятся автоматически после добавления ссылки.

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

Так же в Тильду интегрированы сторонние сервисы обратной связи CallbackHunter и Jivo.

Адаптивная форма обратной связи

На большинстве сайтах поля форм обратной связи, по ширине не больше 300 пикселей. Форма с максимальной шириной в 320 пикселей целиком поместится на экране любого смартфона без масштабирования.

Но все-же на некоторых макетах встречаются формы во всю ширину браузера, поля которых, выстроены в строку, включая кнопку Submit. Такая форма занимает целую секцию.

Давайте посмотрим, как можно адаптировать такую форму, под разные разрешения экранов.

Демонстрация адаптивной формы.

HTML разметка

В контейнер с классом wrapper, помещаем блок с классом newsletter, который содержит в себе заголовок h3 и форму. У формы два текстовых поля type=»text» для ввода имени и е-майла пользователя и кнопка Отправить.

<div>
  <div>
    <h3>Подпишитесь на наши новости</h3>
    <form method="post" action="#">
    <input type="text" placeholder="Имя">
    <input type="text" placeholder="Email">
    <button type="submit" title="Submit">Отправить <i></i></button>
    </form>
  </div>
</div>

Без оформления стилей, наша форма выглядит не так, как на макете. Поэтому переходим к написанию CSS кода.

CSS код

Сперва создадим секцию во всю ширину экрана с сине-зеленым цветом фона, заранее обнулив паддинги и маржины в теге body.

.wrapper{
  width: 100%;
  background-color: #7eadbe;
}

Форма и заголовок имеют отступы сверху и снизу и расположены они в центре страницы. Поэтому мы создаем ещё один блог с идентификатором newsletter, относительно которого и cпозиционируем заголовок с формой.

#newsletter{
  padding:20px 0;
  text-align:center;
}

Сделаем заголовок более заметным, прежде всего за счет размера.

h3 {
  font-size: 30px;
}

А так же выберем шрифт из семейства Google Font и цвет шрифта. Строчку ниже пропишем в самом верху файла стилей.

body {
  font-family: 'Marck Script', sans-serif;
  color: #fff;
}

Дальше стилизуем поля формы и кнопку.

input, button{
  display:inline-block;
  outline:none;
  padding: 9px 18px;
  margin-right:10px;
  border: none;
}

input{
  width: 30%;
  background-color: #7ec4ce;
}

input[placeholder] {
  color: #fff;
}

input[type="text"]::-webkit-input-placeholder {
  color: #fff;
}
input[type="text"]::-moz-placeholder {
  color: #fff;
}

button {   padding: 9px 18px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  color: #fff;
  background-color: #7ec4ce;

}

Секция с формой готова , но при уменьшении размеров экрана, на ширине 680 пикселей поля формы схлопываются. Это значит, что форма ещё не адаптирована под другие устройства.

Техника адаптирования формы

Переключитесь в инструменты разработчика в Google Chrome, вверху сайта вы увидите текущую ширину для десктопов, начинайте уменьшать мышкой окно браузера, запомните, на какой ширине экрана, поля формы начнут ломаться. В нашем случае с формой, это будет цифра 680 пикселей.

Теперь для всех устройств с шириной от 240 пикселей до 680 пикселей, вносим изменения в CSS стили, которые регулирует ширину и отображение полей.

Свойство display: block, поставит поля формы друг под другом, это сэкономит место. Свойство margin: 10px auto, создаст вертикальные отступы между ними и выравнит их по центру.

@media screen and (min-width:240px) and (max-width:680px) {
  input, button{
  display: block;
  margin: 10px auto;
}

  input{
  min-width:220px;
}
}

На самых маленьких разрешениях, зададим минимальную ширину полей, чтобы эффективнее заполнить пустующее пространство. input{min-width:220px;}

Вот так будет выглядеть форма обратной связи при минимальной ширине экрана в 240 пикселей.

Рекомендую к просмотру очень подробный видеокурс «О создании лендинга под ключ». Никакой воды, все только по делу.

Код целиком:

See the Pen CSS3 responsive form by porsake (@porsake) on CodePen.

  • Создано 10.10.2018 10:30:03
  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Форма обратной связи с использованием только кода HTML

Форма обратной связи с использованием только кода HTML

  • Автор сообщения: