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


Содержание

Форма обратной связи HTML5 + CSS3 + jQuery + php

Форма обратной связи для сайта на HTML5 + CSS3 + jQuery + php. Валидация и экранирование введенных данных, проверка правильности ввода полей формы обратной связи.

Форма обратной связи HTML5 + CSS3 + jQuery + php

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

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

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

Код простой формы обратной связи для сайта на HTML и PHP

Рассмотрим пример легкой и быстрой формы обратной связи для сайта написанной на html и php.

Почему используется HTML и PHP?

Для CRM, таких как WordPress, Joomla и других можно найти различные плагины для установки формы обратной связи для сайта. Однако, что мне не нравится в таких плагинах, так это часто их низкая производительность и замедление сайта из-за загрузки лишнего «мусора» — ненужных стилей и скриптов. Так как эти плагины все равно выдают в результате тот же код HTML, то предлагаю использовать простую, но полноценно функциональную форму, которую можно изменить под свои нужны, например, под обратный звонок с сайта.

Форма связи на HTML просто вставляется в админке Joomla, WordPress, OpenCart, ModX, а если ваш сайт самонаписный или вы используете любой фреймворк на PHP, то использовать представленный код не составит труда и сайт будет загружаться так же быстро как и раньше.

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

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

  1. Код HTML формы, вставленный на страницу + CSS стили для его оформления.
  2. PHP файл, который и выполняет отправку письма или иное действие для регистрации запроса.

В коде HTML содержится содержится информация, какие поля для ввода нужно заполнять, какие из них обязательны для заполнения, и подписи к ним. Стили CSS отвечает за визуальное оформление формы и отображение данных. При нажатии на кнопку «Отправить» выполняется PHP скрипт на сервере через POST запрос, который отправляет письмо или выполняет иное действие. Скачать исходники можно в конце статьи, а подробнее исходный код формы обратной связи разберем далее.

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

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

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

Рассмотрим атрибуты формы

  • autocomplete=»off» — автозаполнение формы отключено, при повторном заходе на страницу все поля ввода будут обнулены. Рекомендуется автозаполнение отключать, так как при включенном иногда возникали проблемы, что при изменении значений полей формы отправлялись на сервер старые значения.
  • Атрибут action=’email.php’ , в нём указан адрес скрипта, в данном случае PHP, который вызывается и которому передаются данные формы после нажатия кнопки «Отправить» . Если указан не полный путь к скрипту, как здесь, то обращение будет с адреса, на котором размещена форма. Например форма находится по этому адресу http://site.com/feed-back , тогда обращение будет http://site.com/feed-back/email.php . Так же это может быть любой путь, по которому обрабатывается запрос.
  • Атрибут method=’post’ , в этом случае данные отправляются скрытно и не отображаются в адресной строке, другой метод GET отправляет данные формы через адресную строку. В этом случае после адреса строки появляется вопросительный знак «?» после которого идут название поля, его значение, что является небезопасным способом отправлять данные формы. Так, учитывая SEO оптимизацию сайта, данные формы обратной связи для сайта лучше отправлять методом POST, так как данные передаются скрытно, а в случае метода GET у сайта по сути будет доступно множество однотипных страниц, которые отличаются только несколькими параметрами после «?», что приведет к дублям страниц.

Далее внутри тега находится контейнер

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

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

Отправка письма PHP скриптом

Приведем код простого скрипта для отправки письма

Чтобы отправить письмо на нужный email, замените значение переменной $to email@tut.by на необходимый адрес. Переменная $subject — тема сообщения, показывается почтовыми программами при просмотре списков писем. $message — само тело письма, это и есть само сообщение. $headers — шапка письма, в ней указывается тип письма, например HTML, а также: кодировка, от кого доставлено письмо и на какой emal отправлять ответ.

Простой скрипт обработки данных формы HTML в PHP скрипте

Приведем сначала исходный код:

проверяем или используется метод POST

Далее проверяем или были высланы данные с полей ввода

Обратите внимание, что в конструкции $_POST[«username»] название поля совпадает с именем поля username в форме . Поэтому на одной странице названия полей должны быть уникальны, иначе они будут переписывать друг друга.

Функция strip_tags() удаляет HTML и PHP теги из строки. Делается для котого что бы злоумышленники не могли запустить свой код через форму связи.

Функция trim() удаляет пробелы в начале и в конце строки. Далее формируем письмо и все что подготовили отправляем функцией mail() .

Оформление формы обратного звонка для сайта CSS

Приведем код CSS оформления для формы обратной связи сайта.

Разберем подробнее код.

Делаем ширину дива равной ширине родительского блока и ограничиваем максимальную ширину 350px , если шире, то форма HTML выглядит растянутой:

Что бы упорядочить поля и кнопку «Отправить» , обертываем их в div , отображение ставим в flex и направление отображения столбцом column . Для красоты добавляем отступы сверху и снизу на 20px:

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

Для этого дива присвоим отступы сверху и снизу:

Кнопке «Отправить» делаем ширину равной ширине родительского блока и box-sizing присваиваем border-box — расчет ширины по границе, что бы она не выходила за пределы родительского блока:

Аналогично для подписей и полей ввода:

Настраиваем красивый внешний вид подписей и полей ввода:

Звездочку делаем красной:

Оформляем кнопку «Отправить» :

При наведении на кнопку настраиваем изменение цвета:

