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

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

Форма обратной связи — используется, как не странно, для связи пользователя сайта с администратором. В ней пользователь может сообщить о каких то ошибках на сайте или спросить о чем-либо разработчика.

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

• Способ №1. Форма обратной связи на html + css + php (функционален, расширяем, относительно сложный способ)
• Способ №2. Форма обратной связи только на html от стороннего сервиса (простота установки, функционален)
• Способ №3. Форма для связи, реализованная по средствам ссылки для почтового клиента. При клике по ней открывается ваша почта, в которой уже вписан нужный email для связи. (просто, но и нет ни каких функций или возможностей)

Способ №1. Форма обратной связи html + php.

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

Для данной формы вам потребуется:

Начнем с создания PHP файла который будет обрабатывать запросы пользователей на сервере. Он должен, проверить, все ли необходимые поля были заполнены и если все нормально, отправить сообщение.

  [email protected]";//адрес куда будет отсылаться сообщение для администратора $mes = "Имя: $name \n"; //в этих строчках мы заполняем текст сообщения. С помощью оператора .= мы просто дополняем текст в переменную $mes .= "E-mail: $email \n"; $mes .= "Тема: $sub \n"; $mes .= "Текст: $body"; $send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email");//собственно сам вызов функции отправки сообщения на сервере if ($send) //проверяем, отправилось ли сообщение echo "Сообщение отправлено успешно! Перейти на you-hands.ru, если вас не перенаправило вручную."; else echo "Ошибка, сообщение не отправлено! Возможно, проблемы на сервере"; ?>

Далее давай те напишем HTML код формы

Ну и конечно же файл CSS, что-бы все облагородить)

.titles < width: 140px; float: left; >#form_message < box-shadow: 0 0 10px rgba(0,0,0,0.5); border-radius: 5px; margin:10px; padding: 10px; width: 320px; height:330px; >#form_message input,textarea < border-radius: 5px; width: 170px; >#submit < height: 50px; float: right; >#form_message h2

Вот, что получилось в итоге.

Способ №2. Сервис для формы обратной связи.

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

Для данного способа вам понадобиться:

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

Я собрал вот такую форму на сервисе Яндекса.

После составления формы, нужно лишь скопировать полученный по кнопке «поделиться» код и вставить в нужное место на странице вашего сайта.

Способ №3. Ссылка для отправки email.

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

Такую ссылку можно усложнить и задать сразу еще и тему к примеру

[email protected]?subject=YOUR_SUBJECT">Отправить сообщение с темой

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

Источник

Создание обратной связи html

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

Элементы управления это кнопки, текстовые поля и так далее. С появлением HTML5 форм и элементов управления в HTML стало больше. В этой статье я рассмотрю различные формы и элементы управления. Итак, начинаем.

Форма обратной связи в HTML

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

Тег — создание формы

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

У тега есть два обязательных атрибута:

• action — ссылка на скрипт, обычно PHP, который будет обрабатывать форму. А точнее, который будет обрабатывать введенные форму данные.
• method — метод отправки данных на сервер (GET или POST).

Подробности вы сможете найти на этом сайте, но сейчас вернемся к самой форме.

Форма для ввода текста

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

Поле для ввода текста пока что непонятное. Давайте модернизируем его, а именно добавим текст внутри и сделаем поле шире.

Для вставки пояснительного текста используется атрибут placeholder тега .

Сделаем 100% ширину с помощью CSS.

Ну что же, уже лучше. Теперь сделаем поле для ввода нашего имени.

Ввод текста в input

Элемент является универсальным, в отличии от элемента . С его помощью мы можем создать форму для ввода небольшого текста. Ведь имена не занимают несколько предложений. С помощью атрибута type=»text» мы указываем, что в поле должен содержаться текст.

Уже лучше, давайте добавим поле с адресом электронной почты.

Все хорошо, но не хватает нормальной группировки элементов.

Группировка элементов управления в HTML-форме

  
Текстовые поля
 Ваше имя: Ваш email: Текст сообщения: 

Давайте немного изменим форму, а именно:

