Vamos a explicar cómo hacer un formulario en flash como el que se ve en
este enlace.
Primero vamos a tomar el archivo que vimos en el artículo
Formulario de Contacto en PHP y vamos a introducirle unas pequeñas modificaciones porque ya no nos servirá que nos lleve a una nueva página luego de enviar el mail, como lo hacía en ese caso. Ahora, lo que nos interesa es que ese archivo devuelva un mensaje de
enviado correctamente a Flash luego de realizar el envío.
Las modificaciones que haremos para que eso suceda son las siguientes:
1)Suprimiremos de la zona de configuración la variable que se llamaba $adondevoy.
2)Reemplazaremos la última línea del archivo (la que nos derivaba a la página de agradecimiento indicada en la variable $adondevoy).
De manera tal que el archivo de envío (al que renombramos como
procesar_formulario_flash.php) debe quedarnos así:
<?php
/*----------- INICIO DE CONFIGURACION-----------------*/
//mail del destinatario (escribirlo entre las comillas)
$destino='';
//nombre del que envía el correo (escribirlo entre las comillas)
$origen_nombre='';
//mail del que envía el correo (escribirlo entre las comillas)
$origen_mail='';
//título del corrreo (escribirlo entre las comillas)
$subject='';
//antes estaban estas 2 líneas:
//página a la que se va luego de enviar el mail (escribirlo entre las comillas)
//$adondevoy='';
/*----------- FIN DE LA CONFIGURACION-----------------*/
$headers = "From: $origen_nombre <$origen_mail>\r\n";
$headers .= "Reply-To: $origen_mail\r\n";
$headers .= "Return-Path: $origen_nombre <$origen_mail>\r\n";
$mensaje='';
foreach($_POST as $k => $v){
if($k!='Submit'){
$mensaje.=ucfirst($k).": $v\n";
}
}
mail($destino,$subject,$mensaje,$headers);
//antes estaba esta línea:
//header("Location:$adondevoy");
echo "&contestar=Estado: mensaje enviado correctamente.&";
?>
Bien, ahora dentro de Flash creamos nuestro formulario haciendo que cada campo del mismo corresponda a un texto de tipo
Introducción de Texto o
Input Text, y le asignamos a cada uno de ellos un nombre de instancia. Nuestro ejemplo es el de esta figura:
Es decir, tenemos 4 campos de texto tipo input text con los siguientes nombres: nombre, apellido, email, y comentario. También tenemos un campo de texto dinámico vacío (no visible en la figura superior) con nombre de instancia
estado, en el cual pondremos los mensajes de error y de proceso, para que el usuario sepa en todo momento qué está sucediendo con el envío de su correo o si se equivoca al rellenar los campos o si deja vacío un campo de llenado obligatorio. Por último, tenemos también un botón al que le daremos el original nombre de instancia
boton (sin acento).
En el mismo fotograma donde tenemos todos estos elementos, colocaremos las siguientes acciones (las cuales explicaremos a continuación):
System.useCodepage=true;
var enviar=new LoadVars();
var recibir=new LoadVars();
function enviar_mensaje(){
if(_root.nombre.text.length<1){
_root.estado.text="por favor complete el campo nombre";return;
}
if(_root.apellido.text.length<1){
_root.estado.text="por favor complete el campo apellido";return;
}
if(_root.email.text.length<1){
_root.estado.text="por favor complete el campo email";return;
}
if(_root.email.text.indexOf("@")<0){
_root.estado.text="por favor complete el campo email";return;
}
if(_root.email.text.indexOf(".")<0){
_root.estado.text="por favor complete el campo email";return;
}
if(_root.comentario.text.length<1){
_root.estado.text="por favor complete el campo comentario";return;
}
enviar.nombre=_root.nombre.text;
enviar.apellido=_root.apellido.text;
enviar.email=_root.email.text;
enviar.comentario=_root.comentario.text;
_root.estado.text="Estado: conectando con el servidor...";
enviar.sendAndLoad("procesar_formulario_flash.php",recibir,"POST");
}
function recibir_rta(ok){
if(ok){
_root.estado.text=this.contestar;
_root.nombre.text='';
_root.apellido.text='';
_root.email.text='';
_root.comentario.text='';
}
}
recibir.onLoad=recibir_rta;
_root.boton.onRelease=enviar_mensaje;
Con esta instrucción...
...compatibilizamos la codificación del texto, para que caracteres como ñ o vocales acentuadas se lean sin problemas.
Con...
var enviar=new LoadVars();
var recibir=new LoadVars();
...instanciamos 2 objetos LoadVars
La función
enviar_mensaje será la encargada de procesar el envío. En ella se realizan varias operaciones. Como nuestros campos son todos obligatorios, controlamos primero que hayan escrito algo en ellos con instrucciones de este tipo:
if(_root.nombre.text.length<1){
_root.estado.text="por favor complete el campo nombre";return;
}
Es decir, un condicional que toma lo escrito en un campo (en este caso como es
nombre el nombre de instancia de ese campo, para tomar lo escrito en el mismo se usa
_root.nombre.text) y verifica si la propiedad
length de lo escrito es menor que 1 caracter, o sea si no se ha escrito nada dentro del campo. En caso afirmativo (es decir, si el campo está vacío), se escribe dentro del texto dinámico
estado un alerta para el usuario y se detiene con
return la ejecuión del script (recordemos que la instrucción return sirve para devolver un valor y finalizar una función; si no se le indica un valor, sólo detiene la ejecución del script, es decir, finaliza la función justo en el punto donde se encuentre el return).
También verán en la función unos condicionales ligeramente diferentes:
if(_root.email.text.indexOf("@")<0){
_root.estado.text="por favor complete el campo email";return;
}
if(_root.email.text.indexOf(".")<0){
_root.estado.text="por favor complete el campo email";return;
}
Lo que hacen es tomar lo escrito en el campo email (_root.email.text) y verificar la ubicación de determinados caracteres con el método de
String indexOf, el cual devuelve la ubicación dentro de un texto determinado del caracter o conjunto de caracteres que se le pase por parámetro (o sea, dentro del paréntesis). Si el método no encuentra el caracter o conjunto de caracteres dentro del texto analizado deuelve -1. En caso de que eso suceda, nosotros escribimos un alerta dentro del campo
estado y detenemos la ejecución del script. Demás está ecir que la validación del formato del correo se puede mejorar, ya que sólo verifica que hayan escrito por lo menos una
@ y un
punto, pero si les consuela, es la que usa Macromedia en Dreamweaver por defecto en los comportamientos de validación de e-mail en formularios.
En la función sigue esto:
enviar.nombre=_root.nombre.text;
enviar.apellido=_root.apellido.text;
enviar.email=_root.email.text;
enviar.comentario=_root.comentario.text;
Qué es eso? Eso es asignar al objeto LoadVars, creado anteriormente y llamado
enviar, una serie de propiedades personalizadas. En este caso, las propiedades que asignamos son nombre, apellido, email y comentario. Para qué servirán estas propiedades?... pues actuarán exactamente como los campos de los formularios html, es decir, serán las encargadas de enviar a la página de proceso un valor identificado con su nombre, Y el valor que enviarán en este caso corresponderá a lo que se escriba en el campo, por eso cada una de ellas es igual a _root.nombrecampo.text.
En resumen, cuando enviemos el formulario a la página de proceso estaremos enviando por el método que elijamos (en nuestro caso POST) una serie de valores que en realidad son las propiedades que le asignemos al objeto
enviar.
Al mismo tiempo que preparamos el envío, escribimos en nuestro campo
estado en qué etapa del proceso estamos:
_root.estado.text="Estado: conectando con el servidor...";
Y finalmente, con esta instrucción realizamos el envío:
enviar.sendAndLoad("procesar_formulario_flash.php",recibir,"POST");
Con esa línea, que significa "voy a enviar por el método
POST todos los valores asignados al objeto
enviar... adónde?... a la página de proceso llamada
procesar_formulario_flash.php... y espero respuesta de esa página y la misma debe ser enviada al objeto
recibir", con esa línea, repetimos, finalizamos la función
enviar_mensaje.
Pasemos entonces a la función recibir_rta:
function recibir_rta(ok){
if(ok){
_root.estado.text=this.contestar;
_root.nombre.text='';
_root.apellido.text='';
_root.email.text='';
_root.comentario.text='';
}
}
Declaramos la función y le pasamos un argumento. Este argumento es en realidad una forma de comprobar si PHP regresa valores a Flash. Si es así, el valor booleano de "ok" será 1 (o TRUE); de lo contrario, tomará el valor de 0 (o FALSE). El evento "onLoad" que utilizaremos para llamar a esta función, es el encargado de modificar este valor, de forma que, en caso de que PHP regrese un valor correctamente a Flash, la llamada de esta función vendría a ser similar a escribir recibir_rta(TRUE); y como TRUE es siempre verdadero, la condición if(ok) se cumplirá, realizándose entonces el resto de las instrucciones de la función.
La primera de dichas instrucciones
_root.estado.text=this.contestar;
lo que hace es escribir en el texto dinámico
estado lo que recibamos desde PHP.
Pero expliquemos un poco cómo se reciben los datos desde PHP. Desde PHP recibimos valores de manera similar a cuando extraemos datos de un archivo de texto con el método
loadVariables, es decir, recibimos valores que están escritos de la siguiente manera en el archivo de texto:
//este sería el contenido del archivo de texto:
&variable1=valor1&variable2=valor2&variablen=valorn&
(Nótese que cada par variable=valor está separado por el signo
&).
Si esos valores estuvieran escritos así, nosotros podríamos leerlos desde Flash de la siguiente manera:
//En PHP o en archivo de texto:
&variable1=valor1&
//Para leerlo desde Flash haríamos lo siguiente:
valor_recibido=recibir.variable1 ;
//ó valor_recibido=recibir['variable1'];
//las dos formas son equivalentes
Por supuesto, haríamos lo mismo para recibir el resto de los valores. Para recibir por ejemplo el valor de variable2, en Flash escribiríamos algo como esto:
valor_recibido2=recibir.variable2=recibir['variable2'];
Como vemos, de la misma manera en que para enviar los valores los transmitíamos como propiedades del objeto
enviar, para recibirlos los recibimos como propiedades del objeto
recibir.
El resto de las líneas de la función
y similares lo que hacen es borrar lo escrito en los campos para que sea más evidente que el mensaje se envió (decimos
más evidente, porque la instrucción que acabamos de explicar -_root.estado.text=this.contestar;- para ese momento habrá escrito dentro del campo
estado el mensaje recibido desde PHP que, en nuestro ejemplo, dice: "Estado: mensaje enviado correctamente.").
Finalmente, sólo resta explicar estas líneas:
recibir.onLoad=recibir_rta;
_root.boton.onRelease=enviar_mensaje;
La primera lo que hace es llamar a la función
recibir_rta, que es la que acabamos de explicar, no bien Flash recibe datos desde PHP. Es decir, cuando se produce el evento
onLoad. Al mismo tiempo, como dijimos antes, le asigna el valor 1 o TRUE al parámetro ok de dicha función.
La segunda, llama a la función
enviar_mensaje cuando se produce el evento
onRelease en el botón que instanciamos como
boton. Es decir, envía a la página de proceso los valores asignados al objeto
enviar cuando se hace click en el botón enviar.
Una última cosa, noten que en las llamadas a ambas funciones no colocamos los paréntesis luego de sus nombres: si no lo hacemos de esa manera obtendremos un error.
Eso es todo.
Repetimos el enlace donde pueden ver
el ejemplo terminado y les dejamos todos los archivos utilizados en este artículo para que descarguen gratuitamente desde el botón de descargas ubicado en el lateral izquierdo de esta misma página.