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 21 del layer acciones "4"...
{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.
play();//Continua.
}
}
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.
}
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 */
/* [email protected] */
/* */
/* 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 [email protected] 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 [email protected],
//si no el escript podria no enviar el correo
mail('[email protected]', '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ó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"> </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"> </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á respondido con la mayor brevedad
posible.<br>
<br>
Este correo confirma su enví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íquelo a
nuestro <a href="mailto:[email protected]">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é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"> </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
//[email protected] 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 < [email protected] >' . "\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 [email protected],
//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";
?>
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Publica tu comentario
El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro
Entra al foro y participa en la discusión
o puedes...
¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?
Inicia sesión
¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?
Registrate