Widget de Formulario (Código de Inserción)

Introducción

Los códigos de inserción son unas pocas líneas de HTML y JavaScript que puedes usar para incrustar un formulario de iform4u en tu propio sitio web. Esta es la forma más fácil de mostrar un formulario en tu sitio y el método menos susceptible a errores. Además, una de las cosas más importantes sobre el widget de formulario es que cada vez que haces un cambio en tu formulario en el constructor de formularios, el formulario incrustado se actualizará automáticamente.

El Widget de Formulario ha sido diseñado para funcionar en cualquier página web. Nuestro Widget de Formulario básicamente crea un iFrame al instante, y el formulario se cargará en él. Luego, dado que crea el iFrame, también puede redimensionarlo, lo que significa que no hay necesidad de actualizar el código cada vez que haces algún cambio. Además, cuando mantienes un formulario dentro de un iFrame, también evitas que entre en conflicto con elementos existentes de JavaScript o CSS en tu página.

¿Qué Código de Inserción de Formulario Debo Usar?

Actualmente, iform4u ofrece dos opciones para publicar un formulario en tu sitio web:

1. Incrustar con Diseño: Te permite publicar el formulario con el tema que se ha aplicado al formulario.
2. Incrustar sin Diseño: Te permite publicar el formulario sin ningún tema, incluso si has aplicado uno a tu formulario.

Usualmente, la primera opción es la que deberías usar.

Cómo Población un Campo con una Cadena de Consulta

Puedes poblar un campo con parámetros de URL. Solo asegúrate de usar el ID del Campo o el Alias del Campo como la clave del parámetro, luego el valor asignado a este parámetro aparecerá en el campo.

Nota: Si estás usando un Formulario de Múltiples Pasos, puedes ir a una página específica agregando el número de página a la URL, por ejemplo, para ir a la segunda página agrega la cadena de consulta "p=2".

Cómo Escuchar postMessages Enviados por el Widget de Formulario

Para poder escuchar los mensajes enviados por el Widget de Formulario, simplemente debes agregar un escuchador de eventos a tu página web. Por ejemplo, si necesitas conocer un ID de envío desde tu propia página web, puedes agregar este código debajo del código de inserción pegado:

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
    if (event.data) {
        var data = JSON.parse(event.data);
        if (typeof data.action !== "undefined" && data.action === "success") {
            console.log("Envío guardado con ID", data.data.id);
        }
    }
}

Configuración del Widget de Formulario

El Widget de Formulario (código de inserción) tiene dos partes:

1. Un código HTML que muestra el contenido predeterminado si el usuario accede al formulario cuando JavaScript está deshabilitado en su navegador. Por defecto, se muestra un enlace a tu formulario dentro de un elemento DIV.
2. Un código JavaScript que es responsable de mostrar el formulario e inicializar el Rastreador de Formularios (si la Analítica está habilitada).

El widget de formulario te permite configurar algunas opciones del formulario sobre la marcha:

