Открыть меню    

PHP контактная форма плюс jQuery валидация

Вам требуется контактная форма на jQuery, но вы не знаете, как ее сделать? Вероятно, данная статья способна вам помочь. Контактная форма – очень полезная штука, ведь она позволяет посетителям вашего сайта общаться с вами. В этой статье шаг за шагом описан процесс создания контактной формы на PHP и jQuery.

Давайте начнем с основ. Нам потребуется всего одна страничка, которая будет содержать разметку HTML, код PHP для обработки формы и jQuery для валидации формы. Для тех, кто хочет увидеть контактную форму jQuery в действии, посмотрите demo-пример:

Разметка контактной формы

Для начала давайте создадим разметку для нашей контактной формы. Создайте новую страничку и назовите ее contact.php (или как-нибудь иначе, на ваше усмотрение). Формат php дает нам возможность соединить в одном файле код показа формы (html/css) с кодом внутренних процессов (PHP). В атрибуте action укажем константу - адрес, по которому будет отослано содержание формы после подтверждения отправки формы. Адрес выведем при помощи переменной PHP _SELF. Переменная PHP _SELF возвращает имя и путь к текущему файлу относительно корня документа. Это гарантирует нам, что данные нашей формы придут на ту же страницу, с которой они были отправлены. Более подробно о переменной PHP _ SELF можно узнать в статье PHP _SELF в атрибуте формы action.

HTML

   
<body>
<div id="contact-wrapper">
<form method="post" 
action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform">
<div>
    <label for="name"><strong>Name:</strong></label>

<input type="text" size="50" name="contactname" 
id="contactname" value="" />
</div>

<div>
<label for="email"><strong>Email:</strong></label>

<input type="text" size="50" name="email" id="email" value="" />
</div>

<div>
<label for="subject"><strong>Subject:</strong></label>

<input type="text" size="50" name="subject" 
id="subject" value="" />
</div>

<div>
<label for="message"><strong>Message:</strong></label>

<textarea rows="5" cols="50" name="message" 
id="message"></textarea>
</div>
    <input type="submit" value="Send Message" name="submit" />
</form>
</div>
</body>

Добавим стили

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

CSS

#contact-wrapper {
width:430px;
border:1px solid #e2e2e2;
background:#f1f1f1;
padding:20px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border: 1px solid #adaa9f;
-moz-box-shadow: 0 2px 2px #9c9c9c;
-webkit-box-shadow: 0 2px 2px #9c9c9c;
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 input[type="text"] {
width:400px;
}

form#contactform input[type="submit"] {
font: bold 14px/14px "Trebuchet MS", Arial, Helvetica, sans-serif;
font-style:italic;
cursor:pointer;
}

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;
width:400px;
}

#contact-wrapper label.error {
display:block;
font: 12px/14px Arial, Helvetica, sans-serif;
margin-top:5px;
}
контактная форма

Валидация при помощи jQuery

Необходимо подключить библиотеку jQuery, для этого в тег head вставьте следующий код:

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>

Также нам потребуется jQuery плагин Validation, который поможет провести проверку (валидацию) нашей формы. После того как вы скачаете и распакуете плагин, найдите файл jquery.validate.js и поместите его в ту же папку, где расположен файл contact.php. Чтобы ссылаться на этот файл, пропишите ссылку тем же способом, каким вы подключали библиотеку jQuery.

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>

Чтобы использовать плагин, необходимо его инициализировать. Обратите внимание: атрибут формы id имеет значение #contactform.

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

Теперь необходимо добавить атрибут class в теги input. Чтобы проверить данные вводимые в тег input понадобится class='required', чтобы проверить email потребуется добавить class='required email'. Ниже представлена разметка контактной формы с добавленными классами.

 
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" 
id="contactform">

<div>
<label for="name"><strong>Name:</strong></label>
<input type="text" size="50" name="contactname" 
id="contactname" value="" class="required" />
</div>

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

<div>
<label for="subject"><strong>Subject:</strong></label>
<input type="text" size="50" name="subject" 
id="subject" value="" class="required" />
</div>

<div>
<label for="message"><strong>Message:</strong></label>
<textarea rows="5" cols="50" name="message" 
id="message" class="required"></textarea>
</div>

<input type="submit" value="Send Message" name="submit" />
</form>

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

проверяем форму на валидность

Отправляем и обрабатываем форму при помощи PHP

Самое время добавить немного PHP. Расположите следующий код в верхней секции вашего файла (над DOCTYPE). Вы можете задаться вопросом: зачем проверять теги input, ведь проверка уже сделана посредством javascript. Причина в том, что PHP будет работать как второй уровень проверки (валидации), на тот случай, если у пользователя отключен javascript. Я настоятельно рекомендую не полагаться на javascript при проверке отсылаемых формой данных. Помимо проверки отсылаемых данных, PHP будет отвечать за отправку почты в случае, если ошибок обнаружено не будет.

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']);
}

//Проверяем корректен ли введенный почтовый адрес
if(trim($_POST['email']) == '')  {
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$",
     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']);
}
}

//Если ошибок нет, отправляем форму
if(!isset($hasError)) {
$emailTo = 'youremail@yoursite.com'; 
//Пропишите здесь ваш почтовый адрес
$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;
}
}

Мы почти закончили. Все что осталось сделать, так это вставить немного PHP кода, который будет выводить два сообщения. Первое сообщение выводится в случае, если форма заполнена некорректно, второе сообщение скажет о том, что письмо отправлено и форма заполнена безошибочно. Код необходимо вставить в блок contact-wrapper, но перед контактной формой.

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

<?php } ?>

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

<?php } ?>  
форма

Готово. Вы создали контактную форму с валидацией на jQuery и PHP. Все что вам осталось сделать, так это вписать свой почтовый адрес в переменную $emailto. В demo-примере форма полностью реализована, данные уйдут прямиком автору сайта.

Источник

Комментарии к статье

аватарка пользователя
2012-09-30
Алексей

<script src="jquery.validate.js" type="text/javascript"></script> похоже не подключает плагин

аватарка пользователя
2012-09-30
Алексей

Сорри, не внимательно предыдущее действие прочитал.

аватарка пользователя
2012-09-30
Алексей

Хочу русифицировать сообщения. Скачал плагин с твоей демки. Там где мессаджи нужные на русский переведены. Что-то у меня выводится в кривой кодировке..

аватарка пользователя
2012-09-30
Алексей

Все клево. Только при обновлении страницы форма снова отправляется..

аватарка пользователя
2013-12-01
Леха

Не работает

аватарка пользователя
2013-12-01
dnzl

работает

аватарка пользователя
2014-01-16
Антон

Не работает пишет ошибка сервера.

аватарка пользователя
2014-01-16
dana

Не работает пишет The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable.

аватарка пользователя
2014-01-16
fryy5

Не работает!

аватарка пользователя
2014-01-16
dnzl

лень проверять, но когда я делал демку, все работало) пример простой - погуглите в конце концов

аватарка пользователя
2014-05-03
Егор

На PHP5 не будет работать строка
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$",
trim($_POST['email']))) {
замените на
} else if (!preg_match('/^[a-z0-9][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i',
trim($_POST['email']))) {