PHP + jQuery / Скрипты

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

В интернете уже полно статей по созданию форм обратной связи или формы - заказать обратный звонок. Однако в этом уроке я бы хотел выложить свою версию popup окна написанную ЯRIK'ом - моим хорошим другом и отличным программистом - версию popup окна. Весь функционал появления формы будет написан на jquery. А обработчик данных будем писать на PHP + будем записывать данные в базу MySQL? для сбора данных. В общем приступим!

Для начала давайте напишем html форму и украсим все css. Код с формой я вставляю в конец документа перед тегом :


Action формы - путь к php файлу на сервере в папке php/order.php Позже разберем за что отвечает этот файл. А пока давайте приведем внешний вид формы в порядок:

#popup {
    display: none;
    left: 50%;
    position: fixed;
    top: 50%;
    z-index: 2000;
    background:#eeeeee;
    width:420px;
    height: 330px;
    padding:10px 20px 20px 20px;
}
    *html #popup  {
        position: absolute;
    }

    #popup h3{
        color:#ab6969;
        font-size:30px;
        font-weight:normal;
        text-transform:uppercase;
        text-align:left;
        margin-bottom:20px;
    }

    #popup p {
        padding-bottom:15px;
        text-align: center;
    }

    #imgcode {
        float:left;
    }

    #popup input[type=text] {
        text-align:left;
        width:268px;
        padding:0 10px;
        height:30px;
        display:block;
        margin:10px 0px;
        border:1px solid #eee;
        border-top-color:#ccd1d7;
        color:#000000;
        background:#ffffff;
        font-family: Arial, Tahoma, sans-serif;
        font-size: 12px;
    }
        #popup textarea {
            text-align:left;
            width:398px;
            padding:10px 10px;
            display:block;
            margin:10px 0px;
            border:1px solid #eee;
            border-top-color:#ccd1d7;
            color:#000000;
            background:#ffffff;
            font-family: Arial, Tahoma, sans-serif;
            font-size: 12px;
            height: 80px;
        }
            #popup .button {
                font-size: 16px;
                box-sizing: border-box;
                background: #ab6969;
                width: 140px;
                height: 35px;
                line-height: 35px;
                display: block;
                text-align: center;
                text-decoration: none;
                color: #ffffff;
                float:right;
                text-shadow: none;
                border: 1px solid #705062;
                border-radius: 0;
            }
                #popup .button:hover {
                    background: rgba(171, 105, 105, 0.88);
                 }

    #popup_close {
        display:block;
        position: absolute;
        top: 10px;
        right: 10px;
        width: 12px;
        height: 12px;
        background: url(images/close.png) no-repeat center center;
        cursor: pointer;
        z-index: 2103;
    }

    #popup_close:hover {
        opacity:0.7;
        transform: rotate(90deg);
        transition: all 0.5s ease-in-out 0s;
    }
#fade {
    display: none;
    background: #2c3e50;
    position: fixed; left: 0; top: 0;
    width: 100%; height: 100%;
    opacity: .50;
    z-index: 1000;
}

    *html #fade {
        position: absolute;
    }

Комментировать код CSS я не буду, в нем и так все понятно ;-) Перейдем лучше к самому интересному: jQuery

