PHP форма обратной связи / Новости / Главная

PHP

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

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

Форма для обратной связи - незаменимая вещь, так как с ее помощью Ваши посетители всегда могут связаться с Вами. В данном уроке я Вас научу создавать такую форму с помощью PHP и jQuery.

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

Шаг №1: создаем разметку формы

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>PHP Contact Form with JQuery Validation</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
 <script src="jquery.min.js" type="text/javascript"></script>
 <style type="text/css">
 </style>
      </head>
<body>

      <div id="contact-wrapper">
  <form method="post" action="<?php echo $_SERVER[&apos;PHP_SELF&apos;]; ?>" 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>
  </html>

Шаг №2: придайте форме стиля

Теперь нам необходимо все красиво оформить. Давайте вставим все стили в файл contact.php между тегами <head></head>.

body {
	font-family:Arial, Tahoma, sans-serif;
}
#contact-wrapper {
	width:430px;
	border:1px solid #e2e2e2;
	background:#f1f1f1;
	padding:20px;
}
#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;
}

Шаг №3: проверьте форму с помощью jQuery

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

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

После этого нам необходимо внести некоторые коррективы в нашу форму. Если поле обязательное, необходимо добавить class=”required”. В случае с полем для ввода Email нам необходимо добавить class=”required email”. Вот измененный код формы:

<form method="post" action="<?php echo $_SERVER[&apos;PHP_SELF&apos;]; ?>" 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>

После всех манипуляций у Вас должно получиться что-то наподобие этого:

Шаг №4: обработка и отправка формы

Настало время добавить немного PHP магии нашей форме. Поместите следующий код как можно выше в Вашем документе. Вы, наверное, спрашиваете себя, зачем нам проверять все поля формы еще раз с помощью PHP (ведь мы же уже проверили все с помощью jQuery)? Причина для этого есть, и она заключается в том, что даже если у Вашего посетителя будет отключен Javascript, он все равно сможет воспользоваться формой.

<?php
  //Если форма отправлена
  if(isset($_POST[&apos;submit&apos;])) {
 //Проверка Поля ИМЯ
  if(trim($_POST[&apos;contactname&apos;]) == &apos;&apos;) {
  $hasError = true;
  } else {
  $name = trim($_POST[&apos;contactname&apos;]);
  }
 //Проверка поля ТЕМА
  if(trim($_POST[&apos;subject&apos;]) == &apos;&apos;) {
  $hasError = true;
  } else {
  $subject = trim($_POST[&apos;subject&apos;]);
  }
 //Проверка правильности ввода EMAIL
  if(trim($_POST[&apos;email&apos;]) == &apos;&apos;)  {
  $hasError = true;
  } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST[&apos;email&apos;]))) {
  $hasError = true;
  } else {
  $email = trim($_POST[&apos;email&apos;]);
  }
 //Проверка наличия ТЕКСТА сообщения
  if(trim($_POST[&apos;message&apos;]) == &apos;&apos;) {
  $hasError = true;
  } else {
  if(function_exists(&apos;stripslashes&apos;)) {
  $comments = stripslashes(trim($_POST[&apos;message&apos;]));
  } else {
  $comments = trim($_POST[&apos;message&apos;]);
  }
  }
 //Если ошибок нет, отправить email
  if(!isset($hasError)) {
  $emailTo = &apos;name@yourdomain.com&apos;; //Сюда введите Ваш email
  $body = "Name: $name \n\nEmail: $email \n\nSubject: $subject \n\nComments:\n $comments";
  $headers = &apos;From: My Site <&apos;.$emailTo.&apos;>&apos; . "\r\n" . &apos;Reply-To: &apos; . $email;
 mail($emailTo, $subject, $body, $headers);
  $emailSent = true;
  }
  }
  ?>

В коде есть комментарии, которые расскажут Вам что этот код делает. Также не забудьте поменять Email на свой (в примере указан name@yourdomain.com).

Вот и все! Теперь Вы знаете, как сделать форму обратной связи.

Единственный маленький недостаток: мне не удалось перевести на русский язык ошибки, которые всплывают, например, при введении неправильного Email. Дело в том, что эти сообщения находятся в зашифрованном виде в файле jquery.validate.pack.js. Если быть еще точнее, то они не зашифрованы, но разбросаны по всему файлу и при попытке внести коррективы возникают проблемы с кодировкой.

Если у меня получится это исправить, я обязательно напишу здесь :).

На сегодня все. Всем спасибо.

Похожие новости:

Добавлено: 31 Декабря 2014 15:47:20 Добавил: Андрей Ковальчук Нравится 0

Добавить

Комментарии:

Нету комментариев для вывода...