Formulario de contacto en Flash

  Compatibilidad del artículo: ActionScript 3.0.   

Hacer un formulario de contacto en Flash, es realmente sencillo.

En modo diseño, habría que añadir los campos del formulario deseados, ya sea, mediante campos de texto (Texto TLF y editable), o bien añadirlos desde los componentes de interfaz de usuario para formulario (CheckBox, RadioButton, TextInput, ...). Además habrá que añadir los botones (o elementos que actúen como tal), para realizar las acciones necesarias (al menos enviar el formulario).

En nuestro ejemplo, además se ha añadido un campo de texto llamado "Resultado", para mostrar las posibles incidencias en el proceso.

Una vez añadidos en modo diseño todos los campos que se desee que el usuario rellene, con sus correspondientes descripciones, habría que crear una variable de tipo URLLoader para capturar los datos recibidos y una variable de tipo URLRequest para enviar los valores del formulario (asignándole el método POST), a una página que se encargue de efectuar las acciones necesarias en el servidor (guardar los datos en BBDD, enviar un email, etc.).

Para poder enviar la petición con valores, se crea una variable de tipo URLVariables que guardará los nombres de las variables, así como su valor a enviar. En el ejemplo, se utiliza el método decode, que funcionaría de la siguiente forma:

variableURLVariables.decode("Nombre1 = Valor1");

Se utilizó el método decode, para poder recorrer con un bucle for los campos de texto pasados y hacerlo mas flexible, sin embargo, en caso de saber de antemano los campos que se van a enviar, se podría hacer de la siguiente forma:

variableURLVariables.Nombre1 = "Valor1";

Una vez asignadas las variables, se asignan al método data de la variable URLLoader y se envía la petición.

El código de ejemplo, esta realizado, para que se puedan crear en modo diseño los campos de texto que se desee y al pasar sus nombres en el array asTexts, se envien como un formulario (Campos sin valor text, como un ComboBox, darían error). Se hacen los siguientes pasos:

  1. Se inician las variables a modificar. Estas variables, deben tener los parámetros correctos:
    1. asTexts: Es un array con los nombres de los campos a enviar (propiedades, nombre de la instancia).
    2. sURL: Contendrá la dirección de la página donde se cargará el formulario.
  2. Se inicia la variable de envío con sus eventos y se establecen los botones y sus eventos.
  3. La función resetForm, reiniciará, todos los elementos pasados por asTexts
  4. La función enviarForm:
    1. Crea la variable de la petición URL y la variable "variables", que contendrá los valores de los campos pasados en asTexts, con su nombre y el valor introducido por el usuario.
    2. Establece los valores de los parámetros a pasar (con decode) con la forma "nombre_campo=valor_campo", comprobando que al menos se pase un valor (bPasa).
    3. En caso de pasarse algún valor, envía la petición y resetea el formulario, en caso contrario, devuelve error.
  5. La función onEnvCompleto, Comprueba que recibe el texto "OK" (en el ejemplo, el código devuelve "OK", en caso de que devuelva otro valor habría que cambiarlo), para devolver que se ha procesado correctamente, o en caso contrario, informar que ha habido un error.
  6. La función onEnvError, salta en caso de haber un error en la petición, por lo que muestra un mensaje de error.
Para tratar los datos del formulario enviado, como se ha dicho, se debe disponer de un proceso en el servidor que se encargue de ello, para este ejemplo se usó el código de Enviar un formulario por correo electrónico (PHP), modificando solamente el valor retornado, para que, en vez de sacar el texto "Su formulario ha sido enviado con éxito", simplemente devuelva "OK", quedando de la siguiente forma:


