Форма обратной связи 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 - есть весьма серьездно доработанные функции для формы обратной связи. Пишите комментарии, если что не понятно. Спасибо.