Creando un formulario de contacto con PHP y Javascript [1]: El proyectoHomeCSSCreando un formulario de contacto con PHP y Javascript [1]: El proyectoEn esta serie de tutoriales vamos a ver como crear desde cero un formulario de contacto bsico con PHP.Para el PHP habr que tener algn tipo de hosting que nos permita enviar e-mails(me consta que000webhostlo permite). Aunque lo primero es tener el HTML necesario, que es un formulario cualquiera. Usartres campos: Nombre, e-mail y mensaje, que sern obligatorios.El resultado final ser algo as:

Si te interesa aprender cmo hacerlo, te recomiendo que leas esto. Si no, siempre puedes esperar a que acabe, y ponga un link de descarga a los archivos finales.Nota: tened en cuenta que usaremos varios atributos propios de HTML5 (aunque haremos que funcione en navegadores antiguos)Para hacer todo crearemos una carpeta con estos archivos (por ahora): index.html, donde tendremos nuestro formulario. Una carpeta llamadacss, donde guardaremosstyle.css, el archivo para editar la apariencia del formulario, yreset.css, elfamoso reset de Eric Meyer(suelo preferir usarnormalize.css, pero no merece la pena incluirlo sin editar para un proyecto pequeo). Una carpeta llamadajs, donde guardaremos: modernizr.js, una versin de modernizr que comprueba los tipos de elementos HTML5 de los formularios. Podis descargarla desdeaqu script.js, donde pondremos el cdigo necesario para enviar el formulario con los datos necesarios, y comprobar los campos necesarios. post.php, donde enviaremos los datos.

Creando un formulario de contacto con PHP y Javascript [2]: El HTMLHomeHTMLCreando un formulario de contacto con PHP y Javascript [2]: El HTMLEs lo primero que tendremos que realizar: el formulario desde el que vamos a enviar nuestros datos. Es te es el contenido de nuestro archivoindex.html.Con esto obtendremos un resultado tal que as:

Espero que los comentarios sean bastante aclaratorios

Formulario de contacto

Nombre* e-mail* Mensaje*

Toda la serie:Creando un formulario de contacto con PHP y Javascript [3]: el CSSHomeCSSCreando un formulario de contacto con PHP y Javascript [3]: el CSSEn laltima entrada, dejamos hecho un formulario bsico, pero visualmente no obtuvimos grandes resultados.Tras editar nuestro archivostyle.cssde la carpetacssy rellenar con elreset de Eric Meyerel archivoreset.css, obtendremos:

Ya que elreset.csses slo copiar el cdigo que viene en el link de arriba, slo pondr elstyle.css:html{ background: #eee; color: #333; font-size: 87.5%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}

html, input, textarea{ font-family: Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif; font-weight: 700;}

*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}#container{ width: 100%; max-width: 650px; background: #fff; border: 1px solid #ccc; margin: 2em auto; padding: 2em;}.ie6 #container{ width: 650px;}

