[Tutorial] Formulario de email Flash/PHP enviado en HTML

[Takayuki]

El PHP recoje los datos que le pasamos desde flash, toma los campos y los coloca en una tabla html para enviarnosla a nosotros incluyendo el numero de control y la IP del que lo envia y al mismo tiempo envia otro correo al remitente confirmando que su correo a sido recibido, este correo tambien es en formato html e incluye imagenes que estaran en nuestro servidor y que el receptor para poderlas ver tendra que aceptar las imagenes en su cliente de correo y estar conectado a internet. Una vez que Php envia los mensajes imprime en nuestro campo de texto del formulario la frase enviando, que marca el inicio del limpiado de los campos y confirma finalmente que el mensaje ya se ha enviado.
En un tutorial futuro realizaremos el mismo formulario pero el envio se realizara en formato binario, lo que nos permitira incluir la imagen en el archivo enviado, no como adjunto si no como un fondo o parte de el, de forma que el usuario no tendra que estar conectado a internet para poder ver las imagenes de nuestro mensaje de correo.

Empezando

Lo primero que necesitaremos es crear un clip, el que le daremos el nombre de formulario en el campo de sus propiedades, para que más adelante el script de Php pueda localizarlo y enviar el mensaje de correo enviado.
En este ejemplo crearemos tres campo de introduccion de texto de linea unica, otros dos mas de multilinea y un campo dinamico donde pasaremos los avisos al remitente de lo que sucede con el correo que nos ha mandado o avisarle de si se ha dejado algun campo de los que nosotros consideramos de cumplimentación obligatoria. Todos los campos de texto tendran un nombre en su campo variable, y además usaremos una fuente personalizada que crearemos en la biblioteca y la usaremos para todos los textos y campos de texto, pero en la siguiente imágen apreciaremos mejor la forma de hacerlo:


Creamos un campo "1", de introduccion de texto "2", y en el campo variable "3" lo denominaremos como Nombre, para poder usar una fuente personalizada "4", tendremos que fijarnos que tras crearla (mas adelante comentamos como crear una fuente embebida en flash), es conveniente especificar los rangos de caracteres "5".
Para crear una fuente embebida, tal y como vemos en la imagen de abajo, iremos al panel de la biblioteca, seleccionaremos el icono de menu "1", y en el menu contextual seleccionaremos Nueva Fuente "2", y en la ventana que nos aparece seleccionaremos la fuente que deseamos incluir "3", y le daremos un nombre en el campo nombre "4", ya tendremos creada nuestra fuente que en nuestro caso, le hemos dado el mismo nombre que el original, mas tarde al seleccionar un campo de texto como en la imagen superior "1", y seleccionar la fuente que queremos nos aparecera un asterisco al lado del nombre de la fuente "4".



Usaremos la misma técnica para el resto de los campos, la fuente ya la tenemos creada en la biblioteca asi que esta parte no la tendremos que repetir, solo seleccionar la fuente con el asterisco como ya hemos visto anteriormente.
Crearemos, como vemos en la primera imágen un campo e-mail y en variables lo denominaremos como Email, de linea unica, tambien un campo Compañia que denominaremos en variables como Empresa y linea unica y dos campos mas pero multilinea, el campo Mensaje que denominaremos en variables como Comentarios y el ultimo Opinion sobre el sitio que denominaremos en variables como Opinion.
Al lado de los tres primeros campos crearemos otro campo "1", pero este no sera introduccion de texto, si no que sera campo dinamico "2" como vemos en la siguiente imágen:



Le daremos de nombre "3" textos , y variable "4" EmailStatus, y por supuesto Multilinea "5", y al igual que los anteriores usaremos nuestra fuente personalizada y sobre todo le asignaremos los rangos de caracteres como en el punto "5" de la primera imágen
La programación en flash

