Widget de formulario (código para insertar)

Introducción

El código para insertar son algunas líneas de html y javascript que puede usar para insertar un formulario iform4u en su propio sitio web. Esta es la forma más sencilla de mostrar un formulario en su sitio y el método menos susceptible a errores. Además, una de las cosas más importantes del widget de formulario es que cada vez que realiza un cambio en su formulario en el creador 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 sobre la marcha y el formulario se cargará en él. Luego, dado que crea el iFrame, también puede cambiar su tamaño y eso significa que no es necesario actualizar el código cada vez que realiza algún cambio. Además, cuando mantiene un formulario dentro de un iFrame, también evita que entre en conflicto con elementos JavaScript o CSS existentes en su página.

¿Qué código para insertar formulario debo utilizar?

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

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

Normalmente, la primera opción es la que debes utilizar.

Cómo completar un campo con una cadena de consulta

Puede completar un campo con parámetros de URL. Solo asegúrese de utilizar el ID de campo o el Alias ​​de campo como clave de parámetro, luego el valor asignado a este parámetro aparecerá en el campo.

Nota: Si está utilizando un formulario de varios pasos, puede 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, agregue la cadena de consulta "p=2".

Cómo escuchar mensajes enviados por el widget de formulario

Para poder escuchar los mensajes enviados por el Form Widget, simplemente debes agregar un detector de eventos a tu página web. Por ejemplo, si necesita conocer el ID de envío de su propia página web, puede 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("Submission saved with ID", data.data.id);        }    }}

Configuración del widget de formulario

El widget de formulario (código para insertar) 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. De forma predeterminada, se muestra un enlace a su formulario dentro de un elemento DIV.
2. Un código Javascript que es responsable de mostrar el formulario e inicializar el Form Tracker (si Analytics está habilitado).

El widget de formulario le 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. Utilice esta opción para editar un envío de formulario recopilado previamente. Para encontrar el ID de envío, vaya al Administrador de envíos . Por ejemplo:'sid': 964
• Contenedor : ID del elemento HTML donde se insertará el iframe del formulario. De forma predeterminada, apunta al ID DIV que contiene el enlace al formulario. Por ejemplo:'container': 'c132'
• Ancho : especifica el ancho del iframe del formulario. Por ejemplo:'width': '100%'
• Altura : especifica la altura del iframe del formulario. Por lo general, el código de inserción viene configurado con un valor en píxeles. Este valor lo calcula el Creador de formularios en el momento de su creación. Por ejemplo:'height': '846px'
• Cambio de tamaño automático : De forma predeterminada, está habilitado. Indica si el iframe puede cambiar de tamaño 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 cambia de tamaño y su altura se definirá en la opción "altura". Por ejemplo:'autoResize': !0
• Tema : De forma predeterminada, está habilitado. Es un valor entero (1 o 0) que le permite habilitar o deshabilitar un tema sobre la marcha. Por ejemplo:'theme': 1
• personalizado : De forma predeterminada, está habilitado. Es un valor entero (1 o 0) que le permite habilitar o deshabilitar la carga de archivos javascript externos sobre la marcha. Por ejemplo:'customJS': 1
• Grabar : De forma predeterminada, está habilitado. Es un valor entero (1 o 0) que le permite habilitar o deshabilitar Form Tracker sobre la marcha. Por ejemplo:'record': 1
• Restablecer : De forma predeterminada, está habilitado. Es un valor entero (1 o 0) que le permite habilitar o deshabilitar el restablecimiento del formulario cuando se envía el formulario. Por ejemplo:'reset': 0
• Página : en un formulario de varios pasos, esta opción especifica la página que queremos mostrar de forma predeterminada. Por ejemplo, para mostrar la segunda página:'page': 2
• Formulario : especifica la ruta a la inserción del formulario. No contiene parámetros.
• addToOffsetTop : De forma predeterminada, es 0. Agregue o reste 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 del sitio web (como un encabezado) tienen la propiedad CSS: "fijo". Por ejemplo:'addToOffsetTop': '-60'
• Valores predeterminados : si desea completar previamente los campos del formulario con valores predeterminados, puede utilizar esta opción. Valores predeterminados es un objeto JSON donde su clave es la identificación del campo del formulario y su valor es el contenido del campo. Por ejemplo:

'defaultValues': {    'text_0': 'This is my default value'}

Tenga en cuenta que las casillas de verificación y los botones de opción se seleccionarán con valores booleanos. Por ejemplo:

