Как сделать обратную связь на HTML OTUS
2026-03-10 20:52 Diff
https://otus.ru/journal/kak-sdelat-obratnuju-svyaz-na-html/oj-1080x720-11-23/

HTML (или HyperText Markup Language) – это стандартизированный язык гипертекстовой разметки документов, который используется для отображения и просмотра веб-сайтов в браузерах. Интернет-обозреватели будут получать HTML-файлы от серверов при помощи протоколов HTTP/HTTPS, а также открывать их с локальных дисков. Далее осуществляется интерпретация кода в готовый интерфейс. Это  то, что будет отображаться на экране устройства.

Элементы HTML бывают разными, но все они являются «строительными блоками» HTML-страниц. С их помощью можно пользоваться различными компонентами:

  • изображениями;
  • интерактивными формами;
  • мультимедиа;
  • текстом;
  • формами обратной связи.

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

Для придания сервису большей привлекательности HTML используется в сочетании с JavaScript или CSS. Далее предстоит познакомиться с основами создания формы обратной связи при помощи языка гипертекста. Существуют различные варианты реализации задачи. Все они достаточно простые в освоении.

Назначение и параметры

Форма обратной связи (contact form или feedback) – некий своеобразный способ взаимодействия клиентов с менеджерами веб-страниц или владельцами сайтов/менеджерами. Пример – такая форма может быть задействована для получения отзывов от клиентов, оформления услуг, оставления заявок и так далее.

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

Ключевыми характеристиками рассматриваемой формы служат такие параметры как:

  • возможность работы без перезагрузки страницы (AJAX);
  • графическая капча – используется в качестве средства защиты от спама и рекламы;
  • функциональность по добавлению файлов;
  • валидация информации на стороне клиента (в Интернет-обозревателе), а также на сервере;
  • отправка успешных форм на почту (документы могут приходить как вложениями, так и ссылками).

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

Оформление первой формы осуществляется за счет стилей, расположенных в документе «form-processing.css». Для реализации предложенных серверных сценариев требуется PHP, начиная с версии 7.0.

Инициализация и настройка

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

Указание обработки производится не через div, а посредством атрибута action. Форма обратной связи будет использоваться для получения данных со стороны пользователя. Пример такой формы можно отыскать в документе «index.html».

Для подключения к странице CSS и JavaScript-элементов необходимо использовать следующий шаблон:

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

Сформировать сообщение об успешной работе поможет код:

<!— Сообщение об успешной отправки формы —>

 div class=»form-success form-success_hide»

   div class=»form-success__message» Форма успешно отправлена. Нажмите <button type=»button» class=»form-success__btn»>здесь</button>, если нужно отправить ещё одну форму. /div 

 /div 

Разработчик сам определяет, какое сообщение и как именно оно выводится пользователю при успешной отправке изучаемого элемента на обработку. Выполнять подобные операции нужно в обработчике события success. Он генерируется в «form-processing.js» для тега form.

Выше – пример кода на HTML. В случае с JavaScript необходимо использовать следующую запись:

Метод reset служит для сброса имеющейся «обратной связи». Теперь необходимо инициализировать элемент как ItcSubmitForm:

Передавать дополнительные настройки можно в формате объекта, который указывается вторым аргументом:

Здесь указаны значения ключей, которые устанавливаются по умолчанию. По мере необходимости они могут меняться. Теперь можно настроить константы на серверной PHP-скрипте «form-processing.php». Для этого:

  1. При использовании каптчи, встроенной в форму, константе has_check_captcha необходимо установить значение true. Иначе – false:

.

  1. Для загрузки файлов используется поле attach: .
  2. Настройки почты выглядят так:
  3. Отправка уведомлений пользователям о том, что требуется ввести e-mail: .
  4. Has_write_log отвечает за необходимость отображения предупреждений и ошибок в процессе обработки формы в лог. Запись будет производиться в папку /feedback/logs: .
  5. Константа has_write_txt будет определять, нужно ли сохранять успешные HTML-формы обратной связи в отдельный файл – /feedback/logs/form.log: .

После завершения всех настроек необходимо скопировать папку feedback в корневую директорию имеющегося сайта. По умолчанию в feedback расположен файл index.html. Он может быть использован для тестирования перед внедрением обратной связи на готовом проекте.

Прочие способы создания

