Cristalab

                 ¿Quieres registrarte?

Formulario de Contacto con Flash 8 y PHP 5

Por: penHolder
11 de Junio del 2007
2731 de clabLevel
Otros artículos de penHolder
21,137 visitas

En este tip explico como hago yo un formulario de contacto.

Lo primero es crear cuatro campos de introducción de texto instanciados con los siguientes nombres: "n", para nombre; "e", para e-mail; "t", para teléfono; y "m" para mensaje; también creamos dos botones "snd" para enviar, y "clr" para borrar; por último creamos un quinto campo, esta vez dinámico donde diremos si se envió o no el mensaje, a este campo lo llamé "s"





Ahora vamos con el código:
en una capa nueva empezamos con el boton snd y la validación de los campos

Código :

snd.onRelease = function () {
   
   ok = 0;                                        //variable bandera
   arroba = e.text.indexOf("@");                  //nos fijamos si hay arroba
   punto = e.text.indexOf(".");                   //nos fijamos si hay punto
   
   if(n.text == ".: nombre" || n.text == ""){     //si esta vacio o queda escrito el titulo, da error
      n.text = "escriba un nombre";               //sino da ok = 1 y para
      n.borderColor = 0x990000;
      ok = 1;
      }
   if(m.text == ".: mensaje" || m.text == ""){    //si esta vacio o queda escrito el titulo, da error
      m.text = "complete el campo";               //sino da ok = 1 y para
      m.borderColor = 0x990000;
      ok = 1;
      }
   if(t.text == ".: teléfono" || t.text == ""){    //si esta vacio o queda escrito el titulo, da error
      t.text = "teléfono inválido";                //sino da ok = 1 y para
      t.borderColor = 0x990000;
      ok = 1;
      }
   if (arroba < 1 && punto < 1){                   //si esta vacio o queda escrito el titulo, da error
      e.text = "e-mail inválido";                  //sino da ok = 1 y para
      e.borderColor = 0x990000;
      ok = 1;
      }   
   if(ok == 0){                                    //si ok = 0, o sea q esta todo bien
      enviando();                                     //llamamos a la funcion envia()
      
      s.border = true;                             //y habilitamos la propiedad border y omstramos q el mensaje se envio correctamente
      s.borderColor = 0x003366
      s.text = "Mensaje enviado";
   }
}


Después el botón clr hacemos que llame la función borrar()

Código :

clr.onRelease = function () {
   borrar();
}


luego creamos la funcion enviando()

Código :

function enviando() {
   
   //creamos un objeto para enviar al q le asignamos los valores de nustras variables
   enviar = new LoadVars();
   enviar.nombre = n.text;
   enviar.email = e.text;
   enviar.tel = t.text;
   enviar.mensaje = m.text;
   
   enviar.onLoad = function(success) {
      borrar();
      };
   
   //               este es el archivo php
   enviar.sendAndLoad("envia_datos.php", enviar, "POST");
}


...y una funcion para resetear los campos

Código :

function borrar (){
   n.text = ".: nombre";
   e.text = ".: e-mail";
   t.text= ".: teléfono";
   m.text = ".: mensaje";
   s.text = "";
   s.border = false;
   
   n.borderColor = 0x003366 
   e.borderColor = 0x003366 
   t.borderColor = 0x003366 
   m.borderColor = 0x003366 
   
}


Ahora bien, como estamos utilizando las propiedades border y borderColor, debemos habilitarlas, para eso y para no mezclar codigo en otra capa ponemos el sig. código:

En primer lugar un pequeño efecto rollOver/rollOut para los botones

Código :

snd.onEnterFrame = clr.onEnterFrame = function (){
   this._alpha += (this.a - this._alpha) /5;
}
snd.onRollOver = clr.onRollOver = function (){
   this.a = 50;
}
snd.onRollOut = clr.onRollOut = function (){
   this.a = 100;
}


...y luego toda la rola para los campos*

Código :

//------------------ estilo nombre

