Envío de formularios web por email con PHP y jQuery AJAX

Hace algún tiempo publique una entrada para crear un formulario multi pasos con html, jquery y css3. Pero nunca explique cómo enviar ese formulario y he recibido varias consultas preguntando eso, así que por fin le dedique un poco de tiempo y crearemos un sencillo script php para el envío de formularios web por email con PHP y jQuery AJAX.

Que necesitamos?

Un formulario (obvio) incluso podría usarse el formulario multipasos ya explicado en esta entrada, pero para fines practico crearemos uno mas simple, pero el método es aplicable a cualquier formulario.

  • Formulario HTML.
  • Un servidor web con php.

Nuestro formulario

<div class="form-style" id="contact_form">
<div class="form-style-heading">SuperMegaDuperHiper Formulario</div>
<div id="contact_body">
<label>
<span>Nombre <span class="required">*</span></span>
<input type="text" name="name" id="name" required="true" class="input-field"/>
</label>
<label>
<span>Email <span class="required">*</span></span>
<input type="email" name="email" required="true" class="input-field"/>
</label>
<label>
<span>Fono</span>
<input type="text" name="phone1" maxlength="4" placeholder="+91"  required="true" class="tel-number-field"/>&mdash;
<input type="text" name="phone2" maxlength="15"  required="true" class="tel-number-field long" />
</label>
<label for="subject">
<span>Asunto</span>
<select name="subject" class="select-field">
<option value="Felicitaciones">Felicitaciones</option>
<option value="Petición">Petici&oacute;n</option>
<option value="Reclamo">Reclamo</option>
</select>
</label>
<label for="field5">
<span>Mensaje <span class="required">*</span></span>
<textarea name="message" id="message" class="textarea-field" required="true"></textarea>
</label>
<label>
<span>&nbsp;</span>
<input type="submit" id="submit_btn" value="Submit" />
</label>
</div>
</div>

Los mas suspicaces notaran que no existe la etiqueta form y esto no es un error del todo, semanticamente no seria correcto si lo validamos con el w3c, pero lo podemos resolver eligiendo el doctype mas adecuado, en este caso html5, así que lo agregamos a nuestro documento html.

<!DOCTYPE html>

Bien y el resultado seria mas menos lo siguiente:

Mmmm, realmente es un formulario muy básico xD, pongamos un poco de color ayudados por css.

Creamos un nuevo documento con extensión .css yo lo llamare style.css (que original).

/* ajuste basico del documento */
body,html{background: #E0EFF1;margin: 0px;padding: 0px;}
/* estilos del formulario */
.form-style{
 max-width: 450px;
 padding: 40px 30px 40px 40px;
 font: 13px Arial, Helvetica, sans-serif;
 margin: 50px auto;
 background: #fff;
     border-radius: 5px;
 -webkit-border-radius:5px;
    -moz-border-radius:5px;
         box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
 -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}
.form-style-heading{
 font-weight: bold;
 font-style: italic;
 border-bottom: 2px solid #ddd;
 margin-bottom: 10px;
 font-size: 15px;
 padding-bottom: 3px;
}
.form-style label{display: block;margin: 0px 0px 15px 0px;}
.form-style label > span{
 width: 100px;
 font-weight: bold;
 float: left;
 padding-top: 8px;
 padding-right: 5px;
}
.form-style span.required{color:red;}
.form-style .tel-number-field{width: 40px;text-align: center;}
.form-style  .long{width: 120px;}
.form-style input.input-field{width: 48%;}

.form-style input.input-field,
.form-style .tel-number-field,
.form-style .textarea-field,
.form-style .select-field{
 -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
     -ms-transition: all 0.30s ease-in-out;
      -o-transition: all 0.30s ease-in-out; 
         box-sizing: border-box;
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
 border: 1px solid #C2C2C2;
     box-shadow: 1px 1px 4px #EBEBEB;
    -moz-box-shadow: 1px 1px 4px #EBEBEB;
 -webkit-box-shadow: 1px 1px 4px #EBEBEB;
     border-radius: 3px;
 -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
 padding: 7px;
 outline: none;
}
.form-style .input-field:focus,
.form-style .tel-number-field:focus,
.form-style .textarea-field:focus,  
.form-style .select-field:focus{
 border: 1px solid #7DB4B5;
}
.form-style .textarea-field{height:100px;width: 55%;}
.form-style input[type="button"],
.form-style input[type="submit"] {
    -moz-box-shadow: inset 0px 1px 0px 0px #3985B1;
 -webkit-box-shadow: inset 0px 1px 0px 0px #3985B1;
     box-shadow: inset 0px 1px 0px 0px #3985B1;
 background-color: #216288;
 border: 1px solid #17445E;
 display: inline-block;
 cursor: pointer;
 color: #FFFFFF;
 padding: 8px 18px;
 text-decoration: none;
 font: 12px Arial, Helvetica, sans-serif;
}
.form-style input[type="button"]:hover,
.form-style input[type="submit"]:hover {
 background: linear-gradient(to bottom, #2D77A2 5%, #337DA8 100%);
 background-color: #28739E;
}
.form-style .success{
 background: #D8FFC0;
 padding: 5px 10px 5px 10px;
 margin: 0px 0px 5px 0px;
 border: none;
 font-weight: bold;
 color: #2E6800;
 border-left: 3px solid #2E6800;
}
.form-style .error {
 background: #FFE8E8;
 padding: 5px 10px 5px 10px;
 margin: 0px 0px 5px 0px;
 border: none;
 font-weight: bold;
 color: #FF0000;
 border-left: 3px solid #FF0000;
}

Ahora nuestro formulario si luce bien.

screenshot.1

Pero un momento, si el formulario no tiene la etiqueta

<form></form>

  como enviaremos el formulario sin el atributo action?. La respuesta es bien simple… Con Jquery Ajax por supuesto. Podemos crear un Archivo independiente para el script Jquery o integrarlo en la cabecera de nuestro documento html dentro de una etiqueta 

<script type="text/javascript">

  , yo lo incluiré dentro del documento.

Primero  declaramos un document ready

$(document).ready(function(){});

  y dentro programamos las validaciones básicas.

El código esta fuertemente comentado, por tanto no lo explicaré detalladamente (si existen dudas o incluso pueden aportar mejoras, comentarlas).

Debemos realizar las validaciones del lado del cliente antes que se envíe el formulario y presentar los errores si es que existen, para ello activamos nuestras validaciones con el método .click de jQuery, en términos mas simples, nuestro código jQuery se activara una vez realicemos un clic al botón enviar.

Usando los selectores de jQuery, vigilamos la acción .click()

$(document).ready(function(){
//usaremos el metodo .click() de jQuery para iniciar
//las validaciones del lado del cliente y enviar el formulario
$("#submit_btn").click(function(){
//creamos una variable como flag(bandera), 
//la usaremos para detener el script si no 
//se cumplen las reglas de validacion
var continuar = true;
//Validacion del lado del cliente
//iniciamos un bucle para validar todos los campos input y agregar un borde de color 
//cuando se envie el formulario con algun campo vacio
$("#contact_form input[required=true], #contact_form textarea[required=true]").each(function(){
$(this).css('border-color','');
if(!$.trim($(this).val())){ //si el campo esta vacio 
$(this).css('border-color','Red'); //cambiar el color del borde   
continuar = false; //Seteamos la bandera en false y detemos la ejecución
}
//si el if anterior valida correctamente pasamos a la siguiente validacion
//Usaremos una expresion regular para validar la estructura del email
var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
$(this).css('border-color','Red'); //Cambiamos el color del borde si no cumple la estructura   
continuar = false; //Seteamos la bandera en false y detemos la ejecución                
}
});
});

//restablecer los colores del borde establecidos con anterioridad y ocultar todos los mensajes de .keyup()
$("#contact_form  input[required=true], #contact_form textarea[required=true]").keyup(function(){
$(this).css('border-color','');
$("#result").slideUp();
});
});

La primera parte ya esta hecha, pero al probar el formulario nos daremos cuenta que no realiza ninguna acción, si vemos la consola del navegador observaremos este error:

Error jQueryEsto se produce por no haber agregado la llamada a la librería de jQuery, asi que procedemos a incluirla en la cabecera de nuestra pagina 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">

  ahora al volver a probar nuestro formulario e intentar enviarlo sin completar los campo se iluminan los bordes con un color rojo indicando un error y si completamos los campos iluminados estos se restablecen.

validacíon jQueryBien ahora ya validamos correctamente, pero cuando realizamos el envío no sucede nada, pues bien ahora lo resolveremos.

Para enviar los datos por email, usaremos el método mail() de PHP, este método de php es lo mas básico que podríamos implementar y mas sencillo.

Desde nuestro script jQuery mediante ajax enviaremos los datos del formulario a nuestro nuevo archivo php (contact_me.php) para procesarlos y enviar el mail (al fin).

Agregamos los siguiente a nuestro script después  del método .eatch().

//Si llegamos a este punto, ¡Todo se ve bien! proceder...
if(continuar){
//obtenemos los valores de los campos de entrada para ser enviados al servidor
post_data = {
'user_name'    : $('input[name=name]').val(),
'user_email'   : $('input[name=email]').val(),
'country_code' : $('input[name=phone1]').val(),
'phone_number' : $('input[name=phone2]').val(),
'subject'      : $('select[name=subject]').val(),
'msg'          : $('textarea[name=message]').val()
};

//Enviar datos mediante Ajax al servidor
$.post('contact_me.php', post_data, function(response){  
if(response.type == 'error'){ //Cargamos datos en formato JSON de validacion del lado del servidor para mostrar los mensajes de error.
output = '<div class="error">'+response.text+'</div>';
}else{
output = '<div class="success">'+response.text+'</div>';
//Restablecemos los valores de todos los campos del formulario
$("#contact_form  input[required=true], #contact_form textarea[required=true]").val('');
$("#contact_form #contact_body").slideUp(); //Ocultamos el formulario y mostramos un mensaje de éxito
}
$("#contact_form #contact_results").hide().html(output).slideDown();
}, 'json');
}

Ahora crearemos el archivo

contact_me.php

  y agregamos el siguiente código.

<?php
if($_POST){
//A quien le llegara el email
$to_email = "mail@localhost";    
//Primera validacion y basica, comprobar si es una petición AJAX
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
$output = json_encode(array( //crear datos JSON
'type' => 'error',
'text' => 'Perdon, las peticiones deben ser de tipo Ajax'
));
die($output);
}
//Limpiamos los datos de entrada utilizando filter_var() de PHP5
$user_name    = filter_var($_POST["user_name"], FILTER_SANITIZE_STRING);
$user_email   = filter_var($_POST["user_email"], FILTER_SANITIZE_EMAIL);
$country_code = filter_var($_POST["country_code"], FILTER_SANITIZE_NUMBER_INT);
$phone_number = filter_var($_POST["phone_number"], FILTER_SANITIZE_NUMBER_INT);
$subject      = filter_var($_POST["subject"], FILTER_SANITIZE_STRING);
$message      = filter_var($_POST["msg"], FILTER_SANITIZE_STRING);


//Aunque validamos los datos con jQuery, si por alguna razon el
//navegador del visitante tiene javascript desahilitado no funcionara la validacion
//asi que realizaremos validación adicional con php del lado del servidor
if(strlen($user_name)<4){ //Si la longitud es menor que 4, devolvemos el error con JSON
$output = json_encode(array('type'=>'error', 'text' => 'El nombre es demasiado corto o está vacío!'));
die($output);
}
if(!filter_var($user_email, FILTER_VALIDATE_EMAIL)){ //validacion de email
$output = json_encode(array('type'=>'error', 'text' => 'Por favor ingrese un email valido!'));
die($output);
}
if(!filter_var($country_code, FILTER_VALIDATE_INT)){ //Chequear que el campo codigo pais es un numero valido
$output = json_encode(array('type'=>'error', 'text' => 'Introduzca sólo dígitos en el código de país'));
die($output);
}
if(!filter_var($phone_number, FILTER_SANITIZE_NUMBER_FLOAT)){ //Chequear que el telefono sea un numero valido
$output = json_encode(array('type'=>'error', 'text' => 'Introduzca sólo dígitos en el número de teléfono'));
die($output);
}
if(strlen($subject)<3){ //Nos aseguramos que el asunto no este vacio
$output = json_encode(array('type'=>'error', 'text' => 'El asunto es requerido'));
die($output);
}
if(strlen($message)<3){ //Revisamos que el mensaje no esta vacio
$output = json_encode(array('type'=>'error', 'text' => 'Mensaje demasiado corto! Por favor, introduzca algo mas.'));
die($output);
}


//cuerpo del email
$message_body = $message."\r\n\r\n-".$user_name."\r\nEmail : ".$user_email."\r\nPhone Number : (".$country_code.") ". $phone_number ;
//enviamos el email con php.
$headers      = 'From: '.$user_name.'' . "\r\n" .'Reply-To: '.$user_email.'' . "\r\n" .'X-Mailer: PHP/' . phpversion();
$send_mail    = mail($to_email, $subject, $message_body, $headers);

if(!$send_mail){
//Si el correo no pudo ser enviado o recibimos error de salida.
//Compruebe la configuración de correo electrónico PHP (si es que alguna vez sucede )
$output = json_encode(array('type'=>'error', 'text' => 'No se pudo enviar el correo! Por favor, compruebe la configuración de PHP mail.'));
die($output);
}else{
$output = json_encode(array('type'=>'message', 'text' => 'Hola '.$user_name .' Gracias por tu email, pronto nos contactaremos.'));
die($output);
}
}
?>

Ahora ya podemos realizar un prueba del envío. No olviden cambiar la dirección de email donde llegaran los mensajes en la linea 4 del archivo contact_me.php.

Otra cosa importante es el hecho que si prueban el formulario en un servidor local no les llegara el mensaje al correo configurado y si miran la consola del navegador verán un mensaje similar al siguiente.

<br />
<b>Warning</b>:  mail(): Failed to connect to mailserver at &quot;localhost&quot; port 25, verify your
 &quot;SMTP&quot; and &quot;smtp_port&quot; setting in php.ini or use ini_set() in <b>D:\USBWebserver
 v8.6\root\ajaxcontact\contact_me.php</b> on line <b>54</b><br />
{"type":"error","text":"No se pudo enviar el correo! Por favor, compruebe la configuraci\\u00f3n mail
 en su archivo php.ini."}

Esto es por que nuestros computadores hogareños no cuentan con un servidor de email configurado para poder enviar los email a otros servidores (gmail,yahoo, etc), pero en un hosting publico no deberíamos tener problema.

Actualización 21/06/2016

Para realizar pruebas en ambientes locales leer el siguiente post Como probar envios de eamil en servidor local

Descargar

Referencias

Paleta de Colores
Método .click() jQuery
Método mail PHP
jQuery.ajax()
filter_var PHP
filter_sanitize PHP

Optimizacion de Ubuntu

En el afan de mantener limpia mi ubuntu me encontre con este interesante post en ubuntips

Ubucleaner es un script que ayuda a mantener limpio tu Ubuntu.

Qué hace?

  • Limpia el cache de apt.
  • Remueve archivos de configuración de paquetes deb que se han desinstalado.
  • Remueve todos los kernels instalados excepto el que se está usando.
  • Vacía las papeleras de todos los usuarios.

Para usarlo tienes que descargar el script desde acá y luego abrimos una terminal en la carpeta donde se encuentra el archivo para darle permiso de ejecución:

chmod -c 744 71529-ubucleaner.sh

Solo falta ejecutar el script con:

sudo ./71529-ubucleaner.sh

ccleanner en linux, o como eliminar basura temporal

después de estar usando mi ubuntu por bastante tiempo e instalar y desintalar cosas, probar configuraciones y cosas por el estilo el sistema se resintió en su rendimiento y al llegar a esta situación, simplemente lo LIMPIE de basura y cosas innecesarias, y decidí crear este post para ayudar a quien necesite limpiar su sistema y no sepa como hacerlo.

Es importante hacer notar que esto puede ser implementado en cualquier sistema linux solo se deberá buscar los paquetes sugeridos para su distribución.

En esta entrada explicaré deborphan, un paquete que se encarga de buscar las librerías huérfanas, es decir, aquellas que no se desinstalaron correctamente y que ya no se utilizan.

Instalación y uso

 

Para la instalación de deborphan utilizaremos el maravilloso apt-get:

apt-get install deborphan

Y ahora para ver las librerías huérfanas simplemente tecleamos:

deborphan

Si además queremos obtener una descripción de estas librerías usaremos deborphan mediante el comandó dpkg (gestor de paquetes):

dpkg -l $(deborphan)

A partir de aquí podemos desinstalar la lista de librerías huérfanas con el siguiente comando:

sudo dpkg --purge $(deborphan)

Deporphan además de eliminar librerías huérfanas se puede utilizar para buscar ficheros de configuración que ya no se utilizan. Estos ficheros se suelen quedar en nuestro sistema porque no utilizamos la opción –purge al desinstalar un programa mediante apt-get remove.

Para visualizar estos ficheros de configuración tecleamos:

dpkg -l $(deborphan --find-config)

Y ahora para eliminarlos:

sudo dpkg --purge $(deborphan --find-config)

En definitiva, deborphan es un paquete muy recomendable que nos ayuda a mantener una coherencia entre los paquetes instalados y que a su vez elimina los ficheros de configuración inservibles. El resultado es siempre positivo, ya que, por un lado se obtiene más espacio en el disco duro y por el otro se mantiene un orden en el sistema.

 

Limpiando la basura de configuración

 

Bueno pues otra manera muy recomendable de mantener un orden es usando localepurge, un paquete que se encarga de eliminar los archivos de traducción que no utilizamos.

Para instalarlo usaremos el querido apt-get:

sudo apt-get install localepurge

Justo después de la instalación aparecerá una pantalla donde tenemos que seleccionar los idiomas a conservar.

localepurge-config

 

Primero seleccionaremos los idiomas de primer nivel, es decir, los que van sin guiones, estos son los más importantes ya que contienen la mayoría de la traducción del idioma. A continuación escogemos los de segundo nivel, los que van con guiones. Para que tengan una idea yo voy a conservar la siguiente lista:

  • es_CL
  • es_CL.UTF-8

Una vez configurado localepurge, solo tenemos que ejecutarlo como de root para eliminar los ficheros de traducción que no deseamos:

sudo localepurge

Puede resultar como el siguiente ejemplo:

sudo localepurge
localepurge: Disk space freed in /usr/share/locale: 11308K

Desde ahora, cada vez que instalemos una aplicación mediante apt-get se ejecutará automáticamente localepurge al finalizar la instalación. Como lo muestra el siguiente ejemplo donde se observa como se han eliminado 888kb al instalar gnomebaker:

sudo apt-get install gnomebaker
85321 ficheros y directorios instalados actualmente.
Desempaquetando gnomebaker (de …/gnomebaker_0.6.0-0ubuntu2~dapper1_i386.deb) …
Configurando gnomebaker (0.6.0-0ubuntu2~dapper1) …
localepurge: Disk space freed in /usr/share/locale: 888K

localepurge es un paquete al igual que deborphan que nos ayuda a eliminar archivos innecesarios, en este caso archivos de traducción que no utilizamos, obteniendo como resultado más espacio en disco.