Alejandra 19 de junio de 2008 a las 14.30
   Imprimir artículo
elWebmaster.com

Taller de Flash: Formulario de contacto


Adobe Flash logoY llegamos por fin al Formulario de Contacto… una parte esencial en muchas webs. De hecho todos los sitios deben ofrecer alg√ļn tipo de forma de contacto, ya sea un mail, un formulario o incluso un ¬Ņtel√©fono? No, eso ya pas√≥ de moda.

¬ŅSe pusieron a pensar en los beneficios que tiene un formulario de contacto? Para empezar, puedes saber qu√© mensajes fueron enviados desde tu sitio web, puedes guiar a los usuarios para que completen los datos que t√ļ deseas. El formulario de contacto es una parte esencial de un sitio Flash. Junto a Adobe te ense√Īo a construir un formulario de contacto sencillo, profesional y a prueba de errores.
Antes de empezar a hacer este tutorial me tom√© el tiempo de leer el tutorial oficial de la p√°gina de Adobe. El tutorial es casi inexistente, s√≥lo un zip con los archivos y arreglate… En base a mis conocimientos y esos archivos voy a intentar que entiendas realmente c√≥mo se hace un formulario de contacto.

Armando el formulario (la parte divertida)

Un formulario tiene tres instancias:

  • Escritura: donde se escribe el mensaje y hacemos clic en Enviar.
  • Env√≠o: donde el sistema muestra una barra de estado indicando que el mensaje se est√° enviando.
  • Agradecimiento: donde le agradecemos a la persona por enviarnos un mensaje.

Vamos a crear cada una de estas instancias en un frame diferente, dentro de un mismo SWF.

ESCRITURA

Hagamos el primero (la escritura) incluyendo un campo para el e-mail, uno para el asunto y otro para el mensaje:

  1. Crea un nuevo archivo con las dimensiones que vaya a tener nuestro formulario.
  2. Nombra el archivo como formulario.fla
  3. En una o varias capas genera el esquema del formulario, con el fondo, colores, bordes, etc.
  4. En una capa nueva superior a la que llamaremos “formulario” escribe los t√≠tulos sobre cada campo: “e-mail”, “asunto”, “mensaje”.
  5. Dentro de esa misma capa crea tres campos de texto de entrada (Input text) para cada campo.
    En el campo de mensaje puedes dar un m√°ximo de caracteres si quieres limitar el largo del mensaje.
    Además deberías agregar un scroll bar al lado del campo del mensaje. Adobe Flash trae scroll bars en sus Componentes.
  6. En esa misma capa agrega el botón Enviar.
  7. Mensaje de error√ßTambi√©n en la capa “Formulario” crea una nueva pel√≠cula con un mensaje de error y un texto que diga algo como “POR FAVOR COMPLETA TODOS LOS CAMPOS”. Proponemos una duraci√≥n aproximada de 15 frames.
    a) El primer frame déjalo vacío, con la acción stop().
    b) En el segundo frame crea el mensaje de error, justo al lado del botón Enviar.
    c) Crea un nuevo fotograma clave en el frame 5, también con la acción stop().
    d) Crea un nuevo fotograma clave en el frame 15 donde el mensaje se vea invisible.
    e) Genera interpolaci√≥n de movimiento y listo… ¬°Ya tenemos el mensaje de error!
  8. El c√≥digo lo dejamos para el final…

Formulario

ENV√ćO

Enviadno formularioEn el segundo frame vamos a hacer la instancia donde se muestra el envío del mensaje. Sólo deberás agregar:

  1. Un texto que indique que el mensaje se est√° enviando.
  2. Una animación se mueva para ilustrar la acción.

AGRADECIMIENTO

Sólo mostrarás un mensaje que indique que el mensaje ya ha sido enviado.

Código rapidito en Flash

Tenemos todo listo, sólo falta agregar el código para que las acciones se disparen y funcione el envío del mensaje. Primero vamos a ponernos de lleno con el código dentro del archivo FLA.

Primero démosle nombres a nuestros huérfanos símbolos:

  • Texto inputCampo de texto para ingreso de email: email_box
  • Campo de texto para asunto: subject_box
  • Campo de texto para mensaje: message_box
  • Bot√≥n Enviar: send_btn
  • Pel√≠cula con mensaje de error: error_clip

Finalmente, crea una nueva capa (la nombramos “acciones”). Lo √ļnico que va a tener esta capa son acciones en el primer fotograma.

En el campo donde se pide el nombre de la Variable, destilda la opción Expression y escribe:

email_box.onSetFocus

En el campo donde se pide el nombre del Valor (Value), tilda la opción Expression y escribe:

subject_box.onSetFocus=message_box.onSetFocus=function

Ahora el código:

stop();send_btn.onRelease = function() {my_vars = new LoadVars(); my_vars.sender = email_box.text;

my_vars.subject = subject_box.text; my_vars.message = message_box.text;

if (my_vars.sender != "" and my_vars.subject != "" and my_vars.message != "") { 	my_vars.sendAndLoad("mailer.php", my_vars, "POST");

gotoAndStop(2); } else {

error_clip.gotoAndPlay(2); }

my_vars.onLoad = function() { 	gotoAndStop(3);

};};

email_box.onSetFocus = subject_box.onSetFocus=message_box.onSetFocus=function () { if (error_clip._currentframe != 1) {

error_clip.gotoAndPlay(6); }

};

Código en PHP (cuesta más)

Ahora la idea es relacionar es hacer que el archivo SWF realmente env√≠e el formulario. Para eso vamos a usar PHP…

¬ŅCre√≠an que los iba a hacer sufrir con PHP? A continuaci√≥n, todos los archivos para que descargues, incluyendo el .PHP. Abre el archivo que est√° comentado as√≠ puedes entender qu√© hace cada parte del c√≥digo. Todos los archivo se alojan en el mismo lugar.

ZIPHaz clic para descargar el ZIP con el archivo FLA en versi√≥n MX ¬Ľ
El ZIP (43 KB) contiene los archivos formulario.fla, formulario.swf, mailer.php
Todos los archivos son adaptaciones de los archivos originales que provee Flash App Servers.

Si tienes problemas con el archivo FLA en versi√≥n MX, descarga aqu√≠ el ZIP con los archivos en versi√≥n CS3 ¬Ľ

Antes que te vayas, un adelanto aproximado de cómo quedaría tu formulario de contacto.

En los archivos puedes realizar varias modificaciones, para empezar todo lo que tiene que ver con tama√Īos, colores, tipograf√≠as y textos, agregar una foto de fondo, el logo de tu empresa. Puedes incluso cambiar el mensaje de error, la pel√≠cula que muestra el progreso del env√≠o, establecer un n√ļmero m√°ximo de caracteres…

Sin embargo, el nombre de los componentes y símbolos está relacionado con el código y el envío del formulario por lo que no es recomendable hacer modificaciones ahí.

¬°Nos vemos la clase que viene que es… LA √öLTIMA CLASE!

<< CLASE ANTERIOR

CLASE SIGUIENTE >>


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (59)

  1. gerardo dice:

    sus tutoriales y talleres son increibles

  2. María E López dice:

    Excelente curso. Gracias por compartirlo

  3. Noé Olivares M dice:

    Excelente tutor√≠a solo que tengo un problema, como el tutorial lo dice hice los cambios pertinentes pero no me funciona no me llega ning√ļn mail del formulario a un que no me marca ning√ļn error

  4. Augusto dice:

    aqui tengo un problema pq no me llega ningun formulario y tampoco me abre el archivo en fla. Gracias HELP ME !!!!

  5. CLAUDIO dice:

    solo me llega el mensaje y la ip, cual es el erro?

  6. garchun dice:

    como se enlaza el componente scroll bar al campo input??

  7. Alejandra dice:

    Hola garchun! Ya tienes tu campo input y la scroll bar (la tomas de los Componentes, en la parte de Interface del Usuario), lo √ļnico que debes hacer es posicionar la barra “sobre” el campo input.

    Vas a notar que se acomoda sola… Si pones la barra un poco hacia la derecha, se acomodar√° justo como lo ves en mi ejemplo. Si lo haces m√°s a la izquierda, quedar√° posicionado perfectamente a la izquierda del input.

    Un dato muy importante: la scroll bar y el campo input deben estar sí o sí en la misma capa.

    Espero haberte ayudado. Sino, vuelve a consultarme.

    Un saludo ūüėČ

  8. jorge dice:

    gracias

  9. Jorge dice:

    Hola.
    Ma he descargado los archivos y, al abrir el fla da error…

    Gracias

  10. Juan Manuel dice:

    ¡Hola, debes tener una versión actualizada de Flash para poder trabajar con ellos! ¡Saludos!

  11. Ricardo dice:

    Hola saludos de Tabasco, México. el formulario está muy bueno y funciona hasta en hotmail es increible pero tiene un detalle y quiero que me ayuden please, ni en mi bandeja de correo entrante de mi pagina web y en hotmail aparese el e-mail, nombre solo la ip y tambien este comentario = De:
    Nobody (nobody@colo32.hechoweb.com) pienso que es muy necesario que aparesca el e-mail del que lo enbia para poder responder ( No sepuede Responder ) porfa si alguien sabe porfavor ayudenme te meses tratando de encontrar un formulario que asepte hotmail y hasta ahora lo é encontrad y no quiero desaprobechar esta hermosa oportunidad saludos dios les bendiga

  12. Juan Manuel dice:

    ¬°Hola, Ricardo! Lo que un usuario escriba en el campo “e-mail” es lo que llegar√° como informaci√≥n a tu casilla, pero esto no implica que pongan un e-mail v√°lido o real al enviarte un mensaje. Claramente “nobody” (que significa “nadie” en ingl√©s) es un mail falso ingresado por el remitente.
    ¬°Saludos!

  13. carolina dice:

    hola! la verdad es que esta muy bueno este tutorial! … no se encuentran de estos facilmente!

    queria hacer una pregunta, como agrego este formulario a mi pagina web hecha en fla??

  14. flavia dice:

    Hola muy bueno el tutorial pero tengo un gran problema y es que al colocar componentes como combo box, check box y datachooser no me lo reconoce en el cuerpo del email y no me llega la informacion. Me podrias ayudar en esto porque la verdad que me tiene trabada.
    Muchas Gracias
    Saludos

  15. gustavo dice:

    tengo el mismo problema de ricardo no me aparece el mail de la persona que lo envia, solo me aparece su ip, intente enviandolo con varios mail mios pero nada

  16. julio cortes dice:

    emmm…tengo el mismo problema …como hago para que envie el nombre…y no el ip?

  17. fernando montalto dice:

    Chicos le encontre una solucion al problema del ip, ya que no nos dan la solucion, podes hacer esto que hago yo, intercambia los nombres de email_box, por subject_box y te manda el mail en la parte de asunto, y en el de asunto lo elimin

  18. Serch gn dice:

    Felicidades por el tutorial, tengo la version 8 profesional y al abrir los archivos me dice que hay un error podrias decirme cual es la version en la que debe abrirse el archivo. no me es muy claro al momento de agregar el codigo

    Gracias por compartir el tutorial es muy bueno

  19. Alejandra dice:

    El archivo original fue creado en Flash MX, pero la verdad es que me resulta extra√Īo que no lo puedas abrir…

  20. Hernan dice:

    tengo el mismo problema, cuando va subir la solución amigo

    saludos

  21. Alejandra dice:

    Acabo de agregar a la clase un nuevo archivo versi√≥n CS3. Espero que con este ya no tengan problema ūüėČ

  22. Ana dice:

    con la vesion 8 no se puede abrir ninguno de los dos archivos :S

  23. marcelo dice:

    hola perdonen no entienda mucho pero no entiendo como se “vinculan” el php y el archivo fla ? osea yo pienso subir el swf a mi pagina hecha en dreamweaver para una vez terminada subirla al hosting y que hago con ese php donde coloco mi email para que me llegue a mi correo?
    perdonen mi ignorancia soy muy nuevo en esto es un trabajo para la universidad… espero alguien me ayude!

  24. Alejandra dice:

    Debes alojar el archivo PHP en el mismo espacio del server donde tengas tu archivo SWF.

  25. Jose dice:

    el formulario es fantastico, pero no funciona como espero, en el campo de donde debe figurar el correo, sale esto “anonymous@mx2920.godns.net ” y no el correo del que lo llega, en el asunto recibo el nombre del destinatario y en el mensaje, sale el numero de IP. No se que hacer.

  26. Mariano dice:

    todo perfecto, salvo el problema de los acentos!!! y las √Ī

    por favor, si alguien sabe, les agradecaria

    abrazo

  27. federico Kruppa dice:

    Estimado la verdad que sos un capo!
    me salvaste la vida. tu tutorial el mejor que vi por la web (facil, rapito y funciona perfecto!!!! hay miles de tutoriales dando vuelta y no anda ninguno , solo el tuyo y como decis arriba en adobe te dan una cosa sin explicacion, te felicito gente como vos hace la diferencia!!! muchas gracias !!!

  28. federico Kruppa dice:

    lo que dice jose en el coment 25, es porque si no ponen una dire de mail te avisa que es anonimo anonymous@mx2920.godns.net. si pones un mail te llega ese mail y no esta leyenda gracias

  29. Carlos dice:

    Hola Alejandra!!!!

    Esta excelente tu tutorial…..

    pero no me llega ningun e-mail :(

    porfa ayudameeeeee

    mi correo es karlozamudio@hotmail.com

    gracias

  30. Juan Manuel dice:

    @Carlos

    ¬ŅPodr√≠as ser m√°s espec√≠fico? De esta manera podremos ayudarte mejor.

    ¬°Saludos!

  31. luis dice:

    Hola. espero que alguien me puede decir que debo hacer, lo que pasa es que trato de llamar al formulario con actionscript como una movie externa pero me marca ” error al abrir url” alguien podria decirme en donde esta el error.

    on (press) {
    loadMovieNum(“formulariocs3”, 2);
    }

  32. aurora dice:

    Hola! Quise bajar el zip de flash MX, sin embargo al abrirlo con flash 8, me dice “unexpected file format”, lo cual me parece raro ya que si el archivo es flashMX deber√≠a abrir sin dificultad en flash8. Gracias por la ayuda.

  33. nestor abel alancay dice:

    muy buen tutorial lo no se q pasa que pongo mi correo en el php, y no me llega ningun correo.. sera q me falta algo mas?

  34. Domigo dice:

    hola. es genial este curso.
    he estado probando esto, que lo quiero poner en una pagina web, pero no me llega ningun mail.
    he subido todos los archivos al servidor junto con el php, todos metidos ne la misma carpeta. el mail que he puesto, al que tienen que llegar los mensajes ha sido creado por el host, por lo tanto esta hosteado (creo que significa eso), pero no llega nada. ¬Ņpuede ser que tarde en llegar?¬Ņno deben estar todos juntos en la misma carpeta?
    del archivo php, solo he modificado, el mail al que tienen que llegar los mensajes.
    un saludo y gracias.

  35. jose dice:

    no consigo que aparezca elmail del remitente,solo aparece la ip y como remitenteel mailes del servidor.¬Ņtiene alguien una solucion?
    muchas gracias por la aportacionpra los que como yo somos novatos.

  36. Formulario de contacto para Flash | Formularios de contacto para web dice:

    […] FUENTE: Elwebmaster.com […]

  37. Luisa dice:

    Intento crear el formulario y lo logre el problema ske no me aparecen las siguientes letras w x y z a q se debe este error?? q pude haber hecho mal urge tengo q presentar la pagina web comp proyecto final :S

  38. Gerardo dice:

    hola yo baje el zip y funciona perffectamente pero como haria para colocarle otro input text quisiera que fuese el de telefono o empresa al agregarle otro supongo tendria que cambiar el codigo o agregarle algo al codigo tanto en flash como en el php pero como tendria que cambiarlo……espero su pronta respuesta …gracias

    rxgerz@hotmail.com

  39. el peque√Īo pier dice:

    Muy buenas a todos. Tenía el mismo problema que muchos de vosotros. No podía ver el remitente que enviaba el formulario. La forma de poder verlo es visualizando la cabecera del mensaje. Para el Outlook, podeis verlo en esta pagina http://soporte.hostalia.com/article.php?id=150.

  40. sara lara dice:

    creo q esta mal configurado flash esta cargando un archivo .php que no esta en la carpeta

    saludos

  41. Raul dice:

    Hola a todos.
    Estaba buscando un formulario y encontré este que funciona a las mil maravillas excepto que cuando te llegan los correos no te aparece el email que escribio el usuario, sino el email cgi del servidor.
    He hecho una peque√Īa modificacion para que nos envie en el mensaje el correo junto con la IP.
    El correo que recibes, ahora aparece así:

    IP: XXX.XXX.XXX.XXX
    Correo: your@email.com

    Mensaje

    Si alguien quiere descargar esta peque√Īa modificacion que he hecho lo tienen en este enlace:
    http://www.ardila.es/mailer.rar

    Un saludo.

  42. cesar dice:

    muchisimas gracias infinitas, me sirvio de mucho, asat kiero llorar , lo andaba buskando, mucho exito para el posteador :)

  43. Miriam dice:

    Hola, tenía el mismo problema que mencionan; que solo me aparecía la IP y el mensaje, pero lo pude solucionar con la corrección de Raul. Muchas gracias, Raul!

    Ahora tengo 2 dudas:
    РCómo agregar un campo nuevo. Ej. Empresa
    – Como agregar un boton de “limpiar campos”

    Muchas gracias!

  44. Miguel Angel dice:

    Hola, lo primero quería felicitarte por este taller de email en flash.
    Yo utilizaba un formulario muy parecido pero con html,
    la función es similar con un archivo en Php.
    El problema es que necesitaba un formulario en flash ya que la
    página que estoy creando la quiero hacer íntegramente en flash.
    Y encontré tu artículo, descargué los archivos formulariocs3 y formulario
    y me abren los dos sin ning√ļn problema, pero no se si me funcionan o no
    los he probado de los servidores gratuitos Multimanía y Zimic, y aunque dice
    que se ha enviado, no llega nada. No se si es un problema del servidor
    o mio ya que yo no se mucho de programación y lo que hice es poner
    el nombre del correo en el final del Php. Lo he hecho correcto?
    Me podrías hechar una mano? Es muy importante para mi
    Gracias y un saludo

  45. fantastico tutorial dice:

    me sirvio mucho, y para los que no le funcionan algunos caracteres en las casillas tienen que ponerle en flash utilizar fuentes de dispositivos en los campos de texto

  46. Cynthia dice:

    Quiero poner un formulario en mi web que arme en flash catalyst puedo usar este formulario como lo hago, me ayudas???? hay que editar algun sitio para que te lo envie a un mial determinado??? no entiendo nada de programacion! Gracias!!!

  47. Hernan Benitez dice:

    Hola, mi nombre es Hernan y el formulario es espectacular, sobre todo por lo facil de dessarrollar, y pregunto si es posible, ¬Ņque modificaciones hay que hacer en el script, para recibir en mi correo solo el nombre del usuario y la IP desde donde manda el mensaje?. Esto es por que estoy buscando hacer un un formulario que me sirva como control de asistencia via web, de modo que al recibir el mensaje con el nombre, puedo constatar su precencia en una dicha computadora, a una cierta hora, por medio de la IP. Desde ya muchisimas gracias.

  48. Luis Carlos dice:

    En el archivo PHP en el mensaje concatena una variable que se llama $_SERVER[“REMOTE_ADDR”]..esa variable de php te retorna la ip publica del usuario que envio el formulario..

    saludos!

  49. yesso dice:

    muchas gracias

  50. Julio dice:

    Habría una forma que vuelva a cargar el formulario vacio despues de que salga el mensaje fue enviado?

  51. Mariela dice:

    Hola, no puedo lograr que lleguen los correos. Cambie el correo en el archivo php. y estan alojados los dos archivos juntos. Si alguien me puede dar una idea de como solucionarlo.

  52. YeraldReloaded dice:

    A mi no me funciono, pero tengo la duda de si tengo que configurar mi sitio o el servidor para que funcione con php, o si basta con solo subir el archivo al servidor junto con el php?

    Segun la info, zymic (mi sitio) si tiene soporte para php, el problema es que no se si este activado. aparte unicamente puedo entrar desde filezilla por que la pagina de zymic leva caída como dos semanas.

  53. YeraldReloaded dice:

    @Julio, una forma de regresar al formulario es poner un boton y con un on release go to and play frame 1 te lleva al primer frame de nuevo.

  54. Jorge Garcia dice:

    Hola buen dia me pueden ayudar le comento que puse este formulario en una pagina hecha en catalyst pero cuando exporto y subo en el navegador no me deja escribir en ningun campo alguien me puede ayudar que es lo que tengo que modificar saludos

  55. Santiago Villamizar dice:

    Hola, muy buen tutorial, me sirvió mucho para una aplicación.

    Para los que preguntaban como a√Īadir nuevos campos, en la parte de flash deben agregar nuevos cuadros de “imput text” con el nombre de instancia o instance name que quieran (person_box) por ejemplo.
    Despu√©s en el codigo de la carpeta acciones, se debe colocar la variable del nuevo imput text en la parte de variables (my_vars.person = person_box.text;) y a√Īadirla a la programacion que inicia en if justo despu√©s de la ultima variable (and my_vars.message != “” and my_vars.person != “”).
    Con eso tienes un nuevo campo de informaci√≥n y, para que el mensaje de error funcione con el nuevo campo, hay que a√Īadirlo en la parte final de la programaci√≥n junto con los otros campos (person_box.onSetFocus) buehh eso ser√≠a en flash, aun no estoy muy seguro de hacerlos funcionar en php porque no he subido la aplicaci√≥n pero ojal√° les sirva.

    Suerte y gracias

  56. Rubén Peruzkya dice:

    Muy muy √ļtil.
    La soluci√≥n de Ra√ļl fue muy √ļtil.

  57. rodrigo dice:

    en la entrada no sale el email puesto por el usuario que hacer?

  58. Loli dice:

    Buenos días,
    antes que nada darte las gracias por tu aporte.
    Acabo de probar tu fomulario y no me funciona. Me sale el mensaje de que ha sido enviado, pero en mi correo (es un correo que est√° en mi hosting) no recibo nada.
    Si alguien puediera ayudarme se lo agradecería.
    Gracias de antemano.

  59. Chasky dice:

    Hola amigos sabes no puedo abrir el FLA tengo la version 8 y no puedo abrirlo me sale formato de archivo inesperado que puedo hacer !!!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder