Как создать форму обратной связи в блоке. Делаем форму обратной связи на PHP. Подборка красивых дизайнерских форм обратной связи на HTML и CSS для разных целей

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

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

Простейший пример такой формы приведен на рис.1. (Это вполне рабочий образец, и вы можете с его помощью послать мне благодарственное письмо.)

Рис.1. Простая форма обратной связи

Для размещения на сайте такой формы обратной связи достаточно всего лишь элементарных сведений об HTML и умения оперировать двумя командами - Копировать и Вставить. Рассмотрим последовательность действий по созданию формы обратной связи (рис.1) на HTML-странице сайта.

1. Проверьте, что тарифный план вашего хостинга (контора, где размещён ваш сайт) поддерживает PHP. Если нет, то вам придётся скорее всего доплатить для перехода на другой тариф, поддерживающий эту самую PHP. Значение этой аббревиатуры можете не искать, так как знание PHP вам не понадобится.

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




Ваш e-mail (для ответа):




Ваше сообщение:

Как видим, вся форма создаётся тегом с атрибутами action=mail.php (указание на страницу сайта, где расположен сценарий обработки введенных данных) и method=post (метод отправки данных на сервер). Отдельные строки созданы тегом с вполне понятными атрибутами. Расположение отдельных элементов формы, текст, шрифты и проч. можете менять в соответствие с дизайном вашего сайта. В теге задаются размеры области для ввода текста сообщения: число строк и колонок (rows="3" cols="25").

3. Создадим новую страницу mail.php , аналогичную обычной HTML, только имеющую расширение.php. Полный код страницы показан на рис.2:

Обратная связь

Рис.2. Код страницы обработки формы обратной связи

Красным цветом выделены адреса ссылок, на которые необходимо обратить внимание:

• [email protected] - адрес г.Пупкина заменить на адрес вашей почты, куда будут поступать сообщения от посетителей сайта, а также от неутомимых спамеров. Кстати, для защиты от них в форму часто вводят так называемую капчу (англ. CAPTCHA - Completely Automated Public Turing test to tell Computers and Humans Apart - полностью автоматизированный публичный тест Тьюринга для различия компьютеров и людей). Обычно это сильно искаженные цифры и буквы, которые просят ввести перед отправкой сообщения. О капче поговорим в одной из следующих статей.
  Если вы хотите отправлять письма на несколько адресов, то просто перечислите их через запятую.
• a href=index.html - адрес главной (домашней) страницы сайта.

Созданную страницу mail.php необходимо поместить в тот же каталог сайта (директорию, папку), где расположена и страница с формой обратной связи.

Проверьте работоспособность формы обратной связи. Если всё сделано аккуратно, то после заполнения формы и нажатия Отправить сообщение должен появиться следующий текст: "Спасибо за отправку вашего сообщения. , чтобы вернуться на главную страницу ". После этого вы обнаружите в своём почтовом ящике (или другом, который вы указали при создании формы обратной связи) собственное послание себе любимому.

Замечание: на некоторых хостингах новая (только что установленная на сайте) форма обратной связи начинает работать не сразу, и первые письма не доходят совсем или поступают с задержкой на 1-2 дня. Вероятно, идет "притирка шестеренок", а затем все работает нормально. Кроме того, с некоторых хостингов не доходят письма на определенные адреса, например, у меня были проблемы с ящиком на Рамблере и Mail.ru. Для решения этих проблем обратитесь к вашему хостеру - обычно помогают.

Иногда при использовании описанной формы обратной связи возникают проблемы с кодировкой. Если в пришедшем письме вместо родной кириллицы текст состоит из "кракозяблов" или пустых квадратиков, то приходится вручную подбирать кодировку, что конечно же неудобно. Чтобы этого не происходило, проверьте, что ваша страница с формой обратной связи имеет кодировку charset=utf-8 . Если вы используете программу Adobe Dreamweaver , то для этого надо выбрать раздел меню Изменить - Свойства страницы - Кодировка .

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

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

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

Этот пост посвящён тому, как очень просто создать форму обратной связи для блога или сайта используя только HTML и CSS.Здравствуйте, уважаемый читатель. На связи Евгений Назаров.

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

Это было нечто, чего я только не попробовал, в итоге выходило так, что-либо ломался Блог и форма не работала либо всё было ок, красивая удобная форма, но не рабочая всё равно. Я не знаю почему так выходит, может тема не позволяет, может какие силы нечистые, может мои прямые руки. 😀

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

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

Как создать красивую, рабочую форму обратной связи

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

