Formulario de contacto en Flash y PHP

Cómo crear un formulario con PHP y darle un estilo diferente utilizando flash.

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 :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 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( "correo@correo.com" );
//correo al que se enviará. Se puede poner en ambos lugares el mismo correo
$m->To( "correo@correo.com" );
//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
Su email:
$email
Su empresa:
$empresa
Motivo del contacto:
$contacto
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();
?>


Lo que está de color azul es lo que hay que cambiar, os comento por partes.

Donde dice:

$datos="Nombre del autor: $nom
+ Su email:,$email
+ Su empresa:,$empresa
+ Motivo del contacto:,$contacto
+ Mensaje:,$mensaje";

Eso es el archivo adjunto que os llegará con el email, ahí hay que poner el nombre de las variables que pusimos en flash ($nom, $email, $empresa, etc...) y el texto de introducción antes de cada campo.

Si en el campo 'Nombre' el usuario puso Pepe García, en 'Email' puso pepe@pepe.com, en empresa puso DecoHogar, etc..., en el correo que nos llegue, pondrá:

Nombre del autor: Pepe García
Su email: pepe@pepe.com
Su empresa: DecoHogar
Etc...

Tal y como está declarado, el texto que aparece antes de las variables se escribirá siempre tal y como está, y las variables se sustituirán por lo que escriba el usuario.

Si en la película de flash de vuestro formulario solo teneis 3 campos que se llaman:

Correo, Ciudad y mensaje y las variables las habeis llamado respectivamente elcorreo, laciudad y elmensaje, ese trozo de código debería quedar así:

$datos="Su correo: $elcorreo
+ Su Ciudad: $laciudad
+ Su mensaje: $elmensaje";

El siguiente código a configurar es:

//correo desde el que se enviará
$m->From( "correo@correo.com" );
//correo al que se enviará. Se puede poner en ambos lugares el mismo correo
$m->To( "correo@correo.com" );
//el subject del email, será el email que haya escrito el usuario, salvo que lo cambiemos, pon lo que quieras
$m->Subject( "$email" );

Bien, en correo desde el que se enviará y correo al que se enviará, poned vuestra dirección de correo, sin más. Y el Subject es el asunto que aparecerá en el correo. Tal y como está puesto ahí, en el asunto aparecerá lo que el usuario escriba en el campo email, ya que a ese campo le he dado el nombre de variable email en Flash (a las variables en php se les añade el simbolo del Dolar antes, $email). Podeis poner lo que querais, si poneis una variable de las declaradas en Flash, aparecerá lo que el usuario ponga en dicho campo, si quereis podeis poner un texto fijo, por ejemplo:

$m->Subject( "Correo enviado desde mi web" );

Con lo que en el asunto siempre aparecería dicha frase.

Bien, pasemos al siguiente código:

$m->Body( "Nombre del autor:
$nom
Su email:
$email
Su empresa:
$empresa
Motivo del contacto:
$contacto
Mensaje:
$mensaje" );

Hay que hacer exactamente lo mismo que en el primer código que he explicado, solo que este de aquí es para el mensaje de correo electrónico, y el anterior era para el archivo adjunto.

Y por último, donde dice:

//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");

Si quereis que el mensaje del formulario solo os llegue a vosotros, no lo toqueis, ya que ese código es para que el correo se mande a varias cuentas de correo cuando el usuario le de a enviar. Si quereis que tal cosa suceda, quitad las barras de comentario "//" al principio de la 2ª y 3ª línea y poned las otras 2 cuentas a las que quereis que el correo se mande, por ejemplo:

$m->Cc( "ramon@miweb.com");
$m->Bcc( "lorena@miotraweb.com");

Y con eso, el correo llegará a esas dos cuentas a parte de la vuestra.

Espero haber resuelto las dudas sobre como configurar este archivo.

Actualización IV:

Señores, para que el formulario funcione es Imprescindible que el servidor web donde esté alojada la página del formulario tenga un servidor de correo (SMTP), de lo contrario no podrá enviar el mail.

Para que un correo funcione hacen falta 2 servidores web, uno que envía (SMTP) y otro que recibe (POP3); un solo servidor puede hacer ambas funciones, por ello, el formulario funciona perfectamente si lo usamos con correos gratuitos tipo Hotmail, por que dicho servidor POP3 recibirá el correo, pero no tendrá nada que recibir sin un servidor SMTP que lo envíe desde nuestra web. los que intenteis usar el formulario en servidores gratuitos tipos Iespana, Webcindario, Web1000, etc... no lo conseguireis, por que estos servidores web no tienen servidor de correo SMTP. Tenedlo en cuenta.

+ 1 manual relacionado
+ 2 categorias relacionadas
+ 20 comentarios (Añadir)
+ 3 comentarios no revisados

Autoría, licencia y acciones sobre este artículo

Informe de Carlos Carmona URL: http://www.scourdesign.com/ Este artículo tiene licencia Copyleft. Puedes reproducirlo citando al autor y enlazando su página web. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

+ Entrar en ASP
+ Entrar en Flash

Añadir un comentario del artículo Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.

Se muestran 20 comentarios revisados

Añadir un comentario del artículo

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

 Se han encontrado 3 comentarios sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba