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

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

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

Инструкция по установке скрипта

1. Распакуйте архив в текущую папку на компьютере.

2. Скрипт из папки js (jquery.validate.pack.js) закачайте в одноименную папку на сервер сайта.

3. Подготовьте cтраницу в формате .php, внутри неё будет находиться форма обратной связи. На этой странице будет находиться весь код ФОС.

4. Этот код копируйте и вставляйте в самый верх документа. Имеется ввиду, что выше этого кода ничего не должно быть! Код должен располагаться даже перед тегом HTML!  Внесите в код небольшие изменения - введите свой электронный адрес (в 39-й строке):

<?php
//Если форма отправлена
if(isset($_POST['submit'])) {

        //Проверка Поля ИМЯ
	if(trim($_POST['contactname']) == '') {
		$hasError = true;
	} else {
		$name = trim($_POST['contactname']);
	}

	//Проверка поля ТЕМА
	if(trim($_POST['subject']) == '') {
		$hasError = true;
	} else {
		$subject = trim($_POST['subject']);
	}

	//Проверка правильности ввода EMAIL
	if(trim($_POST['email']) == '')  {
		$hasError = true;
	}  else {
		$email = trim($_POST['email']);
	}

	//Проверка наличия ТЕКСТА сообщения
	if(trim($_POST['message']) == '') {
		$hasError = true;
	} else {
		if(function_exists('stripslashes')) {
			$comments = stripslashes(trim($_POST['message']));
		} else {
			$comments = trim($_POST['message']);
		}
	}

	//Если ошибок нет, отправить email
	if(!isset($hasError)) {
		$emailTo = 'login@yandex.ru'; //Сюда введите Ваш email
		$body = "Name: $name \n\nEmail: $email \n\nSubject: $subject \n\nComments:\n $comments";
		$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

		mail($emailTo, $subject, $body, $headers);
		$emailSent = true;
	}
}
?>

5. В разделе head подключите библиотеку jQuery:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

6. В том же разделе подключите скрипт jquery.validate.pack.js и скрипт вызова функции:

<script src="js/jquery.validate.pack.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
	$("#contactform").validate();
});
</script>

7. Коды подключения стилей расположите между тегами style в разделе head или вставьте в файл стилей вашего сайта:

#contact-wrapper {
	width:355px;
	border:1px solid #e2e2e2;
	background:#F0E68C;
	padding:20px;
	margin:0 auto;
}
#contact-wrapper div {
	clear:both;
	margin:1em 0;
}
#contact-wrapper label {
	display:block;
	float:none;
	font-size:16px;
	width:auto;
}
form#contactform input {
	border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
	border-style:solid;
	border-width:1px;
	padding:5px;
	font-size:16px;
	color:#333;
}
form#contactform textarea {
	font-family:Arial, Tahoma, Helvetica, sans-serif;
	font-size:100%;
	padding:0.6em 0.5em 0.7em;
	border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
	border-style:solid;
	border-width:1px;
}

8. И, наконец, код формы обратной связи вставьте в раздел body в то место где Вы хотели бы её видеть на странице сайта:

<div id="contact-wrapper">

	<?php if(isset($hasError)) { //Если найдены ошибки ?>
		<p class="error">Проверьте, пожалуйста, правильность заполнения всех полей.</p>
	<?php } ?>

	<?php if(isset($emailSent) && $emailSent == true) { //Если письмо отправлено ?>
		<p><strong>Email успешно отправлен!</strong></p>
		<p>Спасибо  <strong><?php echo $name;?></strong> за использование контактной формы! Ваше сообщение было отправлено и я свяжусь с Вами в кратчайшие сроки.</p>
	<?php } ?>

	<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform">
		<div>
		    <label for="name"><strong>Имя:</strong></label>
			<input type="text" size="30" name="contactname" id="contactname" value="" class="required">
		</div>

		<div>
			<label for="email"><strong>Email:</strong></label>
			<input type="text" size="30" name="email" id="email" value="" class="required email">
		</div>

		<div>
			<label for="subject"><strong>Тема:</strong></label>
			<input type="text" size="30" name="subject" id="subject" value="" class="required">
		</div>

		<div>
			<label for="message"><strong>Сообщение:</strong></label>
			<textarea rows="5" cols="40" name="message" id="message" class="required"></textarea>
		</div>
	    <input type="submit" value="Send Message" name="submit">
	</form>
	</div>

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

Для повторной отправки сообщения нажмите F5, для возвращения в исходное состояние выделите адресную строку в браузере и нажмите Enter.

Несколько слов о кодировке

У многих начинающих web-мастеров при установке этой ФОС возникают вопросы, связанные с кодировкой. Дело в том, что полностью установив форму на страницу сайта, человек может наблюдать отображение текста в кракозябрах или квадратиках или ещё в какой-нибудь абракадабре. Причина кроется в различии кодировок скрипта формы и вашего сайта. Скрипт сейчас в кодировке UTF-8. Если кодировка вашего сайта иная, отображение текста формы будет некорректным. В этом случае можно пойти по пути замены кодировки скрипта или воспользоваться возможностями файла .htaccess, который позволяет изменить некоторые параметры (кодировку в нашем случае) в пределах отдельной директории. Об этом почитайте, пожалуйста, в разделе Несколько добрых слов о файле .htaccess.

Это всё о ФОС на jQuery и PHP. Применяйте на сайте, комментируйте материал. Успехов! Ваш Л.М.