facebook

¿Cómo están? luego de un tiempo, volvemos al ruedo con la intención de publicar contenido útil e interesante para aquellos que trabajan y/o estudian diseño y desarrollo web. Esta vez lo hacemos con un tema ya conocido, no por eso menos importante. Muchos de los estudiantes, casi siempre tienen la interrogante y necesidad de como hacer funcionar un formulario Web. Esta tarea tiene la dificultad, que aparte de diseño y maquetación, también requiere un conocimiento mínimo de programación; independientemente del lenguaje en el cual se programe el formuario, necesita la comprención de alguanas tareas comunes de programación. Por lo general lo que la gente hace, es descargar algún formulario funcionando desde la red e implementarlo posteriormente en los sitios. Esta vez, aparte de proveer a los usuarios de un formulario funcioanando para que lo descarguen, vamos a tratar de explicarlo paso a paso y así tener el valor agregado de implementar algo luego de ser verdaderamente comprendido. Esto nos permitirá hoy o mañana poder crear un formulario nosotros mismos y empezar porque no, a fabricar formularios más complejos.

Podríamos dividir los formularios en dos categorías, los simples que envían los datos recabados a un E-mail y aquellos que guardan esa información en una base de datos; estos últimos también pueden enviar esa misma información por E-mail pero tienen la capadiad de enviar información que será almacenada para luego ser utilizada en la administración de usuarios.
En esta ocasión veremos como construir un formulario que envía E-mails a una dirección determinada.

Vamos a hacer una lista de los elementos y herramientas que necesitamos para la creación de un formulario:

  1. Un programa de diseño (Bocetar el formulario que quiero)
  2. Un editor de HTML (Armar en HTML los campos del formulario)
  3. Un editor de Javascript (Programar la validación del formulairo)
  4. Un editor de PHP (Recibir la información del formulario, ordenarla y enviarla por E-mail)

1 – Un programa de diseño (Bocetar el formulario que quiero)

Aunque se le de poca importancia muchas veces, la primer parte del trabajo es el dibujo que va a tener el formulario; no olvidemos que es una interfaz con la que el usuario nos enviará información, por lo tanto, es muy importante que dicho formulario tenga un aspecto agradable, no resulte pesado de completar, tenga una correcta validación para guiar al usuario a completar los datos correctamente y por último darle la tranquilidad de que sus datos fueron enviados correctamente y que a la brevedad el equivo de administradores se comunicará con él y le evacuará sus inquitudes. Para ello primero tengo que tener claro que información quiero recabar y posteriormente hacer un diseño congruente con mis objetivos. Para ello primero puedo hacer un dibujo con lápiz y papel de un formulario para luego pasar a un editor gráfico como puede ser Photoshop o Fireworks y así crear el diseño tal cuál como lo vera el usuario en la Web.

Aquí podemos ver el formulario de registro de Twitter, antes veíamos el de Facebook:
twitter

2 – Un editor de HTML (Armar en HTML los campos del formulario)

El próximo paso está relacionado al maquetado del formulario anteriormente diseñado. Hay una cierta discusión acerca de si se deben utilizar tablas o no a la hora de armar el HTML. Yo creo que la pregunta que me debo hacer es, ¿cuál es la composición del formulario y cuál es la manera más simple y semántica de hacerlo?. La composición tiene que ver la estrucutra del mismo, si está planteado en una columna, en dos o más; la simpleza atañe a evitar complicaciones haciendo un armado rebuscado y la semántica es la correcta utilización de etiquetas para que los navegadores interpreten ese contenido como es debido.

Así se ve:

Formulario

CSS

body { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; }
h1 { text-align: center; color: gray; margin-top: 10px; }
form { margin: 0; }
hr { margin: 10px 0; }
form input, form textarea { margin-top: 2px; vertical-align: middle; }
form fieldset { background: #CCC; padding: 10px; margin: 10px auto 0 auto; border: 10px solid gray; width: 400px; }

HTML

Formulario de contacto



Hombre Mujer
Deporte Política Ciencia

Arriba podrán ver una imagen de como se ve el formulario gráficamente, el fragmento de código CSS y el código HTML. El CSS no hace más que dar diseño a las etiquetas del HTML, como podemos ver tenemos estilos aplicados a un encabezado “h1″, unas etiuqetas “hr” que son simples líneas para separar cada parte del formulario, espaciados aplicados con “margin” en cada “input” y “textarea” para darle un poco de aire entre los elementos y por último el diseño que se aplica al “fieldset” se utiliza precisamente para encerrar un set de campos de formulario, es una etiqueta ideal para diferenciar zonas en una plantilla de formulario grande, donde hay muchos campos y con características diferentes.

Ahora veamos el HTML, luego del encabezado “h1″ (no hace más que darle un título en el cuerpo de la página) aparece la etiqueta “form” la cuál define el área del forumario y anidará dentro, todo el contenido, textos, campos de formulario, botones, etc.

En la etiqueta form aparecen las propiedades “ID” y “name”, que se utilizan para identificar el elemento forumario a la hora de programarlo y modificarlo, la propiedad method, especifica el método de envío de datos (post) y la propiedad action que almacena la URL de la página a la cuál redireccionara el formulario una vez sean enviados los datos. La etiqueta label se utiliza para encerrar el texto que hace referencia al campo, por ejemplo “Nombre y Apellido”. Las etiquetas input se utilizan para distintos campos, texfields, radio buttons, check box, etc; la forma de diferenciar a cada uno de ellos, es definiendo la propiedad “type”, por ejemplo: type=”submit” (input para botón de envío de datos).

La propiedad ID, es el identificador de la etiqueta, esto es fundamental para la manipulación de dichos elementos con CSS y Javascript, diseño y validación respectivamente. La propiedad name es la que hace referencia al valor del campo que se envía vía POST; cuando un usuario completa su nombre, por ejemplo “Juan Pérez” será enviado vía POST bajo la referencia name=”nombre”.

3 – Un editor de Javascript (Programar la validación del formulario)

Describamos ahora el código javascript que aparece en el template del formulario, el cual será el encargado de hacernos la validación. Validar un formulario es asegurarse de que los usuarios ingresen información lo más correcta y verídica posible antes de ser enviada. Esta será una validación simple pero las hay muy complejas; un claro ejemplo de esto puede ser validar un número de CI o DNI, para el cual deberá usarse un algoritmo responsable de chequear que el número que se ingresa efectivamente exista.

Aquí tenemos una función general llamada “validateFrom” la cuál será llamada a ejecutarse cuando se haya cargado la página. A la misma se pasan como parámetro los elementos protagonistas qué son, el botón de “Enviar datos”, el elemento “form” y el bloque “div” en dónde se mostraran los mensajes de error. Como podrán imaginarse, el botón “Enviar datos” no es de tipo “submit” sino un botón común, el cuál tiene un evento que al ser cliqueado ejecuta una función dónde están las acciones de validación; posteriormente si se dan las condiciones, por medio del javascript se ejecuta la función “formail.submit();” encargada de enviar los datos.

Pasemos a comentar el código que aparece debajo. Primero se define la función “validateFrom” que es ejecutada al cargar la página, la cuál se encarga de definir las variables que almacenan los elementos del formulario y un par de strings (cadenas de texto), estas últimas pertenecen a los mensajes de error, para los campos incompletos y para el E-mail. La variable “status” es la que almacena el estado de validación, si los campos requeridos están completos y el E-mail está bien escrito, adquiere el valor “true” y llegada la última condición, hace el submit del formulario.

function validateFrom(button,formail,boxwarning){
var warningmail = "El E-mail ingresado no es correcto";
var warningfield = "Los campos obligatorios deben ser completados";
var button = document.getElementById(button);
var boxwarning = document.getElementById(boxwarning);
var formail = document.getElementById(formail);
var status = true;

Este es el evento que ejecuta la función cuando se hace click en el botón de “Enviar datos”. Al mismo tiempo oculta el div en el que se muestran los errores, para sacar el error anterior (si es que hay alguno).

button.onclick = function(){
boxwarning.style.display = "none";

Este bucle irá revisando cada uno de los campos de formulario para ver si han sido completados o no. Menos el campo de “comentarios”, el cuál no es un campo requerido. Cada vez que el bucle encuentra un campo requerido vacío, hace un break y define la variable “status” como “false”, posteriormente revisa la condición y al ver que es “false” muestra el div con el texto de error. Luego de haberse asegurado de que los campos requeridos han sido completados, procede a chequear que en E-mail ingresado en el campo “email” sea válido; esto significa que tenga mínimo tres caracteres delante del @, que exista la presencia de un @, y que luego del él, aparezcan caracteres, un punto y caracteres luego del punto. Para chequear si el E-mail es correcto, ejecutamos la función “validateEmail” pasando como parámetro el valor del campo; si la función nos devuelve “true” es que el E-mail está bien, si nos devuelve “false” el mail no es válido.

for(var i=0;i<formail.length;i++){
   if(formail[i].value == ""){
         boxwarning.innerHTML = warningfield;
         status = false;
         if(formail[i].id == "comentarios"){
                if(formail[i].value == ""){
                       status = true;
                }
          }
          break;
   }else{
         status = true;
         if(formail[i].id == "email"){
               if(!validateEmail(formail[i].value)){
                      boxwarning.innerHTML = warningmail;
                      status = false;
                      break;
               }
         }
    }
}

Aquí, como comentamos arriba, si el status es “true” significa que que está todo OK y podemos enviar los datos del formulario; de lo contrario nos muestra el div con el mensaje de error.

Acá aparece la famosa función que nos valida el E-mail, la variable “filter” tiene una expresión regular que se aplica al valor recibido como parámetro “filter.test(value)”, de esta manera, la función devolvera “true” o “false”.

function validateEmail(value){
   var filter= /^[A-Za-z][A-Za-z0-9_.-]*@[A-Za-z0-9_]+\.[A-Za-z0-9_.]+[A-za-z]$/;
   if(filter.test(value)){
      return true;
   }else{
      return false;
   }
}

4 - Un editor de PHP (Recibir la información del formulario, ordenarla y enviarla por E-mail)

Ya hemos validado el formulario y por consiguiente hecho el submit del mismo, o sea, se han enviado los datos. La página del formulario fue dirigida a otra página que será la encargada de recibir los datos, ordenarlos y posteriormente enviar el E-mail a una dirección determinada.

Esta página será un PHP, que recibe los datos vía POST y los coloca como parámetro en la función “mail” de PHP. Analicemos el código que aparece en esta página (post.php). El PHP está definido al comienzo del template, o sea por encima de todo el código HTML.

Primero definimos las variables que almacenan los datos que vienen vía POST del formulario.

$nombre = $_POST['nombre'];
$email = $_POST['email'];
$genero = $_POST['genero'];
$interes1 = $_POST['interes1'];
$interes2 = $_POST['interes2'];
$interes3 = $_POST['interes3'];
$comentarios = $_POST['comentarios'];

Aquí definimos una variable en la cuál almacenamos los headers del E-mail. Esto es muy importante si queremos que el E-mail sea enviado en formato HTML, dando la posibilidad de aplicar formato a los textos.

$headers = "MIME-Version: 1.0" . "\r\n";
$headers.= "Content-type: text/html; charset=iso-8859-1\r\n";
$headers.= "From: Formulario de mi Web abcdise@gmail.com\r\n";

Esta variable es para especificar la dirección de E-mail a la cuál serán enviados los datos.

$to = "prueba@prueba.com";

En esta almacenamos el Asunto del E-mail.

$subject = "Datos de un usuario";

En esta otra variable almaceno el contenido del E-mail, concatenando etiquetas HTML, títulos y el contenido de las variables que tienen los datos ingresados por el usuario.

$message= "

Formulario de contacto

"; $message.= "

" . $nombre . "

"; $message.= "E-mail: " . $email . " "; $message.= "Género: " . $genero . " "; $message.= "Intereses: " . $interes1 . "," . $interes2 . ",". $interes3 . " "; $message.= "Comentarios: " . $comentarios . " ";

Esta variable está definida con la función “mail” de PHP, la cuál es ejecutada pasando como parámetro toda la información definida en las variables anteriores; E-mail, Sujeto, Cuerpo del mensaje y encabezados.

$sendmail = mail($to,$subject,$message,$headers);

Por último, si la función “mail” nos devuelve el valor “true” o sea que los datos fueron enviados con éxito por mail, definimos como “true” la variable “status” con el objetivo de mostrar luego un mensaje acorde a lo sucedido; “¡Gracias por enviarnos tus datos!” o “Se ha producido un error al enviar los datos, por favor vuelve a intentarlo”.

if($sendmail){
      $status = true;
}

Este es el fin, espero les haya resultado útil y les pueda haber dejado algo para la creación de sus próximos formularios. Debajo podrán ver un ejemplo con el formulario funcionando y tambien un link para poder descargar los archivos.

¡Hasta pronto!

Ver un ejemplo

Descargar los archivos

Categoría: Tutoriales, Web

Publicado por: negro

Entradas más populares

Una respuesta para “Formulario Web en PHP (Formail)”

Dejar una respuesta

XHTML: Tu pudes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>