Как сделать сайт без перезагрузки

Как сделать сайт без перезагрузки

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

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

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

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

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

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

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

как создать форму обратной связи на 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) { $log.="
  • Неправильно заполнено поле \"Ваше имя\" (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)$|(([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5])\.){3}([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$/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 = "";//Ваш 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 "
    Ошибка !

    ".$log."


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

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

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

В рубрике «Мотивация – путь к успеху» сегодня такая картинка:

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

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

На этом всё. С уважением, Павел Макаров.
P.S. Буду рад комментариям к этому посту.

Как сделать сайт без перезагрузки
Как сделать сайт без перезагрузки

Создание отправки формы Как сделать сайт без перезагрузки
Создание отправки формы Как сделать сайт без перезагрузки

AJAX и JavaScript. Загрузка контента Как сделать сайт без перезагрузки
AJAX и JavaScript. Загрузка контента Как сделать сайт без перезагрузки

Форма обратной связи html Как сделать сайт без перезагрузки
Форма обратной связи html Как сделать сайт без перезагрузки

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

Как сделать сайт без перезагрузки Подгрузка контента
Как сделать сайт без перезагрузки Подгрузка контента

Как сделать сайт без перезагрузки Хочу
Как сделать сайт без перезагрузки Хочу

Похожие статьи