// =========================================================================  contact_form
$(function() {
	//Функция проверяет заполнено ли поле с телефоном
	function formValide() {			
		var str = $('#contact_form input[name=tel]').val();
		str = jQuery.trim(str);                
		if(str.length < 5){                
			alert ('Введите телефон');			
			return false;
		}	
		return true;
	}

	//при нажатии на кнопку button нужной формы запускаем функцию обработки данных
	$('#contact_form .button').live('click', function() {
		if (formValide()) {
			//если форма прошла проверку, выводим блок с текстом ожидания
			$('#contact_form').before('

Оформление заявки. Подождите...

'); $('#contact_form').hide(); //берем путь php обработчика order_url = $('#contact_form').attr('action'); //посылаем асинхронный запрос на сервер и передаем все данные формы $.post(order_url,{ name: $('#contact_form input[name=name]').val(), tel: $('#contact_form input[name=tel]').val(), email: $('#contact_form input[name=email]').val(), message: $('#contact_form textarea[name=message]').val(), send: "1" }, function(data) { //выводим возврашаемый сервером код html вместо содержимого формы $('#contact_form').html(data); $('#contact_form').show(); $('#contact_form_info').remove(); }, "html"); } return false; }); }); // ========================================================================= go_order $(function() { //фкнкция вызова формы обратной связи $('#callback').click(function(){ //появление окна обратной связи $('#popup').fadeIn(); //добавляем к окну иконку закрытия $('#popup').append(''); //расчитываем высоту и ширину всплывающего окна что бы вывести окно прямо по центру экрана q_width = $('#popup').outerWidth()/-2; q_height = $('#popup').outerHeight()/-2; $('#popup').css({ 'margin-left': q_width, 'margin-top': q_height }); //выводим затемение страницы и делаем полупрозрачным $('body').append('
'); $('#fade').css({'filter' : 'alpha(opacity=40)'}).fadeIn(); return false; }); //функция закрытия окна $('#popup_close, #fade').live('click', function() { $('#fade').fadeOut(function() { $('#fade').remove(); $('#popup_close').remove(); $('#popup').fadeOut(); }); }); });

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


  • По нажатию на кнопку с id="callback" запускается функция javascript отображения всплывающего окна.
  • Добавляется кнопка закрытия окна и задний полупрозрачный фон для эффекта.
  • Обязательное поле для заполнения в данном примере только одно - номер телефона.
  • По нажатию на кнопку заказать - выполняется проверка : заполнено ли поле номер телефона. Если меньше 5 символов или одни пробелы, alert выводит ошибку: введите телефон. Вместо alerta можно использовать более приемлемый метод валидации. Мы прикрутим такой в статье создания всплывающей формы для codeigniter. За основу будет браться этот урок.
  • После проверки данных. Мы заменяем форму в окне на текст предварительной обработки.
  • Посылаем методом post запрос к файлу обработчику order.php на сервере
  • В качестве передаваемых данных обрабатываем все поля нашей формы
  • При положительном ответе выводим возвращаемую сервером информацию и выводим html код в всплывающем окне, об успешной отправке или ошибке.

Теперь давайте перейдем к нашему php файлу:

	header('Content-type: text/html; charset=utf-8');
	error_reporting(0);   

if(!empty($_POST['send'])) {
	$name = substr(htmlspecialchars(trim($_POST['name'])), 0, 300);
	$tel = substr(htmlspecialchars(trim($_POST['tel'])), 0, 100);
    $email = substr(htmlspecialchars(trim($_POST['email'])), 0, 100);
    $message = substr(htmlspecialchars(trim($_POST['message'])), 0, 3000);	
	$ip = $_SERVER['REMOTE_ADDR'];

	$Nzakaz = rand(10000, 99999);

	$mess  = "Имя: ".$name."
"; $mess .= "Телефон: ".$tel."
"; $mess .= "Email: ".$email."
"; $mess .= "Сообщение: ".$message."
"; $theme = "Заявка Z".$Nzakaz; mail("[email protected]", $theme, $mess, "From: mysite.com \nContent-Type: text/html;\n charset=utf-8\nX-Priority: 0"); echo "

Заявка удачно оформлена.

"; echo "

Заявке присвоен номер Z".$Nzakaz.". Наш менеджер свяжется с вами в ближайшее время.

"; } else { echo "

Ошибка! Попробуйте еще раз.

"; }

Что мы делаем:

  • Выставляем кодировку страницы UTF-8
  • Убираем вывод ошибок
  • Проверяем были ли переданы данные скрипту методом POST. Если нет то выводим для всплывающего окна текст с ошибкой
  • Обрабатываем все переданные данные, да бы избежать вредоносного кода и взлома формы.
  • Генерируем случайный номер заказа
  • Формируем сообщение
  • Функцией mail отправляем письмо на почту.
  • Выводим сообщение об успешной отправки письма. Текст будет выводится в нашем окошке

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

image description

80826 Просмотров Комментариев: 25

Владимир

Ответить

Есть бесплатный скрипт обратного звонка, вот ссылка http://consultant-web.ru/callme/

Алекс

Ответить

Можно поподробнее о подключение php и базы данных. Пробую поставить на wordpress...все встало, но при оправке зависает и письмо не проходит.

Василий

Ответить

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

Поляков Е.

Ответить

Василий, вы имеете ввиду выпадающий список для формы < select >< option >? Очень просто. Добавляете в форму тег < select > - подробнее можно почитать здесь.

Что бы передать значение скрипту PHP - нужно добавить следующую строчку с отправкой данных метододм post(jquery строка №24):
select: $('#contact_form select[name="your_select_input"]').val()

После - уже в обработчике php - можно получить значение выбранное из списка вот так:
$select = substr(htmlspecialchars(trim($_POST['select'])), 0, 300);
И все.

Юрий

Ответить

Здравствуйте. Как встроить Google ReCaptcha в Ваш код? У меня не получается post запрос получить корректно, т.к. он там через js формируется. Спасибо.

Поляков Е.

Ответить

Добрый день. Статью - как использовать reCaptcha от google еще не написал, так что пока легче всего будет найти уже готовый вариант в интернете.

Но в двух словах: выводим блок <div class="g-recaptcha" data-sitekey="site_key"></div>, предоставленный google - в вашей форме.

Код сгенерирует скрытое поле с именем g-recaptcha-response. Дальше в обработчике php мы проверяем валидность данного кода обращаясь к серверу google - передавая методом GET параметры: секретный ключ, IP адрес пользователя и данные с формы с скрытого поля. То есть:
$re = $_POST['g-recaptcha-response']
$google_url=https://www.google.com/recaptcha/api/siteverify
$secret=ваш секретный ключ
$ip=$_SERVER['REMOTE_ADDR']
$url=$google_url."?secret=".$secret."&response=".$re."&remoteip=".$ip;

Полученные данные json декодируем и проверяем значения ответа. Если все впорядке - продолжаем работу скрипта.

Что добавить в код jquery -написал в личку в вк, т.к. много изменений. Если еще кому будет необходим код с изменениями - пишите. Обновим статью;)

Полина

Ответить

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

Андрей

Ответить

Большое спасибо за скрипт! Для тех, кто использует JQuery 1.9+ надо менять live на on в скрипте и будет Вам счастье :-)

Максим

Ответить

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

Александр

Ответить

Подскажите как закрыть окно, у меня jquery 2.1.4 Открытие работает отлично, а вот закрытие никак //функция закрытия окна $('#popup_close, #fade').on('click', function() { $('#fade').fadeOut(function() { $('#fade').remove(); $('#popup_close').remove(); $('#popup').fadeOut(); }); });

Vitalybest

Ответить

Для тех, кто только набрел на тему, на текущий момент проблема решается таким образом: //функция закрытия окна $(document).on("click","#popup_close, #fade",function() { $('#fade').fadeOut(function() { $('#fade').remove(); $('#popup_close').remove(); $('#popup').fadeOut();}); });

feuer81

Ответить

Можно как то приспособить данный скрипт, чтобы данные из формы записывались в текстовый файл на сервере?

Алексей

Ответить

Где же ты был Женя раньше... мне так не хватало грамотно написанного php обработчика и проверка через js.... но лучше поздно, чем вообще ни когда ))

Александр

Ответить

Приветствую! Спасибо за скрипт. Но почему то не срабатывает по нажатию на Заказать звонок. Уже и на компе проверил - всё окей. На сайте (Вордпресс) - никак. Просто появляется # в урл и экран поднимается вверх. Подскажите, в чем может быть проблема?

Тимур

Ответить

Плохо что не работает с новыми версиями jquery

Казбек

Ответить

Спасибо за скрипт! Исправил некоторые ошибки в PHP, исправил кодировку и т.д.

БензоТопор

Ответить

Подскажите какие столбцы должно содержать поле 'order' в БД? Скрипт сробатывает но писем не приходит... Подскажите пожалуйста, как подправить это дело? Скрипт классный, нравится очень! Хотелось бы использовать его...

Александр

Ответить

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

Виктор

Ответить

Непонятно куда пихать файлы и под каким именем.

этот понятно что в сам html. php тоже понятно в отдельной папке. а остальные???

Саня

Ответить

Витек, ты туп, как сто залуп ;)

Денис

Ответить

Подскажите как вывести ещё одну кнопку закрыть после удачно оформленной заявки ниже текста ?

Сергей

Ответить

Не работает закрытие формы, можно как-то иначе ее закрыть по нажатию на крестик?

Vitalybest

Ответить

см. выше есть решение

Жасмин

Ответить

у кого-то кроме меня еще не работает функция закрытия окна //функция закрытия окна $('#popupclose, #fade').on('click', function() { $('#fade').fadeOut(function() { $('#fade').remove(); $('#popupclose').remove(); $('#popup').fadeOut(); }); }); В чем причина ?

Жасмин

Ответить

а, не , уже нашла вот это : //функция закрытия окна $(document).on("click","#popup_close, #fade",function() { $('#fade').fadeOut(function() { $('#fade').remove(); $('#popup_close').remove(); $('#popup').fadeOut();}); }); :)

« Предыдущая статьяВыезжающая с боку панель на jquery Следующая статья »Как сделать всплывающее окно с Youtube видео.