Как сделать кнопку отправки формы

Работа с формами в PHP

Формы

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

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

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

Практически любой современный сайт содержит как минимум несколько разных HTML-форм.

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

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

Это очень простая форма, состоящая из трёх полей и одной кнопки отправки.

Почти весь приведённый код описывает внешний вид и содержание формы, но следует обратить внимание на два атрибута тега

Тут есть два важных отличия от первого примера:

PHP автоматически сохраняет все загруженные файлы во временную папку на сервере. Но хранить там файлы нельзя, потому что эта директория периодически очищается, и ссылку на такой файл нельзя дать на сайте. Решение здесь только одно — переместить загруженный файл в другую папку. Перемещение файла всегда выполняют сразу после загрузки.

Перемещение загруженного файла

Код для перемещения файла в новую папку:

Функция move_uploaded_file() выполняет два действия:

Валидация формы

Валидация формы — это проверка содержимого её полей. Задача такой проверки — убедиться, что необходимые поля заполнены, а значения в них соответствуют ожидаемому формату.
Так, например, при регистрации пользователя на сайте, он должен заполнить поля с адресом электронной почты и придумать себе пароль. Оба поля обязательны к заполнению, но значение из поля email также должно быть корректным email-адресом.
Помимо текстовых значений формы, можно проверять формат и размер загружаемых файлов.

Общий подход к валидации

При выполнения валидации любой формы порядок действий будет всегда одним:

Источник

HTML Формы

Формы предназначены для пересылки данных от пользователя к веб-серверу. Формы в HTML могут состоять из текстовых полей и текстовых областей, флажков и переключателей, а также раскрывающихся списков. Все это — элементы формы. Каждый элемент служит для того, чтобы передать какое-либо значение сайту.
По своей сути HTML-форма — это веб-страница на которой вы видите области для ввода своей информации. После того, как вы заполните форму и нажмете кнопку отправить, информация из формы упаковывается и отсылается веб-серверу для обработки серверным сценарием (файлом-обработчиком). После обработки к вам возвращается в качестве ответа другая веб-страница. Следующий рисунок наглядно демонстрирует как работает форма:

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

Пример: Простая HTML-форма

Моя первая форма:
Имя:
Фамилия:

Элемент —>

Вместе с этим атрибутом можно использовать атрибут maxlenght, значение которого определяет максимальное количество символов, которые можно ввести в данную строку. Можно также задать длину поля ввода, используя атрибут size. По умолчанию, в большинстве браузеров ширина текстового поля ограничена 20 символами. Для управления шириной элементов новых форм, вместо атрибута size, рекомендуется использовать средства каскадных таблиц стилей (CSS).
Атрибут value задает значение, которое по умолчанию отображается в текстовом поле в момент загрузки формы. Введя в поле значение по умолчанию, можно пояснить пользователю, какие именно данные и в каком формате вы хотите, чтобы пользователь сюда занес. Это как образец, ведь пользователю гораздо удобнее заполнять форму, видя перед собой пример.

Переключатели (radio)

Элемент типа radio создает переключатели, которые используют принцип логического «ИЛИ», позволяя выбрать только одно из нескольких значений: если вы выбираете одно положение, то все остальные становятся неактивными. Основной синтаксис элемента-переключателя:

Атрибут name для переключателей обязателен и играет важную роль в объединении нескольких элементов-переключателей в группу. Для объединения переключателей в группу необходимо установить одинаковое значение атрибута name и разное значение атрибута value. Атрибут vаluе устанавливает значение выбранного переключателя, которое будет отправлено серверу. Значение каждого элемента-переключателя должно быть уникальным внутри группы, для того, чтобы сервер знал, какой вариант ответа выбрал пользователь.
Наличие атрибута checked (с англ. — установлен) у элемента-переключателя указывает на то, какой из предлагаемых вариантов должен быть выбран по умолчанию при загрузке страницы, если это необходимо. Данный атрибут может быть установлен только у одного элемента-переключателя из группы:

Пример: Использование переключателей

Флажки (checkbox)

Элемент типа checkbox создает флажки, которые напоминают переключатели тем, что дают пользователю возможность выбирать из предложенных вами вариантов. Главным отличием от переключателей является то, что посетитель может выбрать сразу несколько вариантов, а сами флажки обозначаются квадратиками, а не кружочками. Как и в случае с переключателями, группа флажков создается путем назначения каждому пункту одного и того же значения атрибута name, однако каждый флажок имеет собственное значение. Основной синтаксис флажка:

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

Пример: Использование переключателей

Какие музыкальные жанры Вы любите?

Кнопки подтверждения (submit) и очистки (reset)

Пример: Использование submit и reset

Подпишись на рассылку новостей:

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

Атрибут action.

Главным для элемента

Атрибут method

Атрибут method задает то, каким образом информация должна быть передана на сервер. Выбор метода отправки формы зависит от данных, которые необходимо отправить вместе с ней. Здесь основную роль играет объем этих данных. Наиболее популярными являются два метода передачи исходных данных вашей формы из браузера на сервер: GET и POST. Метод устанавливается любой на выбор, и если вы его не указали, по умолчанию будет использоваться GET. Рассмотрим применение каждого из них.

Метод POST

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

Метод GET

Как вы уже знаете основная работа браузера — это получать веб-страницы от сервера. Так вот, когда вы используете метод GET, ваш браузер просто получает веб-страницу, как делает это всегда. Метод GET также упаковывает данные формы, но, прежде чем отправить запрос серверу, присоединяет их в конец URL-адреса. Чтобы понять, как работает метод GET, давайте посмотрим его в действии. Откройте в блокноте (например Notepad++) первый пример из этого урока (Пример: Простая HTML-форма) и внесите в HTML-код небольшое изменение:

Элемент-переключатель

Добавьте нужные элементы в HTML-код, чтобы в результате получилась форма, приведенная в задании. В качестве имени для всех элементов установите name=»genre», а значения (value) соответственно: «rock», «pop» и «jazz».

Однострочное поле ввода текста

Добавьте нужные элементы в HTML-код, чтобы в результате получилась форма, приведенная в задании. В качестве имени (name) текстовых полей установите по порядку:»firstname», «lastname» и «login».

Значения по умолчанию

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

Кнопки отправки данных и сброса

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

Источник

Несколько кнопок отправки в HTML-форме

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

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

23 ответов:

Я надеюсь, что это помогает. Я просто делаю трюк float ing кнопки справа.

таким образом, кнопка Prev находится слева от следующей кнопки, но следующая идет первой в HTML-коде:

Edit: преимущества перед другими предложениями: нет JavaScript, доступны, обе кнопки остаются type=»submit»

можно ли было бы изменить предыдущий тип кнопки на такую кнопку:

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

надеюсь, что это поможет.

дайте вашим кнопкам отправки такое же имя, как это:

когда пользователь нажимает enter и запрос идет на сервер, вы можете проверить значение для submitButton на вашем серверном коде, который содержит коллекцию form name/value пар. Например, в классическом ASP:

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

Если вы действительно просто хотите, чтобы он работал как диалог установки, как насчет того, чтобы просто сосредоточиться на кнопке «Далее» OnLoad. Таким образом, если пользователь нажимает Return, форма отправляет и идет вперед. Если они хотят вернуться, они могут нажать вкладку или нажать на кнопку.

поместите их в разметку как следующую кнопку сначала, затем предыдущую кнопку Далее.

затем использовать CSS, чтобы расположить их так, как вы хотите

иногда предоставленного решения @palotasb недостаточно. Есть случаи использования, когда, например, кнопка» фильтр «submit помещается над кнопками, такими как»следующий и предыдущий». Я нашел обходной путь для этого: скопировать кнопка отправки, которая должна действовать как кнопка отправки по умолчанию в скрытом div и поместить его внутри формы над любой другой кнопкой отправки. Технически он будет представлен другой кнопкой при нажатии Enter, а затем при нажатии на видимый далее кнопка. Но поскольку имя и значение одинаковы, нет никакой разницы в результате.

Кевин, это не может быть сделано с чистым HTML. Вы должны полагаться на JavaScript для этого трюка.

однако, если вы разместите две формы на HTML-странице, вы можете сделать это.

Form1 будет иметь предыдущую кнопку.

Form2 будет иметь любые пользовательские входы + следующая кнопка.

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

Я бы использовал Javascript для отправки формы. Функция будет вызвана событием OnKeyPress элемента формы и определит, был ли выбран ключ Enter. Если это так, он отправит форму.

вот две страницы, которые дают методы о том, как это сделать: 1,2. Основываясь на них, вот пример использования (на основе здесь):

это работает без javascript или CSS в большинстве браузеров:

Firefox, Opera, Safari, Google Chrome все работают.
Как всегда, IE-это проблема.

эта версия работает, когда javascript включен:

Так что недостаток в этом решении:
Предыдущая страница не работает, если вы используете IE с отключенным Javascript.
Имейте в виду, кнопка назад все еще работает!

Если у вас есть несколько активных кнопок на одной странице, то можно сделать что-то вроде этого:

отметьте первую кнопку, которую вы хотите триггеры на введите нажатие по умолчанию на форме. Для второй кнопки свяжите его с Backspace на клавиатуре. Backspace eventcode составляет 8.

надеюсь, что это помогает.

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

еще один простой вариант-поместить кнопку «назад» после кнопки «отправить» в HTML-коде, но переместить ее влево, чтобы она появилась на странице перед кнопкой «Отправить».

еще один простой вариант-поместить кнопку «назад» после кнопки «отправить» в HTML-коде, но переместить ее влево, чтобы она появилась на странице перед кнопкой «Отправить».

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

это то, что я пробовал: 1. Вам нужно убедиться, что вы даете своим кнопкам разные имена 2. Напишите оператор if, который выполнит необходимое действие, если нажата какая-либо кнопка.

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

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

имеющая следующие input be type= «submit»и изменение предыдущего ввода на type=» button » должно дать желаемое поведение по умолчанию.

в первый раз, когда я столкнулся с этим, я придумал onclick()/js hack, когда выбор не prev/next, который мне все еще нравится за его простоту. Это звучит так:

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

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

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

на всякий случай, если кто-то ищет asp.net кнопка способ сделать это.

С помощью javascript (здесь jQuery) вы можете отключить кнопку prev перед отправкой формы.

я решил очень похожую проблему следующим образом:

если javascript не включен, то форма подается в браузер с множеством кнопок. В этом случае попадание введите на textfield в пределах формы будет представлена форма с первой кнопкой вместо предполагаемого по умолчанию, но, по крайней мере, форма по-прежнему используется: Вы можете отправить как с prev и далее кнопки.

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

Если вы нажмете на «Предыдущая страница», будет отправлено только значение» prev». Если вы нажмете на «Следующая страница», будет отправлено только значение» далее».

Если, однако, вы нажмете enter где-то в форме, ни «prev», ни «next» не будут отправлены.

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

Источник

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

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

Статья давно на сайте, но пришло время актуализировать ее, ведь с момента написания прошло более 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’:

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

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

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

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

Источник