n.text = ".: nombre";
n.border = true;                               //habilitamos la propiedad border
n.background = true;                           //tambien la prpiedad background
n.borderColor = 0x003366                       //le damos el color al borde, en este caso azul
n.backgroundColor = 0xFFFFFF                   //el color al fondo, aqui blanco
n.onSetFocus = function(){                     //onSetFocus evento al hacer click en el campo
   n.backgroundColor = 0xDDDDDD                //cambiamos los colores de fondo y borde
   n.borderColor = 0x003366
   n.text = "";                               //limpiamos el campo
}
n.onKillFocus = function(){                    //onKillFocus evento al hacer click fuera del campo
   n.backgroundColor = 0xFFFFFF               //restauramos los colores originales
   n.borderColor = 0x003366
   if(n.text == ""){                          //si ha quedado vacio restauramos el titulo
       n.text = ".: nombre";
   }
}

//------------------ estilo e-mail

e.text = ".: e-mail";
e._y = n._y + 25;                             //ubicamos el campo en relacion al campo q este por encima
e.border = true;                              //y se repite lo mismo en los demas campos
e.background = true;
e.borderColor = 0x003366
e.backgroundColor = 0xFFFFFF
e.onSetFocus = function(){
   e.backgroundColor = 0xDDDDDD
   e.borderColor = 0x003366
   e.text = "";
}
e.onKillFocus = function(){
   e.backgroundColor = 0xFFFFFF
   e.borderColor = 0x003366
   if(e.text == ""){
      e.text = ".: e-mail";
   }
}

//---------------- estilo teléfono

t.text= ".: teléfono";
t.restrict = "0-9";
t._y = e._y + 25;
t.border = true;
t.background = true;
t.borderColor = 0x003366
t.backgroundColor = 0xFFFFFF
t.onSetFocus = function(){
   t.backgroundColor = 0xDDDDDD
   t.borderColor = 0x003366
   t.text = "";
}
t.onKillFocus = function(){
   t.backgroundColor = 0xFFFFFF
   t.borderColor = 0x003366
   if(t.text == ""){
      t.text= ".: teléfono";
   }
}

//------------------ estilo mensaje

m.text = ".: mensaje";
m._y = t._y + 25;
m.border = true;
m.background = true;
m.borderColor = 0x003366
m.backgroundColor = 0xFFFFFF
m.onSetFocus = function(){
   m.backgroundColor = 0xDDDDDD
   m.borderColor = 0x003366
   m.text = "";
}
m.onKillFocus = function(){
   m.backgroundColor = 0xFFFFFF
   m.borderColor = 0x003366
   if(m.text == ""){
      m.text = ".: mensaje";
   }
}


hecho esto vamos con PHP. Un archivo al que, como ya vimos, llamaremos "envia_datos.php", con el sig código

Código :

<?php
extract($_POST);

$MailTo="acasepone@elmail.com"; //<----------------- MAIL DE DESTINO
$dia=date("m.d.Y");
$hora=date("H:i:s");
$contenido="
El Mensaje se Envio el  $dia a las $hora:\n\n
----------------------------------------------------------------------------\n
Nombre $nombre\n                                                        //<-------variables desde flash
E-mail: $email\n
Teléfono: $tel\n
----------------------------------------------------------------------------\n
Mensaje: $mensaje\n
----------------------------------------------------------------------------\n
";
mail($MailTo, "$subject (de $nombre $apellido)", $contenido, "From: $email");
?>


...y el resultado es algo asi



*eso se puede hacer con un for pero me dio pereza y es mas entendible pera alguien que recien empieza


Artículos Relacionados


Etiquetas actionscript php

