Форма обратной связи для сайта ее html элементы и необходимые файлы css php

Разбираемся с тем, как в html устроена форма для передачи данных на сервер. Какие файлы javascript, css и php нужны для ее работы и отображения.

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

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

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

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

Принцип работы формы передачи данных на сервер

Рассмотрим процесс передачи данных с формы сбора заявок. В этом процессе учувствуют файлы:

• Inpex.html
• script.js
• script.php

Файл index.html

В файле index.html находится html код нашей формы. Этот код содержит все элементы формы. При открытии сайта на устройстве данный файл передается с сервера. Браузер в свою очередь отображает все элементы страницы (в контексте данной стати формы) на экране устройства в привычном для пользователя виде.

Имя файла index.html — здесь название достаточно условное и обозначает файл с html разметкой формы. Например, если сайт создан на CMS системе WordPress, то это будет index.php, home.php или другой файл шаблона. Само имя файла может быль каким угодно.

В целом, html код нужен чтоб взаимодействовать с пользователем. Он принимает введенные данные и передает их дальше по цепочке.

Файл script.js

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

Файл содержит скрипт, написанный на языке JavaScript для валидации введенных данных до отправки на сервер и последующей передачи с помощью технологии AJAX.

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

Файл script.php

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

Задача файла script.php (в контексте отправки письма на почту) состоит в том, чтоб сформировать письмо из полученных данных и с помощью встроенной в php функции отправить его на почту.

Хорошей практикой является повторная валидация данных, которая будет производится уже на сервере. Не стоит полагаться на валидацию, произведённую на стороне клиента.

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

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

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

1. Имя
2. Номер телефона
3. Адрес электронной почты

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

Для достижения внешнего вида согласно дизайн задумке потребуется дополнительно создать файл style.css с css стилями. Выше о нем ничего не говорилось только потому, что он всего лишь дополняет html. Хотя, кое какое участие в процессе валидации он принимать будет.

HTML структура формы

Не будем сейчас изучать весь язык html 5. Разберем структуру, применяемую для отображения формы. Главным тегом формы является <form></form>. Между открывающим и закрывающим тегами помещаются поля и другие элементы.

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

Атрибут action

action=”/script.php” — определяет адрес файла обработчика, на который будут передаваться данные при отправке. Вызывает перезагрузку страницы при отправке данных.

Если передача данных осуществляется с помощью технологии AJAX, то указывать атрибут action не имеет смысла. Адрес файла обработчика будет указан в соответствующем js скрипте, который находится в script.js.

Атрибут method

Определяет HTTP метод передачи данных на сервер. Принимает два значения:

• POST — позволяет передавать данные в больших объемах. Передача осуществляется в теле HTTP запроса, что позволяет осуществлять скрытую передачу. Именно этот метод принято использовать в формах обратной связи.
• GET — метод передает данные через URL строку браузера, которые будут видны пользователю, что является недостатком при применении его в формах обратной связи. К тому же объем данных ограничен длиной URL строки браузера.

Это были основные атрибуты тега form, которые необходимы для работоспособности формы. На самом деле их гораздо больше, но их применение зависит от конкретной ситуации. Например, для того, чтоб с помощью формы можно было передать файл в тег form нужно добавить атрибут enctype со значением multipart/form-data.

Выше упоминалось о том, что html форма имеет встроенные средства валидации. Разработчики предпочитают создавать свою валидацию с помощью js. Для того, чтоб при этом отключить валидацию по дефолту применяется атрибут novalidate.

Интерактивные элементы формы

Существует большое количество типов полей и элементов формы. В этой статье я буду разбирать только те поля и элементы, которые нужны для создания формы из нашего примера. О всех типах поля, элементах и их атрибутах можно узнать здесь. Большинство элементов формы создано с помощью html тега input, а тип элемента определяется уже атрибутами в теге.

Поле ввода информации

Не думаю, что нужно объяснять, что я имею ввиду под “поле ввода”. Поле ввода в html обозначается тегом input.

Тег input является одинарным тегом, а его тип определяет для какой вид данных будет принимать поле. В html тип поля определяется с помощью атрибута type.

Определение типа поля input

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

• Для поля “Имя” атрибут type=”text”
• Для поля номера телефона атрибут type=”tel”
• Для поля адреса электронной почты атрибут type=”email”

Если для всех полей формы из примера определить type со значением “text”, то это не помешает передать номер телефона и адрес почты. Многие так и делают для того, чтоб избежать штатной валидации. Но при вводе в поле на устройствах с сенсорным экраном появляется раскладка клавиатуры в соответствии с типом поля. Например, при вводе номера телефона появится цифровая раскладка.

Заполнитель поля placexolder

Значение атрибута placexolder будет выводить подсказку в само поле. При установке курсора поля подсказка исчезнет.

