INVESTIGACION DE

DISEÑO WEB

POR:

EDGAR PAUTA

COMO CREAR FORMULARIOS EN FLASH

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 clave creamos 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, asegúrate 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 dándole 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 básicamente, 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 cómo se hace el scroll aquí ya que puse un tutorial sobre scroll de texto.

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 está, en el campo de texto estado aparecerá el mensaje de error arriba indicado, si no, el correo se enviará y aparecerá el mensaje de envió 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: P

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 película 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.

FUNCIONAMIENTO EN PHP

Necesitamos tres archivos, uno se llamará php2excel_csv.php, libmail.php y formulario.csv. 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 programa, 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.

Bibliografía:

www.desarrolloweb.com

GRACIAS ?

CORREO:

edgafresco@gmail.com