Скрипт формы обратной связи html

Скрипт формы обратной связи html

Не секрет, что очень часто приходится как-то общаться с посетителями своего сайта. Разумеется, можно просто дать свой e-mail (как сделал я), а можно предложить и другой способ — это форма обратной связи. Разумеется, здесь потребуется знание PHP. Но чтобы Вам не надо было писать всё с нуля, я предоставляю Вам очень даже хороший скрипт формы обратной связи.

После скачивания извлекайте архив на Ваш сайт (смотрите, ничего не сотрите у себя). Теперь давайте его настроим. Для этого открываем файл "config.php". И меняем значения следующих переменных:

  1. "mailto" — поставьте вместо "[email protected]" адрес своего почтового ящика.
  2. "charset" — поставьте кодировку, хотя если Ваш сайт русскоязычный, то можете оставить "windows-1251".
  3. "content" — советую оставить "text/plain", так как вряд ли Ваши посетители будут отправлять Вам сообщения в HTML-формате.

Теперь Вы можете запустить файл index.php у скрипта. В результате, перед Вами возникнет форма. Можете её заполнить и отправить письмо.

Теперь встаёт вопрос: "Как вставить эту форму обратной связи на свой сайт?". Чтобы это сделать, найдите файл, который отвечает у Вас за страницу обратной связи (пусть это будет "feedback.html"). Сразу измените расширение на php (то есть на "feedback.php"). Скопируйте код из index.php скрипта в файл со страницей обратной связи (feedback.php). Теперь Вы можете делать всё, что пожелаете нужным между тегами и , только не стирайте то, что Вы вставили из index.php. То что между тегов тоже не трогайте, если точно не знаете, что делаете.

И, наконец, если Вам не нравится внешний вид формы, то Вы можете его подкорректировать в файле "styling.css".

Если у Вас остались какие-либо вопросы, либо происходят какие-то глюки со скриптом (я его не тестировал), то пишите мне на e-mail, чтобы я исправил.