Рассматриваемый элемент для связи между менеджерами/владельцами веб-страниц и посетителей может быть написан несколькими способами. Один из них уже рассмотрен. Также можно воспользоваться такими приемами как:

  1. HTML-форма с CSS и PHP. На выходе получится функциональная «анкета», которая хорошо расширяется. Данный прием является сложным и не подходит новичкам.
  2. Использование только HTML от стороннего сервиса. Легко устанавливается и имеет множество функций.
  3. Реализация через средства ссылки для почтовых клиентов. При нажатии по такой feedback-form будет открываться почта, в которой уже записан нужный e-mail для связи. Элементарный подход, который не имеет никаких дополнительных опций и возможностей.

Далее будут представлены все эти формы обратной связи для сайтов. Готовые шаблоны можно использовать на собственных веб-порталах.

HTML, CSS и PHP

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

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

  • знания PHP-языка;
  • понимание CSS и HTML;
  • хостинг, который будет поддерживать PHP.

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

HTML-код будет выглядеть так:

<!DOCTYPE html>

<html lang=»ru»>

<head>

<meta charset=»UTF-8″>

<title>Форма обратной связи</title>

<link rel=»stylesheet» href=»style.css»>

</head>

<body>

<form name=»form» action=»mail.php» method=»post» id=»form_message»>

<h2>Форма обратной связи.</h2>

<p>  div class=»titles» Ваше имя* /div  <input class=»input» name=»name» type=»text»/> </p>

<p>  div class=»titles» Электронная почта* div  <input class=»input» name=»email» type=»text»/> </p>

<p>   div class=»titles»>Тема сообщения /div  <input class=»input» name=»subjects» type=»text»/> </p>

<p>  div class=»titles»>Текст сообщения:/ div <textarea name=»message» cols=»22″ rows=»5″ /></textarea></p>

<p><input id=»submit» value=»Отправить» type=»submit» /></p>

</form>

</body>

</html>

Остается добавить CSS, чтобы проект красиво выглядел:

Получится простейшая анкета с полями: имя, почта (обязательно), тема обращения, сообщение. В самом низу будет расположена кнопка «Отправить» для обработки данных.

Сервисы для отправки анкеты обратной связи

Существуют различные готовые сервисы для форм обратной связи для сайтов. Пример – от «Яндекса». Сервис позволяет составить собственную «анкету» с любыми полями. Настройки осуществляется достаточно быстро и легко, причем без познаний в области программирования. Результат достигается за счет наличия у сервисов готовых конструкторов.

Чтобы освоить такой способ формирования кодов форм обратной связи на HTML, необходимо:

  • знать HTML-язык;
  • подготовить HTML-хостинг.

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

Ссылка для отправки

Самый простой вариант связи между клиентами и разработчиками/администраторами. Достаточно оставить на сайте email. Вот так выглядит код, который позволит вставить ссылку на почту:

Подобные ссылки можно усложнять и задавать темы:

При нажатии по соответствующей ссылке пользователь перейдет в клиент электронной почты. Он сможет отправлять сообщения на тот или иной электронный адрес. Сама ссылка (формы обратной связи для сайта HTML) может быть украшена при помощи CSS-стилей.

Некоторые опции и функции

Для удаления блока с капчей используется код:

<!— Капча —>

div class=»form-group form-captcha»

  …

/div

Новое поле в форму можно добавить при помощи вставки HTML-кода в form, создания маски (если это необходимо), добавления в form-processing.php кода для валидации:

<!— Телефон —>

div class=»form-group»

  <label for=»phone» class=»control-label»>Телефон</label>

  div class=»input-group»

    div class=»input-group-prepend»

      div class=»input-group-text»>+7 / div

    /div

    <input id=»phone» type=»tel» name=»phone» class=»form-control» value=»(___)___-__-__» pattern=»^(?[0-9]{3})?(s+)?[0-9]{3}-?[0-9]{2}-?[0-9]{2}$»>

    div class=»invalid-feedback» /div

  / div

/ div

Все это способствует пониманию принципов формирования анкеты для обратной связи. Лучше разобраться в HTML, CSS и PHP помогут дистанционные компьютерные курсы.

Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus. В частности, вас может заинтересовать курс, посвященный FullStack-разработке, первой ступенью которого является изучение HTML/CSS.