Простая форма контактов в всплывающем окне

Набросал небольшой код формы контактов на jquery с отправкой через php, возможно кому-то пригодиться или поможет 🙂

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1"></script>
</head>
<body>

<div id="modal_contact">
<div class="b_cont"><div id="close_qc">X</div></div>
<div id="msgg"></div>
	<div class="all_inputs">
	Your Name:
	<input type="text" value="" id="cname">
	Your Email:
	<input type="text" value="" id="cmail">
	Your Phone:
	<input type="text" value="" id="cphone">
	Ask your question:
	<textarea size="40" id="cquest"></textarea>
	<input type="button" onclick="validate_form();" value="Send" id="csubm">
	</div>
</div>
<div id="contact_us_fixed"></div>

</body>
</html>

CSS:

html, body {height:100%;margin:0;}
html {
	background:
		-webkit-linear-gradient(45deg, hsla(322, 93%, 41%, 1) 0%, hsla(322, 93%, 41%, 0) 70%),
		-webkit-linear-gradient(315deg, hsla(219, 97%, 47%, 1) 10%, hsla(219, 97%, 47%, 0) 80%),
		-webkit-linear-gradient(225deg, hsla(23, 100%, 46%, 1) 10%, hsla(23, 100%, 46%, 0) 80%),
		-webkit-linear-gradient(135deg, hsla(87, 100%, 48%, 1) 100%, hsla(87, 100%, 48%, 0) 70%);
	background:
		linear-gradient(45deg, hsla(322, 93%, 41%, 1) 0%, hsla(322, 93%, 41%, 0) 70%),
		linear-gradient(135deg, hsla(219, 97%, 47%, 1) 10%, hsla(219, 97%, 47%, 0) 80%),
		linear-gradient(225deg, hsla(23, 100%, 46%, 1) 10%, hsla(23, 100%, 46%, 0) 80%),
		linear-gradient(315deg, hsla(87, 100%, 48%, 1) 100%, hsla(87, 100%, 48%, 0) 70%);
	}
#modal_contact, #v_form {
	display:none;
	position: fixed;
	z-index:10000;
	top: 50%;
	left: 50%;
	margin-top: -205px;
	margin-left: -150px;

}
#modal_contact {background:#EEE;width:300px;height:410px;padding:10px;box-shadow: 0 0 0 7px rgba(246, 244, 233, 0.4);border-radius:5px;font-family: Arial;}
#modal_contact input, #modal_contact textarea {width:96%;padding:5px;margin-bottom:10px;}
#modal_contact textarea {resize: none;height:140px;}
#csubm {width: 100% !important;cursor: pointer;}
#close_qc {
    background: none repeat scroll 0 0 #eee;
	box-shadow: 0 0 0 7px rgba(246, 244, 233, 0.4);
    border-radius: 50%;
    color: black;
    display: block;
    float: right;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    position: relative;
    right: -20px;
    text-align: center;
    top: -25px;
    width: 30px;
	cursor: pointer;
}
#close_qc:hover {background: #c8202e;color: white;}
.b_cont {height: 1px; position:relative;}
.alert-error {border: 1px solid red !important;}
#msgg {
    color: green;
    font-size: 2em;
    font-weight: bold;
    margin-top: 150px;
    text-align: center;
	display:none;
}
#contact_us_fixed {
    background-color: #333333;
    background-image: url("cmail.png");
    color: #ffffff;
    cursor: pointer;
    height: 42px;
    left: 0;
    margin-left: -5px;
    overflow: hidden;
    position: fixed;
    text-indent: -100000px;
    top: 270px;
    width: 44px;
    z-index: 100;
}

jQuery:

$(document).ready(function($) {
	$("#modal_contact").wrap("<form id='v_form'></form>");
	$("#contact_us_fixed").click(function () {
	   $("#v_form, #modal_contact").fadeIn('slow');
	});
	$("#close_qc").click(function () {
	   $("#v_form").hide();
	});
});