Comentarios | Enviar un comentario
Buen tip penHolder
Seguro que a muchos les será de ayuda (y)
Por: Zguillez
Esto... no lo he visto en algún lado...
Por: Freddie
Muuuuuy bueno! grax bro
Por: Pantro_blog
Lindo formulario!!!!
Seguramente aplique algo asi en el proximo proyecto.
Gracias!!!
Por: pabletein_blog
.... mmmmmm pues si pero ya existia por ahi
Por: jpcw_blog
esto esta en resource kit que es una pagina especial para estas cosas de programadores.......
Por: spooky_blog
entrega el fla, a mi no me da la cabeza para esto, tampoco tengo dinero para pagar a un programador
igual gracias por el tuto
espero que sirva si lo cargo desde un swf principal
Por: ADROPODO_blog
Repitan conmigo:
No usar extract
No usar extract
No usar extract
No usar extract
No usar extract
No usar extract
.
.
.
No usar extract



saludos
Por: Maikel
Nos gustaría si es tan amable caballero de por favor indicarnos que es recomendable utilizar. Gracias.
Por: glsmaster

Código :

Repitan conmigo:

No usar extract
No usar extract
No usar extract
No usar extract
No usar extract
No usar extract
.
.
.
No usar extract



saludos


No entiendo.... :I
Por: Juan Pablo_blog
creo que hace falta un buen complemento, freddy ustedes no filtran los tutos? deberian hacerlo para tener una seccion de tutoriales de calidad
Por: Jairo_blog
Ademas creo que es una mal copia del que freddie ya hizo hace mucho tiempo
Por: Jairo_blog
Extract compromete la lectura y comprension de un código, aparte que dificultad a la hora de hacer una mantenimiento a la aplicación.

Me pueden decir que variables se definen aqui?

Código :

extract($_POST); 
extract($_GET);
extract($someArray);


No podran decirme, ¿cierto? Si no ven el formulario, la url, o la estructura del array... no podran decirme. Pues es eso, ahora y si yo tengo, una variable antes


Código :

$nombre  = "Maikel";
extract($_POST); 
extract($_GET);
extract($someArray);


Como yo se, que no se redefinira... ah si si, con EXTR_SKIP o algun otro tipo, pero igual como sé en verdad que variable son definidas?

No programes para reducir lineas de código, haz un código legible, muchas veces por reducir lineas de código tambien se compromete el rendimiento de la aplicación.


saludos
Por: Maikel
Buen esfuerzo pero comparto lo del comentario de arriba NO USAR EXTRACT y aademas en cuanto al ejemplo muy bonito para entretenerse pensando en que uno puede ser capaz de programar, pero la verdad esto es una actividad muy artesanal si se piensa que ahora en Flex o Spry y sus formularios de validación que tienen por defecto.
Por: vanvanero _blog
y entonces en que quedamos?
siendo un completo analfabeto de As (mas que load movie no me pidas), vale la pena que pelee con esto?

otra cosita, ovbiamente este tuto esta hecho para quienes no saben nada, y seguramente somos los que no tenemos ni idea de lo que es flex, asi que ni lo nombremos por el momento
Por: andropodo_blog

Freddie :

Esto... no lo he visto en algún lado...

Seguramente aqui...

:swat:
penHolder, cuando postees código que no está escrito por ti, sobretodo si es un copiado y pegado exacto (bueno, exacto no porque borraste los créditos :roll:), al menos coloca una referencia de quien lo escribió o de donde lo sacaste... Es muy feo hacer pasar por propio el código de otro...
Por: Zguillez
penHolder, no esta mal ampliar una explicacion ya posteada, ya que eso nos ayuda a todos, pero la manera en que armaste el tip parece que todo es trabajo tuyo cuando en realidad no lo es. La próxima vez no borres el crédito del código que uses, respeta al que trabajó para que los demás aprendan.
Por: Mariux

Zguillez :

Freddie :

Esto... no lo he visto en algún lado...

Seguramente aqui...
Dulce inocente ironía.

Closed, no more PORTADA tag.
Por: Freddie
Deja un comentario
IMPORTANTE

Este mensaje ha sido cerrado; si deseas participar en la discusión o hablar de otro tema relacionado, hazlo en los foros de Cristalab