Introducción
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.
En este momento, Easy Forms ofrece dos opciones para publicar un formulario en su sitio web:
- Incrustar con diseño: le permite publicar el formulario con el tema que se ha aplicado al formulario.
- 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.
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);
}
}
}
El widget de formulario (código de inserción) tiene dos partes:
- 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.
- 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:
‘text_0’: ‘This is my default value’
}
‘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 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:
// Here we can interact with the Form
});
console.log(‘The form height is’, formEl.height());
});
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:
formEl.on(‘error’, function(event) {
/* Track a server validation error */
/* What happens here would be dependent on your analytics product! */
});
});
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:
$(‘input[type=radio]’).on(‘change’, nextStep);
});
display: none !important;
}
$.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.