Crear un formulario de contacto con validaciones en PHP y BOOTSTRAP



Apartandonos de ubuntu, tengo algunos conocimientos de programación, y casualmente publicare temas como estos, tratare de explicar los pasos lo mas que pueda, si tienen alguna duda no olviden comentar.

DEMO Y DESCARGA

ESTRUCTURA DE CARPETA

Tendremos una carpeta llamada formularioDeContacto y en ella tendremos los siguientes archivos:


FORMULARIO EN HTML - BOOTSTRAP

Si bien, crear un formulario de contacto en HTML no es nada del otro mundo y más teniendo Bootstrap en nuestras manos, podemos visitar la página Bootswatch para ver los diferentes estilos que nos proporciona esta maravillosa herramienta.

Empezamos creando el formulario de contacto con Bootstrap,este código lo pegamos en nuestro archivo index.php dentro de la etiqueta body.

Tendremos 4 input de tipo textbox y button:

 -Nombre - name = nombre
-Correo Electrónico - name = correoElectronico
-Asunto - name = asunto
-Comentarios - name = comentarios
-Botón Enviar - type=submit
-Botón Limpiar - type=reset

FORMULARIO DE CONTACTO



Observamos la etiqueta <form> encapsula a todos los <input>, cuando se presiona el botón Enviar, se envían los valores de cada input por método POST o GET (especificado por el usuario dentro de la etiqueta form, con el atributo method="") al archivo que se especifica en el atributo action="" que contiene la etiqueta <form>.

RECIBIENDO VALORES

Entonces, sabemos que el valor de cada input lo recibe el archivo enviar.php por el método que se especifica, en este caso POST, recibimos cada valor con $_POST[''] y lo guardamos en variables, con el siguiente código en PHP:
$nombre = $_POST [ 'nombre' ];
$correo = $_POST [ 'correoElectronico' ];
$asunto = $_POST [ 'asunto' ];
$comentarios = $_POST [ 'comentarios' ];

VALIDACIONES

Podemos saltarnos esta parte pero CUIDADO, cualquier usuario que tenga acceso al formulario puede dar clic en el botón ENVIAR, sin llenar los campos anteriores, esto provoca que llegue el formulario a nuestro correo vacío! o peor aún MILES DE CORREOS VACÍOS!. Por esta razón es importante siempre poner validaciones en los campos a nuestros formularios.

El archivo llamado validaciones.php contendrá funciones que podremos reutilizar.
 $max ) {
        return false;
    } else {
        return true;
    }
}
?>
Con estas funciones incluidas en nuestro archivo ya podremos empezar a validar los campos, dejare la lista de que campos requerirán validación, EJEMPLO:

- Campo "Nombre" solo puede contener hasta 70 caracteres y que sea Requerido.
- Campo "Correo Electrónico" solo puede contener hasta 100 caracteres y que sea Requerido también validar si se ingresó un correo electronico valido.
- Campo "Asunto" solo puede contener hasta 150 caracteres y que sea Requerido.
- Campo "Comentarios" solo puede contener hasta 800 caracteres.
//Incluir el archivo con las funciones.
require_once ( "validaciones.php" );
 
/* Variable donde se guardarán los mensajes
   de error de validación*/
$mensaje = array ();
 
//Empezar a validar los valores almacenados en variables
if ( validarCampoRequerido ( $nombre ) == false ) {
    $mensaje [] = "El campo nombre no puede estar vacío.";
}
else if ( validarCaracteresMaximos ( $nombre, 70 ) == false ) {
    $mensaje [] = "El campo nombre solo puede contener hasta 70 caracteres.";
}
else if ( validarCampoRequerido ( $correo ) == false ) {
    $mensaje [] = "El campo correo electrónico no puede estar vacío.";
}
else if ( validarCaracteresMaximos ( $correo, 100 ) == false ) {
    $mensaje [] = "El campo correo electrónico solo puede contener hasta 100 caracteres.";
}
else if ( validarEmail ($correo) == false ) {
    $mensaje [] = "Ingresa un correo electronico valido.";
}
else if ( validarCampoRequerido ( $asunto ) == false ) {
    $mensaje [] = "El campo asunto no puede estar vacío.";
}
else if ( validarCaracteresMaximos ( $asunto, 150 ) == false ) {
    $mensaje [] = "El campo asunto solo puede contener hasta 150 caracteres.";
}
else if ( validarCaracteresMaximos ( $comentarios, 800 ) == false ) {
    $mensaje [] = "El campo comentarios puede contener hasta 800 caracteres.";
}
Al final ingresamos in IF que checara si la variable $mensaje está vacía o no, si está vacía mandara el correo si no, regresara a la página anterior mandando una variable a la URL con los mensajes de error.
// Checar si hay errores de validación en variables
if ( $mensaje == false )
{
    //Enviar Correo Electronico
 
} else {
    
    // Redireccionar en caso que una validación no sea correcta
    //echo ( implode ( ",", $mensaje ) );
    header ( "Location: index.php?error=". implode ( ",", $mensaje ) );
}