Обратите внимание, что иногда эти стили могут быть переопределены другими, которые имеют больший приоритет. Что бы усилить приоритет, просто присвойте форме имя через id , например и в CSS файлах тогда обращение идет не через точку, как к классам, а через решетку # , например #obratnuj-zvonok . Тогда достаточно добавить к селекторам в CSS файлах в начало #obratnuj-zvonok , что бы повысить приоритет правил.

Скачать исходный код формы обратной связи

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

Простая форма обратной связи без перезагрузки страницы на PHP+jQuery

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

Сегодня я хотел бы показать самую простую и на 100% рабочую реализацию формы обратной связи без перезагрузки страницы с использованием технологии AJAX (jQuery) и обработки/отправки данных на PHP.

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

Технология AJAX, если вы еще не знаете, позволяет без перезагрузки страницы передать значения в PHP-скрипт (и не только), где, уже приняв эти данные, можно произвести необходимые операции.

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

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

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

1. Первым делом сверстаем форму с нашими полями. CSS-стили мы упустим, так как сейчас нам это не так важно. В качестве полей сделаем «Имя», «E-mail» и поле для ввода сообщения:

Обратите внимание на элемент с классом «result» – в него мы будем выводить сообщения об ошибках или успешном отправлении сообщения.

2. Далее пишем скрипт, который соберет все данные с формы и отправит их в наш PHP-обработчик:

Скрипт вставляем перед закрывающим тегом

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

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

Итак, начнем, как всегда, с обычной заготовки – html . Для начала нам понадобится форма с несколькими полями. Мы возьмем для наглядности и стандарта всех форм 3 поля. Т.е. это будет Имя, Email и телефон.

Каждый input у нас имеет свое уникальное имя name , оно нам понадобится в дальнейшем для отправки сообщений. Вы можете также свободно добавлять свои поля и не только input , но и select , textarea . Только не забывайте каждому из них присваивать свои имена, которые мы будем использовать при отправке на почту информации. Для удобства я добавил каждому полю атрибут required , благодаря которому браузер не позволит пользователю отправить пустые значения и уведомит о необходимости их заполнения.

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

Клиентская часть

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

Если вы хотите все сделать по старинке, то вам понадобится немного подправить верхний html и задать форме значение атрибута method ( post или get ). Все зависит от того, каким способом вы хотите передать данные из формы. А также не забудьте прописать action , который укажет путь к файлу php .

А мы пойдем более продвинутым методом и сделаем отправку данных не перезагружая страницу, и получая ответ от сервера будем выдавать пользователю сообщение об успешной операции, либо ошибке. Однако, нам также понадобятся 2 файла, допустим contact.php и custom.js.

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

Теперь разберемся в схеме действий и зачем нам нужны все эти библиотеки и файлы. Когда пользователь нажимает кнопку отправить, у нас происходит событие submit , которое мы пропишем в custom.js и на основе которого получим все данные из формы и передадим их в файл contact.php. Здесь мы еще раз проверяем, не пустые ли у нас поля (дабы избежать очередной возможности спама), производим отправку сообщения на email и уведомляем о результатах пользователя, которые передаются ответом в custom.js.

Цукерберг рекомендует:  Android - Тема к разработчикам мобильных приложений.

Это самый элементарный пример работы контактной формы. Есть множество вариантов, как доработать файл проверки на php, создание своих классов и т.д. Но наша задача была создать простой и рабочий пример, который можно использовать на своем сайте.

Готовые плагины

Так как вы находитесь на блоге WordPress, то наверняка готовы и стремитесь использовать всевозможные плагины, особенно если вы в программировании и верстке полный ламер. И я вас в этом не виню и могу даже один из них представить вашему вниманию для наглядности. Цель этого абзаца не рекомендация, а лишь пример, так как я использовал плагин Contact Form 7 в нескольких проектах.

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

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

Обратная связь для сайта — Готовая форма обратной связи на HTML!

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

Вот в кое-то веки занялся облегчением своего блога и решил избавиться от лишних плагинов, которые грузят его своим весом и не дают загружаться страницам быстро. И первым делом мой выбор пал на форму обратной связи, вернее на плагин, который ее выводил у меня на сайте «Contact Form 7«, а ему в нагрузку еще требовался второй плагин выводящий капчу «reCaptcha«. Вот таким образом я решил избавиться сразу от двух, довольно весомых плагинов, используя форму обратной связи, которая не требует ни каких плагинов и легка в установке на сайт. Сейчас я вам о ней расскажу и конечно же дам скачать файлы для того, чтобы и Вы смогли себе создать аналогичную обратную связь для сайта …

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

форма обратной связи для сайта

Посмотреть и проверить работоспособность моей формы обратной связи для сайта Вы сможете на странице «Обратная Связь«. Напишите в моей форме для связи на сайте и я вам отвечу!

Теперь давайте перейдем к самому главному и создадим свою собственную, не зависящую ни от каких плагинов обратную связь для сайта …

Делаем обратную связь для сайта без плагинов!

Все, что нам для этого понадобится: мой блог Pribylwm.ru со статьей «Обратная связь для сайта«, текстовый редактор Notepad++ и конечно же ваше желание создать свою собственную форму для связи на сайте, чтобы облегчить его избавившись от не нужных и тяжелых плагинов!

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

Обратите внимание на некоторые важные вещи, которые вам нужно выполнить в этом коде:

  1. Работайте с кодом только в текстовом редакторе Notepad++
  2. Исправьте в первой строке кода путь до файла mail.php , о котором я вам расскажу немного позже

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

Этот файл Вы должны залить на свой хостинг в корневую папку движка сайта! Но сначала проверьте исправили Вы его или нет!

В строке, где написан текст « АДРЕС ВАШЕЙ Е-МАЙЛ ПОЧТЫ НА ХОСТИНГЕ! «, вам нужно обязательно его исправить на свой Е-майл адрес, который у Вас на хостинге. Если у Вас нет почты на хостинге, то обязательно ее заведите. Это не сложно!

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

Вот этот скрипт:

Или можете добавить на WordPress в файл functions.php вот эту функцию:

Она заменяет скрипт и также подключает библиотеку jQuery на сайте WordPress.

Теперь подключаем на своем сайте скрипт, который будет с файлом mail.php совместно, отправляя ваши письма. Для этого нам нужно создать вот такой js файл contact.js и отправить его на ваш сайт в папку со скриптами вашей активной темы оформления, которая так и назвается js . Если ее нет у Вас на сайте, то создайте!

Вот этот скрипт:

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

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

Просто скопируйте их и отправьте в файл style.css вашей активной темы на сайте. Если затем хотите поменяете цвета и форму, но это только для продвинутых пользователей!

Вот теперь наша обратная связь для сайта полностью готова к работе. Тестируйте и наслаждайтесь ее работой!

Если вам понравился этот материал? Тогда кликните по соцкнопкам, подпишитесь на обновления блога и напишите свой комментарий ниже!

Блог Vaden Pro

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

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

Итак, начинаем создание формы обратной связи:

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

И визуально она выглядит сейчас следующим образом:

Согласен, пока все некрасиво и ничего не понятно, но мы только начали.

Рассмотрим приведенный выше код подробно:

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

Мы использовали данный код:

Подробно расписывать CSS я не вижу смысла, обращу Ваше внимание лишь на ключевые моменты:

  1. Не стоит писать оформление под каждый тег в форме. Старайтесь строить свои селекторы так, чтобы парой строк кода оформлять все необходимые Вам элементы.
  2. Не используйте для переноса строк и создания отступов лишние теги по типу br >, p > и тд, с этими задачами прекрасно справляется CSS со свойством display: block и margin с padding. Больше о том, почему не стоит пользоваться br > в верстке вообще можете почитать в статье Тэг br, а так ли он нужен?.
  3. Не стоит пользоваться табличной версткой для форм. Это противоречит семантике этого тега, а поисковики любят семантичный код. Для того, чтобы формировать визуальную структуру документа нам достаточно тегов div, и заданных им в CSS свойств display: inline-block (выстраивает блоки в ряд) и vertical-align: top (не дает им разбежаться по экрану), задаем им необходимую высоту и вуаля, ничего лишнего и все расположено так, как нам нужно.

Для желающих экономить свое время на оформлении сайтов могу посоветовать пользоваться CSS фреймворками при создании сайтов, особенно самописных. Мой выбор в этом плане- Twitter Bootstrap. Урок по оформлению форм с его использованием можно посмотреть тут.

Ну вот и пришло время сделать нашу форму работоспособной.

Заходим в наш корневой каталог сайта и создаем там файл mail.php, к которому мы ранее указывали путь в атрибуте action тега form.

В конечном итоге его код будет выглядеть следующим образом:

Обсуждение HTML и CSS части этого документа можно пропустить. По своей сути это обычная страница сайта, которую Вы можете оформить по своему желанию и необходимости. Рассмотрим же важнейшую ее часть – PHP скрипт обработки формы:

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

Тут мы прикручиваем проверку формы на наполненность полей. Как вы догадались, в части $_POST[‘name’] в кавычках мы пишем значение атрибута name наших инпутов.

Если все поля заполнены, то скрипт начнет обрабатывать данные в своей внутренней части, если же хоть одно поле не было заполнено, то на экран пользователя выведется сообщение с требованием заполнить все поля формы echo «Для отправки сообщения заполните все поля! $back» и ссылкой для возврата на предыдущую страницу, которую мы создали самой первой строкой.

Дале вставляем во внутреннюю часть обработчика формы:

Таким образом мы очистили вводимые пользователем данные от html тегов и лишних пробелов. Это позволяет нам обезопасить себя от получения вредоносного кода в высылаемых нам сообщениях.

Проверки можно и усложнить, но это уже по вашему желанию. Минимальную защиту на серверной стороне мы уже поставили. Дальнейшее мы сделаем на стороне клиента используя JS.

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

После чистки тегов добавляем отправку сообщения:

Именно эта строка и занимается формированием и отправкой сообщения к нам. Заполняется она следующим образом:

  1. ‘почта_для_получения_сообщений@gmail.com’ – сюда между кавычек вставляете свою почту
  2. ‘Письмо с адрес_вашего_сайта’ – это тема сообщения, которое будет приходить на почту. Можно написать сюда что угодно.
  3. ‘Вам написал: ‘.$name.’ br /> Его номер: ‘.$phone.’ br /> Его почта: ‘.$mail.’ br /> Его сообщение: ‘.$message – формируем сам текст сообщения. $name – вставляем информацию заполненную пользователем через обращение к полям из предыдущего шага, в кавычках описываем что значит это поле, тегом br /> делаем перенос строки, чтобы сообщение в целом было читабельно.
  4. Content-type:text/html;charset=windows-1251 — в конце идет явное указание типа данных передаваемого в сообщении и его кодировки.

