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

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(), которая будет в обратном порядке считать секунды до перенаправления.

Вот и все, простая форма обратной связи для html сайта готова. Не забудьте только поменять e-mail в файле sendmessage.php на свой.

Добавляем всплывающую форму обратной связи на сайт

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

Для начала нам нужно подключить jqury fancybox, скачать который вы сможете в конце статьи.

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

И придаем ей стили.

Modalbox { color:#FFFFFF; display:block; cursor:pointer; padding:10px 11px; font-size:1.2em; border:solid 1px #F9F9F9; border-radius:2px; background:#70C6B9; width:210px; text-decoration:none; text-align:center; margin:0 auto 20px; } .modalbox:hover { background:#979797; }

Обратите внимание, что кнопке, при нажатии на которую будет вызывать всплывающее окно, обязательно должен быть присвоен класс modalbox и путь href=”#inline”. Без этого всплывающая форма не будет открываться на сайте.

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

#inline { display:none; margin-left:30px; width:80%; margin:0 auto; background:#fff; padding:10px 20px; }

В итоге у нас получается вот такая кнопочка.

При нажатии на которую открывается всплывающее окно с обратной связью.

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

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

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

В случае, если ваш сайт работает на движке wordpress, вы можете использовать специальные плагины для добавления контактной формы. Один из лучших плагинов Contact Form 7. Скачать его можно с официального сайта, либо через админку в разделе Плагины.

После активации плагина в левом меню появится новая вкладка. Открываете ее и нажимаете Add New.

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

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

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

Затем проверяем, отображается ли форма на странице и корректно ли работает. Для этого, достаточно будет просто перейти на страницу, где вставили код. У вас должна появиться вот такая форма:

Теперь посетители вашего сайта смогут связаться с вами через созданную контактную форму на движке wordpress.

Делаем всплывающую форму обратной связи для wordpress

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

Всплывающую форму, описанную выше в статье, просто прикручиваем ее не к html сайту, а к движку.

Форму, созданную через плагин всплывающей формы Contact Form 7, внеся небольшие доработки.

Первый способ уже был описан выше, поэтому сразу перейдем ко второму.

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

X

Давайте разберемся что есть что:

• Ссылка, имеющая id=”callme-open” при нажатии на которую, наша форма будет открываться. Обратите внимания, что эту ссылку нужно вставить не после открытого тега, а в то место, где вы хотите, чтобы эта кнопка располагалась. Обычно ее добавляют в правый угол шапки, рядом с телефоном вашей компании.
• Блок bg-b будет создавать затемненный фон сайта, когда всплывающая форма будет открыта.
• Блок callme будет содержать саму форму обратной связи.
• X – это будет наш крестик в углу форму, при клике на которую форма будет закрываться.
• Ну и php код, в котором будет запускаться шорткод плагина Contact Form 7.

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

Bg-b { position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(51,51,51,0.55); z-index:1000; } body { position:relative; } .callme { position:fixed; top:30%; left:50%; width:300px; margin-left:-150px; z-index:1100; background:#fff; padding:20px 20px 10px; border-radius:4px; } .callme small { position:absolute; right:10px; top:10px; font-size:15px; cursor:pointer; }

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

Данный скрипт необходимо вставить в файл footer, перед закрывающимся тегом body.

Остались последние штрихи и всплывающая форма на wordpress будет готова. Добавьте классам.callme и.bg-b стиль display:none. Это необходимо для того, чтобы форма не появлялась на экране при запуске сайта.

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

UPDATE 06.06.2018

В последних версиях WordPress jQuery скрипты не работают с символом $ , поэтому это следует учесть и заменить $ на jQuery

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

Url: "http://site.ru/sendmessage.php"

А скачать исходники первых двух форм, вы сможете по

UPDATE 04.07.2018

По многочисленным просьбам, форма обратной связи была модернизирована. Теперь в ней учтена установка галочки на согласие об отправке данных согласно законодательству РФ № 152-ФЗ «О персональных данных», доработана адаптивность под любые разрешения экранов, сжаты js и css файлы.

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

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

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

Форма обратной связи php с отправкой на почту

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

1. JQTransform – плагин который позволяет сделать нашу форму обратной связи красивой!

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

Для полноценной работы этой формы будет использован класс – PHPMailer. Считается одним из лучших!

Заметка для самых умных:

Форму обратной связи для сайта можно сделать на HTML! Но работать она начнет только при помощи PHP! И никак иначе!

Это я для тех, кто ищет форму обратной связи только на HTML. Сделать сделаете, но работать она не будет!

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

Эту форму обратной связи я откопал на сайте www.tutorialzine.com ссылка ведет непосредственно на страницу оригинала, т.е. сайт автора данной формы!

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

Признаюсь честно, мы с этой «формочкой» провозились два дня, так как начинали всплывать различные косяки, а недоделанную до конца форму обратной связи, тем более такую красивую, выкладывать не хотелось! Так что если вы любитель все сделать сами, и в вашу светлейшую голову влезет мысль – самому русифицировать данную форму, дам пару советов, так как просто переводом фраз не ограничишься:

1. Эта форма обратной связи заточена под буржуев, от туда же и скачена, поэтому она будет присылать вам вместо нормальных русских символов – кракозяблы. Разберитесь с кодировкой. Да и вообще все «тюлени» будут связаны с этим!

2. Скрипт валидации изначально не понимает наши букв, поэтому их там надо будет прописать!

3. Даже после этих действий если указать тему письма на русском, письмо приходит с темой – No subject (надеюсь правильно написал), это лечится если указать кодировку в файле класса PHPMailer.

4. В оригинальной форме текст в полях ввода прижимался к низу, а не по середине. Это глюк плагина JQTransform.

Ну, вроде все расписал и предупредил. Поехали дальше!