ENVIAR FORMULARIO A NUESTRO CORREO ELECTRÓNICO

Solo nos falta lo más importante, mandar estos datos a nuestro correo, en PHP disponemos de una función llamada mail() que permite configurar y enviar el mensaje de correo. La función se llama mail() y recibe tres parámetros de manera obligada y otros dos parámetros que podemos colocar opcionalmente. Devuelve true si se envió el mensaje correctamente y false en caso contrario.
    $danger = "Error al intentar enviar mensaje.";
    $success = "Mensaje enviado correctamente";

    // Destinatario al que se enviará el correo electrónico
    $dato = "sauuza@gmail.com";
    
    // Cabeceras adicionales
    $header = 'From: ' . $correo . " \r\n";
    $header .= "X-Mailer: PHP/" . phpversion() . " \r\n";
    
    // Para enviar un correo, debe establecerse la cabecera Content-type
    $header .= "Mime-Version: 1.0 \r\n";
    $header .= "Content-Type: text/plain";
    
    // Si cualquier línea es más larga de 70 caracteres, se debería usar wordwrap()
    //$comentarios = wordwrap($comentarios, 70, "\r\n");
    
    $mensaje = "Nombre » " . $nombre . "\n";
    $mensaje .= "Asunto » " . $asunto . "\n";
    $mensaje .= "E-mail » " . $correo . " \r\n";
    $mensaje .= "Mensaje » " . $comentarios . "\r\n";
    
    //Comprobar si el mail se envia, si no, redireccionar con un mensaje de error
    if ( mail( $dato, $asunto, utf8_decode( $mensaje ), $header ) == false ) {

        header( "Location: index.php?tipo=danger&mensaje=", $danger );
    } else {

        header ( "Location: index.php?tipo=success&mensaje=Se envió correctamente", $success );
    }
LISTO, tendremos nuestro formulario ya funcionando!

AGREGAR CUADRO DE NOTIFICACIONES

Si bien, cuando sucede un error de validación o error al enviar el mensaje redirecciona al index.php enviando variables en la URL. Podemos lograr lo siguiente;

Tan fácil añadiendo el siguiente código antes de nuestra etiqueta form
    
Hay un contra en añadir variables a la URL, y es que no se borran automáticamente, aunque recarguemos la página siguen estando ahí, al menos que las borremos manualmente. Para ello hice un pequeño script en JS y Jquery que quita las variables de la URL cuando la caja de errores se oculta.

Lo agregaremos antes de nuestra etiqueta body:

RETORNAR VARIABLES CON VALIDACIÓN EXITOSA

Que pasa si el usuario ingresa todos los campos bien menos el de asunto, tendrá que volver a escribir todo de nuevo!, es algo incomodo y para formularios grandes no da ganas de hacerlo nuevamente.
Para esto le ahorramos tiempo al usuario retornando por la ULR los campos que pasaron la validación correcta.

Crearemos una variable de tipo array() llamada $campos en enviar.php, a la cual le agregaremos los campos que se validaron con éxito.
$campos = array ();

Modificaremos nuestros IF de validaciones separándolos y agregando al final de cada IF agregar un else;
//Empezar a validar los valores almacenados en variables
if ( validarCampoRequerido ( $nombre ) == false ) {
    $mensaje [] = "El campo nombre no puede estar vacío.";
}
else if ( validarCaracteresMaximos ( $nombre, 70 ) == false ) {
    $mensaje [] = "El campo nombre solo puede contener hasta 70 caracteres.";
} else {
    $campos ['nombre'] = "nombre=". $nombre;
}


if ( validarCampoRequerido ( $correo ) == false ) {
    $mensaje [] = "El campo correo electrónico no puede estar vacío.";
}
else if ( validarCaracteresMaximos ( $correo, 100 ) == false ) {
    $mensaje [] = "El campo correo electrónico solo puede contener hasta 100 caracteres.";
}
else if ( validarEmail ($correo) == false ) {
    $mensaje [] = "Ingresa un correo electronico valido.";
} else {
    $campos ['correoElectronico'] = "correoElectronico=". $correo;
}

if ( validarCampoRequerido ( $asunto ) == false ) {
    $mensaje [] = "El campo asunto no puede estar vacío.";
}
else if ( validarCaracteresMaximos ( $asunto, 150 ) == false ) {
    $mensaje [] = "El campo asunto solo puede contener hasta 150 caracteres.";
} else {
    $campos ['asunto'] = "asunto=". $asunto;
}

if ( validarCaracteresMaximos ( $comentarios, 800 ) == false ) {
    $mensaje [] = "El campo comentarios puede contener hasta 800 caracteres.";
} else {
    $campos ['comentarios'] = "comentarios=". $comentarios;
}
Modificar nuestro último header() de enviar.php por:
header ( "Location: index.php?tipo=danger&mensaje=". $mensaje [0] ."&". implode ( "&", $campos ) );
Agregar el atributo value="" a cada input de index.php con código php:
            



Y listo tendremos nuestro formulario!
asdasddas