A continuacion mostraremos una imagen para hacernos una idea de como tienen que quedarnos los layers y en que fotograma tenemos que poner nuestra programación, de esta forma podremos explicar la programación que tenemos que ir poniendo punto por punto.

En el fotograma 1 del layer temporizador "1"...

    Nombre="";
    Email="";
    Empresa="";
    Comentarios="";
    Opinion="";
    EmailStatus="";

En el fotograma 1 del layer Buttons "2" simplemente
pondremos un stop(); y crearemos un boton enviar que
tendra la siguiente programación:

on(release) {
    if (!Nombre.length) {//Verifica que el campo nombre no este vacio.
        EmailStatus = "Introduzca su nombre antes del envio";//Si esta vacio avisa en el campo EmailStatus.
    } else if (!Email.length){//Verifica que el campo correo no este vacio.

        EmailStatus = "Porfavor introduzca una direccion de correo";//Y avisa en el campo EmailStatus.
    } else if (!Email.length || Email.indexOf("@") || Email.indexOf(".")){//Parece una redundancia, pero si no no funciona. Verifica que el campo correo contenga una @ y un .

        EmailStatus = "Porfavor introduzca una direccion de correo valida";//Y avisa en el campo EmailStatus.
    } else if (!Comentarios.length) {//Verifica el campo de los comentarios.
        EmailStatus = "Sus comentarios son importantes para nosotros";//Si esta vacio avisa en el campo EmailStatus
    } else {
        loadVariablesNum ("/Directorio_Raiz/Del_Servidor/Donde_este_elPHP/sendmail.php", "0", "POST")//Pasa los datos al Php.

        EmailStatus = "";//Limpia el campo de estado
        play();//Pone en marcha la animacion para detectar el envio y borrar los campos
    }
}

En el fotograma 22 del layer acciones "5"...

{if (textos.text == "Enviando") {//Si el php imprime Enviando en el cuadro EmailStatus.
        tempor.play();//Pone en marcha la animación de las flechitas.
        stop();//Y se para.
    } else {//Si no.
        gotAndPlay(21);//regresa al fotograma anterior y continua comprobando.
    }
}

El punto "6" nada mas que contiene un simple stop();, y en el layer Buttons un boton repetir con la
simple programación de

on(release) {
        gotAndStop(1);//Enviamos nuestro formulario al fotograma 1 para un nuevo envio.
}

[Takayuki]

El punto 3 tenemos un clip con una animacion, que tiene por nombre en sus propiedades "tempor", de unas flechitas girando, al que se llama como vemos en la programación de arriba si el php imprime la palabra "Enviando" en el cuadro de texto dinamico cuya variable es "EmailStatus" y que contiene la siguiente programacion:

En el fotograma 1 punto "1" un stop();, en el fotograma 2 punto "2", _parent.Nombre = ""; , en el fotograma 16 punto "3", _parent.Email = ""; , en el fotograma 31 punto "4", _parent.Empresa = ""; , en el fotograma 46 punto "4", _parent.Comentario = ""; , de esta forma con cada giro que dan las flechas se van borrando los campos uno a uno, y para finalizar, en el fotorgrama 62, punto "7", la siguiente programación.

stop();
_parent.Opinion = "";//Limpiamos el campo opinión.
_parent.EmailStatus = "Su mensaje ha sido enviado. Gracias por contactar con nosotros";//avisamos en el campo dinámico EmailStatus de que el mensaje se ha envia
_parent.gotAndStop(23);//Enviamos el formulario al ultimo fotograma donde tenemos un boton repetir.
gotoAndStop(1);//Y posicionamos este clip en su primer fotograma listo para el siguiente envio.

Con esto ya hemos terminado de programar nuestro formulario flash, ahora solo nos resta preparar nuestro php.
PROGRAMANDO NUESTRO PHP

