Verification: a143cc29221c9be0

One form 2 action php

One form 2 action php

Множество форм - одна цель

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

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

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

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

Форм обратной связи может быть великое множество («Заказать обратный звонок», «Задать вопрос», «Оставить отзыв», «Заполнить форму заказа», «Обратиться к руководителю» и т. д.), и использоваться они могут для разных задач. Но цель у всех будет в сущности одна - обеспечить связь посетителя сайта и его администратора или владельца, получить контакты посетителя для дальнейшего взаимодействия с ним.

Семь подсказок на заметку

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

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

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

    Традиционно формы можно разместить в хедере сайта или на странице контактов.

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

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

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

    Форма должна отображаться и работать одинаково корректно на всех устройствах и во всех браузерах.

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

    Форма должна быть краткой и понятной.

    Что это значит? Форма не должна состоять из большого количества полей или этапов заполнения. Если, конечно, в этом нет жесткой необходимости. Люди стремятся к простоте, они не хотят тратить много времени на то, чтобы разобраться и заполнить десять тысяч полей.

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

    Выглядит более удобно, чем, например:

    Лучше перезвонить и устно уточнить все, что вам нужно, но облегчить посетителю заполнение формы. И повысить тем самым шансы на то, что он к вам обратиться!

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

    Форма должна обладать приятным и практичным дизайном.

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

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

    Форма должна содержать призыв к действию.

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

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

    Форма должна легко сворачиваться.

    Итак, форму легко найти, она обладает приятным дизайном, удобна для заполнения. Что еще?

    Не забудьте попросить разработчиков добавить «крестик» на форму, чтобы можно было ее закрыть. Или настроить автоматическое сворачивание формы после ее заполнения.

    Кажется, что мелочь, а общую картину может подпортить.
    Например, посетитель оставил заявку на сайте и хочет вернуться к просмотру сайта. НО! Форма висит, не исчезает, как ее закрыть – непонятно. Или другой вариант – посетитель передумал писать заявку, а решил сам позвонить. Получиться может неприятно.

    Настройка ответного сообщения.

    Как-то вот так…

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

Подводя итог

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

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

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

Сразу скажу, что это довольно сложная тема сама по себе, а рассказать нужно так, чтобы её смогли понять и усвоить и те люди, которые совсем не разбираются в программировании на PHP и JavaScript (ajax). Эта статья не для новичков, и если Вы плохо разбираетесь в HTML и совсем не знаете PHP, то разобраться Вам будет трудновато.

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

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

Нажимая кнопку «Отправить» вверху над формой обратной связи появится подсказка «Сообщение обрабатывается…»

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

Если же всё было заполнено верно, то текст из формы обратной связи отправится на Ваш e-mail, а человеку будет показано сообщение об успешной отправке.

Ну а теперь друзья переходим к коду.
HTML-код формы обратной связи без перезагрузки будет выглядеть так:

Задать новый вопрос:

HTML- это скелет нашей формы. Давайте её немного украсим, добавив CSS-стилей:

SidebarForm { background: #f6f6f6; box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; width: 420px; } #cor5 { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .sidebarForm h4 { font: 14px Verdana; color: #333333; text-align: left; padding: 10px 10px 0 10px; } .sidebarForm label { font: 12px Verdana; color: #333; padding: 10px; } .sidebarForm .input { width: 170px; height: 20px; overflow: hidden; background: white; border: solid 1px #DFE2E5; margin: 5px 0 10px 10px; box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; } .sidebarForm .input input { width: 165px; height: 26px; background: white; margin: -3px 0 0 -5px; padding: 0px 8px; border: none; background: transparent; } .sidebarForm .textarea { height: 70px; width: 320px; overflow: hidden; background: white; border: solid 1px #DFE2E5; margin: 5px 0 10px 10px; box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; } .sidebarForm .textarea textarea { width: 316px; height: 66px; background: white; border: none; resize:none; } .sidebarForm button { border: 2px #ccc solid; width: 150px; height: 25px; font: 12px Verdana; font-weight: 700; color: #FFFFFF; background-color: #cc0000; padding-bottom: 2px; margin: 5px 0 15px 135px; }

Информация из нашей формы обратной связи после нажатия на кнопку «Отправить», отправляется на сервер (в обработчик) в фоновом режиме, без перезагрузки страницы в браузере. За это отвечает JavaScript-код:

$(document).ready(function() { // Форма обратной связи................................./ var regVr22 = "

Сообщение обрабатывается...

"; $("#send").click(function(){ $("#loadBar").html(regVr22).show(); var posName = $("#posName").val(); var posEmail = $("#posEmail").val(); var posText = $("#posText").val(); $.ajax({ type: "POST", url: "../send.php", data: {"posName": posName, "posEmail": posEmail, "posText": posText}, cache: false, success: function(response){ var messageResp = "

Спасибо, "; var resultStat = "! Ваше сообщение отправлено!

"; var oll = (messageResp + posName + resultStat); if(response == 1){ $("#loadBar").html(oll).fadeIn(3000); $("#posName").val(""); $("#posEmail").val(""); $("#posText").val(""); } else { $("#loadBar").html(response).fadeIn(3000); } } }); return false; }); });

В обработчике нам необходимо проверить что отправил посетитель, и если всё в порядке отправить письмо админу сайта. А посетителю сообщить, что его письмо успешно отправлено! Пишем php-код:

header("Content-type: text/html; charset=utf-8"); //********************************************** if(empty($_POST["js"])){ $log ==""; $error="no"; //флаг наличия ошибки $posName = addslashes($_POST["posName"]); $posName = htmlspecialchars($posName); $posName = stripslashes($posName); $posName = trim($posName); $posEmail = addslashes($_POST["posEmail"]); $posEmail = htmlspecialchars($posEmail); $posEmail = stripslashes($posEmail); $posEmail = trim($posEmail); $posText = addslashes($_POST["posText"]); $posText = htmlspecialchars($posText); $posText = stripslashes($posText); $posText = trim($posText); //Проверка правильность имени if(!$posName || strlen($posName)>20 || strlen($posName) Неправильно заполнено поле \"Ваше имя\" (3-15 символов)!"; $error="yes"; } //Проверка email адреса function isEmail($posEmail) { return(preg_match("/^[-_.[:alnum:]][email protected]((([[:alnum:]]|[[:alnum:]][[:alnum:]-]*[[:alnum:]])\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum|mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)$|((?|||)\.){3}(?|||))$/i" ,$posEmail)); } if($posEmail == "") { $log .= "

  • Пожалуйста, введите Ваш email!
  • "; $error = "yes"; } else if(!isEmail($posEmail)) { $log .= "

  • Вы ввели неправильный e-mail. Пожалуйста, исправьте его!
  • "; $error = "yes"; } //Проверка наличия введенного текста комментария if (empty($posText)) { $log .= "

  • Необходимо указать текст сообщения!
  • "; $error = "yes"; } //Проверка длины текста комментария if(strlen($posText)>1010) { $log .= "

  • Слишком длинный текст, в вашем распоряжении 1000 символов!
  • "; $error = "yes"; } //Проверка на наличие длинных слов $mas = preg_split("/[\s]+/",$posText); foreach($mas as $index => $val) { if (strlen($val)>60) { $log .= "

  • Слишком длинные слова (более 60 символов) в тексте записи!
  • "; $error = "yes"; break; } } sleep(2); //Если нет ошибок отправляем email if($error=="no") { //Отправка письма админу о новом комментарии $to = "[email protected]";//Ваш e-mail адрес $mes = "Человек по имени $posName отправил Вам сообщение из формы обратной связи Вашего сайта: \n\n$posText"; $from = $posEmail; $sub = "=?utf-8?B?".base64_encode("Новое сообщение с Вашего сайта")."?="; $headers = "From: ".$from." "; $headers .= "MIME-Version: 1.0 "; $headers .= "Content-type: text/plain; charset=utf-8 "; mail($to, $sub, $mes, $headers); echo "1"; //Всё Ok! } else//если ошибки есть { echo "

    Ошибка!

    "; //Нельзя отправлять пустые сообщения } }

    В коде представлены необходимые комментарии и пояснения. Более подробно я рассказываю в видео ниже.

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

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

    Привет ребята. На связи Серёга. Знаю, что давно не писал - дела, дела... Да и сейчас, если честно, времени совсем нету. И форму будем делать не по моему уроку, а по урокам моего знакомого - Кротова Романа .

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

    Мы просто заведём её в HTML и создадим PHP-обработчик для отправки писем. Всё будет последовательно, с нуля и до результата. Так, что бы вы всё поняли, и смогли самостоятельно встроить нужные поля.

    Рома, покажет Вам как сделать Ajax-загрузку. То есть отправлять данные с формы без перезагрузки странички. Что, согласитесь, весьма удобно и современно.

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

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

    Обращаю внимание! Что бы форма заработала - необходимо, что бы ваш хостинг поддерживал PHP.

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

    Код из урока по созданию формы обратной связи

    Вот что получилось в итоге в файле index.php

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

    Содержимое файла submit.php:

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

    If (!empty($_POST["name"]) AND !empty($_POST["email"]) AND !empty($_POST["message"])) { $headers = "From: Кротов Роман " . "Reply-To: [email protected] " . "X-Mailer: PHP/" . phpversion(); $theme = "Новое сообщение с сайта"; $letter = "Данные сообщения:"; $letter .=" "; $letter .="Имя: ".$_POST["name"]; $letter .=" Email: ".$_POST["email"]; $letter .=" Телефон: ".$_POST["phone"]; $letter .=" Сообщение: ".$_POST["message"]; if (mail("[email protected]", $theme, $letter, $headers)){ header("Location: /testform/thankyou.php"); } else { header("Location: /testform"); } } else { header("Location: /testform"); }

    Ну а саму страницу уведомление не вижу смысла здесь размещать. Там базовая структура HTML-документа и всего одна строчка текста.

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

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

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

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

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

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

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

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

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

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



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

    if (isset($_POST["name"])) {$name = $_POST["name"];}
    if (isset($_POST["email"])) {$email = $_POST["email"];}
    if (isset($_POST["mess"])) {$mess = $_POST["mess"];}

    $to = "pupkin@rambler.ru "; /*Укажите ваш адрес электоронной почты*/
    $headers = "Content-type: text/plain; charset=utf-8";
    $subject = "Сообщение с вашего сайта";
    $message = "Имя пославшего: $name \nЭлектронный адрес: $email \nСообщение: $mess";
    $send = mail ($to, $subject, $message, $headers);
    if ($send == "true")
    {
    echo "Спасибо за отправку вашего сообщения!

    ";
    echo " Нажмите, чтобы вернуться на главную страницу";
    }
    else
    {
    echo "

    Ошибка. Сообщение не отправлено!";
    }
    ?>

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

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

    • pupkin@rambler.ru - адрес г.Пупкина заменить на адрес вашей почты, куда будут поступать сообщения от посетителей сайта, а также от неутомимых спамеров. Кстати, для защиты от них в форму часто вводят так называемую капчу (англ. 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 , то для этого надо выбрать раздел меню Изменить - Свойства страницы - Кодировка .

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

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

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

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

    Навигация

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      прописываем тэг создания поля со следующими значениями: Введите ваше имя» required \> . Параметр «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 , имеют простую и лёгкую настройку из панели управления, а также прекрасно подходят для сайтов без движка.

    Этапы подключения к базе данных MySQL

    1. Код PHP начинается с и заканчивается ?> Так компьютеру будет понятно, где начало и где конец программы.
    2. В самом начале кода удобно указать способ отображения ошибок — если что-то пойдет не так, вы сможете быстро понять код ошибки. В языке программирования PHP для этого используются следующие команды:

      ini_set('display_errors', 1);
      ini_set('display_startup_errors', 1);
      error_reporting(E_ALL); 
    3. Соединение с базой данных MySQL: создаем переменную, например, $connect, в которой через коннектор вносим доступы к нашей базе данных (имя, пароль и т.п.). Эта база данных MySQL должна уже существовать и «крутиться» либо на сервере, либо на локалке. Про установку и создание своей базы данных у нас будет отдельный материал. Подключаемся:

      $connect = mysqli_connect('localhost', 'database', 'password', 'user');
    4. Создаем запрос к базе данных — какие данные мы хотим получить: для этого делаем новую переменную, например, $query1, которой присваиваем значение запроса на языке, понятном для базы MySQL — выбери из где . Запрос выглядит так:

      $query1 = "SELECT Name FROM igroki WHERE N='7'";
    5. Подготовка в возвращение результатов запроса для чтения: создаем новую переменную, например, $result— которая получит результат запроса. Используется конструкция [подключение к БД] -> query([запрос к БД]). В нашем примере возвращение результатов выглядит так:

      $result = $connect->query($query1);
    6. Затем вы должны получать по одной записи из набора результатов возвращенного запроса (по сути перебором). В нашем примере — это будет только 1 запись, потому что вы получаете id = 7. Обычно вы будете использовать mysqli_fetch_array ($ result), чтобы вернуть массив данных, или вы можете использовать mysqli_fetch_object ($ result), чтобы вернуть объект данных. В нашем примере мы создаем новую переменную, например, $record и фетчим полученный массив:

      $record = mysqli_fetch_array($result);
    7. Напечатать имя седьмого игрока: для печати в PHP используется оператор echo, где в кавычках можно написать текст для печати, и через точку объединить текст с переменной — так как возвращенный массив имеет несколько «колонок», а нам нужно вывести именно имя, то указываем в скобках к переменной $record именно 'Name':

      echo 'Name of 7th player: ' . $record['Name'];
    8. Отключение от базы данных:

      $connect -> close();

    *Если у вас есть несколько записей в вашей таблице и вы хотите их вывести, вы можете использовать цикл while для перебора данных следующим образом:

    $query2 = "SELECT Name FROM igroki";
    $result2 = $connect->query($query2);

    while ($record2 = mysqli_fetch_array($result2))
    {
        echo 'Name: ' . $record2['Name'] . '
    ';

    }

    Подключения к базе данных MySQL — простой пример запроса на PHP


    ini_set(‘display_errors’, 1);
    ini_set(‘display_startup_errors’, 1);
    error_reporting(E_ALL);

    $connect = mysqli_connect(‘localhost’, ‘database’, ‘password’, ‘user’);

    $query1 = «SELECT Name FROM igroki WHERE N=’7′»;

    $result = $connect->query($query1);

    $record = mysqli_fetch_array($result);

    echo ‘Name of 7th player: ‘ . $record[‘Name’];

    echo «





    »;  //Это разделитель html

    // Перебор нескольких значений:

    echo «All players:

    »;
    $query2 = «SELECT Name FROM igroki»;

    $result2 = $connect->query($query2);
    while ($record2 = mysqli_fetch_array($result2)) {
    echo ‘Name: ‘ . $record2[‘Name’] . ‘
    ’;

    }

    $connect -> close();
    ?>

    Создание кнопки на сайте для получения значений из базы данных MySQL

    К тому коду, который вам уже известен — базовый запрос к БД — осталось добавить html-код кнопки через тег

    (позволяет создавать на сайте интерактивные элементы и отправлять данные на сервер).

    Чтобы внутри формы появилась кнопка вводим action — можно пустой (action=''), чтобы при нажатии загружалась эта же программа, либо можно в кавычках указать ссылку на другой файл с кодом, который запустится при нажатии кнопки (например, action='submit.php').

    Важно присвоить форме select name — любое имя, на которое затем можно ссылаться в программе).

    На сайте кнопку, списки, выпадающие меню можно сделать с помощью форм, которые могут быть типа POST (method=’POST’) или GET (method=’GET’). Если делать форму POST, то пользователь не будет видеть в строке браузера текст, соответствующий выбранным опциям. Если сделать форму GET, то строка браузера после выбора варианта покажет значение (похожим образом работает поисковик, если сделать запрос, то в строку браузера добавляется информация о запросе).ᅠ


    if (isset($_POST[‘submit’]))
    {
    echo » 



    «;
    }

    ini_set(‘display_errors’, 1);
    ini_set(‘display_startup_errors’, 1);
    error_reporting(E_ALL);

    $connect = mysqli_connect(‘localhost’, ‘database’, ‘password’, ‘user’);
    $query1 = «SELECT Name FROM igroki WHERE N=’7′»;
    $result = $connect->query($query1);
    $record = mysqli_fetch_array($result);

    if (isset($_POST[‘submit’]))
    {
    echo ‘Name of 7th player: ‘ . $record[‘Name’];
    }

    $connect -> close();
    ?>

    Создание формы (выпадающий список) с кнопкой на сайте

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

    На сайте выпадающее меню создается с помощью форм, которые могут быть типа POST (method=’POST’) или GET (method=’GET’). 

    Чтобы создать выпадающее меню с кнопкой, используется html-тег формы

    с выбором вариантов через теги:

    (можно указать action='', чтобы при нажатии загружалась эта же программа, либо можно в кавычках указать ссылку на другой файл с кодом, который запустится при нажатии кнопки; важно присвоить select name — любое имя, на которое затем можно ссылаться в программе);

    (option value — это значение, которое будет записано в переменную при выборе этого пункта, а Seven и Eight  — это то, что показывается пользователю на сайте в выпадающем меню);

    внутри формы добавляем кнопку через html-тег .

    Пример кода для выпадающего меню с кнопкой методом POST




    Создав форму с кнопкой, нам теперь надо уметь получать пользовательский выбор. Если пользователь нажмет кнопку выбора варианта, то программа должна понимать это. Давайте научим компьютер общаться с пользователем. Для этого создам условие с проверкой нажатия кнопки — если кнопка была нажата (isset в PHP проверяет, есть ли у переменной значение, отличное от null), то сделай запрос к базе данных и напечатай то, что выбрал пользователь.

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

    Получение выбора пользователя после нажатия кнопки на сайте — напечатать одно значение из базы данных (имя седьмого игрока)

    if (isset($_POST[‘submit’]))
    {
        $number = $_POST[‘PlayerID’];
        $query = «SELECT Name FROM igroki WHERE N=’$number'»;
        $result = $connect->query($query);
        $record = mysqli_fetch_array($result);
        echo ‘Name of 7th player: ‘ . $record[‘Name’];
    }

    Cоздание формы (выпадающий список) с кнопкой, отправляющей запрос к базе данных MySQL на html + PHP с выводом результатов на сайте





    ini_set(‘display_errors’, 1);
    ini_set(‘display_startup_errors’, 1);
    error_reporting(E_ALL);

    $connect = mysqli_connect(‘localhost’, ‘database’, ‘password’, ‘user’);

    if (isset($_POST[‘submit’]))
    {
        $number = $_POST[‘PlayerID’];
        $query = «SELECT Name FROM igroki WHERE N=’$number'»;
        $result = $connect->query($query);
        $record = mysqli_fetch_array($result);
        echo ‘Name of 7th player: ‘ . $record[‘Name’];
    }

    $connect -> close();
    ?>

    Виды методов jQuery для выполнения AJAX-запросов

    В следующей таблице перечислены все AJAX-методы. доступные в библиотеке jQuery, причем, если в первой колонке вы видите ссылку на метод, то на сайте есть статья, которая ему посвящена:

    Метод Описание
    $.ajax() Выполняет асинхронный AJAX-запрос
    $.ajaxPrefilter() Обработка пользовательских Ajax -параметров или изменение существующих параметров перед отправкой каждого запроса и до того, как они будут обработаны методом $.ajax()
    $.ajaxSetup() Устанавливает значения по умолчанию для будущих AJAX-запросов
    $.ajaxTransport() Создает объект, который обрабатывает фактическую передачу данных Ajax
    $.get() Загружает данные с сервера с помощью AJAX-запроса методом GET
    $.getJSON() Загружает данные в кодировке JSON с сервера с помощью HTTP-запроса GET.
    $.parseJSON() Принимает правильно сформированную строку JSON и возвращает полученное значение JavaScript. Не рекомендуется в версии 3.0, используйте вместо этого метод JSON.parse().
    $.getScript() Загружает (и выполняет) JavaScript с сервера с помощью AJAX и GET-запроса
    $.param() Создает сериализованное представление массива или объекта (может использоваться как строка запроса URL для запросов AJAX)
    $.post() Загружает данные с сервера с помощью HTTP POST-запроса
    ajaxComplete() Задает функцию, запускаемую после завершения AJAX-запроса
    ajaxError() Задает функцию, запускаемую, когда AJAX-запрос завершается с ошибкой
    ajaxSend() Задает функцию, запускаемую  перед отправкой AJAX-запроса
    ajaxStart() Задает функцию, запускаемую  при первом AJAX-запросе
    ajaxStop() Определяет функцию, запускаемую, когда все запросы AJAX завершены
    ajaxSuccess() Задает функцию, запускаемую при успешном завершении AJAX-запроса
    load() Загружает данные с сервера и помещает возвращенные данные в выбранный элемент
    serialize() Кодирует набор элементов формы как строку для отправки данных в виде пар "имя1=значение1&имя2=значение2"
    serializeArray() Кодирует набор элементов формы как массив имен и значений

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

    Метод $.ajax

    Прежде,чем мы будем применять метод  $.ajax в JavaScript, давайте определимся с практической задачей. Она достаточно простая - пользователь должен заполнить простую форму, а после этого мы отправим ее на сервер и получим все заполненные данные в виде таблицы. В форме нужно будет указать имя (логин), email и набор знаний в виде отмеченных флажков (чекбоксов).

    HTML-разметка

    Давайте посмотрим на разметку формы в html-файле:

    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

    form action="php/test-ajax.php" class="small-form" id="testForm">

        p>label for="username">Ваше имя/label>

           input type="text" id="username" name="username" required>/p>

        p>label for="useremail">Ваш email/label>

           input type="email" id="useremail" name="useremail" required>/p>

        p class="col-2">label>Знания:/label>/p>

        div class="row">

           div>

              label>input type="checkbox" name="skills[]" value="HTML"> HTML/label>

              label>input type="checkbox" name="skills[]" value="CSS"> CSS/label>

           /div>

           div>

              label>input type="checkbox" name="skills[]" value="JavaScript"> JavaScript/label>

              label>input type="checkbox" name="skills[]" value="PHP"> PHP/label>

          /div>

        /div>

        button id="send" class="btn btn-info">Отправить/button>

    /form>

    div class="loader" style="display: none">

        div id="loader-1">

            span>/span>

            span>/span>

            span>/span>

            span>/span>

        /div>

    /div>

    table class="small-width">

        thead>

            tr>

                th>Данные/th>

                th>Значение/th>

            /tr>

        /thead>

        tbody>/tbody>

    /table>

    ="js/jquery-3.5.1.min.js">

    ="js/jquery-ajax.js">

    Обратите внимание на name="skills[]" - мы даем одинаковые имена нескольким чекбоксам (флажкам), чтобы собрать затем все отмеченные пользователем значения в массив.

    Кроме того, в самой форме (тег

    ) есть атрибут action, который нам понадобится в скрипте.

    JavaScript

    Метод  - $.ajax  позволяет передать ряд параметров внутри функции. Например, это url файла, который будет обрабатывать данные, - он передается в параметре url. В параметре type указывается метод передачи данных: чаще всего 'POST', т.к. он позволяет передавать бОльшие объемы данных, но также может быть 'GET', особенно, когда данные нужно получать, а не передавать.

    Кстати, параметр method: "GET" - это значение по умолчанию для $.ajax, поэтому при загрузке данных вы можете смело его опустить.

    В параметре data указываются те данные, которые нужно отправить на сервер в виде пар "имя_переменной: значение". Очень удобно использовать для этой цели метод jQuery serialize(), который собирает все данные формы в строку "переменная1=значение1&переменная2=значение2&переменная3=значение3" и т.д.

    Функция success позволит нам вставить полученное ею значение (параметр ) в нужное место html-разметки. Код, представленный ниже нужно разместить в файле jquery-ajax.js, который в разметке мы подключим после подключения jQuery нужной вам версии.

    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

    $(document).ready(function() {

        let testForm = $('#testForm');

        testForm.submit(function() {

            if ($('#username').val().length 5) {

                alert("Введите не менее 5 символов!");

                $('#username').focus();

                return false;

            }

            if ($('#useremail').val().length 5) {

                alert("Введите не менее 5 символов!");

                $('#useremail').focus();

                return false;

            }

            if ($('input[name="skills[]"]:checked').length == 0) {

                alert("Выберите хотя бы один пункт!");

                return false;

            }

            $.ajax({

                url: testForm.attr('action'),

                type: 'POST',

                data: testForm.serialize(),

                dataType: 'html',

                beforeSend: function(){

                   $('.loader').show();

                },

                success: function(result) {

                    $(".small-width tbody").html(result);

                },

                complete: function(){

                    $('.loader').hide();

                }

            });

            return false;

        });

    });

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

    При отправке AJAX-запроса указываем в параметре url данные из атрибута action нашей формы. В нашем примере это файл test-ajax.php, который размещен в папке php, являющейся дочерней для каталога с нашим html-файлом.

    Использование предзагрузчика

    Как правило, для того чтобы данные ушли на сервер, и файл на сервере вернул ответ, нужно некоторое время. Чем проще передаваемые данные и меньше их объем, а также больше скорость Интернета, тем меньше времени требуется для выполнения этих действий. Чтобы показать пользоваелю, что процесс идет, обычно используют предзагрузчик - gif-изображение или код HTML+CSS. Мы используем второй вариант - для этого перед таблицей в html-разметке у нас есть