Aqui tienes un ejemplo personalizas los nombres si gustas
funciones.js
Código PHP:
Ver original<script>
$(function() {
var emailreg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
$(".boton").click(function(){
$(".error").fadeOut().remove();
if ($(".nombre").val() == "") {
$(".nombre").focus().after('<span class="error">Ingrese su nombre</span>');
return false;
}
if ($(".email").val() == "" || !emailreg.test($(".email").val())) {
$(".email").focus().after('<span class="error">Ingrese un email correcto</span>');
return false;
}
if ($(".asunto").val() == "") {
$(".asunto").focus().after('<span class="error">Ingrese un asunto</span>');
return false;
}
if ($(".mensaje").val() == "") {
$(".mensaje").focus().after('<span class="error">Ingrese un mensaje</span>');
return false;
}
});
$(".nombre, .asunto, .mensaje").bind('blur keyup', function(){
if ($(this).val() != "") {
$('.error').fadeOut();
return false;
}
});
$(".email").bind('blur keyup', function(){
if ($(".email").val() != "" && emailreg.test($(".email").val())) {
$('.error').fadeOut();
return false;
}
});
});
</script>
Formulario
Código PHP:
Ver original<?php
if(isset($_POST['boton'])){ if($_POST['nombre'] == ''){
$errors[1] = '<span class="error">Ingrese su nombre</span>';
}else if($_POST['email'] == '' or
!preg_match("/^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/",$_POST['email'])){ $errors[2] = '<span class="error">Ingrese un email correcto</span>';
}else if($_POST['asunto'] == ''){
$errors[3] = '<span class="error">Ingrese un asunto</span>';
}else if($_POST['mensaje'] == ''){
$errors[4] = '<span class="error">Ingrese un mensaje</span>';
}else{
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$asunto = $_POST['asunto']; //Asunto
$cuerpo = $_POST['mensaje']; //Cuerpo del mensaje
//Cabeceras del correo
$headers = "From: $nombre <$email>\r\n"; //Quien envia?
$headers .= "X-Mailer: PHP5\n";
$headers .= 'MIME-Version: 1.0' . "\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; //
if(mail($dest,$asunto,$cuerpo,$headers)){ $result = '<div class="result_ok">Email enviado correctamente </div>';
// si el envio fue exitoso reseteamos lo que el usuario escribio:
$_POST['nombre'] = '';
$_POST['email'] = '';
$_POST['asunto'] = '';
$_POST['mensaje'] = '';
}else{
$result = '<div class="result_fail">Hubo un error al enviar el mensaje </div>';
}
}
}
?>
<html>
<head>
<title>Contacto</title>
<link rel='stylesheet' href='estilos.css'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
<script src='funciones.js'></script>
</head>
<body>
<form class='contacto' method='POST' action=''>
<div><label>Tu Nombre:</label><input type='text' class='nombre' name='nombre' value='
<?php if(isset($_POST['nombre'])){ echo $_POST['nombre']; } ?>'>
<?php if(isset($errors)){ echo $errors[1]; } ?></div>
<div><label>Tu Email:</label><input type='text' class='email' name='email' value='
<?php if(isset($_POST['email'])){ $_POST['email']; } ?>'>
<?php if(isset($errors)){ echo $errors[2]; } ?></div>
<div><label>Asunto:</label><input type='text' class='asunto' name='asunto' value='
<?php if(isset($_POST['asunto'])){ $_POST['asunto']; } ?>'>
<?php if(isset($errors)){ echo $errors[3]; } ?></div>
<div><label>Mensaje:</label><textarea rows='6' class='mensaje' name='mensaje'>
<?php if(isset($_POST['mensaje'])){ $_POST['mensaje']; } ?></textarea>
<?php if(isset($errors)){ echo $errors[4]; } ?></div>
<div><input type='submit' value='Envia Mensaje' class='boton' name='boton'></div>
<?php if(isset($result)) { echo $result; } ?> </form>
</body>
</html>