Tutoriales y Photoshop

Este articulo es de lectura obligatoria apra todo aquel diseñador web que quiera saber como configurar un formulario para enviar email desde la pagina web. En este tutorial vamos a aprender como configurar un formulario de contactos para nuestra pagina web, desde el diseño en dreamweaver y la colocación de los campos del formulario hasta la configuracion del FormMail para luego enviar el email hasta el destino.

Toda pagina web debe tener un formulario de contactos, por medio del cual el visitante pueda solicitar informacion de un producto o servicio sin necesidad de enviar un email desde yahoo o outlook express. El email debe ser enviado desde el mismo formulario hasta la cuenta de correo de la persona encargada de responder los mismos.

Tener un formulario en la pagina web ayuda a que la experiencia del usuario sea agradable, esto lo hará regresar, no solamente el formulario para enviar emails de cotizacion sino porque la pagina web está mas completa y no lo haces perder el tiempo abriendo Outlook o yahoo o Gmail para enviar email solicitando informacion.

Este post es una solicitud que me hicieron recientemente, muchos diseñadores a la hora de hacer un sitio web dejan la pagina de contactos con informacion com Telefono, Email, direccion,  etc. Y, no es malo, sin embargo muchos diseñadores sobre todo al inicio, no configuran un formulario de contactos no porque no se pueda sino porque ellos mismos no saben como hacerlo.

La razón es obvia, cuando aprendes HTML en un centro tecnico de capacitacion, dentro del pensum de Diseño de Paginas Web, aprendes como hacer el formulario pero no te enseñan como editarlo y configurarlo para que el dueño del sitio web reciba en su buzón de correo la informacion que el visitante solicite a través del formulario online.

Asi que viene la pregunta ¿Como puedo hacer para que a traves de un formulario de contactos mi cliente se comunique con los visitantes del sitio?, con este tutorial te enseñaré como hacerlo.

Requisitos:

• FormMail.pl (esta es la version modificada para que la descargues en tu ordenador).   Este es el original
• Notepad++ (no es obligatorio, pero si recomendable para que distingas los colores dentro del codigo y sea mas fácil de modificar)
• Ganas de trabajar
• Una tasita de café (o varias)
• Darle las gracias al creador de este tutorial dejando un comentario

Ahora que ya tenemos el archivo formail y el notepad++, podemos comenzar.

Configurando el formail.pl para enviar Email

Para que los emails puedan ser enviados desde tu pagina web, es necesario que los datos sean procesados en el servidor, en HTML esto es imposible, por lo que tenemos que recurrir a aplicaciones en PERL o PHP para que procese los datos, en este tutorial vamos a ver como configurar FormMail.pl

He subrayado en el archivo las lineas que vas a modificar (es lo unico que vas a modificar, si modificas algo mas va por tu cuenta).

Las modificaciones corresponden a:

• tudominio.com => ¿que crees que vas a poner?
• ip.de.tu.dominio => haz ping a tu dominio para saber cual es tu IP
• usuario@tudominio.com => es el correo al cual enviarás la información de este formulario.

Creo que lo único que amerita un poco mas de explicación es la del IP.

¿Cómo haces para conocer el IP de tu sitio web?

Es mas sencillo de lo que parece, solo debemos hacer ping, para ello dirígete al Menú “Inicio” y en “ejecutar” escribe “cmd” (sin comillas), acto seguido te aparecerá la consola de MS-DOS y escribes “ping www.tudominio.com” (sin comillas, después de la palabra ping hay un espacio).

Ahora que ya tienes esos valores, puedes terminar la configuración del formulario (el que se supone que estás editando), eso es todo lo que le hacemos a nuestro archivo formmail.pl.

Ahora vamos a realizar nuestro Formulario en Dreamweaver (ya sabes, esas casillas que se rellenan para enviar el email desde la pagina web), vamos a suponer que ya tienes listo todo el sitio y solamente te falta el formulario de contactos, así que nos vamos a concentrar en los ampos del formulario.

1. Haz clic en la pestaña “Forms”. Para que nos muestre las herramientas propias de Formulario
2. Clic en “form”. Para insertar la zona activa del formulario
3. aparecerá en pantalla una linea punteada de color rojo, esta es la zona activa para el formulario, todo lo que se encuentre dentro (elementos de formulario) serán tratados dentro del formulario.

Con la zona activa definida solo falta insertar una tabla y los elementos propios del formulario:

1. Seleccionamos ahora la pestaña “Commons”
2. Hacemos clic en “Table”
3. Definimos una tabla de 2 columnas y 1 fila y el resto de parámetros como se muestra en la imagen inferior.

Ya casi estamos listos, falta empezar a establecer los campos que requerimos que el usuario nos envíe en su correo, datos tales como Telefono, Direccion, Email, Comentarios Adicionales.

Los campos Email, Telefono y Direccion los insertar como campo de Texto.

El campo de Comentarios Adicionales lo insertas como Textarea, fijate en la imagen inferior.

Ahora insertas en la ultima linea del formulario el Boton que servirá de envío.

Solo nos faltan un par de cositas pendientes, el formulario está casi listo para enviarse, pero falta que le insertemos unos campos Hidden que son los que van a almacenar la información y enviarla a nuestro servidor para posteriormente enviarla a nuestro buzón de correo.

1. Ubica el cursor en la primera linea del Formulario.
2. Haz Clic en la pestaña “Code” para ver unicamente el código.
3. Localiza la linea <Form …> e inmediatamente debajo de esta linea escribe lo siguiente:

<input type='hidden' name='recipient' value='correo@tudominio.com' />

<input type='hidden' name='subject' value='Mensaje de saludo' />

<input type='hidden' name='sort' value='escribe el nombre de los campos del formulario' />

<input type='hidden' name='redirect' value='http://www.tudominio.com/gracias.html' />

<input type='hidden' name='required' value='email, direccion, telefono' />

Listo, ahora sí estamos a punto de finalizar, ubica nuevamente la etiqueta <Form …. > y dentro de ella vas a ver un atributo “action” el cual está vacío de la siguiente forma

< form … action=”" >

Dentro del action deberás escribir la URL absoluta del archivo que va a procesar nuestro formulario ( te acuerdas que ya configuramos el Formmail, ¿verdad?), este achivo deberás subirlo al servidor dentro de una carpeta de nombre cgi-bin.

Ahora como la ruta debe ser absoluta, significa que debes escribir la ruta completa del archivo dentro de las comillas del action, de la siguiente forma:

<form .... action="http://tudominio.com/cgi-bin/formulario.pl">

Si has seguido el tutorial a como debe de ser no deberías tener ningún tipo de problema.

Ya para finalizar solo me queda decir que cuando subas el archivo al servidor le debes cambiar los permisos a 755. Originalmente todos los archivos tienen permisos 644, pero el formulario.pl debe tener permisos 755.

Pd:

Obvié un campo a propósito (Nombre) eso te lo dejo de tarea para que te sirva de práctica.

Cualquier comentario hazlo aqui mismo, los comentarios son bienvenidos.

El Formulario fue elaborado con la version CS3 de Dreamweaver, te recomiendo que veas como crear un formulario en Dreamweaver CS4.

Elaborado por: Walter Alvarez

Si te gusto el articulo suscribete al Feed. Gracias por tu visita!.