Чтобы не зависеть от работы чужих скриптов, научитесь их создавать самостоятельно. Этому Вас научит мой Видеокурс "PHP и MySQL с Нуля до Гуру": http://srs.myrusakov.ru/php

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 88 ):

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

    Как Вы добавляли этот скрипт на Joomla? Опишите поподробнее последовательность действий.

    Извлекла архив и все содержимое папки "sendmail" бросила в корневой каталог сайта. В файле "config.php" ввела в "mailto" свой адрес и др. по тексту. Из "index.php" скопировала от " " до " " и вставила в созданный материал сайта joomla. Все. Пишу письмо и делаю отправить. Идет переброс на главную и все. В почте пусто.

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

    Почему бессмысленная? В joomla есть возможность вставлять подобные скрипты, а Ваш скрипт мне понравился. Но мне кажется, загвоздка в е-мейле — как-то он не так или не там прописан. Вы можете помочь или нет)

    Вы неправильно делаете, поэтому я Вам и советовал выбрать путь полегче. А если хотите трудностей, то, во-первых, Вы скопировали в материал от html до html. А всю обработку просто взяли и выкинули. Поэтому нужно вставить скрипты. Для этого существует компонент Jumi. Он позволяет в статьи добавлять скрипты. И так: 1. Скачать и установить Jumi. 2. Соединить в один файл все файлы скрипта, только аккуратно, чтобы не возникло ошибок. 3. Далее создать материал, куда вставить всё, что внутри body, а также подключить через Jumi в эту же статью скрипт, который Вы собрали в один файл. Как видите, задача непростая будет, но вполне осуществимая.

    Я хочу трудностей))), потому что на сайте хочу сделать несколько похожих форм на разных страницах. И большое спасибо Вам за пояснения, но не могу установить ни одного компонента. На локальном компьютере все понятно, но в сайте на хостинге я не знаю в какую папку сбросить компонент, чтобы его загрузить на сайт через "компонент-установить". Может Вы знаете. Буду очень благодарна.

    В "Установке расширений" просто укажите архив для загрузки (первое поле там). И загрузите, после чего оно автоматически установится. http://myrusakov.ru/joomla-ustanovka-extensions.html

    Я именно так и делала, если устанавливаю через "Загрузить файл пакета" — пишет ошибку: JFolder::create: Невозможно создать каталог Unable to write entry". Если "Установить из папки", указываю папку на хостинге, то пишет "Укажите папку пакета". Что я делаю не так?

    Установите права 777 на все каталоги. И посмотрите, правильно ли прописаны пути к tmp.

    У Вас есть скайп-так быстрее будет))) Права стоят 777.

    Скайпа нет, ICQ только для клиентов. Для остальных комментарии, форум (с 30-го апреля) и почта. Кстати, такая проблема ещё возникает, когда включён safe mode. Если он включён, то установить можно только сохранив сайт на локальный сервер, установить расширение, а после отправить обратно на удалённый.

    А где посмотреть включен или нет?

    Помощь->Информация о системе->Установки PHP. По-моему, первый же параметр это "Безопасный режим".

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

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

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

    Формы обратной связи на сайт — что выбрать

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

    Читайте также:  Копирование динамических массивов c

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

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

    Допустим, сегодня я делаю блог на Ворпдрессе (только по этой инструкции), завтра на Джумле, послезавтра на Друпале, в выходные делаю интернет-магазин на Опенкарте, затем верстаю лендинг страницу на чистом HTML5 + CSS3… И во всех проектах мне нужна эта форма, будь она неладна.

    Вот скажите мне — это же сколько времени нужно потратить, чтобы к каждому отдельному сайту подобрать скрипт или плагин, удовлетворяющий требованиям? Ну ладно, допустим ты блоггер, работаешь с одним Ворпдрессом и по умолчанию в твоей сборке WordPress есть какой-нибудь плагин wp-contact-form-7.

    Остальным-то что делать?

    Поэтому я и предлагаю работать с кодом. Ваша персональная «карманная» форма обратной связи на языке PHP и HTML может быть супер гибкой, с множеством полей и AJAX, но она должна:

    • Быть в наличии в одной из ваших бесконечных папок со скриптами.
    • Работать всегда и везде.
    • Не требовать танцев с бубном при встраивании на сайт.

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

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

    Я же предлагаю сэкономить:

    И поэтому мы будем использовать удобные, готовые универсальные скрипты, которые подойдут и динамическим сайтам на CMS, и статическим сайтам на HTML. Ведь в вопросе «как сделать милую и красивую форму обратной связи» нет «с нуля, разработать, написать, своими руками, самостоятельно». И правильно. А зачем?

    HTML&PHP форма (и скрипт) обратной связи для блога, сайта

    Скачайте просто скрипт Simple Send Mail или другую его версию Simple Send Mail Order с сайта landman.ru.

    Вот какие формы вы получите:

    Обратите внимание, скрипты поставляются с встроенной каптчей. Второй скрипт (Simple Send Mail Order) имеет одно отличие — он одновременно отправляет два письма. Одно заказчику, другое — вам.

    Как сделать одну из таких форм обратной связи на сайте? Качайте архив, закачивайте файлы из архива на сайт в каталог /sendmail, настраиваете конфигурационный файл config.php (прописываете свой email, другие настройки) и можно пользоваться — скрипт формы обратной связи готов к работе. Покажу как выглядит конфигурационный файл:

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

    Вставка на сайт производится просто:
    — можете дать ссылку на /sendmail/index.php
    — можете сразу вставить на страницу, при помощи кода

    Код можно найти на сайте, ссылка на который размещена выше.

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

    Super (AJAX) Contact Form — русифицированная версия формы обратной связи

    Работает эта штучка на чистом PHP + jQuery & AJAX — очень удобно для блога или небольшого интернет-магазина. Пример формы:

    Как выглядит конфиг внутри («codeassetsxmlconfig.php»):

    Конфиг для настройки полей («codeassetsxmlfields.php»):

    Установка скрипта формы для связи SuperAJAX ContactForm ничем не отличается от инструкции по установке другого скрипта выше. Содержимое архива закачиваете на сервер и пользуетесь.

    Преимущества этой формы над предыдущей:
    — более эстетично привлекательная
    — используется проверка полей, ошибки выводятся через AJAX
    — подробнейшая инструкция по установке и настройке внутри
    — есть подсказки под полями

    Например, посмотрите как в этой форме связи выводятся ошибки:

    Выглядит неплохо! А вот что увидит пользователь, после успешной отправки сообщения:

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

    Вы также можете посмотреть интересный видеоурок по данному скрипту:

    Итак, вы познакомились с двумя функциональными скриптами и можете выбрать свой. Но не торопитесь, потому что вас еще ждет третий PHP-cкрипт формы обратной связи для блога. Тот, которым я пользуюсь уже наверное года два с лишним.

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

    Итак, на одном сайтов установлена вот такая «кнопка»:

    Если нажать на нее, вниз «выпадет» форма обратной связи:

    На другом сайте установлена всплывающая (popup) форма обратной связи, выглядит она так:

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

    Очень удобно. Вот код для работы формы как в первом случае:

    div id = "form" >
    p > a style = "text-decoration: none; border-bottom: 1px dotted; cursor: pointer;" id = "forma0" > Заказать звонок / a > / p >

    div id = "forma1" style = "display:none; background-color: #fff;" >
    script src = "sendmailforms/jquery.maskedinput-1.2.2.min.js" type = "text/javascript" > / script >
    link rel = "stylesheet" type = "text/css" href = "sendmailforms/form.css" / >
    script src = "sendmailforms/wait_for_call.js" type = "text/javascript" > / script >
    script src = "sendmailforms/ajaxupload.js" type = "text/javascript" > / script >
    script src = "sendmailforms/upload_file.js" type = "text/javascript" > / script >
    div class = "call-me-form" title = "Заказать звонок" button = "Заказать звонок" style = "width: 200px" > / div >
    / div >
    script >
    $("#forma0").toggle(function() <
    $("#forma1").slideDown("slow");
    >, function() <
    $("#forma1").slideUp("slow");
    >);
    / script >
    / div >

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

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

    Приведу содержимое конфиг-файла

    Все! Больше ничего нет, остальное (стили) — вручную. Но они и так везде вручную. При этом форма использует Ajax, выводит сообщения об ошибке, а еще можно задать свою собственную маску номеров. Вот скриншоты:

    После отправки номера, пользователю увидит ваше сообщение, которое также можно задать.

    Скачать форму можно по ссылке, либо с этого блога.

    Это проверенное решение, которым я вполне доволен. Я нашел в этом скрипте для себя несколько преимуществ:

    1. Он присылает URL страницы, с которой была отправлена заявка через форму.

    2. На одной странице может быть несколько таких форм обратной связи и они никак не будут конфликтовать друг с другом.

    Читайте также:  Как узнать модель жесткого диска на компьютере

    3. Форма подгружается не PHP-кодом, а div-блоком — это упрощает ее вставку в любое место сайта на порядок. Можно даже в тексте вставлять, если умеете.

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

    Ну а про онлайн конструкторы и навороченные генераторы скриптов обратной связи — как-нибудь в другой раз. Может заодно еще и формы для WordPress обсудим. Посмотрим.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Скрипт ‘mail.js’ — это файл формы, который помогает в отправке и обработке ответа сервера. О нем чуть позже. Сейчас нужно познакомить вас со структурой всех файлов, отвечающих за отправку.

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

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

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

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

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

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

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

    • ‘const NAMEISREQUIRED = true;’ — означает, что поле обязательно для заполнения. Если в вашем случае его можно не заполнять, то поставьте ‘false’.
    • ‘const MSGSNAMEERROR = «Поле обязательно для заполнения»;’ — это сообщение, которое будет выводится пол полем, в случае если заполнение его обязательно, но по каким-то причинам пользователь этого не сделал.

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

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

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

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

    • Адрес сервера — ( константа HOST )
    • Логин (адрес электронной почты) — ( константа LOGIN )
    • Пароль — ( константа PASS )
    • Порт — ( константа PORT )

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

    Сервис HOST PORT
    Яндекс ssl://smtp.yandex.ru 465
    Gmail smtp.gmail.com 465
    Mail.ru ssl://smtp.mail.ru 465

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

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

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

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

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

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

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

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

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

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

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

    Читайте также:  В каких случаях проверяют диплом на подлинность

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

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

    Если что-то упустил или что-то непонятно — пишите в комментариях, попробую объяснить подробнее или дополнить статью.

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

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

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

    Как и говорил в начале статьи данная форма может работать как без перезагрузки, так и с перебросом на страницу благодарности. Давайте реализуем это. Нам понадобится немного подправить код в файле ‘mail.js’ и сама страница благодарности. На скриншоте со структурой проекта вы видели файл ‘thank-you-page.php’ — это и есть страница благодарности, которую я буду использовать. Как вы могли заметить, он лежит в корне. У вас она может быть где угодно, главное правильно указать к ней путь.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Совсем подробно расписывать не буду, просто покажу что и куда добавляю, а в конце дам ссылку на исходник. Если какое-то из полей вам не понадобится, то просто не используйте его в разметке, а в файле ‘config’ — установите значение ‘false’ там, где задаем обязательность заполнения.

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

    Конечно же многим из вас может понадобится поле для ввода сообщения. Для того, чтобы получить его мы воспользуемся тегом ‘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’:

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

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

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

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

    Ссылка на основную публикацию
    Сколько рублей получают ютуберы
    Видеохостинг YouTube — не только развлекательная площадка, но и хороший источник дохода. Тысячи пользователей выкладывают ролики, пытаясь привлечь внимание аудитории....
    Самый дорогой самсунг 2018
    Samsung / Самсунг - южнокорейская компания, ведущий производитель смартфонов в мире. В первом квартале 2018 года доля Самсунг на мировом...
    Самый лучший smart tv
    Ежегодные обновления телевизионных технологий делают телевизоры уже больше, чем обычным экраном для демонстрации каналов. Растет популярность функции Smart TV, которая...
    Сколько света мотает компьютер
    Выбирая комплектующие для персонального компьютера (ПК) обычно обращают внимание на производительность и объем памяти, порой забывая о том, сколько же...
    Adblock detector