Jump to content

Помогите исправить ошибку.


Recommended Posts

Здравствуйте! Вот у меня есть готовая форма. Она начала не отправлять письма когда я начал прописывать стили. Можете помочь исправить ошибку? 

 

Вот HTML+css

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<title>Отправка форм AJAX</title>
</head>
<body>

	<div class="container">

	<form>
		<input type="text" name="name" placeholder="Имя" class="name" required /><br />
		<input type="text" name="surname" placeholder="Фамилия" class="surname" required /><br />
		<input type="text" name="title" placeholder="Название" class="title" required /><br />
		<input type="text" name="url" placeholder="Адрес сайта" class="url" required  /><br />
		<input type="text" name="contact" placeholder="Контактные данные" class="contact" required /><br />
		<input type="text" name="address" placeholder="Фактический адрес, если такой предусмотрен" class="address" required /><br />
		<input type="text" name="city" placeholder="Город" class="city" required /><br />
		<input name="submit" class="btn" type="submit" value="Отправить" />


	</form>
	</div>
	<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
	<script src="common.js"></script>

	<style>
		   @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700&subset=latin,cyrillic);
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

		body{

    font-family: 'Open Sans', sans-serif;
	background:rgb(4, 165, 216);
  	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
    padding-top:100px;
}

		.container{
    max-width: 32em;
	margin: 0 auto;
	padding: 1.2em;
		}


form {
    margin: 0 auto;
    max-width: 100%;
    padding: 30px 30px 6px 30px;
    border: 1px solid rgba(0,0,0,.2);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background: rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    overflow: hidden;
		}

		/* Поля ввода */
input {
    width: 100%;
    height: 48px;
    border: 1px solid rgba(255,255,255,.4);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    display:block;
    font-family: 'Open Sans', sans-serif;
    font-size:18px;
    font-weight: 300;
    color:#fff;
    padding-left:20px;
    padding-right:20px;
    margin-bottom:20px;
		}

		input[type=submit] {
    cursor:pointer;
		}

input.name {
	  background: rgba(255, 255, 255, 0.4);
	  padding-left:25px;
}
input.surname {
	  background: rgba(255, 255, 255, 0.4);
	  padding-left:25px;
}

		input.title {
	  background: rgba(255, 255, 255, 0.4);
	  padding-left:25px;
}
input.url {
	  background: rgba(255, 255, 255, 0.4);
	  padding-left:25px;
}

		input.contact {
	  background: rgba(255, 255, 255, 0.4);
	  padding-left:25px;
}
input.address {
	  background: rgba(255, 255, 255, 0.4);
	  padding-left:25px;
}
		input.city {
	  background: rgba(255, 255, 255, 0.4);
	  padding-left:25px;
}


		::-webkit-input-placeholder {
	  color: #fff;
}
:-moz-placeholder{
    color: #fff;
}
::-moz-placeholder {
    color: #fff;
}
:-ms-input-placeholder {
	color: #fff;
}
input:focus, textarea:focus {
	background-color: rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
	overflow: hidden;
		}

		.btn {
	width: 138px;
	height: 44px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
	border-radius: 4px;
	float:right;
    border: 1px solid #253737;
    background: #416b68;
    background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68));
    background: -webkit-linear-gradient(top, #6da5a3, #416b68);
    background: -moz-linear-gradient(top, #6da5a3, #416b68);
    background: -ms-linear-gradient(top, #6da5a3, #416b68);
    background: -o-linear-gradient(top, #6da5a3, #416b68);
    background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);
    padding: 10.5px 21px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    text-shadow: #333333 0 1px 0;
    color: #e1e1e1;
}
.btn:hover {
    border: 1px solid #253737;
    text-shadow: #333333 0 1px 0;
    background: #416b68;
    background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68));
    background: -webkit-linear-gradient(top, #77b2b0, #416b68);
    background: -moz-linear-gradient(top, #77b2b0, #416b68);
    background: -ms-linear-gradient(top, #77b2b0, #416b68);
    background: -o-linear-gradient(top, #77b2b0, #416b68);
    background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);
    color: #fff;
 }
.btn:active {
    margin-top:1px;
    text-shadow: #333333 0 -1px 0;
    border: 1px solid #333333;
    background: #ffCC00;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffCC00), to(#ff6600));
    background: -webkit-linear-gradient(top, #ffcc00, #ff6600);
    background: -moz-linear-gradient(top, #ffcc00, #ff6600);
    background: -ms-linear-gradient(top, #ffcc00, #ff6600);
    background: -o-linear-gradient(top, #ffcc00, #ff6600);
    background-image: -ms-linear-gradient(top, #ffcc00 0%, #ff6600 100%);
    color: #fff;
    -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    -moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    outline: none;
}


	</style>
</body>
</html>
PHP код
<?php

$recepient = "waycomer@ukr.net";
$sitename = "Finder - мобильный справочник";

$name = trim($_POST["name"]);
$surname = trim($_POST["surname"]);
$title = trim($_POST["title"]);
$url = trim($_POST["url"]);
$contact = trim($_POST["contact"]);
$address = trim($_POST["address"]);
$city = trim($_POST["city"]);
$message = "Имя: $name \nФамилия: $surname \nНазвание: $title \nАдрес сайта: $url \nКонтактные даанные: $contact \nФактический адрес, если такой предусмотрен: $address \nГород: $city" ;

$pagetitle = "Новая заявка с сайта \"$sitename\"";
mail($recepient, $pagetitle, $message, "Content-type: text/plain; charset=\"utf-8\"\n From: $recepient");

AJAX

$(document).ready(function() {

	$("#form").submit(function() {
		$.ajax({
			type: "POST",
			url: "mail.php",
			data: $(this).serialize()
		}).done(function() {
			$(this).find("input").val("");
			alert("Спасибо за заявку! Скоро мы с вами свяжемся.");
			$("#form").trigger("reset");
		});
		return false;
	});
	
});
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...