Он ответил что форма не самописная, просто взял код со стороннего сервиса. (Я как вы знаете уже перепробовал кучу всяких сервисов и генераторов форм обратной связи, плагинов и прочих инструментов, всё было безуспешно.)

Но это было совсем не важно, самое главное что она, блин, рабочая, отправляет письма.

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

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

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

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

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

Для этого качаем архив с кодом и нужными нам картинками по этой ссылке .

В коде нужно прописать адрес почты, на которую вы хотите получать письма, её нужно вставить во второй строчке вместо [email protected] без пробелов.

2) Сделали?! Хорошо. Теперь добавим ей стилей, вставив его в самый конец файла style.css вашей темы.

Это картинка, код вы можете скачать по ссылке выше.

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

Если кнопка отправить находится не в том месте, где должна быть, то поиграйтесь в идентификаторе #contact_submit со значением margin-left: 470px; увеличивая или уменьшая число.

На этом всё, можете опубликовывать страницу. Если форма отображается не корректно или без стилей, попробуйте зажать сочетание клавиш ctrl+F5 или если у вас стоит плагин HyperCash или что-то подобное, удалите весь кеш через него.

Теперь всё должно работать.

Подтвердите вашу почту.

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

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

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

На локальном сервере всё работало прекрасно, выдавались красивые всплывающие поля с ошибками в которых было написано, что-то типа «Вы не ввели имя», но залив код на сайт, форма перестала работать, я плюнул и оставил всё как было. Если найду решение и этой проблемы, обязательно сделаю дополнение к посту.

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

Всегда с Вами,
Евгений Назаров.

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

Навигация

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

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

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

Рисунок 1. Что такое форма обратной связи и почему она так необходима?

Что такое форма обратной связи и почему она так необходима?

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

Форма обратной связи представляет собой отдельную страницу или блок (отдел), состоящий из нескольких полей ввода текста и кнопки «Отправить». Как правило, стандартная форма имеет следующие поля:

Как создать простейшую форму обратной связи для сайта на HTML и PHP?

Чтобы не превратить статью в полноценный занудный учебник, мы будем исходить из того, что Вы уже знакомы с азами языка разметки HTML и имеете общее представление о том, как он работает. Если у Вас нет таких навыков то, прежде чем браться за создание формы, настоятельно рекомендуется немного подтянуть свои знания на бесплатном ресурсе htmlbook.ru . Иначе Вы можете не только забросить эту затею, но и испортить код уже имеющегося у Вас сайта.

Для воссоздания рабочей формы обратной связи Вам потребуется три важных элемента, один из которых отвечает за разметку и структуру формы (HTML ), второй за её внешнее оформление (CSS ), а третий за обработку и передачу данных (PHP ). Начнём по порядку:

Написание HTML-кода для формы обратной связи

• Шаг 1 . Для того, чтобы обозначить форму в HTML используется тэг . Внутри него будут задаваться размеры, стили и другие жизненно важные свойства формы. При записи самого тэга ему необходимо задать для обозначения класс, который в дальнейшем поможет установить для формы CSS стили.

• Шаг 2 . Далее для создания первого поля нашей формы внутри тэга необходимо написать блочный тэг

  , которой отвечает за создание новой строки.

• Шаг 3 . Внутри тэга

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

• Шаг 4 . С новой строки всё в том же тэге

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

• Шаг 5 . По выше приведённому примеру добавьте остальные нужные Вам поля, каждый раз начиная с тега

  . Для установки поля с текстовым сообщением используйте тэг . Параметры «cols » и «rows » отвечают за ширину и высоту текстового поля. Можете задать параметры, какие Вам больше нравятся. У Вас должно получиться примерно так, как показано на скриншоте ниже.

• Шаг 6 . Чтобы защитить себя от ботов, которых сегодня в интернете довольно много, создайте ещё одну строку с помощью тэга . За счёт параметра «style=»display:none» » данное поле не будет видно простым смертным, однако ботами будет заполняться автоматически. Таким образом, Вы всегда сможете отличить живого человека от программы.

• Шаг 7 . Завершающим этапом разметки станет создание кнопки отправки. Для этого используется тэг . Создайте новый блок

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

Работа с каскадными таблицами стилей (CSS)

• Как Вы уже успели заметить в процессе разметки, у нас получилось что-то очень кривое, невзрачное и отвратительное. Для того, чтобы придать форме обратной связи более или менее опрятный вид, одного языка HTML будет недостаточно. Для этой цели придётся прибегнуть к использованию стилей CSS .
• В том случае, если Вы воспользовались советом подтянуть свои базовые навыки на ресурсе htmlbook.ru , то задать определённые параметры оформления для всех частей формы с помощью CSS Вам не составит никакого труда. Если же у Вас нет желания или времени со всем этим возиться, то мы предоставим Вам уже готовый код и расскажем, как его подключить.