<?php
    //Copyright © McAnam.com
    
    function form_mail($sPara, $sAsunto, $sTexto, $sDe){
        
        if ($sDe)$sDe = "From:".$sDe;
        
        foreach ($_POST as $nombre => $valor)
                $sTexto = $sTexto."\n".$nombre." = ".$valor;
                
        return(mail($sPara, $sAsunto, $sTexto, $sDe));
    }
    
    //Ejemplo de como usar:
    if (form_mail("usuario@suweb.com",
                     "Activación de formulario",
                     "Los datos introducidos en el formulario son:\n\n",
                     "tu@tuweb.com"
                    )
         )
         echo "OK";

?>


El ejemplo es en PHP y envía un correo electrónico con los datos del formulario a la dirección pasada (usuario@suweb.com), aunque se podría realizar en cualquier lenguaje de servidor, como PHP, ASP, Java, Perl, ... Y podría hacer las acciones que se requiera.

El ejemplo, devolverá error, ya que para evitar Spam, se apunta a una página inexistente.


ActionScript:
// Copyright © McAnam.com
// http://www.mcanam.com/articulos/Flash.php?id=8

// VARIABLES A MODIFICAR (INI)

// Array con los nombres de los campos de texto a enviar
var asTexts:Array = new Array("Nombre",
                              "Apellidos",
                              "Email",
                              "Texto");
                            
// Dirección a la que realizar el envío del e-mail
const sURL:String = "pagina_mail.php";
                            
// VARIABLES A MODIFICAR (FIN)

var urlEnv:URLLoader = new URLLoader();
urlEnv.addEventListener(Event.COMPLETE, onEnvCompleto);
urlEnv.addEventListener(IOErrorEvent.IO_ERROR, onEnvError);

btn_enviar.buttonMode=true;
btn_enviar.addEventListener(MouseEvent.CLICK, enviarForm);

btn_reset.buttonMode=true;
btn_reset.addEventListener(MouseEvent.CLICK, resetForm);

function resetForm(evt:MouseEvent):void{
    
    for (var id in asTexts) {
        var txtElem = getChildByName(asTexts[id]);
        txtElem.text = "";
    }
    
}

function enviarForm(evt:MouseEvent):void{

    var bPasa:Boolean = new Boolean(false);
    
    // Inicialización de la petición
    var urlPeticion:URLRequest = new URLRequest(sURL);
    urlPeticion.method = URLRequestMethod.POST;
    
    Resultado.text = "";
    
    // Se crea variable, para enviar los valores del formulario
    var variables:URLVariables = new URLVariables();
    
    // Se recorren los campos designados para enviar con su nombre y valor
    for (var id in asTexts) {
        var txtElem = getChildByName(asTexts[id]);
        if (txtElem.text != "")
            bPasa = true;
        variables.decode(txtElem.name + "=" + txtElem.text);
    }
    
    urlPeticion.data = variables;
    
    // Envío de petición (en caso de pasar algún dato relleno)
    if (bPasa == true)
    {
        urlEnv.load(urlPeticion);
        // Se resetea el formulario
        resetForm(evt);
    }
    else
    {
        Resultado.text = "Debe rellenar algún campo";
    }
    
}

function onEnvCompleto(evt:Event):void{
    
    // Si recibe OK (de la página), se ha procesado con éxito
    if (urlEnv.data == "OK")
        Resultado.text = "Petición procesada corectamente";
    else
        Resultado.text = "Se ha producido un error en la petición";
    
}

function onEnvError(evt:Event):void{
    
    Resultado.text = "Error en la petición";
    
}


Ejemplo:

Links relacionados:
Enviar un formulario por correo electrónico con PHP
Formulario de contacto en Flash con adjunto
Pasar parámetros a la función dentro del addEventListener
Ejecutar JavaScript desde Flash por URL
Cargar y presentar variables de fichero externo
Métodos de conexión HTTP
Generador de códigos para crear Formularios HTML


Para cualquier duda, consulta, sugerencia, opinión, colaboración, etc; no dude en ponerse en contacto con nosotros

Copyright © 2002-2017 [McAnam]. Reservados todos los derechos.
www.mcanam.com