• ID: ID del formulario en la aplicación. Por ejemplo: 'id': 132
• Sid: ID de envío. Usa esta opción para editar un envío de formulario previamente recopilado. Para encontrar el ID de Envío, ve al Administrador de Envíos. Por ejemplo: 'sid': 964
• Contenedor: ID del elemento HTML donde se insertará el iFrame del formulario. Por defecto, apunta al ID del DIV que contiene el enlace al formulario. Por ejemplo: 'container': 'c132'
• Ancho: Especifica el ancho del iFrame del formulario. Por ejemplo: 'width': '100%'
• Alto: Especifica la altura del iFrame del formulario. Usualmente, el código de inserción viene configurado con un valor en píxeles. Este valor es calculado por el Constructor de Formularios en el momento de su creación. Por ejemplo: 'height': '846px'
• Redimensionar Automáticamente: Por defecto, está habilitado. Indica si el iFrame puede redimensionarse automáticamente a la altura real del formulario. Por ejemplo, cuando se muestran mensajes de validación. Si se establece en falso, el formulario no se redimensiona y su altura se definirá en la opción "height". Por ejemplo: 'autoResize': true
• Tema: Por defecto, está habilitado. Es un valor entero (1 o 0) que te permite habilitar o deshabilitar un tema sobre la marcha. Por ejemplo: 'theme': 1
• JS Personalizado: Por defecto, está habilitado. Es un valor entero (1 o 0) que te permite habilitar o deshabilitar la carga de archivos JavaScript externos sobre la marcha. Por ejemplo: 'customJS': 1
• Registro: Por defecto, está habilitado. Es un valor entero (1 o 0) que te permite habilitar o deshabilitar el Rastreador de Formularios sobre la marcha. Por ejemplo: 'record': 1
• Restablecer: Por defecto, está habilitado. Es un valor entero (1 o 0) que te permite habilitar o deshabilitar el restablecimiento del formulario cuando se envía. Por ejemplo: 'reset': 0
• Página: En un Formulario de Múltiples Pasos, esta opción especifica la página que queremos mostrar por defecto. Por ejemplo, para mostrar la segunda página: 'page': 2
• Formulario: Especifica la ruta a la inserción del formulario. No contiene parámetros.
• Agregar a OffsetTop: Por defecto, es 0. Agrega o resta una cantidad de píxeles a OffsetTop antes de calcular la ubicación del formulario. Esto permite corregir la ubicación del formulario cuando los elementos HTML en el sitio web (como un encabezado) tienen la propiedad CSS: "fixed". Por ejemplo: 'addToOffsetTop': '-60'
• Valores Predeterminados: Si deseas prellenar campos de formulario con valores predeterminados, puedes usar esta opción. Valores Predeterminados es un objeto JSON donde tu clave es el ID del campo del formulario y su valor es el contenido del campo. Por ejemplo:

'defaultValues': {
    'text_0': 'Este es mi valor predeterminado'
}

Ten en cuenta que las casillas de verificación y los botones de radio serán seleccionados con valores booleanos. Por ejemplo:

'defaultValues': {
    'text_0': 'Este es mi valor predeterminado',
    'checkbox_0': true
}

Interactuar con el Formulario vía JavaScript

El Widget de Formulario contiene muchas funciones y opciones que pueden configurarse dentro de un Archivo JavaScript externo.

Nota: Para cargar un Archivo JavaScript debes ir a Formularios -> Acciones -> Configuración -> Configuración de UI.

Por defecto, está disponible un objeto jQuery. Así que puedes interactuar con el Formulario de una manera muy simple usando las siguientes líneas de código:

$(document).ready(function() {  // Aquí podemos interactuar con el Formulario });

El Elemento del Formulario

El elemento del Formulario - formEl - es un objeto jQuery al que puedes acceder para obtener información y/o manipularlo directamente. Por ejemplo, vamos a conocer la altura de nuestro formulario con las siguientes líneas de código:

$(document).ready(function() {  console.log('La altura del formulario es', formEl.height());});

Escuchar Eventos

Ciertos eventos se activan cuando el Formulario hace algo.

• view: Este evento se activará cuando un formulario haya sido visto.
• fill: Este evento se activará la primera vez que interactúas con el formulario. Por ejemplo, al llenar un campo de texto o seleccionar un botón de radio.
• error: Este evento se activará cuando el Servidor arroje un error de validación.
• success: Este evento se activará cuando el Formulario haya sido enviado exitosamente.
• nextStep: Este evento se activará cada vez que progresas al siguiente paso en un formulario de múltiples pasos.
• previousStep: Este evento se activará cada vez que retrocedes un paso en un formulario de múltiples pasos.

Un ejemplo muy básico para detectar cuándo un formulario falla sería:

$(document).ready(function() {    
    formEl.on('error', function(event) {        
        /* Rastrear un error de validación del servidor */          
        /* Lo que sucede aquí dependerá de tu producto de analítica! */    
    });
});

El Motor de Reglas también activa los siguientes eventos cuando un campo se muestra u oculta usando reglas condicionales:

Para implementar esta característica, el motor de reglas activará los siguientes eventos:

• ef.shown: Este evento se activará cuando un campo haya sido mostrado.
• ef.hidden: Este evento se activará cuando un campo haya sido ocultado.

Luego, para interactuar con estos eventos solo escribe los escuchadores de eventos. Por ejemplo:

$(document).ready(function() {  
    $('#text_1').on('ef.shown', function(e) {    
        console.log("Este campo de texto ha sido mostrado.");  
    });  
    $('#text_1').on('ef.hidden', function(e) {    
        console.log("Este campo de texto ha sido ocultado.");  
    });
});

Los Manejadores de Eventos: previousStep y nextStep

Además de los eventos, iform4u ofrece dos manejadores de eventos que te permiten retroceder y avanzar una página en un formulario de múltiples pasos listos para usar mediante JavaScript. Por ejemplo, ahora vamos a ver cómo avanzar una página sin presionar el botón "Siguiente" usando la función de avance automático.

Avance Automático en Formularios de Múltiples Pasos

Por defecto, cuando creas un Formulario de Múltiples Pasos, se agregan automáticamente dos botones de navegación: "Anterior" y "Siguiente" en la parte inferior del formulario. Estos botones te permiten navegar a través del formulario hasta que llegues a la última página donde usualmente se coloca el botón Enviar.

Nota: iform4u te permite agregar múltiples botones de Enviar en diferentes páginas o partes del formulario.

Sin embargo, en ciertos casos de uso, puede que desees avanzar directamente a la siguiente página sin presionar ningún botón. Para esto, haremos uso del manejador de eventos "nextStep".

Nota: Algunos casos de uso en los que esta característica es útil son encuestas y/o pruebas donde no se permite cambiar la respuesta y se deja completar la encuesta lo más rápido posible.

Por ejemplo, con las siguientes líneas de código, le diremos a nuestro Formulario que cada vez que se selecciona un botón de radio, el formulario avanzará a la siguiente página:

$(document).ready(function() {    
    $('input[type=radio]').on('change', nextStep);
});

Finalmente, si deseas ocultar los botones de navegación, puedes agregar las siguientes líneas en el Tema CSS asignado a tu formulario:

.previous, .next {    
    display: none !important;
}

Cargar Múltiples Archivos JavaScript y CSS en nuestro Formulario

Teniendo el objeto jQuery, podemos hacer uso de jQuery.when().done() para cargar múltiples objetos JavaScript y hacer uso de ellos una vez que estén listos para usarse. Veamos el siguiente ejemplo.

Mostrar un DatePicker de jQuery UI en un Campo de Fecha

Por ejemplo, con las siguientes líneas de código mostraremos un DatePicker de jQuery UI en los campos de Fecha del formulario:

$(document).ready(function() {    
    $.when(        
        $('head').append('<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css" />'),        
        $.getScript("//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"),        
        $.Deferred(function(deferred) {            
            $(deferred.resolve);        
        })    
    ).done(function() {        
        $('body').css('padding-bottom', '200px'); // Padding para mostrar el datepicker        
        $('input[type=date]').each(function() {            
            $(this).attr('type', 'text').after(                
                $(this).clone().attr('id', this.id + '_alt').attr('name', this.id + '_alt')                    
                    .datepicker({                        
                        // Formato consistente con el selector HTML5                        
                        dateFormat: "mm/dd/yy",                        
                        changeMonth: true,                        
                        changeYear: true,                        
                        altField: this,                        
                        altFormat: "yy-mm-dd"                    
                    })            
            ).hide();        
        });    
    });
});

Como puedes ver:

• Estamos cargando 2 archivos dentro de la función when(): jquery-ui.css y jquery-ui.min.js.
• Hemos insertado una función que se ejecutará cuando los dos archivos anteriores se hayan cargado en la página dentro de la función done().
• La función básicamente ejecuta 3 instrucciones:
  1. Buscar todos los campos de tipo "date" y convertir cada campo "date" en "text".
  2. Clonar cada campo de Fecha en un campo de Texto que muestra el DatePicker.
  3. Ocultar el campo de Fecha, porque su valor será establecido automáticamente por el DatePicker, mediante los atributos: altField y altFormat.