Простая форма обратной связи html+php
Хочу представить простую, но лаконичную форму обратной связи, которую можете добавить к себе на сайт. Форма расположена в середине страницы браузера.
Форма удобна тем, что не нужно делать css стилей, все идет в одном коде html+php.
После того как нажимаем "Отправить", к нам на почту приходит письмо с содержанием:
Сам код, делаем отдельной страницей или вставляем в любой материал:
<html>
<head>
<meta charset="utf-8">
<title>Оставить заявку</title>
<style>
.text{
outline: none;
background: #FFF/* Цвет фона */
border: 1px solid #DDDDDD;
}
.center { border-radius: 10px 10px 10px 10px;
width: 350px; /* Ширина элемента в пикселах */
padding: 20px; /* Поля вокруг текста */
margin: auto; /* Выравниваем по центру */
/* background: #fc0; /* Цвет фона */
background: url(http://imagestun.com/hosting/kartinki/bg6.jpg) /* Параметры фона */
}
#submit {
font-family: sans-serif;
color: #ffffff;
font-size: 18px;
padding: 10px;
text-decoration: none;
box-shadow: 0px 1px 3px #666666;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
text-shadow: 1px 1px 3px #666666;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#ce2029), to(#ce2029));
background: -moz-linear-gradient(top, #ce2029, #ce2029);
border-radius: 10px;}
#submit:hover {
background: -webkit-gradient(linear, 0 0, 0 100%, from(#8b0d0d), to(#ce2029));
background: -moz-linear-gradient(top, #8b0d0d, #ce2029)
}
#respond input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
}
#respond input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}
</style>
</head>
<body>
<meta charset="UTF-8" />
<?php
if (isset($_POST['name'])) {$name = $_POST['name']; if ($name == '') {unset($name);}}
if (isset($_POST['phone'])) {$phone = $_POST['phone']; if ($phone == '') {unset($phone);}}
if (isset($_POST['email'])) {$email = $_POST['email']; if ($email == '') {unset($email);}}
if (isset($_POST['sub'])) {$sub = $_POST['sub']; if ($sub == '') {unset($sub);}}
if (isset($_POST['body'])) {$body = $_POST['body']; if ($body == '') {unset($body);}}
if (isset($name) && isset($phone) && isset($sub) && isset($body)){
$address = "ваша@почта";
$mes = "Имя: $name \nТелефон: $phone \nE-mail: $email \nТема: $sub \nСообщение: $body";
$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email");
if ($send == 'true')
{echo "<h3 style='text-align:center;'>Сообщение отправлено успешно. Перейдите на главную страницу сайта <a href='http://сайт'>сайт</a> и вы сможете просмотреть наш сайт</h3>";}
else {echo "Ошибка, сообщение не отправлено!";}
}
else
{
}
?>
<div class="center">
<p><img src="http://cloud.storage1c.ru/images/laptop.png" alt="Сторэйдж Групп" width="100%"></p>
<h2>Форма обратной связи</h2>
<form name="MyForm" action="" method="post">
<p><input class="text" name="name" type="text" style="width:50%" /> Ваше имя *</p>
<p><input class="text" name="phone" type="text" style="width:50%" /> Телефон *</p>
<p><input class="text" name="email" type="text" style="width:50%" /> Электронная почта</p>
<p><input class="text" name="sub" type="text" style="width:50%" /> Тема сообщения *</p>
<p>Текст сообщения:<br /><textarea name="body" cols="1" rows="5" style="width:100%" /></textarea></p>
<p><input id="submit" value="Отправить" type="submit" /></p>
</form>
* Поля обязательные для заполнения
</div>
</body>
</html>
Для тестирования своего кода html есть отличный инструмент на сайте http://atmpl.ru/test/html/html-test.html