Кодировка указанная в «голове» документа ( meta http — equiv = «Content-Type» content = «text/html; charset=windows-1251» /> ), кодировка из сообщения Content-type:text/html;charset=windows-1251 и в целом кодировка файла PHP должны совпадать иначе в получаемых на почту сообщениях вместо русских или английских букв будут выводиться «кракозябры».

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

Проверка формы на адекватность вводимых данных

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

Это можно сделать как на PHP на стороне сервера, так и на JS на стороне клиента. Я использую второй вариант, поскольку так человек сразу может узнать что он сделал не верно и исправить ошибку не делая дополнительных переходов по страницам.

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

Ну а теперь обычный разбор:

Для того, чтобы при нажатии на кнопку отправки формы, у нас происходила ее проверка вешаем запуск нашего скрипта на тег form:

Теперь по пунктам забираем состав проверки:

  1. Обращаемся к нашей форме и по значению атрибута name выбираем интересующий нас инпут.
  2. Записываем его содержимое в переменную
  3. Собственно сама проверка формы на совпадение с заданными нами символами. (/^[A-Za-zА-Яа-я ]*[A-Za-zА-Яа-я ]+$/ — могут использоваться только буквы русского и английского алфавитов; /^[0-9+][0-9- ]*[0-9- ]+$/ — первый символ это «+» или цифра, дальше могут быть только цифры; /^[A-Za-z0-9][A-Za-z0-9\._-]*[A-Za-z0-9_]*@([A-Za-z0-9]+([A-Za-z0-9-]*[A-Za-z0-9]+)*\.)+[A-Za-z]+$/ — первые несколько символов это английские буквы или точки, потом знак @, потом снова английские буквы, потом точка и потом еще несколько английских букв).
  4. Если все верно, то проверка ничего не выводит и идет к следующему блоку кода, если же проверка на символы выдала ошибку, то выполняется часть скрипта с действиями 5 и 6.
  5. Пользователю выводится это сообщение о ошибке.
  6. Происходит выход из скрипта проверки.

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

Полный код страниц формы

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

Подводя итоги

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

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

Надеюсь этот мануал окажется для Вас полезным. Если что-то было не понятно или не получается повторить – задавайте вопросы в комментариях.

О защите от спама я напишу в следующих статьях.

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

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

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

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

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

Цукерберг рекомендует:  Multi-Select виджет с помощью jQuery

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

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

Изучите курс и узнайте, как верстать современные сайты на 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.

Форма обратной связи с вложением (прикрепляется файл) | HTML и PHP

Это результат объединения статей:

  • Форма обратной связи PHP
  • Прикрепить файл к письму PHP
  • Multiple files

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

Особенности:

  • Внешний вид:
    • форма по прежнему резиновая, но теперь наименования пунктов располагаются слева (см. свойство float),
    • при нажатии на label фокус получает соответствующий input,
    • при наведении курсора мышки на поле, его границы становятся голубыми, при фокусе — бледно-голубыми,
    • правильно заполненные поля будут темнеть.

    Если нужен вид из предыдущей формы, то следует заменить содержимое тега style: .

  • Поддержка от IE10 включительно.
  • Проверка на правильность заполнения полей осуществляется не на стороне сервера.

Ниже представлены два варианта скрипта отправки данных с сайта на почту: с Javascript (Ajax) и без.

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

  1. PHP вынесен в отдельный файл
  2. при нажатии клавиши F5 форма не будет отправлена снова
  3. после отправки формы страница не будет перезагружена

Файл contacts.html

Файл contacts.php

2. Форма связи в одном файле

Рекомендации к скрипту отправки файлов на почту

  1. нужно заменить свой@yandex.ru
  2. нужно заменить contacts.php на полный адрес, например, http://сайт.ru/папка/папка/contacts.php
  3. серые заголовки лучше убрать. Они меняют адрес хостинга на тот, что посетитель указывает в форме. Но некоторые почтовые сервисы (например, Яндекс.Почта) при их наличии не присылают письма вовсе
  4. для того, чтобы добавить новое поле, нужно внести изменение в HTML и PHP код. Другими словами, добавить те же участки, что и для messageFF
  5. для того, чтобы настроить прикрепление только одного файла, следует убрать всё выделенное. По умолчанию прикреплять можно несколько файлов
  6. для того, чтобы можно было прикреплять только определённый тип файлов, в input прописывается атрибут accept. По умолчанию неважно что прикреплять: картинки, видео или документы

Скорее всего письма будут падать в СПАМ папку, поэтому для них нужно создать правило. Скажем, так это делается в Яндекс.Почте:

Если на хостингах выключена функция mail() (галка может именоваться «sendmail_from»), то скрпт работать не будет. Так как по факту email отправляется с электронного ящика хостинга.

127 комментариев:

Виталий Здравствуйте, подскажите пожалуйста как поставить эту форму на сайт (wordpress). Просто скопировать код и вставить на страницу? Форма отображается, но и первая часть кода, где нужно изменить емаил на свой тоже отображается. Или первую часть кода нужно разместить в файле на сервере? Виталий Положил первую часть кода в файл mail.php и поместил его в папку с темой шаблона, чтобы можно было редактировать из админки.. изменил емаил на свой, но сообщения не приходят. ( Виталий И еще бы хотелось чтобы после отправки сообщения внизу или где нибудь писалось»ваше сообщение отправлено. спасибо» чтобы человек был уверен в отправке..как такое реализовать? NMitra Здравствуйте, я далека от WP. Попробуйте посмотреть папку wp-content/themes/ваша_тема, а именно файл page.php. Сообщение есть и оно появляется, если верно код разместить. Вячеслав Спасибо! Хорошая форма. NMitra Рада слышать! Владимир Телевной Здравствуйте. Ваш сайт безусловно хорош. Форма данная тоже. Но только вот вопрос можно ли реализовать прикрепление нескольких файлов. И желательно чтоб это делалось путем перетаскивания файла на форму. Что то типа этого http://www.manhunter.ru/demo/upload.html (это демонстрация), источник http://www.manhunter.ru/webmaster/712_zagruzka_faylov_peretaskivaniem_v_okno_brauzera.html

Спасибо заранее =) Владимир Телевной P.S.
Желательно чтоб было реализовано все на столько же просто как данная форма. Т.к. я не просто ноль, а ноль с большим минусом. И мои знания ограничиваются копировал-вставил. NMitra Здравствуйте, я боялась этого вопроса )) Пока нет времени написать полноценное решение и толком разобраться. Нужно объединить:

http://habrahabr.ru/post/120370/
http://www.emanueleferonato.com/2008/07/22/sending-email-with-multiple-attachments-with-php/
http://www.w3schools.com/html/html5_draganddrop.asp Владимир Телевной Будем ждать полноценного решения. Спасибо за ответ. Александр Как бы ещё его заставить вызываться в модальном окне? :) NMitra Как содержимое любого модального окна можно сделать, например, этого http://shpargalkablog.ru/2011/02/modalnoe-okno-css.html Александр А как бы подправить форму, чтобы сообщение об успешной отправке было отдельно? дело в том, что при такой форме достаточно нажать F5 и письмо сваливается снова. Так можно и весь ящик замусорить. Ну или проверку какую-нибудь защитную добавить? NMitra Здесь http://shpargalkablog.ru/2014/01/feedback-form.html пример с XMLHttpRequest()
Или посмотрите тут http://shpargalkablog.ru/2013/08/bell-site.html