Сделаем белый фон, размер уменьшим до 70% и располагаться форма будет по центру.

 form  
Текстовые поля
 Ваше имя: Ваш email: Текст сообщения: 

Ну что же, уже лучше. Не хватает кнопок.

Кнопки в HTML-форме

Кнопка «Отправить» должна отправлять веденый текст на сервер. Что бы кнопка работала требуется PHP-обработчик (или обработчик на ином языке).

Кнопка «Очистить» будет очищать все введенные в форму данные.

Кнопка отправки формы

Кнопка отправки формы на сервер создается с помощью тега (от англ. button — кнопка) с типом submit (от англ. submit — разместить). Полный HTML-код кнопки отправки формы на сервер: Отправить .

Кнопка очистки формы

Тут по аналогии, только вместо submit мы пишем reset (от англ. reset — сбросить). Полный HTML-код кнопки очистки формы: Очистить .

Давайте дополним нашу форму.

 form 
 
Текстовые поля
 Ваше имя: Ваш email: Текст сообщения:  Отправить Очистить 
 

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

Проверка заполнения формы

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

Самым простым способом проверки формы на заполнение является добавление к элементам атрибута required (от англ. required — требуется). давайте добавим этот атрибут к полям и посмотрим что будет.

 form 
 
Текстовые поля
 Ваше имя: Ваш email: Текст сообщения:  Отправить Очистить 
 

Попробуйте оставить часть полей не заполненными и нажать кнопку «Отправить».

Второй способ заключается в добавлении к кнопке «Отправить» атрибута formnovalidate, он делает кнопку не активной пока не будут заполнены input’ы. Я не буду приводить пример, но вы обязательно попробуйте проверить форму таким образом. привожу полный код такой кнопки:

Иные проверки (валидации) выполняются с помощью PHP или JS кода.

Другие популярные элементы

Продолжим дополнять нашу форму. Добавим несколько элементов.

Форма загрузки файлов

Для создания формы загрузки используется уже знакомый нам input. Создается она с помощью следующего кода:

Дополним нашу форму. Создадим отдельную группу элементов.

form

 form  
Текстовые поля
 Ваше имя: Ваш email: Текст сообщения:  Отправить Очистить 
 
Иные элементы управления формой
  Укажите дату -

 form 
 
Текстовые поля
 Ваше имя: Ваш email: Текст сообщения:  Отправить Очистить 
 
Иные элементы управления формой
  Укажите дату -  Кому отправить - Директору В отдел продаж  
 

 form 
 
Текстовые поля
 Ваше имя: Ваш email: Текст сообщения:  Отправить Очистить 
 
Иные элементы управления формой
 Укажите дату - Кому отправить - Директору В отдел продаж  Отправить копию письма себе на почту?Да Нет Каким образом направить вам ответ >По электронной почте По почте на бумажном носителе Перезвонить по телефону 

              
 
 
   
 
 
 
 
 
 
  
 
  
Если у вас есть какие-то вопросы или предложения по сотрудничеству - заполните форму ниже
  
  
 
 
 
 
 
 
 
   

/* Подключение шрифта Roboto */ @import url("https:/*fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); /* Убираем все отступы */ * < margin: 0; padding: 0; box-sizing: border-box; >*, *::after, *::before < box-sizing: inherit; >/* При расчете размеров инпутов учитываем внутренние отступы и границы */ input, textarea < box-sizing: border-box; >/* В body устанавливаем шрифт, ширину и высоту, а также фон */ body < font-family: "Roboto", sans-serif; font-size: 16px; line-height: 1.2; width: 100%; min-height: 100vh; background: linear-gradient(45deg, #fff1eb, #ace0f9); display: flex; justify-content: center; /* чтобы контейнер */ align-items: center; /* был по центру */ >/* Ограничиваем контейнер по ширине 1000px */ .container < width: 100%; max-width: 1000px; padding: 0 20px; >/* Стили самой формы */ .content < display: flex; /* делаем колонки в ряд */ align-items: center; /* выравниваем по центру */ justify-content: space-between; /* колонки растянутся на всю ширину */ background: #fff; padding: 40px; border-radius: 5px; box-shadow: 4px 4px 8px 0 rgba(34, 60, 80, 0.2); >/* Стили левой колонки */ .left-side < width: 25%; /* занимает 25% общей ширины */ height: 100%; /* растягиваем на всю высоту */ position: relative; /* позиционирование относительное (для ::before) */ display: flex; flex-direction: column; /* внутри элементы располагаем в колонку */ >/* Стили разделительной линии между левой и правой колонкой */ .left-side::before < content: ""; /* контент нам не нужен */ position: absolute; /* позиционируем относительно .left-side */ height: 70%; /* высота 70% от .left-side */ width: 2px; /* ширина 2px */ background: #afafb6; right: -15px; /* позиционируем справа + отступ 15px (справа) */ top: 50%; /* выравниваем по центру */ transform: translateY(-50%); /* выравниваем по центру */ >/* Стили правой колонки */ .right-side < width: 75%; /* занимает 75% общей ширины */ margin-left: 75px; >/* Элементы левой колонки: адрес, телефон, email */ .details < margin-bottom: 15px; text-align: center; >/* Общие стили для иконок */ .details i < font-size: 25px; /* задаем размер */ color: #3e2093; /* задаем цвет */ margin-bottom: 10px; >/* Стили для заголовков левой колонки */ .topic < font-size: 18px; font-weight: 500; margin-bottom: 7px; /* отступ снизу 7px */ >/* Стили для текста левой колонки */ .text-one, .text-two < font-size: 14px; color: #afafb6; >/* Заголовок правой колонки */ .topic-text < font-size: 23px; font-weight: 600; color: #3e2093; margin-bottom: 10px; >/* Текст правой колонки */ .right-side p < margin-bottom: 20px; >/* Контейнер для input'ов формы */ .input-box < height: 50px; /* по сути задаем высоту input'а */ width: 100%; /* ширина на всю ширину правой колонки (с учетом padding) */ margin-bottom: 20px; /* отступаем снизу 20px */ >/* Стили для input и textarea (поле сообщение) */ .input-box input, .input-box textarea < height: 100%; /* растягиваем на всю высоту контейнера 50px */ width: 100%; /* растягиваем на всю ширину */ border: none; /* убираем внешние края */ border-radius: 5px; /* скругляем края */ background: #f0f1f8; /* задаем цвет фона */ padding: 0 20px; /* отступ справа и слева 20px */ >/* Отдельно стилизуем поле сообщение */ .input-box textarea < resize: none; /* чтобы нельзя было менять высоту */ padding: 20px; font-family: "Roboto", sans-serif; >/* Это контейнер для поля сообщение */ .message-box < min-height: 110px; /* минимальная высота 110px */ >/* Стили для контейнера кнопки */ .button < display: inline-block; /* делаем блочно-строчный элемент */ >/* Стили для самой кнопки */ .button input[type="button"] < color: #fff; font-size: 18px; background: #3e2093; outline: none; border: none; padding: 10px 20px; border-radius: 7px; transition: 0.2s; /* чтобы плавно менялся цвет при наведении (:hover) */ >/* Меняем цвет фона при наведении на кнопку */ .button input[type="button"]:hover

/* Меняем стили при ширине экрана меньше 800px */ @media (max-width: 800px) < /* Теперь форма (правая колонка) будет сверху, а элементы (левая колонка) снизу */ .content < height: 100%; flex-direction: column-reverse; /* располагаем в колонку и реверсивно */ >/* Внутри левой колонки внутренние элементы располагаем в ряд */ .left-side < margin-top: 50px; flex-direction: row; /* располагаем элементы (адрес, телефон, email) в ряд */ width: 100%; /* левая колонка на всю ширину */ justify-content: center; flex-wrap: wrap; /* перенос элементов, если не хватит места */ >.details < margin-right: 20px; >.details:last-child < margin-right: 0; >/* Убираем разделительную линию */ .left-side::before < display: none; >/* Правая колонка теперь на всю ширину и не имеет отступа слева */ .right-side < width: 100%; margin-left: 0; >>