'defaultValues': {    'text_0': 'This is my default value',    'checkbox_0': true}

El widget de formulario contiene muchas funciones y opciones que se pueden configurar dentro de un archivo JavaScript externo.

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

De forma predeterminada, hay un objeto jQuery disponible. Así podrás interactuar con el Formulario de una forma muy sencilla utilizando las siguientes líneas de código:

$( document ).ready(function() {  // Here we can interact with the Form});

El elemento de formulario

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

$( document ).ready(function() {  console.log('The form height is', formEl.height());});

Escuchando eventos

Ciertos eventos se activan cuando el formulario hace algo.

• vista : este evento se activará cuando se haya visto un formulario.
• llenar : este evento se activará la primera vez que interactúes con el formulario. Por ejemplo, completando un campo de texto o seleccionando un botón de opción.
• error : este evento se activará cuando el servidor arroje un error de validación.
• éxito : este evento se activará cuando el formulario se haya enviado correctamente.
• nextStep : este evento se activará cada vez que avance al siguiente paso en un formulario de varios pasos.
• Paso anterior : este evento se activará cada vez que retroceda un paso en un formulario de varios pasos.

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

$( document ).ready(function() {    formEl.on('error', function(event) {        /* Track a server validation error */          /* What happens here would be dependent on your analytics product! */    });});

El motor de reglas también desencadena los siguientes eventos cuando un campo se muestra u oculta mediante reglas condicionales:

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

• ef.shown : este evento se activará cuando se haya mostrado un campo.
• ef.hidden : este evento se activará cuando se oculte un campo.

Luego, para interactuar con estos eventos simplemente escriba los oyentes de eventos. Por ejemplo:

$( document ).ready(function() {  $('#text_1').on('ef.shown', function(e) {    console.log("This text field has been shown.")  });  $('#text_1').on('ef.hidden', function(e) {    console.log("This text field has been hidden.")  });});

Los controladores de eventos: anterior paso y siguiente paso

Además de los eventos, iform4u ofrece dos controladores de eventos que le permiten retroceder y avanzar una página en un formulario de varios pasos listo para usar usando JavaScript. Por ejemplo, ahora veremos cómo reenviar una página sin presionar el botón "Siguiente" usando la función de avance automático.

Avance automático en formularios de varios pasos

De forma predeterminada, cuando crea un formulario de varios pasos, se agregan automáticamente dos botones de navegación: "Anterior" y "Siguiente" en la parte inferior del formulario. Estos botones le permiten navegar por el formulario hasta llegar a la última página donde normalmente se encuentra el botón Enviar.

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

Sin embargo, en ciertos casos de uso es posible que desee avanzar directamente a la página siguiente sin presionar ningún botón. Para ello haremos uso del controlador de eventos “nextStep”.

Nota: Algunos casos de uso en los que esta función es útil son encuestas y/o pruebas en las que no se permite cambiar la respuesta y se permite completar la encuesta lo antes posible.

Por ejemplo, con las siguientes líneas de código, le indicaremos a nuestro formulario que cada vez que se seleccione un botón de opción, el formulario pasará a la página siguiente:

$( 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;}

Cargue varios archivos JavaScript y CSS en nuestro formulario

Al tener el objeto jQuery, podemos utilizar jQuery.when().done() para cargar múltiples objetos javascript y utilizarlos una vez que estén listos para usar. Veamos el siguiente ejemplo.

Mostrar un jQuery UI DatePicker en un campo de fecha

Por ejemplo, con las siguientes líneas de código mostraremos un jQuery UI DatePicker 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 for show the datepicker        $('input[type=date]').each(function () {            $(this).attr('type', 'text').after(                $(this).clone().attr('id', this.id + '_alt').attr('name', this.id + '_alt')                    .datepicker({                        // Consistent format with the HTML5 picker                        dateFormat: 'mm/dd/yy',                        changeMonth: true,                        changeYear: true,                        altField: this,                        altFormat: "yy-mm-dd"                    })            )            .hide();        });    });});

Como se puede 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 carguen en la página dentro de la función done() .
• La función básicamente ejecuta 3 instrucciones:
  1. Busque todos los campos de tipo " fecha " y convierta cada campo " fecha " en " texto ".
  2. Clone cada campo de Fecha en un campo de Texto que muestra DatePicker.
  3. Oculta el campo Fecha, porque su valor será establecido automáticamente por el DatePicker, por los atributos: altField y altFormat .