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

В данной статье мы с вами реализуем простую php форму обратной связи.

Реализация:

1. Первое, с чего мы начнём — это html разметка страницы с формой

<!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['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>
  </html>

2. Теперь оформим нашу форму средствами CSS

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 и скрипт проверки заполнения формы

<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>    

4. Немножко настроим нашу форму

<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>

5. В целом наша форма уже готово, но осталось самое важное — обработка и отправка формы.

Ключевые настройки формы находятся в файле contact.php во вложенном архиве к новости.

Не забудьте поправить строку с адресатом $emailTo

  $emailTo = 'name@yourdomain.com'; //Сюда введите Ваш email

Вот и всё, наша форма готова!

delux

Предлагаю делиться опытом в сфере сайтостроения!

Читайте также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.