Форма обратной связи на PHP с отправкой на e-mail. Создание формы обратной связи Делаем форму обратной связи

Приветствую дорогой читатель, сегодня приготовил для Вас вкусненькую форму обратной связи html, которая работает без перезагрузки страницы по технологии Ajax + мощный триггер, который будет мотивировать ваших посетителей воспользоваться формой. Читатели моего блога очень активно обсуждали мою предыдущую статью по на Landing Page, теперь оцениваем, смотрим на доработанную новую форму. Все необходимые исходники и демо прикрепил в статье , структуру работы и подключению так же разберем.

UPD: Устранена ошибка с кодировкой имени в теме письма. Теперь все отображается верно. Благодарим читательницу (Екатерину Карачеву)

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

Форма обратной связи html — структура работы

Внешний вид нашей формы выглядит следующим образом

В чем здесь вся соль? Форма так таковая есть с правой стороны, а вот в левой части сделал специальный блок, который будет стимулировать вашего посетителя ввести свои контактные данные немедленно! Секрет прост: Видите дату и время в левом блоке? Дата будет выводиться сегодняшняя все время, со временем диапазон этих двух часов высчитывается от настоящего часа, допустим если у вас сейчас время 13:14 , то диапазоном часов будет: с 12 до 14. Посмотрите на как это работает)))

Посетитель будет видеть: ух ты скидка сегодня, да и по времени я как раз попал вовремя, тут еще и скидка! Надо брать незамедлительно! — Вот это и есть наш триггер.

Исходники формы обратной связи html скачали, демо посмотрели — наигрались думаю)) Теперь о само насущном, принцип работы:

Проверка полей в форме input происходит в файле обработчика contact.php ниже в листинге программного кода сможете посмотреть, сообщение об ошибках и успешной отправке письма появляется в самой форме, вот так это выглядит, после отправки:

Исходный код обработчика формы

Вставьте в строке 52 свою почту, таким образом все письма будут приходить на указанную почту.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

