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 de contacto del usuario, ej: telefono, direccion, email, 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 colegio dentro del pensum de Diseño de Paginas Web, aprendes como hacer el formulario pero no te enseñan como lanzarlo y configurarlo para que el dueño del sitio web reciba en su buzón de correo la informacion que el visitante solicite por este medio.

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é

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

Configurando el formail

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.

Ahora vamos a realizar nuestro Formulario en Dreamweaver, 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 el formulario de contactos.

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 formuario:

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.

Elaborado por: Walter Alvarez

Guardado en: Diseño Web • elaborar un formulario de contactos • formulario de contactos

Lo mas nuevo en el Blog:

• Tutorial Photoshop: trabajar con dos imagenes
• Tutorial Photoshop: Aprende Photoshop en un dia
• 2 alucinantes web elaboradas en flash
• Imagenes impactantes de la naturaleza
• Empaques de Café en vectores gratis

Publicado el Domingo, Junio 21st, 2009 en 15:34 y esta archivado en Diseño Web, Tutoriales, dreamweaver. Puedes seguir las respuestas a esta entrada RSS 2.0 feed. Puedes dejar un comentario, o enlazar desde tu propio sitio.