php практически везде одинаковый, работает благодаря функции mail Владимир Электрик как сделать чтобы отправлять сразу 6 файлов подряд
. NMitra Владимир, помню, уже спрашивали, но никак не могу с собой бороться. Есть либо знания (ответ на комментарий на автомате, требует малое время), либо большой интерес к теме (пишется новая статья-ответ), либо финансовый стимул. Ссылки на материал по теме в комментарии 9. Sfera Не хватает обязательного поля Телефон Анонимный Подскажите, если отправляю письмо без прикрепленного файла выходит ошибка:
«Warning: file_get_contents() [function.file-get-contents]: Filename cannot be empty in.
Warning: Cannot modify header information — headers already sent by (output started at. «
Как разрешить отправлять без прикрепленного файла? NMitra Посмотрю на следующей недели. Анонимный NMitra, все еще актуально, Как разрешить отправлять без прикрепленного файла?
Спасибо NMitra Хм, а у меня все отправляется. http://img.shpargalkablog.ru/1.html NMitra Поэтому подсказывайте, что выдает у вас, если сделать так:

Анонимный Подскажите как сделать чтобы можно было прикрепить несколько файлов? Анонимный Подскажите как добавить защиту от спама? NMitra Фильтра по IP в большинстве случаев хватает. Чтобы его узнать, следует строку

$message = «Имя: «.$_POST[‘nameFF’].»\nEmail: «.$from.»\nСообщение: «.$_POST[‘messageFF’];

$message = «Имя: «.$_POST[‘nameFF’].»\nEmail: «.$from.»\nСообщение: «.$_POST[‘messageFF’].»\nIP: «.$_SERVER[‘REMOTE_ADDR’];

Затем при обнаружении IP, рассылающего спам

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

if($_SERVER[«REMOTE_ADDR»] != 0.000.000.000) <
mail($to, $subject, $message, $headers);
> Анонимный Отличная, красивая форма, понятный код, очень помогло, спасибо! NMitra Благодарю за отзыв! Анонимный Как это работает? Куда все это вставлять? В примере с обычной обратной связью был отдельный файл contcts.php, а тут все вместе. Делают также с этим примером, но почему-то при отправке выдает ошибку Method Not Allowed
The requested method POST is not allowed for the URL /demo/index.html Анонимный Вроде разобрался. Задал форме action, письма приходят. Но почему-то вместе диалоговго окна об ошибке или успехе переводит на пустую страницу. NMitra Будет время тоже переделаю на XMLHttpRequest
Вам нужно создать страницу с расширением .php и весь код в неё добавить или подключить php на HTML страницах (служба поддержки хостера должна подсказать как, чаще добавляется строка в .htaccess) Анонимный Если приложить 2 файла общим весом менее 10 мб, то письмо не отправляется, типо, превышен лимит в 10 мб. NMitra Вместо

if ($filesize Анонимный Спасибо. Только функцию по проверке веса все-таки тоже хотелось бы иметь. NMitra if ($filesize Анонимный Здравствуйте, письма приходят, но картинки не отображаются, вместо них набор букв-цифр NMitra Здравствуйте, попробуйте упрощённый вариант http://shpargalkablog.ru/2014/05/email-file-php.html Но скорее всего и он не будет работать: проблема или в хостере (именно с его ящика приходят письма), или в почтовом клиенте. У вас где находится почтовый ящик (программа/сервис)? Анонимный весьма полезный блог, спасибо за подробный разбор этой темы, форму с прикреплением файла именно с вашего блога использовала много раз. NMitra Спасибо за отклик! Анонимный Странно, но никто не нашел ошибку скрипта! NMitra Поделитесь, пожалуйста Анонимный Она уже была замечена. Но не донесена должным образом. К сути, если крепишь файл объемом до 1Мб и более 2-х тогда считается сумма файлов в байтах, т.е. она превысит 10000000 если закрепить их по 1-му килобайту. От 1Мб вроде норм. Как обойти этот недочет? Анонимный Так что вы скажите? Каков ваш будет положительный ответ? NMitra Плаваю я в этих байтах. Итак,

килобайт (КБ) = 1024 байта
мегабайт(МБ) = 1024 килобайта

10 МБ = 10485760 байт (тут всё сравнительно верно)

А дальше не поняла. Прикрепляются два файла по 1 МБ, в итоге сумма получается 2МБ. Но форма выдаёт ошибку, что превышен размер? Анонимный Хорошо, для пущей продуктивности беседы. Уже предметнее приложу скрин, вот значение http://s017.radikal.ru/i419/1505/57/bde886d658a0.jpg которые будет в результате прикрепления 2-ух файлов общим весом 176Кб Анонимный А это уже если файл весит 6Мб http://s013.radikal.ru/i323/1505/5e/43ee22f10e0d.jpg — теперь понимаете о чем я? Анонимный Ну и чтоб уж исчерпывающая инфо. — это результат 2-ух файлов более 1-го Мб в сумме 7Мб http://s019.radikal.ru/i619/1505/34/fa139891d090.jpg NMitra Поняла, $_FILES[‘fileFF’][‘size’] передаёт строку, а нужно число. NMitra Попробуйте, поправила Анонимный Можно вашу почту, аську или скайп? NMitra n.mitra@yandex.ru Анонимный Приходят знаки вопросов вместо имени. Где то надо указать кодировку? NMitra Попробуйте вместо

$subject = «Заполнена контактная форма с «.$_SERVER[‘HTTP_REFERER’];

$subject = ‘Заполнена контактная форма с ‘.$_SERVER[‘HTTP_REFERER’];
$subject = «=?utf-8?b?». base64_encode($subject) .»?=»; Анонимный Спасибо за код, очень полезен. но вот возникла загвоздка.

Письма отправляются без проблем, но вложений нет, подскажите в чем загвоздка, или это проблема в хостинге и нужно настроить разрешение на запись? NMitra Извините, не назову причины NMitra Попробуйте потестировать более простые вариант
1) http://shpargalkablog.ru/2015/02/multiple-files-php.html
2) http://shpargalkablog.ru/2014/05/email-file-php.html Анонимный А не может быть проблемы в скрипте? Я взял его из темы об отправке письма без вложения, так как в этой статье скрипта по отправке нет после формы, не нужно ли что то в скрипт отправки что нибудь добавить из-заа добавления отправки файла? NMitra Угу, скрипт PHP разный, также в той форме я использовала XMLHttpRequest(), а в этой нет. Не стала разбираться как через XMLHttpRequest() передать данные о файле. Анонимный поработал на стороне хостинга, файлы стали оправляться, но они не читаемы, можете подсказать как это поправить? NMitra Честно говоря, не могу. Какой почтовый сервис? Попробуйте отправить на Яндекс.Почту. Анонимный Спасибо. В итоге проблема была в почте на хостинге, которая на основе нашего домена, на яндекс почте открылся файл без проблем, как и на туже почту но не в веб браузере а полученные через почтовую программу. Большое спасибо Вам за помощь и за скрипт. sergey как сделать только html код такой формы и добавить свой mail NMitra «как сделать только html код такой формы» — Уберите всё до

email нужно добавлять в php Анонимный Как реализовать такую же форму, но с записью данных полей в файл doc(rtf) и отправкой этого файла на почту? NMitra Извините, не подскажу ответа — не было необходимости разбирать ваш вопрос ранее :( Анонимный подскажите как добавить еще строки, телефон,
адрес Анонимный Все работает, но почему-то вложение не приходит на мобильный телефон. В чем может быть проблема? NMitra Проблема может быть в почтовом клиенте. Для увеличения скорости работы он может отключить показ изображения. Если на компьютере показывается письмо полностью, а на мобильном в том же почтовом клиенте без изображения, то я бы написала письмо в службу поддержке почтового клиента. Анонимный Извините, если тема актуальна еще. Ставлю на joomla 2.5. Нажимаю отправить — открывается пустое окно ,а точнее выкидывает на страницу с названием файла php, куда скопировала код. При этом на почту приходит сообщение. NMitra Угу, POST выполняется. Данный пример предполагает, что php и html должны быть в одном файле. Иначе нужно делать через XMLHttpRequest() как тут http://shpargalkablog.ru/2014/01/feedback-form.html только с другой кодировкой Анонимный Спасибо! Попробую. А то очень хочется, чтобы заработало, хорошая и удобная форма. Анонимный К сожалению не получится, joomla режет код в редакторе, а как по файлам правильно разнести, я не поняла. Анонимный И вариант с другой формой не пройдет. Joomla режет любой код скрипта в редакторе. NMitra Тогда делайте редирект с php файла как тут http://shpargalkablog.ru/2013/08/bell-site.html NMitra Если делать без задержки, то посетитель лишь увидит что страница перезагрузилась Александр Стрельченко Доброй ночи!
Подскажите, пожулайста, в какую сторону «копать» ?
С PHP не имел дела ранее, но знания js помогли правильно разобраться во внедрении Вашего обработчика.
В итоге письмо после submit пришло всего два раза (причем, на разные адреса по одному разу. менял, думал беда в почтовиках).
Alert срабатывает каждый раз «успешно».
Заранее благодарю за помощь! Возможно, исходник нужно прикрепить, чтобы Вы смогли понять.
С уважением, Александр. NMitra Доброе утро!
Попробуйте удалить заголовки:

$headers .= «From: » . $from . «\r\n»;
$headers .= «Reply-To: » . $from . «\r\n»;

У меня с ними тоже Яндекс режет письма. Александр Стрельченко Здравствуйте еще раз.
Заголовки эти сразу удалил и не использовал.

Оставил только эти два:

$headers = «MIME-Version: 1.0\r\n»;
$headers .= «Content-Type: multipart/mixed; boundary=\»$boundary\»\r\n»;

Возможно, еще в где-то проблема может быть? NMitra Это нужно.
Попробуйте второй вариант, тоже самое, но почему-то лучше срабатывает.
А форма без файлов нормально работает http://shpargalkablog.ru/2014/01/feedback-form.html ? Александр Стрельченко Второй вариант, это тот, в котором «Форма связи в одном файле»? Не пробовал его..
Без файлов пробовал до этого, но не по вашему шаблону. Срабатывала каждый раз. Александр Стрельченко Кстати, код для «Формы связи в одном файле» сразу при загрузке странички выдает алерт «Размер файлов превышает 10мб». Скопировал Ваш код один в один и проверил) Александр Стрельченко Доброй ночи еще раз.
Нашел логи с сервера и заметил ошибку наконец-то свою. Может кто-то когда-то столкнется с такой же ситуацией.
Конкретные строчки из лога:

PHP Warning: is_uploaded_file() expects parameter 1 to be string, array given in /путь/к/файлу/contacts.php on line 19, referer: http://ваш.сайт

Я делал прикрепление одного файла, а в html мой инпут имел такой вид:

Убрав скобки массива «[]» все заработало, при этом письма доходят моментально и с вложением.

В Вашей статье все грамотно отмечено цветом, что обязательно удалить нужно их, но я зря поторопился)))
Благодарю за Ваше решение!
NMitra Доброго утра, Александр. Большое спасибо, что написали! А то я бы гадала что да как. Кирилл Спасибо огромное Вам за данную форму. Установил. Все работает.
Но. Прошу помочь разобраться в одном недочете.
Ввели все данные, нажали отправить, получаем сообщение:»размер файлов превышает 10 мб».
В этой ситуации из поля «сообщение» пропадает ранее написанный текст. Это нехорошо. В остальных полях информация сохраняется.
Можно с этим что-то сделать? Александр Стрельченко Кирилл, чтобы ранее написанный текст не пропадал, удали эти события:

f.messageFF.removeAttribute(‘value’); // очистить поле сообщения
f.messageFF.value=»; // очистить поле сообщения NMitra Добавила дополнительное условие, попробуйте, при возможности, отпишитесь о результатах, сама не успела потестировать.

Александр, еще раз спасибо за активное участие! Кирилл Москвитин Спасибо.
Но можно как-то сделать, чтобы успешной отправке сообщения текст пропадал, а при ошибке оставался?
Сейчас остается и так, и так.
В принципе я и так доволен))
И еще вопрос..
Для работы формы без ошибок пришлось удалить .htaccess
А без него вроде как нельзя. Можете помочь? Кирилл А! И еще..)
При вынесении скрипта в отдельный файл страница перезагружается и форма не работает.
Это решаемо? NMitra Кирилл, я скрипт поправила (см. статью) при успешной отправке поле очистится, при ошибке — останется.

.htaccess удалять не стоит. Смотрите какое именно правило не даёт работать форме. Его (правило) можно ограничить одной страницей, расширением файла и т.п.

Вы имеете ввиду JS? NMitra «При вынесении скрипта в отдельный файл страница перезагружается и форма не работает.» — проверила, у меня работает. Вы верно указываете путь к файлу contacts.php? Виктор Загоруйко Подскажите, как после отправки письма и выдачи сообщения что все нормально отправилось сделать переход на главную или другую страницу сайта? Что и где нужно прописать? Александр Стрельченко Виктор, попробуй добавить в конце этих строк «location.href = «URL»; (как пример):

if (http.responseText.indexOf(f.nameFF.value) == 0) < // очистить поле сообщения, если в ответе первым словом будет имя отправителя
f.messageFF.removeAttribute(‘value’);
f.messageFF.value=»;
location.href = «/articles/blog/»; // это как пример ссылки — можешь указать в любом виде (http://google.com) или любую другую
>

