Este articulo es de lectura obligatoria apra todo aquel diseñador web que quiera saber como configurar un formulario en dreamweaver 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 configuración 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.
clic para ampliar
- Haz clic en la pestaña “Forms”. Para que nos muestre las herramientas propias de Formulario
- Clic en “form”. Para insertar la zona activa del formulario
- 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:
clic para ampliar
- Seleccionamos ahora la pestaña “Commons”
- Hacemos clic en “Table”
- Definimos una tabla de 2 columnas y 1 fila y el resto de parámetros como se muestra en la imagen inferior.
Clic para ampliar
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.
clic para ampliar
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.
- Ubica el cursor en la primera linea del Formulario.
- Haz Clic en la pestaña “Code” para ver unicamente el código.
- 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
Articulos Relacionados:
En esta leccion aprenderemos como crear un formulario de contactos web, para ...
Curso de paginas web: leccion 16, creación de paginas web estáticas En es ...
Si estás comenzando en el mundo de la creación de páginas webs entraste al l ...
En esta leccion (la numero 17 del curso de paginas web), aprenderemos a vali ...
En este articulo quiero rescatar el Ebook de diseño de paginas web y los art ...
..::..Configurando un formulario de contactos http://tinyurl.com/maknrk
Información Bitacoras.com…
Valora en Bitacoras.com: 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 …..
http://tinyurl.com/maknrk Aprende a configurar un formulario de contactos desde cero
Hello, can you please post some more information on this topic? I would like to read more.
@solucionesseo http://bit.ly/5VPwP configurar un formulario de contactos en #Dreamweaver
Social comments and analytics for this post…
This post was mentioned on Twitter by Soluciones SEO: http://bit.ly/5VPwP configurar un formulario de contactos en #Dreamweaver…
excelente tuto, me queda una duda, como y a donde cambio los permisos del archivo?ojala puedas responderme
salu2
Si ingresas por FTP al sitio, debes ir a la carpeta CGI-BIN y ubicar el archivo contactos.pl o como sea que lo hayas nombrado, haces clic derecho sobre contactos.pl y en File Attributes cambias el valor numerico a 755.
Yo utilizo Filezilla, pero la opcion para cambiar los permisos de archivo suele llamarse "File attributes", "Change Permissons", "Chmod".
Saludos
vale master, gracias por la rápida respuesta, ese es de mozilla o me equivoco? un abrazo…
http://es.wikipedia.org/wiki/FileZilla La informacion disponible dice que fue desarrollada por Tim Kosse y otros, pero no dicen quienes son esos otros.
jajaja…
aaahh… ok vale
salu2 y gracias
tengo un problema, he hecho todo los pasos pero a la hora de enviar el formulario… Me sale como si voy a descargar el archivo… Plis ayudame, este es mi link http://jndesign.webege.com/contacto.html
Hay dos posibles causas:
1. No configuraste los permisos de archivo.
Solucion:
Via FTP cambia los permisos a 755
Observacion: En algunos casos los clientes FTP no cambian efectivamente los permisos de carpeta o archivo, y hagamos lo que hagamos siempre se mantienen en 644 que es la opcion por defecto. En estos casos recurrimos al administrador de archivos del Cpanel y cambiamos los permisos de archivo desde ahi.
2. Tu servidor no soporta CGI
Si haces los cambios de permisos de archivo y aun asi el problema persiste es probable que tu servidor no soporta CGI, ante esto debes avocarte con tu proveedor.
Nota:
El arhivo formulario.pl debe estar dentro de una carpeta llamada “cgi-bin”
[...] This post was mentioned on Twitter by Diseno y Mercadeo, Soluciones SEO. Soluciones SEO said: http://bit.ly/bH8wo0 Configurando un formulario de contactos [...]
me marca el siguiente error lic.
Error: Bad/No Recipient
There was no recipient or an invalid recipient specified in the data sent to FormMail. Please make sure you have filled in the recipient form field with an e-mail address that has been configured in @recipients. More information on filling in recipient form fields and variables can be found in the README file.
FormMail V1.92 © 1995 – 2002 Matt Wright
A Free Product of Matt's Script Archive, Inc.
Hice todo segun el tuto y lo guarde como php esta bien? gracias de antemano (:
Dentro del archivo pl, busca el @recipients y verifica que tu email esté bien escrito (o el email de destino).
En el archivo que tiene el formulario verifica que los campos Hidden se encuentren y que el campo HIDDEN que conetiene tu email sea el mismo que tienes en el archivo pl.
Saludos
Cualquier cosa avisas y te echo una mano.
Muchas gracias por tu respuesta, pero ya revise todo y esta bien y no funciona me marca el mismo error, en el formmail pongo info@lolocos donde tengo que poner el recipient y luego en dreamweaver pongo el mismo mail pero no me funciona, ayuda!
y gracias de nuevo (:
Te acabo de enviar un email
El problema de Snider se resolvio, eran los espacios en blanco en los HIDDEN
Estupendo tutorial, Walter. Me pongo manos a la obra y te cuento si funciona. ¡Cruzo los dedos!
Muchísimas gracias.
Está bien, avisame cualquier duda / comentario del tutorial
Hola, Water. He seguido todo el tutorial, he cambiado los permisos desde el Filezilla y sin embargo me da el siguiente error:
403 Forbidden
You don't have permission to access /cgi-bin/FormMail.pl on this server.
¿Cómo puedo solucionarlo?
Mil gracias
revisa el nombre del archivo y comparalo con el archivo que mandas a llamar directamente en el formulario, revisa cuidadosamente las mayusculas y minusculas en el nombre. Recuerda que los permisos (755) son para el archivo no para la carpeta (es solo un recordatorio)
walter mil gracias esto era un dolor de cabeza
de nada
Hola de nuevo.
He revisado cuanto me comentas y nada. Incluso he probado creando una carpeta distinta de cgi-bin, he renombrado el archivo como formulario.pl y comprobado vínculos, he probado tanto la ruta completa como la relativa… Sigue sin salirme. Aunque ahora el error es distinto: o bien me dice que la ruta no es correcta, o que el enlace está roto, o me aparece el propio documento del archivo formlario.pl en la página web. ¿Qué estaré haciendo mal?
Otra duda: En la línea que había que modificar en el FormMail relativa a "tudominio.com", en mi caso sería "revangel.es" y así es como lo tengo escrito, pero ¿sin el protocolo http delante? Dime si puedo enviarte los documentos por email, por si puedes echarle un vistazo.
Siento marearte…
Gracias, Walter.
No hay problema, enviame los archivos, incluyendo el CGI
Hola, Walter. ¿Cómo puedo enviarte los archivos?
Salud.
war [arroba] solucionesseo.com
tengo un problema
antes, cuando le daba a enviar, se me aparecía la ventana para descargar el archivo .pl
lo arregle
pero ahora cada vez que lo envió me manda a una pagina del host gratuito
no encuentro el error
Eso es en los campos Hidden, ¿ya creaste la pagina de agradecimiento?
Revisa que:
<input type='hidden' name='redirect' value='http://www.tudominio.com/gracias.html' />
Hayas reemplazado "tudominio . com" con la url de tu website.
Cualquier cosa avisas.
hola amigo de antemano saludos!
mira tengo este error me gustaria saber que es? espero me puedas ayudar brohter gracias saludos
Error: Bad Header Fields
The header fields, which include recipient, email, realname and subject were filled in with invalid values. You may not include any newline characters in these parameters. More information on filling in these form fields and variables can be found in the README file.
FormMail V1.92 © 1995 – 2002 Matt Wright
A Free Product of Matt’s Script Archive, Inc.
El mensaje aparenta que agregaste campos al archivo .pl
Revisa que no hayan espacios en blanco despues ni antes de las comas dentro de los campos Hidden, eso dio error en una ocasion, mira los comentarios anteriores. Si el problema persiste avisame y publica la url donde tienes el formulario con gusto le hecho un vistazo. Saludos y bendiciones
Hola
Tengo el mismo problema que comentaba jorge andrade pero a mi solo me lo manda en IE6 IE7 IE8 IE9
y en mozilla
como puedo solucionarlo
muchas gracias
Salidos juan
Hola mi admiradisimo Walter Alvarez
En primera instacia me acerco a este post en agradecimiento por compartir tu conocimiento con todos nosotros, tanto tutoriales, ebooks, y todas aquellas herramientas que estoy dispuesto a aprovechar.
Como segundo punto te agradeceria tu asesoria, realice mi formulario tal y como nos mostraste en los tutoriales, después configure el mismo como esta en este Post, y me dio mucho gusto recibir el agradecimiento como respuesta de mi envio, pero hasta el momento no me ha llegado el correo a mi cuenta, como te comentote agradeceria si me pudieras ayudar en este punto, de verdad te lo agradeceria de corazón por que para colmo tengo otro sitio donde deseo aplicar este proceso!
De antemano Saludos y que tengas un excelente Día
Con mucho gusto te ayudo, envíame el archivo.pl y el formulario.html que utilizaste, los reviso y te los envío de regreso. Obviamente publicaré aqui la explicacion. Saludos
Hola yo de nuevo molestando, jaja, te agradezco muchotu ayuda, revice lo que me mandaste y lo subí a mi servidor pero ahora al llenar el formulario y darle enviar me mando lo siguiente
Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator to inform of the time the error occurred and of anything you might have done that may have caused the error.
More information about this error may be available in the server error log.
——————————————————————————–
Web Server at dulcesantojos.com
a diferencia antes de que me corrijieras me mandaba a la pagina de agradecimiento, espero me puedas ayudar nuevamente, muchas gracias! (perdón si sueno desesperado, pero realmente lo estoy, aun que sé que debe tener solución)
si pudiste resolver el formulario a mi me pasa lo mismo, cada vez que envio mi formulario me pide guardar el archivo. Necesito ayuda.
gracias
según los pasos solo me falta esto…
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.
que no encuento cómo hacerlo.
perdona la ignorancia, pero soy nueva en esto
mil gracias de antemano
En Filezilla das clic dereco sobre el archivo y luego seleccionas "Cambiar permisos de archivo" y en la pantalla siguiente le cambias los permisos.
ya pude cambiar estos permisos, pero ahora tengo el problema que al envíar el formulario que tengo en la web me sale una ventana para de guardar al archivo.pl y claro yo quiero enviarlo no guardarlo.
Espero me puedas asesorar
mil grracias por tu tiempo
esta es mi prueba http://no-drop.com/formulario.html
Estuve revisando, deberías hablar con tu proveedor de hosting ya que no está procesando el CGI, preguntale si tienes permiso de ejecutar CGI.
Saludos
Saludos! agradezco totalmente tu tutorial! aunq de verdad q dolor de cabeza jajajaja tengo un problema y es el sgte:
Not Acceptable
An appropriate representation of the requested resource /cgi-bin/formulario.pl could not be found on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Apache/2.0.63 (Unix) mod_ssl/2.0.63 OpenSSL/0.9.8e-fips-rhel5 mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635 mod_jk/1.2.30 Server at http://www.animaldj.net Port 80
el código q puse o lo deje así:
<form action="http://www.animaldj.net/cgi-bin/formulario.pl" method="post" enctype="text/plain">
<input type='hidden' name='recipient' value='staffanimaldj@gmail.com' />
<input type='hidden' name='subject' value='Saludos tiene un nuevo correo desde la web:' />
<input type='hidden' name='sort' value='nombresyapellidos, telefono, email, motivo, comentario' />
<input type='hidden' name='redirect' value='http://www.animaldj.net/gracias.html' />
<input type='hidden' name='required' value='nombresyapellidos, email, telefono, motivo, comentario' />
mil gracias!!!!!!!
El mensaje que te muestra se lee que no existe el archivo en el servidor, ¿ya subiste el formulario.pl dentro de cgi-bin? y asi lo has hecho y persiste el mensaje consulta con tu proveedor si tienes permiso para ejecutar CGI, algunos proveedores eliminan ese permiso.
hola
me a parecido exelente el tutorial, pero me aparece el siguiente problema
The header fields, which include recipient, email, realname and subject were filled in with invalid values. You may not include any newline characters in these parameters. More information on filling in these form fields and variables can be found in the README file.
que puede ser?.. tengo la duda con la info que introduje en el hidden.. podrias explicarme que debo poner en cada item en el value..
Lo que te dice es que los valores que utilizaste para esos campos no son válidos, revisa el formulario que los valores que utilizas ahi correspondan exactamente a la forma en que se llaman en el formulario (atributo "name").
Hola Walter!
Muy interesante tu tutorial, lo he seguido paso a paso pero tengo una duda.
¿Si en @recipients = &fill_recipients(@referers) pongo @recipients = ('midominio.com','info@midominio.com'), me entrará SPAM ??
Mi hosting me advierte de que FormMai.pl es muy vulnerable, y que si genero Spam, me desactivarán el formulario.
¿Qué puedo hacer?
Muchas gracias y un cordial saludo!
Amaia Ballesteros http://www.amaiaballesteros.com
Por eso se protege el archivo al final, cuando le ponemos permisos 755 esto hace que unicamente se pueda acceder a el por el sitio propietario
¿Quieres decir que si escribo el código así dentro del FormMail.pl, y luego le doy permisos al archivo estaría todo bien? Es que el tema del spam me tiene preocupada…
@referers = ('amaiaballesteros.com','ip de mi servidor');
@recipients = ('amaiaballesteros.com','info@amaiaballesteros.com')
http://www.securityfocus.com/bid/1187/info ahi esta la nota de las vulnerabilidades, la version mas segura es la 1.9 y la version que estas descargando es la version 1.92
Gracias Walter!
¿La versión ha mejorado o debo bajarme la 1.9? Es que soy bastante nueva en temas web…
Me bajé la versión desde http://www.scriptarchive.com/formmail.html
Gracias y un saludo!
Amaia
Entonces estás bien, porque has descargado la version 1.93 que es la ultima que salió
Perdona mi ignorancia. Ahora me sale esto al enviar el formulario
Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator to inform of the time the error occurred and of anything you might have done that may have caused the error.
More information about this error may be available in the server error log.
No sé que puedo estar haciendo mal, parece sencillo.
@referers = ('amaiaballesteros.com','91.142.218.142');
@recipients = ('amaiaballesteros.com','info@amaiaballesteros.com')
Si dejo como está @recipients = &fill_recipients(@referers), el formulario se envía y sale correctamente redireccionado a la página de "gracias". Pero así, sin poner mi dirección, naturalmente no me llega el formulario a mi correo.
Si escribo:
@recipients = ('amaiaballesteros.com','info@amaiaballesteros.com') me da el mensaje de error que te he comentado.
¿Qué puede ser?
Siento marearte… Gracias, Walter.
Prueba cambiando
$mailprog = ‘/usr/lib/sendmail -i -t’;
Por
$mailprog = ‘/usr/sbin/sendmail -i -t’;
Nada, no hay manera. Sigue saliendo el mismo error…
la linea @recipients = &fill_recipients(@referers) dejala tal cual y haz el cambio que te dije anteriormente
Tampoco funciona.
Sólo llego a la "página de gracias" dejando todo como al principio y solamente cambiando @referers = ('amaiaballesteros.com','91.142.218.142');
Con lo cual, nada llega a info@amaiaballesteros.com
He revisado el formulario en dreamweaver y no veo errores…
¿Puedo enviarte los archivos por email, o es mucho pedir?
Gracias por tu paciencia! Un saludo.
mandamelos a war [arroba] solucionesseo.com con gusto los reviso