function validate_form(){

jQuery.fn.pVal = function(){
    var jQuerythis = jQuery(this),
        val = jQuerythis.eq(0).val();
    if(val == jQuerythis.attr('placeholder'))
        return '';
    else
        return val;
}

		var regName=/([a-zA-Z\-\_]{2,30})/;
		var regPhone=/([0-9\+\- ]{10,20})/;
		var regEmail=/[0-9a-z_]+@[0-9a-z_^.]+.[a-z]{2,3}/i;
		var regEmpty=/([^\s])/;
		
		var full_name=$('#cname').val();
		var email=$("#cmail").val();
		var phone=$("#cphone").val();
		var comments=$("#cquest").val();
		
		if(
		regEmpty.test(full_name) &&
		regEmail.test(email) &&
		regEmpty.test(comments)
		) {
		var data = {
			full_name: full_name,
			email: email,
			phone: phone,
			comments: comments
		};
		$.ajax({
			type: "POST",
			url: "csent.php",
			dataType: "json",
			data: data,
			success: function(){
				console.log('ok');
				return;
			},
			error: function(e) {
			console.log('ok-error');
				return;
			}
		});
		$('.all_inputs').hide();
		$('#msgg').html("Message is successfully sent!").fadeIn('slow');
		setTimeout(function(){
			$('#v_form').trigger('reset');
			$('#msgg').hide().html("");
			$('#v_form').hide();
			$('.all_inputs').show();
		},4000);
		$('.error').fadeOut(200).hide();
		} else {
		console.log('error');
		$('.error').fadeIn(200);
		setTimeout(function(){
			$('.error').fadeOut(200);
		},3000);
			if(!regEmpty.test(full_name)) {
				$('#cname').addClass('alert-error');
				setTimeout(function(){$('#cname').removeClass('alert-error');},3000);
			}
			if(!regEmail.test(email)) {
				$('#cmail').addClass('alert-error');
				setTimeout(function(){$('#cmail').removeClass('alert-error');},3000);
			}
			if(!regEmpty.test(comments)) {
				$('#cquest').addClass('alert-error');
				setTimeout(function(){$('#cquest').removeClass('alert-error');},3000);
			}
		}
	  }

и сам php-скрипт отправки почты при успешной валидации формы:

ПОЛЕЗНО Javascript Translit

if ($_SERVER['REQUEST_METHOD']=='POST') {
if(
	!empty($_POST['full_name']) &&
	!empty($_POST['email']) &&
	!empty($_POST['comments'])
	){

$full_name = strip_tags($_POST['full_name']);
$email = strip_tags($_POST['email']);
$phone = strip_tags($_POST['phone']);
$comments = strip_tags($_POST['comments']);

$date = date('j.m.Y G:i');
$ref = $_SERVER['HTTP_REFERER'];

$header="Contact Us Widget";
$contactHeaders= "MIME-Version: 1.0\r\n";
$contactHeaders .= "Content-type: text/html; charset=iso-8859-1\r\n";
$contactHeaders .= "From: Contact Us Widget <noreplay@mail.com>";
$contact="<h2>Contact Us Widget</h2>
Full Name: $full_name<br/>
Email: $email<br/>
Phone: $phone<br/>
Comments: $comments<br/><br/>
DATE: <b>$date</b><br/>
REF_URL: $ref";
$res=mail("your@mail.com",$header,$contact,$contactHeaders);

header('Content-Type: application/json');
echo json_encode(array('response'=>'success'));
exit;
} } else { }

кстати, про выравнивание формы по центру экрана:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

Марджины должны быть на половину меньше высоты и ширины блока. top и left всегда должен быть 50%. Этот способ описан здесь. Если ширина и высота блока неизвестна, то можно сделать так:

$(document).ready(function(e) {
    var win = $('.window');
    win.css({
        'margin-top':'-' + (win.height() / 2) + 'px',
        'margin-left':'-' + (win.width() / 2) + 'px'
        });
});