< 1) { $error .= "Введите ваше сообщение.
<".$tel.">

".$error."

"; } } ?>

"; } // Проверка телефона function ValidateTel($valueTel) { $regexTel = "/^{7,12}$/"; if($valueTel == "") { return false; } else { $string = preg_replace($regexTel, "", $valueTel); } return empty($string) ? true: false; } if(!$tel) { $error .= "Пожалуйста введите телефон.
"; } if($tel && !ValidateTel($tel)) { $error .= "Введите корректный телефон.
"; } if(!$error) // Проверка сообщения (length) if(!$message || strlen($message) < 1) { $error .= "Введите ваше сообщение.
";// В этой строчке ставиться минимальное ограничение на написание букв. } if(!?utf-8?b?". base64_encode($name) ."?="; $message ="\n\nИмя: ".$name."\n\nНомер телефона: " .$tel."\n\nСообщение: ".$message."\n\n"; $mail = mail("[email protected]", $subject, $message, "From: ".$name_tema." <".$tel."> "."Reply-To: ".$email." "." X-Mailer: PHP/" . phpversion()); if($mail) { echo "OK"; } } else { echo "

".$error."

"; } } ?>

Работоспособность формы

Чтобы приходили письма на ваш почтовый ящик, измените строку о которой я говорил выше. Советую использовать gmail.com почту, на ней задержек и косяков не наблюдается при получении сформированного письма из формы. Предупредил, т.к. много было вопросов у читателей (письма не приходят на mail.ru). Будьте внимательны на этот счет.

Заполняем все поля, обратите внимание, что телефон вводится с 8 — я специально в подсказке так и написал номер с восьмерки «89251122333». При вводе знака «+» появится сообщение об ошибке. Если кому-то нужно, то легко добавить в обработчик данный «+» .

Заполненная форма с тестовыми данными

Письмо на почтовом ящике

Как видите письмо получили, со всеми тремя полями, которые заполняли и отправили. Заголовок письма «Заявка с сайта сайт» меняется в обработчике contact.php

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

Подготовлено при поддержке,

1. Плагин для создания онлайн форм «jFormer»

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

2. Пошаговая форма регистрации с использованием jQuery

Аккуратная форма с пошаговым заполнением. Снизу указан индикатор заполнения формы.

3. Пошаговая форма

Заполнение формы в несколько шагов с проверкой правильности заполнения.

4. Контактная форма для сайта

Проверка правильности ввода ифнормации осуществляется «на лету» перед отправкой сообщения с использованием javascript.

5. Анимированное переключение между формами на jQuery

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

6. Выезжающая PHP форма обратной связи

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

7. PHP форма регистрации с использованием jQuery и CSS3

Форма с проверкой правильности ввода информации.

8. PHP форма регистрации в стиле Facebook

Симпатичная форма регистрации, реализованная с помощью CSS, PHP и jQuery.

9. jQuery контактная форма «SheepIt»

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

10. Контактная форма «Fancy AJAX Contact Form»

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

11. Система авторизации/регистрации на сайте

12. Форма отправки данных

С проверкой правильности заполнения.

13. Плагин jQuery «Contactable»

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

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

Почему форма на html и php?

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

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

Структура, как организована обратная связь для сайта

Что бы все заработало, приведу структуру, что нужно что бы форма связи или звонка работала?

Код html вставленный на страницу + css стили.
Php файл, который и выполняет посылку письма.

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

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

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

Сама форма находится между html тегами

. Самому тегу формы

присвоен css класс class="form-zvonok" который используется для задания отображения формы через css стили.

Атрибуты формы autocomplete="off" - автозаполнение формы отключено. Атрибут формы action="http://site.com/email.php" , в нём указан адрес файла, который вызывается и которому передаются данные формы после нажатия кнопки «отправить».

Атрибут method="post" , в этом случае данные отправляются скрытно и не отображаются в адресной строке, другой метод Get отправляет данные формы через адресную строку. Учитывая необходимость SEO оптимизации сайта, в случае формы обратной связи для сайта лучше отправлять данные методом Post, так как в случае метода Get у сайта по сути будет доступно множество однотипных страниц, которые отличаются только несколькими незначительными параметрами.

Внутри этого дива, находятся дивы содержащие теги и , и в самом конце - кнопка отправить, при нажатии на нее происходит отправка данных формы.

Отсылка письма php скриптом

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

Чтобы отправить письмо на необходимый email, замените значение переменной $to [email protected] на необходимый адрес. Переменная $subject - тема сообщения, показывается почтовыми программами при просмотре списков писем. $message - само тело письма, это и есть само сообщение. $headers - шапка письма, в ней указывается тип письма, например html, также кодировка письма, от кого доставлено письмо и на какой emal отправлять ответ.

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

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

Obratnuj-zvonok{ width: 100%; max-width: 350px; } .form-zvonok{ width: 100%; display: flex; flex-direction: column; padding: 0 20px; box-sizing: border-box; } .form-zvonok div{ padding: 15px 0; } .bot-send-mail{ box-sizing: border-box; width: 100%; } .form-zvonok label,.form-zvonok input{ display: block; width: 100%; box-sizing: border-box; } .form-zvonok label{ margin-bottom: 5px; font-weight: bold; } .form-zvonok input{ padding: 10px 15px; margin-top: 10px; } .form-zvonok label span{ color: red; } .form-zvonok .bot-send-mail{ padding: 15px; margin-top: 10px; background: none; border: none; text-transform: uppercase; color: #fff; font-weight: bold; background-color: #009b97; cursor: pointer; border: 3px #009b97 solid; border-radius: 5px; } .form-zvonok .bot-send-mail:hover{ color: #009b97; background-color: #fff; }

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

Obratnuj-zvonok{ width: 100%; max-width: 350px; }

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

Form-zvonok{ width: 100%; display: flex; flex-direction: column; padding: 0 20px; box-sizing: border-box; }

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

Имя *

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

Form-zvonok div{ padding: 15px 0; }

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

Bot-send-mail{ box-sizing: border-box; width: 100%; }

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

Form-zvonok label,.form-zvonok input{ display: block; width: 100%; box-sizing: border-box; }

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

Form-zvonok label{ margin-bottom: 5px; font-weight: bold; } .form-zvonok input{ padding: 10px 15px; margin-top: 10px; }

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

Form-zvonok label span{ color: red; }

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

Form-zvonok .bot-send-mail{ padding: 15px; margin-top: 10px; background: none; border: none; text-transform: uppercase; color: #fff; font-weight: bold; background-color: #009b97; cursor: pointer; border: 3px #009b97 solid; border-radius: 5px; }

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

Form-zvonok .bot-send-mail:hover{ color: #009b97; background-color: #fff; }

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

Исходные файлы текущей статьи вы можете скачать по .

В этом уроке мы сделаем все максимально просто и своими силами. В частности, для отправки писем мы воспользуемся специальной функцией PHP под названием mail(), которая раньше часто использовалась для отправки писем.

Начнем с синтаксиса функции mail . Данная функция имеет три обязательных параметра и два опциональных (не обязательных). Обязательные параметры:

to — email получателя (также можно указать несколько адресов, перечислив их через запятую);

subject — тема письма;

message — текст письма.

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

Давайте попробуем отправить письмо, используя данную функцию. Сделаем это в файле mail.php, в котором мы принимаем данные из формы. Новый код данного файла будет таким:

Ваше сообщение отправлено

"; }else{ echo "

Ошибка!

"; }

< ? php

$ to = "[email protected]" ; // адрес получателя

$ subject = "Заказ обратного звонка" ; // тема письма

$ message = "Имя: {$_POST["name"]}\r\n" ; // добавляем имя в текст

$ message . = "Телефон: {$_POST["phone"]}" ; // добавляем телефон в текст

$ headers . = "Content-type: text/plain; charset=utf-8" . "\r\n" ; // установливаем кодировку

$ headers . = "From: [email protected]" . "\r\n" ; // добавляем отправителя

if (mail ($ to , $ subject , $ message , $ headers ) ) {

echo "

Ваше сообщение отправлено

" ;

} else {

echo "

Ошибка!

" ;

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

Как видим, код работает, в ответ мы получаем сообщение о том, что письмо отправлено. Поскольку мы работаем на локальном сервере, здесь письма реально не отправляются функцией mail(), они сохраняются в виде текстового файла в специальной папке. В Open Server это папка \userdata\temp\email\. Откроем эту папку и убедимся, что письмо там есть, примерно так оно будет выглядеть:

Отлично! Осталось несколько моментов, которые не помешает поправить в JS скрипте. Например, необходимо выводить сообщение не простым текстом, а именно кодом HTML, а также очищать поля формы после отправки сообщения. Итоговый JS код будет таким:

$(function(){ $("#recall").submit(function(e){ e.preventDefault(); var data = $(this).serialize(); $.ajax({ url: "mail.php", type: "POST", data: data, beforeSend: function(){ $("#submit").next().text("Отправляю..."); }, success: function(res){ $("#recall").find("input").val(""); $("#submit").next().html(res); }, error: function(){ alert("Ошибка!"); } }); }); });

$ (function () {

$ ("#recall" ) . submit (function (e ) {

e . preventDefault () ;

var data = $ (this ) . serialize () ;

$ . ajax ({

url : "mail.php" ,

type : "POST" ,

data : data ,

beforeSend : function () {

$ ("#submit" ) . next () . text ("Отправляю..." ) ;

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

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: Пример формы<$fromMail>\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 в нескольких проектах.

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

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