Widget de formulario (código de inserción)

Introducción

El código de inserción son unas pocas líneas de html y javascript que puede usar para insertar un formulario de Easy Forms en su propio sitio web. Esta es la forma más fácil de mostrar un formulario en su 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 realiza un cambio en su formulario en el generador 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 de inserción de formulario debo usar?

En este momento, Easy Forms ofrece dos opciones para publicar un formulario en su sitio web:

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

Por lo general, la primera opción es la que debe usar.

¿Cómo llenar un campo con una cadena de consulta?
Puede rellenar un campo con parámetros de URL. Solo asegúrese de usar 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.
Cómo escuchar postMensajes enviados por el widget de formulario
Para poder escuchar los mensajes enviados por el widget de formulario, simplemente debe agregar un detector de eventos a su página web. Por ejemplo, si necesita conocer una 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 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. 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 rastreador de formularios (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 previamente recopilado. 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 DIV ID que contiene el enlace al formulario. Por ejemplo: ‘contenedor’: ‘c132’
  • Ancho: especifica el ancho del iframe del formulario. Por ejemplo: ‘ancho’: ‘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 Form Builder en el momento de su creación. Por ejemplo: ‘altura’: ‘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: ‘autoRedimensionar’: !0
  • Tema: Por defecto, está habilitado. Es un valor entero (1 o 0) que le permite habilitar o deshabilitar un tema sobre la marcha. Por ejemplo: ‘tema’: 1
  • JS personalizado: por defecto, 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: Por defecto, está habilitado. Es un valor entero (1 o 0) que le permite habilitar o deshabilitar Form Tracker sobre la marcha. Por ejemplo: ‘registro’: 1
  • Formulario: especifica la ruta a la inserción del formulario. No contiene parámetros.
    addToOffsetTop: por defecto, 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 en el sitio web (como un encabezado) tienen la propiedad CSS: “fixed”. Por ejemplo: ‘addToOffsetTop’: ‘-60’
  • Valores predeterminados: si desea completar previamente los campos del formulario con valores predeterminados, puede usar esta opción. Valores predeterminados es un objeto JSON donde su clave es la identificación del campo de formulario y su valor es el contenido del campo. Por ejemplo:
‘defaultValues’: {
‘text_0’: ‘This is my default value’
}
Tenga en cuenta que los campos de tipo casilla de verificación y botón de opción se seleccionan mediante valores booleanos. Por ejemplo:

‘defaultValues’: {
‘text_0’: ‘This is my default value’,
‘checkbox_0’: true
}
Interactuar con el formulario a través de JavaScript

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 la interfaz de usuario.

De forma predeterminada, un objeto jQuery está 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 Form
El elemento Form – formEl – es un objeto jQuery al que puedes acceder para obtener información y/o manipularla directamente. Por ejemplo, vamos a saber el alto de nuestro formulario con las siguientes líneas de código:
$( document ).ready(function() {
console.log(‘The form height is’, formEl.height());
});
Escuchar 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, complete un campo de texto o seleccione 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.
paso siguiente: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! */
});
});
Los controladores de eventos: paso anterior y paso siguiente
Además de los eventos, Easy Forms 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 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 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: Easy Forms 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, vamos a decirle a nuestro formulario que cada vez que se seleccione un botón de opción, el formulario avanzará a la página siguiente:

$( document ).ready(function() {
$(‘input[type=radio]’).on(‘change’, nextStep);
});
Finalmente, si desea ocultar los botones de navegación, puede agregar las siguientes líneas en el tema CSS asignado a su formulario:

.previous, .next {
display: none !important;
}
Cargue múltiples archivos JavaScript y CSS en nuestro formulario
Al tener el objeto jQuery, podemos usar jQuery.when().done() para cargar múltiples objetos javascript y usarlos 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(‘‘),
$.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 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 carguen en la página dentro de la función done().
  • La función básicamente ejecuta 3 instrucciones:
    • Encuentre todos los campos de tipo “fecha” y convierta cada campo “fecha” en “texto”.
    • Clona cada campo de fecha en un campo de texto que muestra el Selector de fechas.
    • Oculta el campo Fecha, ya que su valor lo establecerá automáticamente el DatePicker, mediante los atributos: altField y altFormat.