Заглушка - сайт находится в разработке
* {
margin: 0;
padding: 0;
}
input:focus, textarea:focus {
outline: 1px solid transparent;
}
body {
font-family: 'Open Sans', sans-serif;
color: white;
background: url('bg.jpg') no-repeat center center fixed;
background-size: cover;
overflow-y: scroll;
}
a, a:hover {
color: #fff;
text-decoration: none;
}
.container {
text-align: center;
width: 800px;
margin: 60px auto 0;
}
h1 {
font-size: 40px;
font-weight: 700;
text-shadow: 0 1px 7px rgba(0, 0, 0, .2);
letter-spacing: -2px;
margin: 0 0 30px 0;
color:#F9DC0D;
}
h2 {
font-size: 40px;
font-weight: 700;
text-shadow: 0 1px 7px rgba(0, 0, 0, .2);
text-transform: uppercase;
letter-spacing: -2px;
margin: 30px 0;
}
h3 {
font-size: 16px;
font-weight: 400;
letter-spacing: 5px;
opacity: 0.3;
margin-top: 40px;
}
h4 {
font-size: 32px;
font-weight: 400;
color: #fff;
line-height: 40px;
display: inline-block;
background: rgba(45, 45, 45, .3);
margin-top: 50px;
padding: 10px 20px;
border-radius: 10px;
}
.desc {
font-size: 18px;
line-height: 36px;
display: inline-block;
background: rgba(45, 45, 45, .2);
padding: 5px 10px;
border-radius: 10px;
}
form {
margin-top: 20px;
position:relative;
}
form input {
width: 310px;
height: 46px;
margin-bottom: 10px;
padding: 0 10px;
background: #fff;
font-size: 16px;
line-height: 46px;
color: #777;
border: 1px solid transparent;
border-radius: 3px;
}
form textarea {
width: 310px;
height: 146px;
margin-bottom: 10px;
padding: 0 10px;
background: #fff;
font-size: 16px;
line-height: 46px;
color: #777;
border: 1px solid transparent;
border-radius: 3px;
}
input:focus, textarea:focus {
border-color: #F9DC0D;
}
input.error, textarea.error {
border-color: red;
background-color: rgb(255, 228, 228);
}
form button {
width: 130px;
height: 46px;
margin: 0;
padding: 0;
cursor: pointer;
background: #F9DC0D;
border: 0;
font-size: 16px;
color: black;
border-radius: 3px;
}
form button:hover {
background: #e4c70d;
}
form button:active {
background: #ffe20d;
}
form.proccess * {
opacity:0.3;
}
form.proccess .loading {
opacity:1;
display:block;
position:absolute;
left: 368px;
top:160px;
z-index:2;
width: 64px;
height: 64px;
background: url('loading.gif') no-repeat 0 0;
}
.success {
display: none;
margin-top:30px;
}
.success b {
color:#F9DC0D;
}
.copyright {
margin-top: 30px;
text-align: center;
margin-bottom: 20px;
}
.copyright a:first-child {
border-bottom: 1px dotted #F9DC0D;
}
/*
Форма обратной связи.
ФИО
ТЕЛ.
Эл. Почта
Сообщение.
*/
<?php
$to = "stingmu@gmail.com";
$domain = $_SERVER["HTTP_HOST"];
$from = "info@".$_SERVER["HTTP_HOST"];
$name = htmlspecialchars($_POST["name"]);
$phone = htmlspecialchars($_POST["phone"]);
$mess = htmlspecialchars($_POST["mess"]);
if (!empty($name)) {
$headers = "From: $from\r\n";
$headers .= "Sender: $to\r\n";
$headers .= "Content-type: text/html; charset=utf-8 \r\n";
$subject = "Сообщение с сайта ".$domain;
$message = "<html>
<head>
<title>Сообщение с сайта {$domain}</title>
</head>
<body>
<h3>Пришло сообщение с сайта {$domain}</h3>
<p>Имя: {$name}</p>
<p>Телефон/E-mail: {$phone}</p>
<p>{$mess}</p>
</body>
</html>";
if (mail($to, $subject, $message, $headers, "-f".$from)) {
exit('{"success": "ok"}');
} else {
exit('{"error": "Произошла ошибка при отправке сообщения"}');
}
} else {
exit('{"error": "Введите текст в соответствующем поле."}');
}
<!doctype html>
<html lang=ru>
<head>
<meta charset="UTF-8">
<title>Сайт TehnoTrade61.ru находится в разработке | ДонИнтернет - создание сайтов в Ростове-на-Дону</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>
TehnoTrade61.ru
</h1>
<h2>Сайт находится в разработке</h2>
<div class="desc">
г. Ростов-на-Дону, ст. Ольгинская, ул. В. Луговая д.80
</div>
<h3>
Приносим извинения за доставленные неудобства.<br/>В скором времени сайт будет работать как надо!
</h3>
<h4>
Свяжитесь с нами!
</h4>
<form action="#" class="form-inline">
<div class="loading"></div>
<input type="text" name="name" id="name" placeholder="Ваше имя..."><br/>
<input type="text" name="phone" id="phone" placeholder="Телефон или Email..."><br/>
<textarea name="mess" id="mess" placeholder="Сообщение..."></textarea><br/>
<button type="submit">Отправить</button>
</form>
<div class="success">
<b>Сообщение успешно отправлено!</b><br/>
В ближайшее время мы свяжемся с вами. Спасибо!
</div>
<div class="copyright">
2009-<?php print date('Y'); ?> © <a href="http://doninternet.ru">ДонИнтернет</a> -
создание и продвижение сайтов в Ростове-на-Дону.<br/><br/>
<a href="http://doninternet.ru" class="logo"><img src="logo.png" alt=""></a>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function () {
$("form #name, form #phone, form #mess").keyup(function(){
if($(this).val().length) { $(this).removeClass('error'); }
})
$("form").submit(function (e) {
e.preventDefault();
var error = false;
if ($("form #name").val().length < 1) {
$("form #name").addClass('error');
error = true;
}
if ($("form #phone").val().length < 1) {
$("form #phone").addClass('error');
error = true;
}
if ($("form #mess").val().length < 1) {
$("form #mess").addClass('error');
error = true;
}
if (error) {
//alert('Заполните, пожалуйста, все поля в форме.');
} else {
$("form").addClass("proccess");
$.ajax({
type: "POST",
url: "send.php",
dataType: "json",
data: {
name: $("form #name").val(),
phone: $("form #phone").val(),
mess: $("form #mess").val(),
},
success: function (data) {
console.log(data);
if (data.success) {
$("form").fadeOut('slow', function () {
$(".success").fadeIn('slow');
});
} else {
$(".error").html(data).show();
}
}
});
}
});
});
</script>
</body>
</html>