Подключить стили CSS к HTML можно двумя способами:

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

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

Подключение файла PHP и его настройка

Как уже было сказано ранее, скрипт PHP отвечает за исполнение формы обратной связи. Однако для того, чтобы более или менее понять принцип работы языка PHP , необходимо прочитать большой объём литературы и провести приличное количество часов за практикой. Поэтому, как и в случае с CSS , мы предоставим Вам уже готовый файл с php-скриптом, который останется только прикрепить к документу с формой.

В отличие от файла style.css , файл с php-скриптом прикрепляется в свойствах самой формы. Начнём по порядку:

• Шаг 1 . Откройте ранее написанный код и найдите строку с открытым тегом формы. Добавьте к нему свойства «action=»contact-form.php» » и «method=»post» ». Смотрите пример на скриншоте.

• Шаг 2 . Скачайте наш php-файл и поместите его на хостинг в ту же папку, где находится html-документ с формой. Таким образом, php и html файлы будут взаимодействовать между собой.

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

• Шаг 4 . Далее необходимо добавить ещё две переменных с адресом вашей электронной почты и темой письма, которая будет отображаться на вашем ящике. В строке с переменной «$address » укажите E-mail, а в строке «$sub » тему письма как показано на скриншоте.

• Шаг 5 . В строке с переменной «$mes » настраивается формат письма, которое Вы получите на почту. Вы можете переписать его без изменений или отредактировать по собственному вкусу.

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

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

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

• Опираясь на выше приведённые инструкции, Вы без труда сможете «нарисовать» форму обратной связи под свой собственный вкус. Однако, если у Вас нет времени или желания самостоятельно создавать форму с нуля, Вы можете найти в интернете уже готовые дизайнерские формы и обладая базовыми навыками HTML отредактировать их под себя.

• Немного поискав, мы нашли для Вас подборку из 35 красивых всплывающих дизайнерских форм обратной связи, которые написаны на HTML и CSS . Данные формы подходят для таких движков, как WordPress и Joomla , имеют простую и лёгкую настройку из панели управления, а также прекрасно подходят для сайтов без движка.

ВИДЕО: Всплывающая форма обратной связи для сайта WordPress

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

HTML

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

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

CSS

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

Form{ max-width: 400px; width: 100%; margin: 0 auto; } input{ box-sizing: border-box; display: block; border: none; box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.11); padding: 10px 20px; width: 100%; margin: 10px 0; outline: none; } input{ background: red; border: none; box-shadow: 0px 2px 0 1px #C50909; border-radius: 5px; color: white; text-transform: uppercase; font-weight: 600; width: 200px; cursor: pointer; transition: 0.3s; } input:hover{ background: black; box-shadow: 0px 2px 0 1px black; }

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

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

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

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

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

$(".form").submit(function() { var str = $(this).serialize(); $.ajax({ type: "POST", url: "contact.php", data: str, success: function(msg) { if(msg == "ok") { alert("Письмо отправлено"); } else { alert("Ошибка! Возможно вы неправильно заполнили поля."); } } }); return false; });

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

If (trim($_POST["mfbPhone"]) == "") { echo "false"; } else { $txtname = trim($_POST["mfbName"]); $txtemail = trim($_POST["mfbMail"]); $txtphone = trim($_POST["mfbPhone"]); // от кого $fromMail = "[email protected]"; // Сюда введите Ваш email $emailTo = "[email protected]"; $subject = "Обратная связь"; $subject = "=?utf-8?b?". base64_encode($subject) ."?="; $headers = "From: Пример формы\n"; $headers .= "Content-type: text/plain; charset="utf-8"\r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Date: ". date("D, d M Y h:i:s O") ."\r\n"; // тело письма $body = "Получено письмо с сайта ".$site." \n\nИмя: ".$txtname."\nТелефон: ".$txtphone."\ne-mail: ".$txtemail."\nСообщение: ".$txtmessage; mail($emailTo, $subject, $body, $headers); echo "ok"; }

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

demo

файлы

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

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

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

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

Итак, давайте приступим, первым делом мы разметим страницу и пропишем для неё стили. Разметка будет включать в себя обычную форму обратной связи с двумя input (телефон, почта) и одной текстовой областью, куда, по нашей задумке, пользователь будет вводить своё сообщение. Обработчик формы разместим на отдельной странице.

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

Введите телефон:

Ваша почта:

Ваш вопрос:

Пропишем стили:

Html, body{ height: 100%; margin: 0; } html{ background-color: #fff; color: #333; font: 12px/14px Verdana, Tahoma, sans-serif; cursor: default; } #feedback-form{ background-color: #ececec; margin: 50px auto 0; text-align: center; width: 430px; padding: 15px; } #feedback-form h2{ margin-bottom: 25px; } #feedback-form input, #feedback-form textarea{ background-color: #fff; border: 1px solid #A9A9A9; padding: 1px 5px; width: 90%; } #feedback-form input{ height: 26px; } #feedback-form textarea{ height: 75px; padding-top: 5px; } #feedback-form input{ margin-top: 15px; background-color: #0B7BB5; border: 1px solid #CCCCCC; color: #FFFFFF; font-weight: bold; height: 40px; line-height: 40px; text-transform: uppercase; width: 225px; cursor: pointer; }

В результате всех этих действий получится вот такая форма:

Теперь пришло время заняться сервером. Наш скрипт будет включать в себя несколько частей:

• Настройка;
• Вспомогательные функции;
• Обработка пришедших данных;
• Вывод сообщений.

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

Настройка

На этом этапе мы создадим три переменные: $my_email (почтовый ящик на который отправляются данные), $path_log (путь до файла логов) и $time_back (время возвращение пользователя обратно на сайт).

// Указываем свой почтовый ящик $my_email = "[email protected]"; // Указываем где будут храниться логи $path_log = "log.txt"; // Время возвращения пользователя на сайт (сек) $time_back = 3;

Вспомогательные функции

Здесь опишем пять функций, которые упростят обработку данных.

Шаблоны вывода сообщений:

Function error_msg($message){ $message = "".$message.""; return $message; } function success_msg($message){ $message = "".$message.""; return $message; }

Очистка данных пришедших с формы:

Function clear_data($var){ return trim(strip_tags($var)); }

Отправка письма:

Function send_mail($email, $subj, $text, $from){ $headers = "From: ".$from." \r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Content-Type: text/html; charset=utf-8 \r\n"; $result = mail($email, $subj, $text, $headers); if(!$result){ return false; } return true; }

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

Function check_format($data, $type){ switch($type){ case "email": $pattern = "/^*@(+(*+)*\.)++$/i"; if(preg_match($pattern, $data)){ return true; } break; case "phone": $pattern = "/^(\+?\d+)?\s*(\(\d+\))?[\s-]*([\d-]*)$/"; if(preg_match($pattern, $data)){ return true; } break; } return false; }

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

Обработка пришедших данных

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

// Узнаем предыдущую страницу $prev_page = $_SERVER["HTTP_REFERER"]; // Наши сообщения $msg = ""; // Статус письма $status_email = "";

Теперь, чтобы не возникло проблем с кодировкой, указываем её при помощи заголовка.

Header("Content-Type: text/html; charset=utf-8");

If($_SERVER["REQUEST_METHOD"] == "POST"){ if(isset($_POST["number"], $_POST["email"], $_POST["question"])){ $number = clear_data($_POST["number"]); $email = clear_data($_POST["email"]); $question = clear_data($_POST["question"]); if(check_format($number, "phone") && check_format($email, "email") && !empty($question)){ // Формируем письмо $e_title = "Новое сообщение"; $e_body = ""; $e_body .= ""; $e_body .= "Телефон: ".$number; $e_body .= "
"; $e_body .= "Почта: ".$email; $e_body .= "
"; $e_body .= "Вопрос: ".$question; $e_body .= ""; $e_body .= ""; // END Формируем письмо if(send_mail($my_email, $e_title, $e_body, $prev_page)){ $status_email = "success"; $msg = success_msg("Спасибо за ваш вопрос.
Мы ответим вам в ближайшее время."); }else{ $status_email = "error"; $msg = error_msg("При отправке письма произошла ошибка."); } // Записываем в файл $str = "Время: ".date("d-m-Y G:i:s")."\n\r"; $str .= "Телефон: ".$number."\n\r"; $str .= "Почта: ".$email."\n\r"; $str .= "Вопрос: ".$question."\n\r"; $str .= "Письмо: ".$status_email."\n\r"; $str .= "==========================\n\r"; file_put_contents($path_log, $str, FILE_APPEND); }else{ $msg = error_msg("Заполните форму правельно!"); } }else{ $msg = error_msg("Произошла ошибка!"); } }else{ exit; }

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

Вывод сообщений

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

Для перенаправления пользователя обратно на сайт, мы воспользуемся метатегом refresh, где делаем вставки PHP кода уже с созданными переменными. Ещё нам потребуются немного использовать JavaScript, чтобы сделать страницу чуть динамичней. Пишем функцию timeBack(), которая будет в обратном порядке считать секунды до перенаправления.