Делаем поле обязательным для заполнения

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

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

Одним из таких атрибутов является required. Атрибут required делает поле обязательным для заполнения.

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

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

Атрибут pattern для валидации введенных данных

В продолжение темы валидации данных силами html стоит упомянуть атрибут pattern.

С помощью атрибута pattern есть возможность проверить введенные данные на соответствие установленному формату. Часто это нужно для проверки соответствия формата номера телефона.

Для этого применяются регулярные выражения. Например, для номера телефона формата +79999999999 будет соответствовать паттерн:

pattern="^\+\d{1}\(?\d{3}\)?\d{3}-?\d{2}-?\d{2}$"

Указав в input атрибут с этим регулярным выражением в качестве значения пользователь не сможет отправить форму не указав телефон в нужном формате.

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

Сделать поле не активным с помощью атрибута disabled

Добавив атрибут disabled поле или элемент станет не активным. Поле не будет реагировать на действия пользователя. Забегая на перед, приведу пример как его можно использовать. Например, его можно применить к кнопке и сделать ее не активной до того момента пока валидация данных не будет пройдена.

Предустановка данных с помощью атрибута value

Атрибут value содержит в себе данные, введенные в поле ввода. Его не обязательно указывать в теге input! Атрибут указывается в случае, если поле должно быть изначально заполнено какими-то данными. При этом пользователь может изменить предустановленные данные.

В случае с предустановленными данными value с значением подставляется динамически. Например, если в имя пользователя или его контактные данные уже известны.

Определение имени элемента ввода атрибутом name

Для того, чтоб введенные в поле данные можно было получить на сервере потребуется определить уникальное имя этого поля. Для этого используется атрибут name.

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

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

Текстовое описание полей и элементов

В html есть возможность создать метку с текстовым описанием элемента формы. Это помогает пользователю сориентироваться касательно предназначения поля или понять предназначение чек бокса, радиокнопки или какого-то другого элемента.

Чаще всего такая метка создается выше поля или справа от элемента.

Создается такая метка с помощью тега label. Есть возможность связать текстовую метку с input. В таком случае при клике на текст поля будет срабатывать фокус. Для того, чтоб установить такую связь понадобится полю установить id и установить такое же значение как у атрибута for, который находится в label.

<label for="name_user">Введите свое имя</label>

<input type="text" id="name_user" placeholder="Имя" required>

Помимо атрибута for в элемент можно добавлять и такие атрибуты как class или id, что поможет стилизовать или определить этот элемент в js скрипте.

Чекбокс формы (checkbox)

Довольно привычный для всех элемент, который часто встречается в различных формах на сайте. Элемент не предусматривает ввод какой-либо информации. Пользователь может совершить всего два действия — установить галочку (выбрать чекбокс) и снять галочку.

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

Этот элемент можно применять для валидации данных при отправке. С помощью js скрипта можно запретит отправку данных на сервер если чек бокс не выбран. Есть возможность запретить отправку при не выбранном чекбоксе штатными средствами html. Для этого достаточно установить уже знакомый атрибут required.

Создается checkbox так же, как и поля ввода с помощью тега input. Значение атрибута type должно быть checkbox. Все атрибуты для input (кроме placexolder), которые были описаны выше актуальны и для checkbox.  

Как правило checkbox создается в паре с текстовым описанием, созданным с помощью тега label. Оба html элемента связываются с помощью атрибутов for (у label) и id (у input) с одинаковыми значениями.

<input type="checkbox" name="checkbox" id="checkbox" required>

<label for="checkbox">Даю согласие на обработку персональных данных</label>

Связав элементы input и label, пользователь сможет выбрать checkbox кликнув по тексту.

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

Checkbox передает данные булевого типа true (правда) или false (лож). С этими данными уже могут работать скрипты обработчики как на стороне сервера, так и на стороне клиента.

Кнопка отправки

Кнопку можно создать с помощью тега button и уже привычного тега input. Какой тег выбрать зависит от предпочтений разработчика.

Разница этих тегов в том, что button имеет открывающий и закрывающий теги. Это позволяет поместить внутрь кнопки како-то элемент, например иконку или применить к элементу псевдоэлемент html.

Input в свою очередь является одинарным и не имеет закрывающего тега. Это не позволяет размещать другие элементы внутри тега и применять к нему псевдоэлементы. Текст кнопки при этом размещается в атрибуте value.

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

Значение атрибута type для кнопки

При использовании тега input в качестве кнопки отправки формы используется type=”submit”. Таким образом браузер поймет роль тега input в структуре html.

Для атрибута type тега button существует несколько значений:

• type=”submit” — инициирует отправку данных формы на сервер
• type=”button” — сообщает браузеру о том, что это кнопка для интерактивных элементов страницы.
• type=”reset” — очищает элементы формы до первоначального состояния. Делает так называемый сброс.

Для того, чтоб браузер понял то, что роль button заключается в отправке формы необходимо использовать атрибут type=”submit”. При необходимости дать пользователю возможность удалить введенные данные одним кликом можно дополнительно использовать button где type=”reset”.

Готовая html форма

Выше были подробно разобраны все элементы формы из примера. Пришло время собрать html форму из разобранных выше элементов.

Форма из примера содержит элементы:

1. Поле имя (с текстовым описанием label)
2. Поле телефон (с текстовым описанием label)
3. Поле Email (с текстовым описанием label)
4. Чекбокс (checkbox)
5. Кнопка отправки (button)

Готовый код будет выглядеть так:

<form action="/script.php" method="POST" class="my-form">

      <label for="name_user">Введите свое имя</label>

      <input type="text" name="user_name" id="name_user" class="input name-input" placeholder="Имя" required>

      <label for="phone-input">Введите свой телефон</label>

      <input type="tel" name="phone" id="phone-input" class="input phone-input" placeholder="+7(999)999-99-99" pattern="^\+\d{1}\(?\d{3}\)?\d{3}-?\d{2}-?\d{2}$">

      <label for="mail-input">Введите свой Email</label>

      <input type="email" name="email" id="mail-input" class="input mail-input" placeholder="sharash_montazh@mail.ru">

      <div class="container-checkbox">

        <input type="checkbox" name="checkbox" class="checkbox" id="checkbox" required>

        <label for="checkbox">Даю согласие на обработку персональных данных</label>

      </div>

      <button class="btn">Отправить</button>

    </form>

Элемент <div class=”container-checkbox”> здесь применен исключительно для стилизации и играет роль контейнера <input type=”checkbox”> и <label></label>. На работоспособность формы этот элемент никак не влияет!

Файлы scrip.js и script.php

HTML форма позволяет принять и передать данные пользователя. Но для того, чтоб отправить данные на почту потребуется обработать данные на сервере, в результате чего будет сформировано письмо и отправлено непосредственно на почту.

Серверный обработчик script.php

В файле обработчика на сервере отправка письма происходит в три этапа.

Этап 1. Получение данных формы и присваивание их соответствующим переменным.

$user_name = $_POST["user_name"];

$phone = $_POST["phone"];

$email = $_POST["email"];

Этап 2. Подготовка содержимого письма к отправке. Все, что нужно сделать на этом этапе, так это поместить содержимое переменных с полученными данными в переменную $message.

$message = "Имя: $user_name\n";

$message .= "Телефон: $phone\n";

$message .= "Email: $email\n";

Этап 3. Создание переменной $to с адресом получателя.

// Почтовый ящик для получения формы

$to = "your-email@example.com";

Этап 4. Создание переменной с темой письма. Содержимое переменной $subject будет пометкой письма, которое поможет определить откуда именно отправлено письмо.

$subject = "Письмо с главной страницы";

Этап 5. Создание переменной $headers с заголовками письма. В заголовках обязательно указывается тип контента и кодировка. Так же можно указать почту отправителя.

$headers = "From: webmaster@example.com\r\n";

$headers .= "Content-Type: text/plain;charset=utf-8\r\n";

Этап 6. Отправка письма. Отправка письма осуществляется с помощью php функции mail(), аргументами которой будут созданные ранее переменные.

mail($to, $subject, $message, $headers)

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

// Перенаправляем пользователя на страницу благодарности

header("Location: thank-you.html");

Так же можно выводить сообщение об успешной отправке письма или наоборот — о ошибке передачи данных. Для этого можно воспользоваться условием if(), где в качестве условия будет функция mail() со всеми аргументами.

Представленный код php обработчика является выжимкой основных элементов файла и представлен для демонстрации принципа работы обработчика. Он не содержит проверок и валидации. Использование его в таком виде будет плохой идеей.

Файл валидации и передачи данных на сервер script.js

Стать создана в первую очередь для понимания html структуры формы из примера и общего принципа передачи письма на почту. К тому же в принципе можно вообще обойтись без него. Поэтому я не буду подробно разбирать здесь код этого файла. Его можно взять уже готовый со всеми пояснениями здесь.

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

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

Технология AJAX (Asynchronous JavaScript and XML) представляет собой набор технологий, позволяющих выполнять асинхронные запросы к серверу из браузера. Она обеспечивает обновление части веб-страницы без полной перезагрузки, что приводит к более динамичному и отзывчивому пользовательскому интерфейсу.

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

Это по сути те функции, которые несет в себе скрипт файла script.js (имя файла может быть любым другим).

Стилизация формы

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

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

Все эти эффекты достигаются с помощью css. Если быть точнее, то благодаря применению псевдоклассов и специальных свойств, которые находятся в файле css стилей. О использовании css свойств для формы рассказано здесь.

Подведем итог

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