La gran ventaja de este script es que nos podemos colgar de Mootools si es que ya estamos trabajando con él y no andar agregando mas codigo inncesario, ademas que es simple y breve ideal para nuevos en el tema como yo.
Notas importantes:
- No hay problemas con las Ñ's ni acentos.
- Puedes incorporar y modificar facilmente el metodo de validacion incluso con JS
- No hay una funcion digna para validar el mail, por ahora.
index.php (Nuestro archivo base contiene todo)
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Enviemos un correo con JSON, Mootools y PHP</title>
</head>
<style type="text/css"><!-- Cargamos el CSS 1º tal como nos dice Firebug -->
body{ /*Nuestro estilo super Duper*/
font-family:Arial, Helvetica, sans-serif;
color:#333;
}
#hola{
font-family:Arial, Helvetica, sans-serif;
color:#333;
font-size:80%;
margin:90px auto;
width:420px;
}
.input {
border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
border-style:solid;
border-width:1px;
padding:5px;
font-size:16px;
color:#333;
background:#fafafa;
}
.textarea {
font-family:Arial, Tahoma, Helvetica, sans-serif;
font-size:85%;
padding:0.6em 0.5em 0.7em;
border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
border-style:solid;
border-width:1px;
background:#fafafa;
width:320px;
height:80px;
}
.boton{
border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
border-style:solid;
border-width:1px;
padding:5px;
font-size:16px;
color:#333;
background:#fafafa;
}
</style>
<body>
<div id="hola"><!-- Empieza content_hola que es quien contiene nuestro humilde formulario -->
<div id="formulario"><div id="somethingiswrong" style="height:30px;"></div><!-- Si algo va mal somethingiswrong nos dira -->
<form id="myForm">
Nombre<br />
<input id="nombre" type="text" class="input" /><br />
Correo<br />
<input id="mail" type="text" class="input"/><br />
Asunto<br />
<textarea id="texto" class="textarea"></textarea><br />
<br/>
<input type="submit" id="bttn" class="boton" value="Enviar">
</form>
</div>
</div><!-- Termina content_hola -->
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var myform = document.id('myForm');
var nombre = document.id('nombre');
var mail = document.id('mail');
var texto = document.id('texto');
var bttn = document.id('bttn');
myform.addEvent('submit',function(e) { //Obtenemos los valores
e.stop();
var myData = {
'nombre':nombre.get('value').clean(),
'mail':mail.get('value').clean(),
'texto':texto.get('value').clean()
};
var myReq = new Request.JSON({'url':'hereigo.php'}); //Una vez obtenidos llamamos nuestro archivo PHP que contiene lo necesario
myReq.addEvent('request',function() {
bttn.set('disabled',true).set('value',''); });
myReq.addEvent('success',function(feed,txt) {
if (!feed) {
document.getElementById("somethingiswrong".innerHTML = (txt);
bttn.set('disabled',false).set('value','Reintentemos'); //Valor del texto en el boton despues de un mensaje de error
return 0; }
if (feed.status == 1) {
document.getElementById("somethingiswrong".innerHTML = "Correo Enviado!. Muchas Gracias."; //Imprimimos un mensaje si todo sale bien
} else {
document.getElementById("somethingiswrong".innerHTML = "Que verguenza!. Ocurrio un error inesperado."; //Imprimimos un mensaje si algo falla
}
});
myReq.post(myData);
});
});
</script>
</body>
</html>
hereigo.php (Quien valida y envia)
<?php
// Por Angello Lopez A | TDP Workspace. Recuerda al mejorarlo compartirlo.
$formName = trim($_POST['nombre']); // Usamos la funcion trim() para comprobar aunque puedes usar otras claro.
$formMail = trim($_POST['mail']);
$formText = trim($_POST['texto']);
if(trim($formName) == ""
{
echo "Por favor ingrese algo como su nombre."; // Imprimimos el mensaje de error de acuerdo al campo.
exit();
}
if(trim($formMail) == ""
{
echo "Se nos hara un poco dificil contactarle.";
exit();
}
if(trim($formText) == ""
{
echo "Olvidando el tema?.";
exit();
}
$Headers = "From: $formMailrn"; // Asi usaremos la opciones responder
$Headers .= "Content-type: text/html; charset=iso-8859-1n"; // or UTF-8 mas que nada codificamos para evitar problemas con las Ñ's y acentos//";
$emailTo = "tu correo [email protected]";// Recuerda reemplazar con tu correo
$subject = "Ha llegado un nuevo mensaje!";
$Message = utf8_decode("$formName ($formMail)<br /><br />Dice:<br />$formText";
$ret = Array();
$ret['send'] = @mail($emailTo,$subject,$Message,$Headers); // Metemos en un arreglo todas las variables
$ret['status'] = ($ret['send']) ? 1 : 0;// Si todo esta bien
echo json_encode($ret);
?>
En fin es bastante simple, viene con sus explicaciones de todas formas para que no solo sea algo de copiar, sino tambien de entender que es lo que haciamos.
Suerte.
PD: Bueno taringa me emotikonizo parte del codigo asi que les dejo el archivo completo aqui .