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

Делаем форму обратной связи на сайте

Говорят, что если программист может написать форму обратной связи, он может написать всё.

Форма обратной связи — древнейшее программистское искусство. Тут есть всё: форма с проверкой, приём запроса, обработка, безопасность, хранение и ответ. Это как Hello World, только для самых крутых.

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

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

Чтобы сделать у себя на сайте такое, нам понадобится:

Сервер для PHP

Для того, чтобы PHP-код исполнялся, нужен какой-то компьютер-исполнитель. Мы называем его сервером — то есть «раздающим». На сервере должна работать программа для PHP, которое отвечает за правильную обработку таких файлов.

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

Готовим страницу с формой

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

Пропишем CSS-стили, чтобы наша страница выглядела опрятно. Забежим немного вперёд и используем в стилях разделы input и textarea :

Чтобы сделать форму на странице, мы будем использовать такие теги:

— для ввода имени, почты для связи и темы письма. Они занимают одну строку, нам этого достаточно.

— здесь будут писать само сообщение, поэтому нужно будет сделать это поле побольше и пошире.

Ещё мы воспользуемся тегом

Пишем обработчик формы на PHP

Когда мы заполним и отправим форму на нашей странице, произойдёт следующее:

Логика работы PHP-программы будет такая:

Отправляем PHP-скрипт на сервер

Последнее, что осталось сделать — загрузить файл скрипта на сервер. Для этого сохраним его как post.php и загрузим по адресу mihailmaximov.ru/projects/mail/post.php. Если у вас ещё нет своего сервера, можете использовать этот скрипт для тестирования формы обратной связи.

Как загружать файлы, мы рассказывали в статье про публикацию сайта в Сети, поэтому просто сделаем всё по той инструкции:

Теперь, когда мы обновим HTML-страницу, заполним все поля и нажмём «Отправить», на указанную почту придёт письмо с нашим сообщением. Это значит, что форма работает, а мы с вами сделали очередной полезный проект!

Что дальше

Дальше как обычно — улучшаем.

Источник

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

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

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

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

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

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

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

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

Получим следующую форму.

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

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

Элемент является универсальным, в отличии от элемента

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

Изменим нашу форму.

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

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

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

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

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

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

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

Добавим две кнопки:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

input type= «file» value=»Выберите файл»>

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

Выбор даты

Добавим в нашу форму возможность выбора даты.

Выпадающий список

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

Переключатели

Переключатели бывают зависимые — можно выбрать только один вариант и независимые.

Зависимый переключатель

Зависимый переключатель создается с помощью тега input и его атрибута type= «radio». Соответственно в зависимом переключателе можно выбрать только один варинат.

Независимый переключатель

Независимый переключатель создается с помощью атрибута type=»checkbox». В нем можно выбирать несколько вариантов.

Добавим эти элементы на нашу форму.

На этом заметка о HTML-формах подходит к концу. Задавайте ваши вопросы в в комментариях.

Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.

Источник

Современные формы на HTML5 и CSS3

Дата публикации: 2013-02-08

От автора: давайте рассмотрим создание функциональной формы html5, производящей валидацию пользовательских данных на стороне клиента. Сделав это, мы улучшим ее с помощью CSS, в том числе CSS3!

Шаг 1: Формирование представления о функциональности

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

Адрес электронной почты

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Шаг 2: Разработка формы

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

Видите, нашу форму составляют следующие элементы:

Заголовок
Обозначение обязательных для заполнения полей

Названия полей ввода

Поля ввода данных
Текст-заполнитель

Кнопка «Отправить» (Submit)

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

Шаг 3: Первичный код HTML

Вплоть до этого момента HTML-файл в браузере пока пуст. Это – просто начальный код для страницы HTML5.

Шаг 4: Форма HTML

Давайте создадим форму HTML (оставим метод action пока пустым, так как проверка данных на стороне сервера в этом учебнике не раскрывается):

Шаг 5: Элементы формы HTML

Для получения организованного и структурированного контента своей формы, обернем ее элементы (label, input и т.д.) в список. Так что начнем мы с создания заголовка формы и первого элемента input:

Подсказки для полей формы

Как видно из макета, мы собираемся сделать форматированные подсказки для полей ввода электронного адреса “email” и вебсайта “website”. Поэтому добавим свои подсказки под поля ввода, где это нужно, и назначим им класс, чтобы можно было позже определить им стили.

Остальные элементы input

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

Шаг 6: Добавляем атрибут placeholder

Одно из первых усовершенствований, которые предлагает HTML5 для веб-форм (с которым вы, возможно, уже знакомы) – это способность установить текст-подсказку. Он показывается, когда поле ввода либо пустое, либо находится не в фокусе.

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

Подсказка: Назначьте placeholder’у стили

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

В современных браузерах поддержка атрибута placeholder налажена довольно хорошо (кроме IE9, к сожалению). Если вам реально требуется поддерживать его во всех браузерах, можно посмотреть решение проблемы в javascript.

