<!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>
    <title>::::::::::: Eduardo Pola Online | Insomnio :::::::::::</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<SCRIPT src="js/jquery-1.2.6.min.js" type=text/javascript></SCRIPT>

<script type="text/javascript">

jQuery(document).ready(function(){
	
	$('#contactform').submit(function(){
	
		var action = $(this).attr('action');
		
		$('#submit')
			.before('<img src="http://www.eduardopola.com/cargando.gif" class="loader" />')
			.attr('disabled','disabled');
		
		$.post(action, { 
			nombre: $('#nombre').val(),
			email: $('#email').val(),
			telefono: $('#telefono').val(),
			titulo: $('#titulo').val(),
			mensaje: $('#mensaje').val()
		},
			function(data){
				$('#contactform #submit').attr('disabled','');
				$('.response').remove();
				$('#contactform').before('<span class="response">'+data+'</span>');
				$('.response').slideDown();
				$('#contactform img.loader').fadeOut(500,function(){$(this).remove()});
				if(data=='¡Éxito! El e-mail fue enviado a Eduardo Pola. En breve se pondrá en contacto contigo. ¡Gracias!') $('#contactform').slideUp();
			}
		);
		
		return false;
	
	});
	
});

</script>
<style type="text/css">
body {
	background-color: #060606;
	margin:8px;
	width: 510px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
	h1,h2{margin-top:6px;font:bold 80% 'helvetica neue',sans-serif;font-size:15px;letter-spacing:3px;text-transform:uppercase;color:#bba;margin-left:8px;}
#contactform {
	margin: 0;
	width: 500px;
	background: #CCCCCC;
	padding: 5px;
}
#contactform * {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#contactform ol {
	margin: 0;
	padding: 0;
	list-style: none;
}
#contactform li {
	margin: 0 0 5px 0;
	padding: 10px;
	background:url(img/degrado.jpg) top repeat-x #333333;
}
#contactform li.buttons {
	margin: 0;
	overflow: hidden;
}
#contactform label {
	margin: 0;
	width: 190px;
	display: block;
	float: left;
	padding: 5px 10px 2px 0;
	color: #348;
	font-weight:bold;	
}
#contactform input.text {
	width: 274px;
	border: 1px solid #999999;
	padding: 2px;
	margin: 0;
}
#contactform textarea {
	width: 274px;
	border: 1px solid #999999;
	padding: 2px;
	height: 80px;
	background: #FDFDF7;
}
#contactform li.buttons input {
	padding: 4px;
	float: right;
	margin: 0 0 0 5px;
	width: auto;
}
.response {
	background: #1D1D1D;
	border: 2px solid #333333;
	display: none;
	padding: 5px;
	width: 350px;
	text-align: center;
	color:#FFFFFF;
	margin: 0 auto 10px auto;
}
.loader {
	float:left;
}
</style>
</head>

<BODY>
<h1>Eduardo Pola | Insomnio | Contáctame</h1>

<form action="contacto.php" method="post" id="contactform">
	<ol>
		<li>
			<label for="nombre">Nombre y Apellidos*</label>
			<input id="nombre" name="nombre" class="text" />
		</li>
		<li>
			<label for="email">E-Mail (a responder)*</label>
			<input id="email" name="email" class="text" />
		</li>
		<li>
			<label for="telefono">Teléfono ó Dirección</label>
			<input id="telefono" name="telefono" class="text" />
		</li>
		<li>
			<label for="titulo">Título del E-Mail</label>
			<input id="titulo" name="titulo" class="text" />
		</li>
		<li>
			<label for="mensaje">Mensaje*</label>
			<textarea id="mensaje" name="mensaje"></textarea>
		</li>
		<li class="buttons">
			<input type="submit" value="Enviar" id="submit" />
			<input type="reset" />
		</li>
	</ol>
</form>


</BODY>
</HTML>