CON SOLAMENTE UN BR BASTA.
DesarrolloWeb.com > Manuales > Manual de Flash
Formulario de contacto en Flash y PHP 02 de agosto de 2006
Compartir en redes sociales Valoración del artículo:
0 votos Enviar un comentario
Ver comentarios del artículo (215)Cómo crear un formulario con PHP y darle un estilo diferente utilizando flash.
Por Carlos Carmona
Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
Resultado
Si lo deseas, puedes descargarte el archivo del ejemplo aquí.
Abrimos una nueva película de Flash. Para empezar, vamos a crear dos capas, una que se llamará "Formulario" y otra "Fondo":
En la capa de "Formulario" creamos un nuevo fotograma clave vacio y otro más donde pondremos el formulario. El primero lo dejamos vacio de momento, ya veremos más adelante para qué lo usaremos. En el segundo fotograma clavecreamos un nuevo campo de texto y le damos las siguientes propiedades:
Como veis, tenemos que poner un campo de texto de tipo "introducción de texto", que sea línea única, con el formato de texto que deseemos (tipografía, color, tamaño, alineado, etc...), y muy importante, darle un nombre de variable, en este caso, este campo será para introducir el nombre, y a la variable le hemos dado el nombre "nom".Con esto ya tenemos el campo nombre, de momento se verá así:
NOTA:
En la capa "Fondo" pondremos el fondo de cada campo, así que los campos de texto deben ser transparentes, para ello, asegurate de que queda deseleccionado el botón a la izquierda de "Var" en las propiedades.
Añadimos tres campos de texto más, "E-mail", "Empresa", "Motivo del contacto", donde haremos exactamente lo mismo, solo que dandole a las variables los siguientes nombres:
•Campo E-mail: Variable "email"
•Campo Empresa: Variable "empresa"
•Campo Motivo del contacto: Variable "contacto"
Siempre sin comillas. De momento lo tendremos así:
Ahora vamos a crear el campo de texto para el mensaje, este tiene las propiedades algo distintas:
Las diferencias son dos basicamente, le hemos dado el nombre de instancia "eltexto", y ya no es línea única sino multilinea, aparte de que la variable en este campo se llamará "mensaje".
Lo de "eltexto" es para hacer el scroll de este campo, no voy a explicar como se hace el scroll aquí ya que puse un tutorial sobre scroll de texto, lo encontraras aquí.
Con el scroll ya creado, tendremos esto:
Añadimos dos botones, uno el de enviar y otro el de borrar y un nuevo campo de texto donde se mostrará el estado de envío del mensaje, es decir, dirá si el mensaje se ha enviado correctamente o no. Este último campo de texto tendrá estas propiedades:
Bien, nuestro formulario de contacto web estará más o menos así:
Los campos que están con asterisco (*) serán obligatorios tal y como se indica, es decir, si el usuario los deja vacios el mensaje no se enviará y en el cuadro de estado aparecerá un mensaje de error.
Antes de introducir el código ActionScript necesario, vamos a terminar la presentación del formulario, para ello, en la capa "Fondo", en el segundo fotograma, dibujamos el fondo que deseemos y que coincida en tamaño, forma y posición con los campos de texto. Para el caso, yo he dibujado este fondo:
Ok, con esto hemos terminado la presentación, ahora vamos con el código que hará que todo esto funcione.
Seleccionamos el botón de enviar, y metemos el siguiente código:
on (release) {
if ((nom=='') or (email=='') or (contacto=='') or (mensaje=='')) {
respuesta = "Hay campos obligatorios sin rellenar. Por favor,
revise el formulario.";
} else {
loadVariablesNum ("php2excel_csv.php", 0, "POST");
respuesta = "El formulario ha sido enviado con éxito.
Nos pondremos en contacto con Ud. lo antes
posible. Reciba un saludo.";
}
}
Aquí lo que estamos haciendo es comprobar que los campos obligatorios no estén vacios, si alguno de ellos lo esta, en el campo de texto estado aparecerá el mensaje de error arriba indicado, si no, el correo se enviará y aparecerá el mensaje de envio exitoso.
En el botón borrar ponemos: on (release) {
nom = "";
email = "";
empresa = "";
contacto = "";
mensaje = "";
respuesta = "";
}
Con lo que al apretar el botón borrar todos los campos de texto se borrarán
Ahora retomamos algo que dejé pendiente al comienzo; en el primer fotograma de la capa "Formulario", donde creamos un fotograma clave vacio, pondremos el siguiente código:
nom=''
email=''
contacto=''
mensaje=''
Esto es para que los campos obligatorios estén vacios cuando se cargue la pelicula de flash. ¿Por qué?, Las variables que se crean se alojarán en un espacio que le asigne el sistema operativo en la memoria ram, si no los inicializamos a "vacio", podrían tener 'basura' con lo que la comprobación de estos campos podría fallar.
Y para terminar, en el segundo fotograma de la capa "Formulario" añadimos la orden:
stop();
Con esto hemos terminado de crear el formulario en Flash, pero aun no funciona, nos queda la parte de php.
Necesitamos tres archivos, uno se llamará php2excel_csv.php, libmail.php y formulario.csv. Los puedes descargar de aquí. Los archivos libmail.php y formulario.csv no hay que tocarlos, donde hay que hacer los cambios para adaptarlo a nuestro formulario es en el otro archivo, ya en el propio archivo he puesto los comentarios, así que abrir php2excel_csv.php y allí lo explico.
El archivo formulario.csv es un archivo de texto que se nos enviará conjuntamente con el email como archivo adjunto, de modo que el email lo recibiremos como siempre, con el texto escrito en el cuerpo del email, y además el mismo email en un fichero adjunto por si queremos guardarlo en el disco duro. Los archivos *.csv son de Microsoft Excel, sin embargo, si lo abrimos con dicho pograma, los caracteres raros como acentos y eñes no se leen bien, así que mejor abrirlos con el block de notas.
Para terminar, un par de cosas a tener en cuenta para no tener problemas:
•Estos tres archivos han de estar en la misma carpeta en la que esté el formulario en Flash.
•El archivo formulario.csv se escribirá cada vez que alguien envíe un correo, con lo que en nuestro servidor, con la opción correspondiente del programa ftp que usemos, tenemos que cambiar los permisos (buscar en el programa la opción 'chmod' o permisos) sobre este archivo a 777.
•Y bueno, aunque es evidente, por si a alguien se le pasó, es imprescindible que nuestro servidor interprete el lenguaje php.
Si lo deseas, puedes descargarte el archivo del ejemplo aquí.
Un saludo.
Actualización I:
Algunos me habeis preguntado si se puede hacer un formulario de contacto pero solo con flash, sin usar lenguajes como php, asp, o similares, bien, la respuesta es no. Flash por si solo no puede enviar correos, lo único que podría hacer flash es crear un vinculo de email, que al cliquear en el se abriera el gestor de correo por defecto del sistema, generalmente el Outlook, lo cual es muy incomodo, ya que muy pocos usuarios tienen configurado este tipo de programas, dado que usan correos gratuitos tipo hotmail que llevan gestor via web.
Así que para una web, y para dar una imagen un poco profesional, es imprescindible usar lenguajes del lado del servidor, para este caso, php.
Actualización II:
Modificados los archivos php para que interpreten correctamente los caracteres latinos (acentos y eñes).
Actualización III:
Me habeis mandado ya varios correos preguntandome como se configura el archivo php2excel_csv.php, así que paso a explicarlo aquí para quien pueda interesar:
El archivo php2excel_csv.php es el encargado de recoger lo que ha escrito el usuario en el formulario (los datos de las variables) y pasarselo al archivo libmail.php para que este haga el resto. Pero este archivo hay que configurarlo, dandole los datos de nuestro correo y las variables que hayamos declarado en Flash.
Donde esté la página que cargará el formulario, en esa misma carpeta en vuestro servidor, debe estar también el archivo swf (Flash), los 2 archivos de php, libmail.php y php2excel_csv.php y el archivo formulario.csv
Os pongo y comento aquí el archivo en cuestión (php2excel_csv.php):
<?PHP
$archivo = fopen("formulario.csv" , "w");
if ($archivo) {
//variables que hayamos declarado en la pelicula de flash
$datos="Nombre del autor: $nom
+ Su email:,$email
+ Su empresa:,$empresa
+ Motivo del contacto:,$contacto
+ Mensaje:,$mensaje";
fputs ($archivo, $datos);
}
echo $pulsado;
fclose ($archivo);
?>
<?php
include "libmail.php";
$m= new Mail;
//correo desde el que se enviará
$m->From( "
[email protected]" );
//correo al que se enviará. Se puede poner en ambos lugares el mismo correo
$m->To( "
[email protected]" );
//el subject del email, será el email que haya escrito el usuario, salvo que lo cambiemos, pon lo que quieras
$m->Subject( "$email" );
//variables que hayamos declarado en la pelicula de flash
$m->Body( "Nombre del autor:
$nom
<br>Su email:
$email
<br>Su empresa:
$empresa
<br>Motivo del contacto: <br>
$contacto
<br>Mensaje:
$mensaje" );
//Si queremos que el correo se envíe a más cuentas de correo, quitar las barras de comentario y especificar los correos
//$m->Cc( "alguien@algun_server.au");
//$m->Bcc( "alguien_mas@otro_server.es");
$m->Priority(1) ;
$m->Attach( "formulario.csv", "application/vnd.ms-excel", "attachment" );
$m->Send();
?>
Ahi tendria tecnicamente que funcionar, prova y me contas.
Saludos