Шаг 7: Основной CSS

Чтобы создать для формы некую структуру, давайте добавим немного основного CSS. Я прокомментирую вам правила:

Удалите стиль :focus

Webkit автоматически добавляет к input-ам стили, когда те находятся в фокусе. Так как мы будем добавлять собственные стили, то стили по умолчанию нужно отменить:

Типографские стили

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

Стили списка

Давайте назначим стили элементам списка, чтобы придать форме структуру:

Кроме того, добавим тонкую рамку к верхнему и нижнему разделам формы. Выполнить это можно, применив селекторы :first-child и :last-child. Они выбирают, как подразумевается в их названиях, первый и последний элементы списка ul.

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

Заголовок формы

Назначим стили разделу заголовка своей формы. Он включает тэг заголовка и уведомление, которое информирует пользователей о том, что звездочка (*) обозначает поля, обязательные для заполнения.

Элементы input

Давайте назначим стили основным элементам формы, тем, которые предназначены для сбора пользовательской информации.

Теперь добавим несколько дополнительных визуальных стилей CSS. Некоторые из них видны только пользователям современных браузеров.

Шаг 8: Добавляем интерактивность с помощью CSS3

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Теперь с помощью CSS3 для поддерживающих браузеров сделаем увеличение поля гладким переходом.

Шаг 9: Атрибут required в HTML5

Теперь пора заняться долгожданным: инструментами управления формой HTML5.

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

Итак, продолжим и добавим атрибут required во все элементы своей формы (потому что нам нужно, чтобы они все были заполнены).

Шаг 10: Стили обязательных для заполнения полей

Вы, возможно, заметите, что в визуальном плане от добавления атрибута required ничего не изменилось. Мы собираемся назначить стили обязательных для заполнения полей с помощью CSS. В этом примере каждое поле в качестве фонового изображения получит красную звездочку. Чтобы это сделать, нам нужно сначала добавить padding справа input-а, где будет находиться фоновое изображение (так будет предотвращено наложение текста, если запись окажется длинной строкой):

Теперь воспользуемся псевдоселектором CSS :required для того, чтобы выбрать все элементы формы с нужным атрибутом. Я сделал в photoshop’е простую иконку с красной звездочкой размером 16×16 px, которая послужит визуальным индикатором поля, обязательного к заполнению.

Что происходит при отправке формы?

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

В quirksmode можно посмотреть поддержку текущим браузером атрибута required.

Подсказка:

На самом деле в webkit назначить стили сообщению в поле-«пузыре» можно с помощью следующего:

Шаг 11: Понимание новых атрибутов type и валидации на стороне клиента в HTML5

Валидация HTML5 работает в соответствии с атрибутом type, установленном в полях формы. Годами HTML поддерживал лишь горстку атрибутов type, таких, как type=»text», но у HTML5 имеется более дюжины новых типов ввода данных, включая электронную почту и url, которые мы и собираемся использовать в своей форме.

Сочетая атрибуты ввода type с новым атрибутом required, теперь браузер способен делать валидацию данных пользователя на клиентской стороне. Если браузер пользователя не поддерживаем новые атрибуты type, такие как type=»email», он просто по умолчанию вернется к type=»text». Действительно, это довольно забавно. По сути, у вас есть обратная совместимость со всеми браузерами в мире, ура!

Так что происходит, если браузер на самом деле поддерживает новые атрибуты type? Для браузеров десктопов визуально нет никакой разницы (кроме определенной пользовательскими правилами CSS). Поле type=»text» выглядит точно так, как поле type=»email». Однако для браузеров мобильных устройств в отношении пользовательского интерфейса разница имеется.

Пример: iPhone

iPhone от Apple’а распознает типы формы и динамично изменяет экранную клавиатуру, предоставляя требуемые по контексту символы. Например, все электронные адреса требуют следующих символов: “@” и “.” И iPhone предоставляет эти символы, когда у input-a задан соответствующий тип.

Шаг 12: Изменение атрибутов type

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

Источник

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

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

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

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

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

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

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

Больше на эту тему можно почитать в статье с вредными советами, которые помогут испортить ваш landing page.

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

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

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

Давайте, кратко объясню, что тут к чему. В теге ‘form’ я размещаю два параграфа. В одном будет заголовок формы, а второй послужит для вывода сообщений и уведомлений, возникающих при отправке формы. Например, о том, что сообщение успешно отправлено в варианте, когда все происходит без перезагрузки.

Под каждым полем создаю ‘div’ для вывода уведомлений об ошибках при валидации ‘.contact-form__error’.

Параметр ‘enctype’ в теге ‘form’ нужен для того, чтобы отправлять файл. Пока можете его не писать, но, если планируете сделать так, чтобы пользователь мог прикрепить вложение к письму, то нужно оставить все как есть.

Далее, для простоты работы с js воспользуемся jQuery. Подключаем его, как обычно, перед всеми скриптами, которые зависят от него. Я, обычно, делаю это ближе к закрывающему тегу ‘body’, чтобы основной контент грузился быстрее.

Структура проекта

Здесь нас интересует папка ‘mail’. Именно тут и происходит вся магия.

Обратите внимание, что она лежит в корне сайта.

В первую очередь давайте разберем файл ‘config.php’. Тут задаются основные настройки формы.

Основные настройки формы

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

В начале идут константы, которые отвечают за проверку обязательно ли поле или нет и какое сообщение будет выводится в случае ошибки. Например, константы для имени

То есть если имя обязательно, но не было заполнено, появиться сообщение ‘Поле обязательно для заполнения’. Вот так:

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

Можете вывести любое сообщение, которое подходит в вашем случае.

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

пароль и логин у каждого свои, а ‘HOST’ и ‘PORT’ для популярных почтовых сервисов я приведу в списке.

Будьте внимательны с этими параметрами, так как тут легко сделать ошибку и ничего приходить не будет.

С остальным все проще, объяснять по сути и нечего:

Обратите внимание, что почта, указанная в ‘const SENDER’ должна совпадать с почтой, которую указали в ‘LOGIN’.

Валидация формы перед отправкой

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

Все вам понадобится дополнительная валидация, все это реализовано в файле ‘valid.php’.

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

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

Отправка формы

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

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

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

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

Стили специально не добавлял в статью, так как статья и так очень большая. В исходнике все есть.

Переброс на страницу благодарности

Итак, открываем файл ‘mail.js’, находим участок кода:

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

Делать мы это будем при помощи php, поэтому убедитесь, что страница благодарности у вас сохранена именно в этом формате.

Если у вас уже страница в ‘html’, просто измените расширение. Это никак не повлияет на работоспособность.

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

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

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

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

Если вам важен такой функционал, то раскомментируйте ее и настройте приемлемое время.

Маска ввода номера телефона

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

Для маски ввода номера телефона нам понадобиться сторонний скрипт. Я предлагаю взять ‘jQuery Mask Plugin’ из статьи, ссылку на которую дал выше.

Подключаем после jQuery. Я делаю это так:

Теперь необходимо инициализировать скрипт.

После этого маска успешно появилась в поле телефона:

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

Область для ввода сообщения

Конечно же многим из вас может понадобится поле для ввода сообщения. Для того, чтобы получить его мы воспользуемся тегом ‘textarea’. Добавьте следующую разметку в форму:

Стили я уже добавил в ‘style.css’, так что теперь наша форма выглядит так:

Теперь необходимо передать данные в файл валидации ‘valid.php’ и проверить все ли в порядке. Как уже говорил выше, у нас простейший случай с проверкой не пустое ли поле. Прежде чем перейти к реализации валидации давайте предположим, что поле для ввода текста обязательно для заполнения.

Для этого перейдем в файл ‘config.php’ и укажем ‘true’ в константе, отвечающей за это текстовое поле.

Теперь наше текстовое поле стало обязательно для заполнения. В файле ‘valid.php’, по аналогии с другими полями напишем такую проверку:

Обратите внимание на ‘text’ в проверке POST запроса. Этот то самое значение, которое указывали в параметре ‘name’ у тега ‘textarea’.

В файле ‘mail.js’ сохраним ‘div’ в который будем выводить ошибку, если валидатор ее вернет для текстового поля:

А затем, ниже, напишем проверку:

По аналогии вы можете добавлять любые другие поля. Но прежде нужно передать нашу переменную ‘$text’ в тело письма. Делается это в файле ‘mail.php’ в 34 строке, той самой, о которой я уже упоминал выше.

Теперь, если все сделали правильно, в письме будут приходить данные и из этого поля.

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

Checkbox

Настало время добавить ‘checkbox’ с соглашением на обработку персональных данных. Вы можете делать и другие чекбоксы или радиокнопки. Принцип один и тот же для всех полей.

Создаем разметку в форме, определяем в ‘config.php’ обязательно ли поле, проверяем в валидаторе и формируем ошибку если она есть и выводим при помощи mail.js ее обратно в форму. Если нет, то передаем в mail.php и отправляем.

Итак, checkbox. Добавим разметку:

Не забудьте указать ссылку на соглашение. Стили уже добавлены в исходник.

Идем в файл ‘config.php’ и делаем поле обязательным.

Далее открываем файл ‘valid.php’ и добавляем следующий код:

Теперь переходим в файл ‘mail.js’ добавляем ‘div’ в который будет выводится ошибка, если она есть, и обработчик ошибки:

Осталось в тему письма добавить переменную с текстом о принятии соглашения.

В принципе, если поле обязательно модно было этого и не делать, но пусть лучше будет.

Добавление файла

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

Настройки в файле ‘config.php’:

Вот так теперь выглядит форма.

А вот так выглядят пришедшие данные.

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

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

Источник