El archivo php tomara las variables que le pasemos desde flash, las colocara en una tabla en formato html y en un mensaje enviado al remitente, tambien en formato html añadiendole la fecha la IP desde donde se mando un numero de control y ademas usaremos algunas de las variables que le pasamos para personalizar el correo de confirmacion, como el nombre del que lo manda.
Todo el codigo esta comentado asi que no necesita de mas explicaciones:

<?php
/******************************************************************************/
/*  Copyright (©) 2005 Crop Chile                                             */
/*  EMail form Php                                                            */
/*  info@crop.cl                                                              */
/*                                                                            */
/*  Este script es gratuito, proporcionado por:                               */
/*  Crop Chile                                                                */
/*  Estudio de diseño                                                         */
/*  I + D En comunicación                                                     */
/*  http://www.crop.cl                                                        */
/*                                                                            */
/* Puede usarlo par distribuirlo libremente. No para su venta                 */
/*                                                                            */
/* Puede usarlo bajo su propia responsabilidad con fines personales o         */
/* comerciales.                                                               */
/* Crop Chile NO GARANTIZA, NI SE RESPONSABILIZA de los errores que           */
/* pudieran derivarse de su uso, o un uso indebido de este script             */
/* para SPAM o cualquier otra actividad delictiva.                            */
/*                                                                            */
/* Tan solo pedimos que no eliminen esta cabecera de comentarios del script   */
/* para usarlo.                                                               */
/*                                                                            */
/* Para que este script funcione correctamente su servidor tiene que          */
/* autorizar el uso de la funcion mail de PHP.                                */
/*                                                                            */
/* En caso de que el mail se envie con los campos vacios,                     */
/* solicite al webmaster de su servidor que ponga la funcion                  */
/* global_register del archivo php.ini en ON.                                 */
/*                                                                            */
/* Este script envia dos correos, uno de confirmación al remitente            */
/* en formato html y otro para control de recepcion tambien en formato        */
/* html y como una tabla muy facil de leer. En ambos incluye un numero de     */
/* control y la IP desde donde se mando.                                      */
/******************************************************************************/
{
$boundary = md5(time().rand(1,100));
//Generamos un numero de control usando un aleatorio sobre la hora
$fecha = date("d-M-y H:i");
//Creamos una funcion date para fechar los envios
//Creamos el contenido en html para enviarlo en forma de tabla para control
//de los envios a nuestro servidor
$content='
<html>
<head>
<title>Formulario de la web de crop</title>
</head>
<body link="/* CCCCCC" vlink="/* FFFFFF" alink="/* CC0033">
<table width="550" height="300" border="0" class="tImagen">
  <tr>
    <th width="550" height="200"> <table width="550" height="300" border="0">
        <tr> 
          <td width="550" height="20" class="tImagen" valign="middle" bgcolor="/* 666666"> 
            <p><font color="/* FFFFFF" size="-1" face="Verdana, Arial, Helvetica, sans-serif"><strong>Contenidos 
              del formulario</strong></font></p></td>
        </tr>
        <tr> 
          <th width="550" height="280"><table width="550" height="280" border="0">
              <tr> 
                <td width="80" height="20" align="left" valign="middle" bgcolor="/* CCCCCC"> 
                  <p><font size="-2" face="Verdana, Arial, Helvetica, sans-serif">Nombre:</font></p></td>
                <td width="470" height="20" align="left" valign="middle" bgcolor="/* 0099CC"> 
                  <p><font color="/* FFFFFF"><font face="Verdana, Arial, Helvetica, sans-serif"><font size="-2">'.$Nombre.'</font></font></font></p></td>
              </tr>
              <tr> 
                <td width="80" height="20" align="left" valign="middle" bgcolor="/* CCCCCC"> 
                  <p><font face="Verdana, Arial, Helvetica, sans-serif"><font size="-2">Empresa:</font></font></p></td>
                <td width="470" height="20" align="left" valign="middle" bgcolor="/* 0099CC"> 
                  <p><font color="/* FFFFFF"><font face="Verdana, Arial, Helvetica, sans-serif"><font size="-2">'.$Empresa.'</font></font></font></p></td>
              </tr>
              <tr> 
                <td width="80" height="20" align="left" valign="middle" bgcolor="/* CCCCCC"> 
                  <p><font face="Georgia, Times New Roman, Times, serif"><font size="-2"><font face="Verdana, Arial, Helvetica, sans-serif">Correo:</font></font></font></p></td>
                <td width="470" height="20" align="left" valign="middle" bgcolor="/* 0099CC"> 
                  <p><font color="/* FFFFFF"><font face="Verdana, Arial, Helvetica, sans-serif"><font size="-2"><a href="'.$Email.'">'.$Email.'</a></font></font></font></p></td>
              </tr>
              <tr> 
                <td width="80" height="80" align="left" valign="top" bgcolor="/* CCCCCC"> 
                  <p><font face="Georgia, Times New Roman, Times, serif"><font size="-2"><font face="Verdana, Arial, Helvetica, sans-serif">Comentarios:</font></font></font></p></td>
                <td width="470" height="80" align="left" valign="top" bgcolor="/* 0099CC"> 
                  <p><font color="/* FFFFFF"><font face="Verdana, Arial, Helvetica, sans-serif"><font size="-2">'.$Comentarios.'</font></font></font></p></td>
              </tr>
              <tr> 
                <td width="80" height="80" align="left" valign="top" bgcolor="/* CCCCCC"> 
                  <p><font face="Georgia, Times New Roman, Times, serif"><font size="-2"><font face="Verdana, Arial, Helvetica, sans-serif">Opinion:</font></font></font></p></td>
                <td width="470" height="80" align="left" valign="top" bgcolor="/* 0099CC"> 
                  <p><font color="/* FFFFFF"><font face="Verdana, Arial, Helvetica, sans-serif"><font size="-2">'.$Opinion.'</font></font></font></p></td>
              </tr>
              <tr> 
                <td width="80" height="20" align="left" valign="middle" bgcolor="/* CCCCCC"> 
                  <p><font face="Georgia, Times New Roman, Times, serif"><font size="-2"><font face="Verdana, Arial, Helvetica, sans-serif">Fecha:</font></font></font></p></td>
                <td width="470" height="20" align="left" valign="middle" bgcolor="/* 0099CC"> 
                  <p><font color="/* FFFFFF"><font face="Verdana, Arial, Helvetica, sans-serif"><font size="-2">'.$fecha.'</font></font></font></p></td>
              </tr>
              <tr> 
                <td width="80" height="20" align="left" valign="middle" bgcolor="/* CCCCCC"> 
                  <p><font face="Georgia, Times New Roman, Times, serif"><font size="-2"><font face="Verdana, Arial, Helvetica, sans-serif">IP:</font></font></font></p></td>
                <td width="470" height="20" align="left" valign="middle" bgcolor="/* 0099CC"> 
                  <p><font color="/* FFFFFF"><font face="Verdana, Arial, Helvetica, sans-serif"><font size="-2">'.$REMOTE_ADDR.'</font></font></font></p></td>
              </tr>
              <tr> 
                <td width="80" height="20" align="left" valign="middle" bgcolor="/* CCCCCC"> 
                  <p><font face="Georgia, Times New Roman, Times, serif"><font size="-2" face="Verdana, Arial, Helvetica, sans-serif">Serie:</font></font></p></td>
                <td width="470" height="20" align="left" valign="middle" bgcolor="/* 0099CC"> 
                  <p><font color="/* FFFFFF"><font face="Verdana, Arial, Helvetica, sans-serif"><font size="-2">'.$boundary.'</font></font></font></p></td>
              </tr>
            </table></th>
        </tr>
      </table> </th>
  </tr>
</table>
</body>
</html>
';
//Y usamos la función mail indicando que envie el correo a nuestro servidor para control
//con el título Formulario de contacto el contenido html y tipo de texto UTF-8 para que
//los símbolos introducidos en los campos de flash sean legibles
//para terminar le damos el nombre del remitente puesto en el formulario y su dirección de correo.
//de aqui solo se tiene que cambiar buzon@tuservidor.tudomino y poner el correo donde se
//desean recibir los formularios, respetando los entrecomillados.
//es importante que pongas una dirección de correo valida en lugar de buzon@tuservidor.tudomino,
//si no el escript podria no enviar el correo
mail('buzon@tuservidor.tudomino', 'Formulario de contacto',$content,"MIME-Version: 1.0\nContent-type: text/html; charset=UTF-8\nFrom: $Nombre < $Email >");
//preparamos el mensaje de confirmación que le enviaremos al remitente.
$mensaje = '
<html>
<head>
<title>Confirmaci&oacute;n de envio del formulario de la web Crop</title>
</head>
<body link="/* 666666" vlink="/* 999999" alink="/* CCCCCC">
<table width="495" height="320" border="0" class="tImagen" background="http://www.tuservidor.com/Donde/Tengas/tusimagenes/fondo.gif">
  <tr>
    <td width="494" height="320" class="tImagen" valign="top"> 
      <table width="495" height="83" border="0">
        <tr>
          <td width="90" height="83"><img src="http://www.tuservidor.com/Donde/Tengas/tusimagenes/satelite.gif" width="90" height="83"></td>
          <td width="114" height="83"><img src="http://www.tuservidor.com/Donde/Tengas/tusimagenes/nombre.gif" width="114" height="83"></td>
          <td width="270" height="83"> 
            <table width="270" height="86" border="0">
              <tr>
                <td width="270" height="51">&nbsp;</td>
              </tr>
              <tr>
                <td width="270" valign="top"><img src="http://www.tuservidor.com/Donde/Tengas/tusimagenes/barracorta.gif" width="270" height="9"></td>
              </tr>
            </table></td>
        </tr>
      </table> 
      <table width="495" height="228" border="0">
        <tr>
          <td width="91" height="201">&nbsp;</td>
          <td width="394" height="201"><font color="/* 0099CC" size="1" face="Verdana, Arial, Helvetica, sans-serif"><b>'.$Nombre.'</b>, 
            gracias por sus comentarios.</font><br>
            <br> <font color="/* 999999" size="1" face="Verdana, Arial, Helvetica, sans-serif">Su 
            correo ha sido recibido y ser&aacute; respondido con la mayor brevedad 
            posible.<br>
            <br>
            Este correo confirma su env&iacute;o efectuado desde nuestro formulario 
            de contacto. </font><br> <font color="/* 999999" size="1" face="Verdana, Arial, Helvetica, sans-serif">Si 
            recibe este correo por accidente, por favor, comun&iacute;quelo a 
            nuestro <a href="mailto:webmaster@tuservidor.tudominio">Administrador</a> de red. 
            </font> <font color="/* 999999" size="1" face="Verdana, Arial, Helvetica, sans-serif"><br>
            <br>
            Si lo desea puede hacerlo a trav&eacute;s de nuestro <a href="http://www.tuservidor.tudominio">formulario</a> 
            de contacto.</font><br> <br> <font color="/* 999999" size="1" face="Verdana, Arial, Helvetica, sans-serif">Este 
            formulario a sido enviado el '.$fecha.'.<br>
            Desde la IP: '.$REMOTE_ADDR.' <br>
            Numero de serie: '.$boundary.'</font></td>
        </tr>
        <tr>
          <td width="91" height="27">&nbsp;</td>
          <td width="394" height="27"><img src="http://www.tuservidor.com/Donde/Tengas/tusimagenes/barralarga.gif" width="397" height="9"></td>
        </tr>
      </table> 
    </td>
  </tr>
</table>
</body>
</html>
';
//de este html podemos hacernos uno a nuestro gusto y reemplazarlo
//desde la etiqueta de apertura html hasta la de cierre respetando la comilla
//simple de apertura y la comilla simple de cierre y el punto y coma.
//Podremos reutilizar '.$Nombre.', para personalizar el mail asi como
//la IP, la fecha y por supuesto el numero de serie.
//Para poder usar el nombre la ip la fecha o el número de serie se tienen que
//poner '. .', o sea abrir con comilla simple y punto y cerrar con punto y comilla simple.
//asi en todos los casos '.$fecha.'
//De las lineas que estan debajo de esta tendremos que cambiar 
//tubuzon@tuservidor.tudominio por la dirección de correo de tu servidor.
$cabeceras  = 'MIME-Version: 1.0' . "\r\n";
$cabeceras .= 'Content-type: text/html; charset=UTF-8' . "\r\n";
$cabeceras .= 'From: Crop creativos < buzon@tuservidor.tudominio >' . "\r\n";
mail ("$Nombre < $Email >", "Su correo ha sido recibido",$mensaje,$cabeceras);
}
//es importante que pongas una dirección de correo valida en lugar de buzon@tuservidor.tudomino,
//si no el escript podria no enviar el correo.
//Y finalmente le enviamos a nuestro formulario flash la palabra que pondra en marcha
//la animacion que ira borrando los campos de texto y confirmará nuestro envio
//dejandonos en el boton repetir por si deseamos mandar otro.
//De aqui solo tenemos que tener en cuenta en que nivel o dentro de que clip hemos
//puesto nuestro formulario y cambiar la ruta si fuera preciso.
//Si cambiamos la palabra Enviando por otra lo tendremos que indicar en el sensor
//de nuestro formulario flash
//Y por ultimo tendremos que tener en cuenta donde se carga nuestro formulario en
//nuestro servidor y donde ponemos este php para que lo encuentre al pasarle las
//variables desde flash.
Print "_level0.formulario.EmailStatus=Enviando";
?>

//////////////////////////////////////////////////////////
Espero que les sirva!

[jaime]

Gracias, necesitaba algo de informacion al respecto... Estaba leyendo sobre actionscript y esta es una diferencia grande que ha hecho que el flash haya crecido aun mas y es el actionscript2 que hace a los flash mas dinamicos y no limitados solamente a la animacion...

Esperemos el actionscript3 a ver que novedades trae...

[mutekiwar]

hola, estoy aprendiendo gracias a tu formulario.
lo instale en mi sitio personal pero no me a funcionado bien, creo que algo me falta
e seguido todos los pasos pero me sale un troso de codigo en las casilla de nombre email y mensaje

este es l mensaje

_level0.myLoader.contentHolder.mc_empty.formulario .nombre
_level0.myLoader.contentHolder.mc_empty.formulario .email
_level0.myLoader.contentHolder.mc_empty.formulario .mensaje

la pagina es Roberto Sanchez

te comento que el formulario esta siendo llamado por un movie clip basia de nombre mc_empty

que podra ser?
de ante mano gracias

[jaime]

Verifica todo desde el pcincipio, parece q hay un error.

[TKT2]

Creo que no e leeido bien ya que por ningunaparte veo el programa o conque se realiza esto ¬¬ , bueno aun asi creo que es dreamweaver no?


PD: Exelente tutorial ya que pues en mi paguina hice un contacto con google docs y me quedo muy feo xD , probare este aver si me sale , espero que muchos como tu tomen el ejemplo para poner tutoriales y ayudar a otros con sus dudas de programacion haci pues ya no vendriamos solo por el dominio vendriamos a aprender y pues comenzar la paguina en ddboard aligual que una ayudadita extra a los que ya saven no esta demas xD


Saludos

[jaime]

Es hecho en Macromedia Flash, el programa para hacer animaciones y páginas web interactivas.

[TKT2]

Si hace un tiempo me di cuenta ¬¬,cuando nesesitaba hacer un mp3 para la web y me baje ese programa xD