input[type="text"]:focus, input[type="email"]:focus, textarea:focus{ outline: none; -webkit-box-shadow: 0 0 4px 1px #5AB7F5, inset 0 0 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 4px 1px #5ab7f5, inset 0 0 4px rgba(0, 0, 0, 0.2); box-shadow: 0 0 4px 1px #5AB7F5, inset 0 0 4px rgba(0, 0, 0, 0.2); border-color: #5AB7F5;}

input[type="text"], input[type="email"], textarea{ color: #555;

height: 2em; width: 100%; padding: .2em; padding-left: .5em; border: 1px solid #d2d2d2; margin-left: 1em;}

textarea{ padding: .5em;}

input[type="submit"], input[type="text"], input[type="email"], textarea{ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}input[type="text"], input[type="email"]{ max-width: 250px;}

textarea { display: block; margin-left: 0; min-height: 8em;}

p { line-height: 2.3em;}

p.submit{ text-align: center; margin-top: 1em;}

.requerido { color: #3D85C6; font-weight: 700; font-size: 1.2em;}

input[type="submit"]{ display: inline-block; *display: inline; zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#F9F9F9, endColorstr=#E3E3E3); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9F9F9', endColorstr='#E3E3E3')"; cursor: pointer; color: #444; position: relative;

padding: 5px 10px; border: 1px solid #CCC;

background: #F1F1F1; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #F9F9F9), color-stop(100%, #E3E3E3)); background-image: -webkit-linear-gradient(#F9F9F9, #E3E3E3); background-image: -moz-linear-gradient(#F9F9F9, #E3E3E3); background-image: -o-linear-gradient(#F9F9F9, #E3E3E3); background-image: linear-gradient(#F9F9F9, #E3E3E3);

-webkit-box-shadow: 0 1px rgba(255, 255, 255, 0.2) inset; -moz-box-shadow: 0 1px rgba(255, 255, 255, 0.2) inset; box-shadow: 0 1px rgba(255, 255, 255, 0.2) inset;}

input[type="submit"]:hover{ background: #EAEAEA; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EAEAEA, endColorstr=#EAEAEA); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#EAEAEA', endColorstr='#EAEAEA')";}

input[type="submit"]:active{ background: #EAEAEA; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3) inset; -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3) inset; box-shadow: 0 0 3px rgba(0, 0, 0, 0.3) inset;}

#error ul { list-style: disc; color: red; padding-left: 40px; margin-bottom: 2em;}#correcto { color: green; text-align: center;}Toda la serie:Creando un formulario de contacto con PHP y Javascript [4]: el JavascriptHomeJavascriptCreando un formulario de contacto con PHP y Javascript [4]: el JavascriptCon el javascript no cambiaremos la apariencia del formulario, pero s comprobaremos errores de relleno del formulario, y haremos que no se redirija la pgina una vez enviado. Dentro de la carpetajs, el archivomodernizr.jsesste, por lo que me centrar enscript.js.Bsicamente lo que hacemos es comprobar los campos y enviar al servidor va AJAX el mensaje:(function(window, document){ // Abreviar document.getElementById function $(id){ return document.getElementById(id); }

/* Variables para evitar acceder al DOM muchas veces, y abreviar */ var form = $('formulario'), nombre = $('nombre'), email = $('email'), mensaje = $('mensaje'), error = $('error'), correcto = $('correcto');

// Comprobar e-mail y cadena vaca function emailVerification(valor){ // Expresin regular para validar el email (http://stackoverflow.com/questions/46155/validate-email-address-in-javascript) // Yo haba hecho una propia, pero no estoy en mi ordenador, y esta parece funcionar bien var regex = /^(([^()[\]\\.,;:\s@\"]+(\.[^()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ return regex.test(valor); } function estaVacio(valor){ return valor === ""; }

// Funcin que suceder cada vez que el formulario se enva function onsubmit(e){ var data = { nombre: nombre.value, email: email.value, mensaje: mensaje.value }, errores = [];

e = e || window.event;

// Evitamos redireccionar if( typeof e.preventDefault === 'function'){ e.preventDefault() } else { e.returnValue = false; }

// comprobamos errores (prefiero mostrarlos normalmente quitando el required) if( estaVacio(data.nombre)){ errores.push("El campo del nombre no puede estar vaco") } if( ! emailVerification(data.email)){ errores.push("Introduce un email vlido") } if( estaVacio(data.mensaje) ){ errores.push("El mensaje no puede estar vaco") }

// Si hay errores no enviamos el formulario if(errores.length){ error.innerHTML = '

' + errores.join('

') + '

'; return false; }

// Si no hay errores, ponemos la lista de errores vacos error.innerHTML = '';

// Enviamos el formulario, pero evitamos redireccionar enviarform(data);

return false; }

// Funcin mediante la que envimos el formulario function enviarform(data){ var request = createRequest(), params = convertirObjeto(data);

request.open("POST", 'post.php', false); request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); request.onreadystatechange = function(){ if( request.readyState === 4 ){ if( request.responseText !== "SUCCESS" ){ return error.innerHTML = "

Hubo un error al enviar el formulario

" } // Si est todo correcto mostramos el mensaje y ocultamos el formulario correcto.innerHTML = "El mensaje se envi correctamente, intentar responderte lo antes posible"; form.style.display = "none"; } } request.send(params); }

// Creamos una solicitud AJAX function createRequest(){ // IE7 no implement bien XMLHttpRequest, as que intentamos usar el nativo if( window.ActiveXObject ){ try{ return new window.ActiveXObject("Microsoft.XMLHTTP"); } catch(ex){ alert("Usas un navegador demasiado antiguo (IE5), actualzalo para poder desfrutar de la web") return null } } return new window.XMLHttpRequest(); }

// Convierte un objeto en una cadena de texto preparada para ser enviada al servidor function convertirObjeto(obj){ var ret = '', key, current = 0; for (key in obj){ ret += ((current === 0 ? '' : '&') + key + '=' + encodeURIComponent(obj[key]) ); current++ } return ret; }

/* Si no est javascript activado y es un navegador moderno, el navegador comprobar los campos por nosotros Si s lo est, prefiero comprobarlos y mostrar los errores en conjunto. */ nombre.required = email.required = mensaje.required = false; email.type = "text";

// Aadimos el evento cuando el formulario va a ser enviado form.addEventListener ? form.addEventListener('submit', onsubmit, false): form.attachEvent('onsubmit', onsubmit)

})(window, document, undefined)Toda la serie:Creando un formulario de contacto con PHP y Javascript [5]: el PHPHomePHPCreando un formulario de contacto con PHP y Javascript [5]: el PHPEn lasanteriores partes de este tutorialhemos creado un bonito formulario, con un genial acabado, y un script que nos permite enviar va AJAX los datos al servidor para quenos lo enve por e-mail.Pero estamos enviando los datos a una pgina vaca (por ahora),post.php. Ahora nos encargaremos de que cada vez que se enve nos llegue un bonito mensaje a nuestra bandeja de entrada:Nota:Es necesario que el servidor donde alojes estos ficheros tenga activada la funcinmailde PHP. Yo he alojado los ficherosaqu(000webhost.com), y como veis funciona.Por lo que he ledo es posible que te llegue como spam (dependiendo de qu correo usas).Nota 2: Importantsimo cambiar la primera variable ($receptor) por la direccin a la que quieres que llegue el correo.