Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getmarkets</title>
<link rel="stylesheet" href="css/style.css">
</head>
<script src="http://yandex.st/jquery/1.9.1/jquery.js"></script>
<script>
function send_form() {
var msg = $("#forma").serialize();
$.ajax({
type: "POST",
url: "php/main.php",
data: msg,
success: function(data) {
alert("Сообщение отправлено");
setTimeout(function () {
$(".feedback_form_bg").fadeOut();}, 1000);
},
error: function(xhr, str){
alert("Возникла ошибка!");
setTimeout(function () {$(".feedback_form_bg").fadeOut();}, 1000);
}
});
}
</script>
<body>
<section class="applications">
<div class="container">
<div class="logo">
<img src="icons/logo.png" alt="">
</div>
<div class="wrap">
<h1>Ремонтные <span>работы</span></h1>
<form method="post" action="javascript:void(0);" onsubmit="send_form();" id="forma">
<input id="applications_first_input" type="text" name="fio" placeholder="Ф.И.О"/>
<input type="text" name="phone" placeholder="Телефон" />
<input type="text" name="email" placeholder="E-Mail" />
<input class="send" type="submit" value="отправить" />
</form>
</div>
</div>
</section>
</body>
</html>
PHP
<?php
$fio= $_POST['fio'];
$phone= $_POST['phone'];
$email= $_POST['email'];
$emailTo = 'getmarkets@yandex.ru';
$body = "$fio \n\n$phone\n\n$email";
$headers = "Content-Type: text/plain; charset=utf-8\r\n".'From: MySite <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $emailTo;
mail($emailTo, $fio, $body, $headers);
$emailSent = true;
?>
Фото расположения файлов
CSS
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
:active, :hover, :focus {
outline: 0;
outline-offset: 0;
}
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
.applications{
background: url(../img/bg/1.png) center center/cover no-repeat;
height: 750px;
}
.container{
margin: 0 auto;
width: 1140px;
}
.applications{
padding-top: 10px;
padding-left: 7px;
}
.applications h1{
font-size: 75px;
margin-bottom: 20px;
}
.applications h1 span{
display: block;
}
.applications .wrap{
padding-top: 210px;
padding-left: 50px;
display: inline-block;
}
.applications form{
width: 160px;
height: 313px;
border-radius: 1000px;
text-align: center;
margin-left: 30px;
margin: 0 auto;
}
#applications_first_input{
margin-top: 0px;
}
.applications input{
display: block;
margin: 0 auto;
margin-top: 5px;
background: #e9eff8;
border: 0;
border-radius: 100px;
height: 50px;
border: 1px solid #ff753a;
text-align: center;
}
.applications .send{
background: #ff9d71;
width: 115px;
}