Не тестировал, поэкспериментируй.
Возможно есть решения с помощью PHP, конечно. Кирилл Москвитин Спасибо огромное Вам за работу и поддержку!
Работает! Однако, поля имя и e-mail все равно остаются при успешной отправке. Но я в восторге)))
«При вынесении скрипта. » — сам файл .js забыл вынести на сервер)
В .htaccess я вообще не буль-буль..( Буду пыхтеть..
Виктор Загоруйко Александр, я уже перепробывал много вариантов, но почему то не получается. Как вы пишите — получается что выводит весь html код страницы))) в окне. Бился и по другим вариантам — никак не выходит. Кирилл В общем чего-то наделал с .htaccess и все заработало))) Надеюсь, надолго)
Еще раз спасибо за помощь!) Виктор Загоруйко NMitra, спасибо! Но не помогло. Вот страница сайта http://modulpicture.com/index.php?route=nnews/article&ncat=59&nnews_ > Виктор Загоруйко Проблема решилась! Всем спасибо.

P.S. Может кому понадобится — location.href = «ваш-сайт»; надо вставлять не вместо if (http.responseText.indexOf(f.nameFF.value) == 0) < // очистить поле сообщения, если в ответе первым словом будет имя отправителя
f.messageFF.removeAttribute(‘value’);
f.messageFF.value=»; или за этими строчками, а вот так if (http.responseText.indexOf(f.nameFF.value) == 0) <
f.messageFF.removeAttribute(‘value’);
f.messageFF.value=»;
>
>
>
location.href = «http://ваш_сайт»; Дмитрий Все замечательно работает, но прикрепить можно только один файл. Хоть и написано, что по умолчанию прикреплять можно несколько файлов. Помогите, пжл, мне обязательно нужна возможность прикреплять несколько фото. NMitra Можно прикреплять несколько файлов:
1) нажать кнопку
2) нажать на файл
3) нажать кнопку CTRL (или SHift, чтобы выделить идущие подряд файлы или нажатой правой кнопкой мышки выделить область из группы файлов)
4) нажать на другой файл

Это стандартная процедура. Можно как в Яндекс.Почте сделать, чтобы при добавлении файлов они суммировались, но это более трудоёмко и не всем может подходить. Дмитрий Спасибо за быстрый ответ, разобрался.
Но появилась новая проблема: выходит сообщение «Извините, данные не были переданы» и все формы остаются заполненными , хотя на самом деле на почту все приходит моментально. Дмитрий Пока вопрос снимается. Не знаю причину сбоя. Заново отписал код, загрузил на сайт — вроде опять работает. Анонимный Господа, поставил форму по второму варианту. На самом сайте перед формой выходит alert(«Ваше сообщение получено, спасибо!»);’; > ?> . В чем дело? NMitra Ставьте по первому, у вас PHP не поддерживается на HTML страницах Unknown Когда сообщение отправлено или не отправлено. Вместо русских букв Появляются знаки вопроса. Как это можно исправить?
Если вместо русс. букв написать англ — тогда выводит нормально англ. буквы. Анонимный Повторю вопрос:
Когда сообщение отправлено или не отправлено. Вместо русских букв Появляются знаки вопроса. Как это можно исправить?
Если вместо русс. букв написать англ — тогда выводит нормально англ. буквы. NMitra У вас кодировка utf-8?

Форма обратной связи для сайта от JivoSite

Форма обратной связи для сайта, которая является частью бесплатной версии системы JivoSite, позволяет посетителям вашего сайта отправлять вам сообщения на e-mail в том случае, если операторы не доступны для онлайн-чата.

Гибкие настройки

Вы можете настроить произвольный текст приглашения, подсказывающий пользователю, что делать, цвета и оформление виджета. Вместе с сообщением, пользователь указывает в форме свой контактный e-mail, телефон и имя при необходимости. Когда вы получите e-mail сообщение в вашем почтовом клиенте – вам достаточно будет просто кликнуть кнопку «Ответить», и ваш ответ уйдет посетителю на его e-mail.

Автоматическое переключение ярлыка

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

Простая установка

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

Мы предлагаем вам универсальное решение – JivoSite, который может быть установлен на любой сайт, с любой системой управления, в том числе и на Joomla, Dle, WordPress и другие. Никаких ограничений за минимум усилий! Система JivoSite – это полноценный онлайн-консультант с возможностью онлайн-звонков и множеством полезных возможностей. Кроме того, есть бесплатная версия без ограничения срока использования, включающая базовые функции онлайн-консультанта!

Простая форма обратной связи без перезагрузки страницы на PHP+jQuery

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

Сегодня я хотел бы показать самую простую и на 100% рабочую реализацию формы обратной связи без перезагрузки страницы с использованием технологии AJAX (jQuery) и обработки/отправки данных на PHP.

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

Технология AJAX, если вы еще не знаете, позволяет без перезагрузки страницы передать значения в PHP-скрипт (и не только), где, уже приняв эти данные, можно произвести необходимые операции.

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

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

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

1. Первым делом сверстаем форму с нашими полями. CSS-стили мы упустим, так как сейчас нам это не так важно. В качестве полей сделаем «Имя», «E-mail» и поле для ввода сообщения:

Обратите внимание на элемент с классом «result» – в него мы будем выводить сообщения об ошибках или успешном отправлении сообщения.

2. Далее пишем скрипт, который соберет все данные с формы и отправит их в наш PHP-обработчик:

Скрипт вставляем перед закрывающим тегом

Цукерберг рекомендует:  Ассемблер - книги по Ассемблеру
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих