Creador de Formularios

Introducción

La interfaz de Form Builder se divide en tres áreas: a la izquierda los campos del formulario, a la derecha el diseñador de temas y en el centro la vista previa del formulario.

El panel izquierdo tiene tres pestañas:

• La pestaña Campos muestra todos los campos y elementos que se pueden agregar al formulario. Simplemente arrástrelos y suéltelos en el área correcta.
• La pestaña Configuración permite configurar el nombre del formulario, el diseño del formulario (posición de las etiquetas) y deshabilitar todos los campos.
• La pestaña Código permite ver en tiempo real el código HTML que se está generando con el Form Builder. Desde aquí puede reconocer cada ID de elemento para manipular el formulario de una manera más avanzada. Un botón “Copiar” le permite copiar todo el código fuente fácilmente.

El área central es la vista previa del formulario desde donde puede manipular cada uno de los componentes.

El panel derecho es el Diseñador de temas desde donde puede personalizar la apariencia de su formulario:

• Fondos: Cambie el fondo de diferentes elementos en su formulario.
• Tipografía: elija la fuente, el estilo, el tamaño y el color de todos los elementos de texto de su formulario.
• Bordes: establezca el grosor, el estilo y el color de los bordes alrededor de ciertos elementos de su formulario.
• Sombras: agregue o elimine una sombra paralela alrededor de su formulario.
• Botones: cambie el texto del botón Enviar.
• ¡Y mucho más!

Hay dos formas de agregar un campo:

1. Al hacer clic en un widget en el panel izquierdo. ¡Eso es todo! El componente de formulario aparecerá en su formulario, debajo de todos los demás componentes.
2. O bien, si desea agregar un campo en una ubicación específica.

• Haga clic en un widget en el panel izquierdo y arrástrelo al área derecha.
• Al momento de ingresar al área activa del Constructor de Formularios, un recuadro le indicará dónde se colocará el Campo.
• Una vez que lo colocó donde lo necesita, suelte el botón.

Para editar un campo:

• Haga clic en el campo para editar y aparecerá una ventana emergente con la información del campo.
• Edite la información de acuerdo a sus requerimientos.
• Clic en Guardar.

Presionando ESC cerrará los popovers

Para reordenar un campo (componente):

• Haga clic en un componente y mantenga presionado
• Arrastre el componente hacia arriba o hacia abajo según sus requisitos.
• Según donde arrastre el componente, aparecerá una zona activa donde se colocará el componente.
• Una vez colocado en el lugar requerido, suelte el componente.

Para copiar un campo (componente):

• Haga clic en un componente y manténgalo presionado.
• Haga clic en el botón ‘Copiar’ en la ventana emergente

Notará que el campo copiado aparecerá debajo del campo original.

Para eliminar un campo (componente):

• Haga clic en un componente y manténgalo presionado.
• Arrástralo fuera de la zona activa.
• Liberar.

Notarás que el componente ha desaparecido.

Al hacer clic en la pestaña Configuración del creador de formularios, accederá a una versión muy básica de la configuración del formulario. Desde aquí puedes:

Cambiar el nombre del formulario: el nombre del formulario es para reconocer el formulario en las páginas de administración y también se muestra como el título de la página pública del formulario en Easy Forms.
Cambiar el diseño del formulario: el diseño del formulario se basa en Bootstrap CSS y se usa para ubicar la posición de las etiquetas en el formulario.
El diseño Vertical muestra las etiquetas de campo arriba,
El diseño Horizontal muestra las etiquetas en el lado izquierdo del campo y
El diseño en línea oculta las etiquetas y muestra los campos uno al lado del otro. Por ejemplo, puede usarlo en un formulario de registro de correo, para colocar un campo de correo electrónico y un botón al lado.
Deshabilitar elementos de formulario: le permite deshabilitar todos los campos del formulario. Es una opción avanzada que puede ser útil si planea interactuar con el formulario desde un archivo javascript externo.

Estas opciones básicas están íntimamente relacionadas con el generador de formularios. Sin embargo, tiene otras opciones de configuración mucho más avanzadas a las que se puede acceder desde el Administrador de formularios.

– Aceptar:

Esta opción se encuentra en el campo Carga de archivos. Con él puedes limitar el tipo de archivos que el campo puede aceptar. Debes considerar lo siguiente

• Debe agregar las extensiones de archivo comenzando desde el punto y separados por comas.
• Por defecto, todos los archivos serán validados y solo se aceptarán archivos de imagen con extensión ‘.gif, .jpg, .png’. (para aceptar archivos de texto, puede cambiar esta opción a: ‘.doc, .docx, .txt’.)
• Si desea aceptar todo tipo de archivos, debe dejar este espacio en blanco.
• Esta opción habilita el atributo ‘aceptar’ del estándar HTML5, por lo que la validación de campos se realiza tanto del lado del cliente (navegador) como del lado del servidor.

– Alias:

La opción Alias ​​le permite enviar notificaciones de WebHook utilizando el Alias ​​del campo en lugar del Nombre del campo. Por ejemplo, podremos volver a enviar datos POST usando “nombre” o “edad” en lugar de “texto_0” o “número_0”.

– Casillas de verificación:

La opción Casillas de verificación solo está disponible en los campos de Casilla de verificación y se usa para agregar casillas de verificación al componente.

Por ejemplo, ingrese al editor masivo y agregue las siguientes “casillas de verificación” y haga clic en “Guardar”:

Primera opción | 1
Segunda opción | 2 | seleccionado
Tercera opción | 3
Cuarta Opción | 4 | seleccionado
Quinta elección | 5

Mostrar casillas de verificación en varias columnas

Para mostrar las opciones de un componente Checkbox en varias columnas, debe agregar la clase CSS del contenedor: columnas-2 o columnas-3 o columnas-4 para definir si desea mostrar las opciones en 2, 3 o 4 columnas, respectivamente.

Casilla de verificación personalizada

Para personalizar los colores del componente Checkbox, debe agregar la clase CSS del contenedor: control personalizado

– Comprobar DNS:

Esta opción le dice a la aplicación que en el proceso de validación del campo de correo electrónico verifique que el dominio de correo electrónico realmente exista y tenga registros ‘A’ y ‘MX’.

¡Precaución! Esta es una opción avanzada y debe usarse con precaución. La verificación puede fallar debido a un problema con los servidores DNS incluso cuando se trata de un correo electrónico válido. Por defecto, está deshabilitado.

– Clase CSS:

Le permite agregar una o más clases de CSS al campo de formulario.
– Clase CSS de contenedor:

Le permite agregar una o más clases de CSS al contenedor de todo el componente.

Puede crear formularios de varias columnas definiendo la clase col-xs-* (el asterisco representa el número de columnas, entre 1 y 12).

Por ejemplo:

Si desea colocar dos campos en dos columnas, debe hacer lo siguiente:

Agregue la clase CSS del contenedor al primer campo: `col-xs-6
Agregue la clase CSS del contenedor al segundo campo: `col-xs-6

En este ejemplo, estamos utilizando las clases CSS predefinidas “sin relleno” para eliminar el relleno que Bootstrap CSS agrega a las columnas. Puede agregarlos o no según su diseño. De lo contrario, puede agregar la clase CSS del contenedor col-xs-12 al resto de los campos, para conservar el mismo relleno en cada campo.

¡Importante! Puede ir a la documentación de Bootstrap CSS para obtener más información.

Nota

• De forma predeterminada, todos los campos, excepto Botón, vienen con la clase: grupo de formularios. Esta clase no se puede editar.
• Por defecto, el campo Button viene con la clase: form-action. Esta clase no se puede editar.

– Valor por defecto:

Puede agregar un valor predeterminado a un campo. Este valor aparece por defecto, pero el usuario puede modificarlo. Si el usuario envía el formulario sin haber modificado el valor predeterminado, este valor se recopilará para procesar el envío.

– Desactivado:

Puede deshabilitar un campo si desea que se muestre al usuario, pero no que se edite. (Tenga en cuenta que también puede deshabilitar un campo oculto). A diferencia de la opción Solo lectura, un campo deshabilitado no se envía al servidor. Es decir, la información almacenada en un campo deshabilitado no se recibe y, por lo tanto, no aparece en el Administrador de envíos.

– Tamaño del campo:

Un campo de Área de Texto permite configurar su tamaño. El tamaño debe ser un número entero e indica el número de filas que se muestran o, en otras palabras, la altura del campo. Por defecto es 3.

– Texto de ayuda:

El texto que escriba aquí aparecerá debajo del campo y, a menudo, se usa para dar instrucciones a los usuarios sobre qué poner en él.

– Colocación del texto de ayuda:

Este menú desplegable le permite mover el texto de ayuda arriba o abajo del campo del formulario.

– En línea:

La opción En línea está en los campos Casilla de verificación y Botones de radio y se usa para cambiar la posición vertical de las casillas de verificación o botones de radio para una posición horizontal.

– Tipo de entrada:

Muchos campos le permiten cambiar el Tipo de entrada para especificar el tipo de datos que recibirá. Por ejemplo, un campo de texto puede tener un tipo de entrada “URL”, para asegurarse de que el texto que escriba aquí sea una URL absoluta que comience con las letras ‘http’.

– Solo entero:

Puede activar esta opción si desea que el valor de este campo sea solo un número entero. Si el usuario ingresa un número de punto flotante, el formulario no se procesará y en su lugar aparecerá un error de validación.

– Patrón de números enteros:

Es una opción avanzada del Campo numérico que le permite personalizar la expresión regular que acepta solo números enteros (0-9) y se utilizará en el proceso de Validación de formularios. La expresión regular utilizada por defecto es ‘/^\s[+-]?\d+\s$/’;

– Etiqueta

Es la forma más común de informar al usuario el valor que debe ingresar en el campo. Generalmente se muestra en la parte superior del campo, pero puede modificar esta posición cambiando el diseño del formulario.

– Etiqueta Clase CSS:

Le permite agregar una o más clases de CSS a la etiqueta. Tenga en cuenta que si desea ocultar una etiqueta, puede agregar la clase CSS de Bootstrap 3 ‘solo sr’.

Nota: Por defecto todos los campos vienen con la clase CSS: control-label. Se recomienda no quitarlo.

– Número mínimo:

Puede definir un número entero o de coma flotante como el número mínimo a tener en cuenta en el proceso de validación del campo. Si el usuario ingresa un número menor, el formulario no será enviado y en su lugar, aparecerá un error de validación. Si no se define esta opción, esta limitación no existirá.

– Número máximo:

Puede definir un número entero o de punto flotante como el número máximo a tener en cuenta en el proceso de validación del campo. Si el usuario ingresa un número mayor, el formulario no será enviado y en su lugar, aparecerá un error de validación. Si no se define esta opción, esta limitación no existirá.

– Tamaño mínimo:

Puede definir un número entero como el tamaño mínimo a tener en cuenta en el proceso de validación del campo. Si el usuario sube un archivo con un tamaño menor al que has definido, no se enviará el formulario y en su lugar aparecerá un error de validación. Si no se define esta opción, esta limitación no existirá.

El número entero representa el número de bytes permitidos. Por ejemplo, Min Size: 10311680 (resultante de la multiplicación de 1024 x 1024 x 5), el tamaño mínimo del archivo debe ser de 5 MB.

– Tamaño máximo:

Puede definir un número entero como el tamaño máximo que se tendrá en cuenta en el proceso de validación del campo. Si el usuario sube un archivo con un tamaño mayor al que definiste, el formulario no se enviará y en su lugar aparecerá un error de validación. Si no se define esta opción, esta limitación no existirá.

El número entero representa el número de bytes permitidos. Por ejemplo, Max Size: 10311680 (resultante de la multiplicación de 1024 x 1024 x 5), el tamaño máximo del archivo debe ser de 5 MB.

– Longitud mínima:

Puede definir un número entero como la longitud mínima de la cadena de entrada. Si no se establece, significa que no hay límite de longitud mínima.

– Longitud máxima:

Puede definir un número entero como la longitud máxima de la cadena de entrada. Si no se establece, significa que no hay límite de longitud máxima.

– Archivos mínimos:

Puede definir un número entero como el número mínimo de archivos que el usuario final debe cargar para pasar la validación.

– Archivos máximos:

Puede definir un número entero como el número máximo de archivos que el usuario final debe cargar para pasar la validación. Utilice esta función para permitir múltiples cargas con el mismo campo de archivo.

– Múltiple:

Esta opción indica que el usuario puede ingresar múltiples valores. Puede encontrar esta opción en los campos Correo electrónico y lista de selección:

• Si se ha habilitado la opción Múltiple en un campo de correo electrónico, puede agregar varias direcciones de correo electrónico válidas separadas por comas. Por ejemplo: ‘nombre@ejemplo.com,nombre2@ejemplo.com’.
• Si se ha habilitado la opción Múltiple en un campo Lista de selección, puede seleccionar varias opciones. La información recopilada tendrá un formato separado por comas. Por ejemplo: ‘Opción uno, opción dos’.

– Patrón de número:

Es una opción avanzada del Campo Numérico que le permite personalizar la expresión regular que acepta cualquier número y será utilizada en el proceso de Validación de Formulario. La expresión regular utilizada por defecto coincide con un número de punto flotante y, opcionalmente, con una parte exponente (por ejemplo, -1.23e-10): ‘/^\s[-+]?[0-9].?[0-9]+( [eE][-+]?[0-9]+)?\s*$/’.

– Opciones:

La opción Opciones solo se encuentra en los campos Lista de selección y se utiliza para agregar opciones de selección al componente.

Por ejemplo, si ingresa en el campo Opciones del formulario emergente:

– Patrón

Es una opción avanzada y le permite agregar una expresión regular al campo para ser utilizada en el proceso de Validación de Formulario. Si el valor enviado por el usuario no coincide con este patrón, el formulario no será procesado y en su lugar aparecerá un error de validación.

– Marcador de posición

Es la forma alternativa de describir el valor que el usuario debe ingresar en el campo. De forma predeterminada, el marcador de posición aparece en el campo hasta que el usuario comienza a ingresar datos.

– Radios:

La opción Radios está disponible en los componentes Botón de opción y se usa para agregar botones de opción al formulario.

Por ejemplo, si hace clic en Editor masivo e ingresa las siguientes radios:

Mostrar botones de opción en múltiples columnas

Para mostrar las opciones de un campo de botón de radio en varias columnas, debe agregar la clase CSS del contenedor: columnas-2 o columnas-3 o columnas-4 para definir si desea mostrar las opciones en 2, 3 o 4 columnas, respectivamente. .

Botón de opción personalizado

Para personalizar un campo de botón de radio, debe agregar la clase CSS del contenedor: control personalizado

– Solo lectura:

Cuando habilita esta opción, el campo se mostrará al usuario pero no podrá editarlo. El servidor recibe y valida la información en un campo de solo lectura cuando se envía el formulario. También será recopilada por el Administrador de envíos.

– Requerido

Esta propiedad le permite asegurarse de que el usuario complete un campo específico antes de enviar el formulario. Si el usuario envía el formulario con un campo obligatorio vacío, el formulario no se procesa y, en su lugar, se muestra un mensaje de error. De forma predeterminada, las etiquetas de los campos obligatorios tienen un asterisco rojo a la derecha.

– Número de paso:

Con esta opción, puede configurar el atributo ‘paso’ HTML5 de los campos Número y Fecha. El atributo ‘paso’ especifica el número válido que se usará como intervalo al cambiar los valores de este campo usando los controladores del navegador. Los navegadores modernos reconocen este atributo.

¡Importante! Si el campo Número tiene habilitada la opción ‘Solo entero’, se recomienda configurar su ‘Número de paso’ en 1.

– Único:

Esta opción le permite verificar que la información ingresada en este campo es única y no ha sido enviada previamente. Útil para listas de correo y formularios de registro, donde a menudo es necesario evitar que los usuarios ingresen la misma información más de una vez.

– Encabezado

Los encabezados se utilizan para marcar las secciones del formulario, así como para darle un título. Por ejemplo, cuando ingrese al Creador de formularios para crear uno, verá un encabezado (h3) con el texto “Formulario sin título”. Para modificar este texto, simplemente haga clic en él. Inmediatamente aparecerá un formulario con todas las opciones para personalizarlo.

– Párrafo

Los párrafos son componentes utilizados para desarrollar un formulario. Por ejemplo, puede usarlos para invitar a sus usuarios a completar el formulario o para dar instrucciones. Cuando ingrese al Creador de formularios para crear uno, verá un párrafo con el texto “Este es mi formulario. Complételo. ¡Gracias!” Para modificar este texto, simplemente haga clic en él. Inmediatamente aparecerá un formulario con todas las opciones para personalizarlo.

– Campo de texto

Un campo de texto es un componente que le permite escribir solo una línea de texto. Los navegadores web consideran el campo de texto como el campo predeterminado estándar de otros más especializados como URL o color. El campo de texto puede tener cinco tipos de entrada diferentes, cada uno de los cuales se usa para validar datos de manera diferente. Los cinco tipos son:

• Texto: este es el tipo predeterminado para este componente. Y es uno de los que se usa habitualmente en los formularios, porque no ofrece ninguna validación y aceptará todos los datos enviados por el usuario. Si el navegador no reconoce ningún otro tipo, se mostrará dicho campo en su lugar.
• Url: este tipo fue introducido por HTML5 y ahora los navegadores modernos lo aceptan. Utilice el tipo de URL si desea recopilar URL absolutas que comiencen con ‘http’.
• Color: este tipo fue introducido por HTML5 y los navegadores modernos que lo aceptan, muestra una paleta de colores automáticamente cuando hace clic en él. Utilice el tipo Color si desea que los datos recopilados sean el valor hexadecimal de un color, comenzando con un signo ‘#’. Por ejemplo, ‘#FFFFFF’.
• Tel: Este tipo fue introducido por HTML5 y ahora los navegadores modernos lo aceptan. Utilice este tipo si el dato a recopilar es un número de teléfono.
• Contraseña: Todos los navegadores reconocen este tipo de entrada. Use este tipo de entrada si desea que el usuario ingrese datos que no se muestran en la pantalla. Tenga en cuenta que Easy Forms no está diseñado para almacenar contraseñas, principalmente porque los datos se almacenan como texto sin formato. Si es necesario, utilice este tipo de entrada con precaución.

– Campo numérico

Un campo numérico es un componente que se utiliza para recopilar números como contenido. Siguiendo el estándar HTML5, este componente puede ser de 2 tipos:

• Número: este es el tipo que debe usarse cuando desea que el usuario escriba el número. Por ejemplo, puede preguntar: “¿Cuántos años tienes?” Si el usuario ingresa ‘Cinco años’, se le notifica que debe escribir solo números: 5, en este caso.
• Rango: este tipo de entrada también se usa para recopilar datos numéricos, pero a diferencia de Number, los navegadores modernos muestran un control deslizante que el usuario puede usar para ingresar sus datos. Por ejemplo, puedes preguntar “Del 1 al 10, ¿qué tan bueno eres en matemáticas?” Dependiendo de cómo arrastre el control deslizante, el valor será mayor o menor.

A diferencia de los componentes de texto, los componentes numéricos ofrecen muchas opciones de validación diferentes. Por ejemplo, Integer Only indica que el campo debe recopilar solo datos numéricos enteros: ¡No se aceptan decimales! También puede establecer el número mínimo y máximo que se ingresará y más. Todas estas opciones siguen el estándar HTML5 y también están validadas en el servidor.

– Campo de fecha

Un campo de fecha es un componente que se utiliza para recopilar fechas válidas. Los campos de fecha fueron introducidos por HTML5 y los navegadores modernos que los reconocen muestran un calendario al hacer clic en el campo. Este componente puede tener 5 tipos diferentes de entrada:

• Fecha: el tipo de entrada que se utilizará si desea recopilar fechas. Debe tener el formato: aaaa-mm-dd.
• DateTime-Local: el tipo de entrada que se utilizará si desea recopilar fechas y horas. Los datos recopilados tendrán el formato ISO estándar: aaaa-mm-ddThh:mm:ss.
• Hora: el tipo de entrada que se utilizará si desea recopilar las horas en el formato: hh:mm:ss.
• Mes: este tipo de entrada es compatible con los navegadores modernos y debe usarse si desea que el usuario seleccione el mes o el mes y el año. El formato de entrada es aaaa-mm.
• Semana: este tipo de entrada es compatible con los navegadores modernos y debe usarse si desea que el usuario seleccione la semana del año en formato numérico.

Nota: De hecho, algunos navegadores modernos aún no muestran el Selector de fecha cuando el campo es una fecha. Pero, en el futuro todos servirán. Por ahora, los navegadores que no lo soportan son Safari, Firefox y versiones anteriores de IE. Para estos casos, podemos usar un widget jQuery UI Datepicker como respaldo.

– Campo de correo electrónico

Un campo de correo electrónico se utiliza para recopilar correos electrónicos válidos. Por defecto valida que el texto contenga ‘@’ y ‘.’ más dos o más caracteres para el dominio de correo electrónico. Además, debe utilizar este campo para enviar notificaciones que tengan como remitentes los correos de sus usuarios (Reply-To).

Una opción avanzada de este campo es la posibilidad de verificar el DNS del correo para confirmar que el dominio realmente existe y tiene un registro A y MX. Se debe tener cuidado de que esta validación pueda fallar debido a problemas con los servidores DNS incluso cuando el correo es válido. Por defecto, esta opción está deshabilitada.

– Área de texto

Un área de texto es un componente que le permite recopilar varias líneas de texto, con varios párrafos. Es un campo adecuado si desea que los usuarios redacten un texto completo. Además, puede cambiar algunos ajustes. Por ejemplo, puede cambiar la altura del área de texto para mostrar más espacio a sus usuarios. Para ello pulsa sobre el área de texto y cambia el tamaño del campo que por defecto es 3.

– Casilla de verificación

El componente Checkbox agrega casillas de verificación al formulario. Este componente proporciona una lista de opciones con una casilla de verificación al lado, para que sus usuarios puedan marcar todas, algunas o ninguna. Puede usarlo si desea obtener varias respuestas, por ejemplo: ¿Cuáles de las siguientes son frutas?

Para agregar, editar y eliminar casillas de verificación, debe hacer clic en el componente. Luego aparece un formulario con el campo “Casillas de verificación”. Tenga en cuenta que cada línea de este campo representa una opción diferente. Cada elección puede estar compuesta de tres partes: Etiqueta, Valor e Imagen. Además, puedes consultarlos.

Por ejemplo, haga clic en Editor masivo y agregue las siguientes “casillas de verificación”:

Para insertar una imagen en la etiqueta de una casilla de verificación, debe agregar la URL de la imagen como el tercer parámetro de configuración de la casilla de verificación. Por ejemplo, si configuramos nuestro componente como:

Crearemos cinco casillas de verificación:

• Uno: crea una casilla de verificación con el valor: ‘Uno’ y la etiqueta: ‘Uno’
• Dos|2: Crea una casilla de verificación con el valor: ‘2’ y la etiqueta: ‘Dos’
• Tres|3|seleccionado: Crea una casilla de verificación con el valor: ‘3’, la etiqueta: ‘Tres’ y estará marcada por defecto.
• Cuatro|4|http://ejemplo.com/imagen-4.jpg: Crea una casilla de verificación con el valor: ‘4’, la etiqueta: ‘Cuatro’ y la imagen aparecerá junto a la casilla de verificación.
• Five|5|http://example.com/image-5.jpg|selected: crea una casilla de verificación con el valor: ‘5’, la etiqueta: ‘Five’ y la imagen aparecerá junto a la casilla de verificación y se marcará por defecto.

Para agregar íconos en lugar de imágenes, solo debe reemplazar las URL de las imágenes por las clases CSS de los íconos. Por ejemplo: glyphicon glyphicon-user, mostrará el ícono de usuario. Tenga en cuenta que, por defecto, la aplicación tiene el conjunto de iconos Glyphicons Pro; sin embargo, puede usar otros íconos como Font Awesome o DevIcons. Para ello, solo tienes que añadir las fuentes al tema CSS de tu formulario.

Importante: Para agregar una imagen o icono a la configuración de la casilla de verificación, debe tener los dos primeros parámetros, incluso si son iguales.

Nota: Recuerda que puedes mostrar tus casillas de verificación horizontalmente activando el atributo ‘en línea’.

– Boton de radio

Botón de opción es un componente que le permite agregar un grupo de botones de opción al formulario. Este componente brinda a los usuarios una lista de opciones, pero deben seleccionar solo una de ellas. Por ejemplo: ¿Cuál es tu color favorito?

Para agregar, editar y eliminar opciones, debe hacer clic en el componente. Luego aparece un formulario con el campo “Radio”. Tenga en cuenta que cada línea de este campo representa una opción diferente. Y cada línea puede estar compuesta por tres partes, separadas por una barra vertical o tubería. El formato debe ser el siguiente: Etiqueta|Valor|seleccionar. La segunda y tercera parte de este formato es opcional.

Por ejemplo, si ingresas en el campo “Radio” del Formulario emergente:

Además, desde la versión 1.3 puedes agregar imágenes o íconos a los botones de radio para darle un toque más dinámico a tus formularios.

Para insertar una imagen en la etiqueta de un botón de opción, debe agregar la URL de la imagen como el tercer parámetro de configuración del botón de opción. Por ejemplo, si configuramos nuestro componente como:

Crearemos cinco botones de opción:

• Uno: crea un botón de radio con el valor: ‘Uno’ y la etiqueta: ‘Uno’
• Dos|2: crea un botón de radio con el valor: ‘2’ y la etiqueta: ‘Dos’
• Tres|3|seleccionado: Crea un botón de radio con el valor: ‘3’, la etiqueta: ‘Tres’ y será seleccionado por defecto.
• Cuatro|4|http://example.com/image-4.jpg: Crea un botón de opción con el valor: ‘4’, la etiqueta: ‘Cuatro’ y la imagen aparecerá junto al botón de opción.
• Cinco|5|http://example.com/image-5.jpg|selected: crea un botón de radio con el valor: ‘5’, la etiqueta: ‘Five’ y la imagen aparecerá junto al botón de radio y estar seleccionado por defecto.

Para agregar íconos en lugar de imágenes, solo debe reemplazar las URL de las imágenes por las clases CSS de los íconos. Por ejemplo: glyphicon glyphicon-user, mostrará el ícono de usuario. Tenga en cuenta que, por defecto, la aplicación tiene el conjunto de iconos Glyphicons Pro; sin embargo, puede usar otros íconos como Font Awesome o DevIcons. Para ello, solo tienes que añadir las fuentes al tema CSS de tu formulario.

Importante: Para agregar una imagen o icono a la configuración del botón de radio, debe tener los dos primeros parámetros, incluso si son iguales.

Nota: Recuerda que puedes mostrar tu botón de radio horizontalmente activando el atributo ‘en línea’.

– Lista de selección

Una lista de selección es un menú desplegable que permite al usuario seleccionar una o varias opciones, según la configuración que elija. La principal diferencia con el componente Botón de radio es que puede agregar muchas opciones sin cambiar su tamaño. Por lo que se recomienda su uso cuando hay muchas opciones por ejemplo: ¿Seleccionar su país de origen?

Para agregar, editar y eliminar opciones, debe hacer clic en el componente. Luego aparece un formulario con el campo “Opciones”. Tenga en cuenta que cada línea de este campo representa una opción diferente. Y cada línea puede estar compuesta por tres partes, separadas por una barra vertical o tubería. El formato debe ser el siguiente: Etiqueta|Valor|seleccionado. La segunda y tercera parte de este formato es opcional.

Por ejemplo, si ingresa en el campo “Opciones” del formulario emergente:

La vista previa del formulario mostrará un cuadro con el texto “Dos”. Y si el usuario envía el formulario sin realizar ningún cambio, estará enviando el valor: 2.

– Campo escondido

Al agregar un campo oculto al formulario, este no se mostrará en el formulario. Sin embargo, los campos ocultos son útiles para cálculos matemáticos o enviar valores predeterminados sin cambiar la interfaz del formulario.

Nota: Puede agregar una etiqueta a un campo oculto para trabajar de una manera más cómoda en la administración de formularios, por ejemplo, para crear reglas condicionales usando este campo.

– Subir archivo

El campo Carga de archivos es un componente que permite a los usuarios adjuntar archivos en el envío del formulario. Una vez enviados, los archivos aparecerán en la información detallada de envío. Hay dos detalles que hay que tener en cuenta:

• Tipos de archivos permitidos: puede limitar los tipos de archivos que se pueden cargar en cada campo de archivo. De forma predeterminada, los tipos de archivo permitidos para la imagen son: ‘.gif, .jpg, .png’. Para modificar el tipo de archivo permitido, debe hacer clic en el componente y en el campo de formulario ‘Aceptar’ que aparece, cambiar las extensiones de archivo permitidas, por ejemplo, ‘.doc, .pdf, .txt’ para aceptar archivos de texto.
• Limitaciones de tamaño: puede limitar el tamaño del archivo y definir un tamaño mínimo o máximo para cada campo. Para modificar el tamaño de archivo permitido, haga clic en el componente y luego expanda el formulario emergente haciendo clic en el enlace ‘Más’. Luego ubique los campos Tamaño mínimo y máximo e ingrese el dígito que representa la cantidad de bytes permitidos. Por ejemplo, Max Size: 10311680 (resultante de la multiplicación de 1024 x 1024 x 5 = 5 MB).

– Fragmento

El campo HTML Snippet es un componente de uso avanzado que le permite agregar código HTML a sus formularios. Mostrará un editor Wysiwyg capaz de reconocer los atajos de teclado para diseñar su código HTML rápidamente.

Tenga cuidado de ingresar un código HTML válido, de lo contrario, Form Builder no guardará el formulario y mostrará un mensaje de error que indica la línea de código donde se cometió el error. Por ejemplo, un error común es agregar más de un elemento HTML con la misma ID.

Nota: aunque puede agregar código CSS y JavaScript en un formulario. No se recomienda hacerlo, en estos casos puede crear un tema CSS y/o cargar un archivo javascript externo. Recuerde que el formulario que creó también se muestra en el Administrador de envío y su código podría ser incompatible.

– reCaptcha

El campo reCaptcha es un componente avanzado que te permite usar la tecnología de Google para verificar que los usuarios no sean bots y/o spammers. Puede modificar la configuración de reCAPTCHA, como cambiar el color del tema, el tipo de captcha y el tamaño. Un detalle a tener en cuenta es que solo se puede agregar un componente reCaptcha por Formulario.

¡Importante! Antes de agregar el componente reCAPTCHA a su formulario, primero debe agregar claves reCAPTCHA en la configuración del sitio. De lo contrario, reCAPTCHA no funcionará. Si creó el formulario antes de agregar las claves, debe actualizar el formulario.

– Salto de página

El campo Salto de página es un componente avanzado que le permite crear formularios de varios pasos o varias páginas. Para cada salto de página creado, agregará una nueva página. Además, se mostrará un encabezado sobre el formulario para que los usuarios sepan en qué paso se encuentran y cuántos pasos deben seguir para enviar el formulario. Hay dos detalles que hay que tener en cuenta:

• El componente Salto de página agrega dos botones para permitir la Navegación de formularios. Puede personalizar el texto en el botón ‘Siguiente’ o ‘Anterior’ haciendo clic en el componente.
• Pasos del formulario: se muestran arriba del formulario y se pueden modificar de la siguiente manera.
  • Haga clic en Pasos del formulario para comprobar su configuración. Puede cambiar los títulos de cada paso en el campo Pasos del formulario. Cada línea coincide con un título.
  • Puede especificar que se muestren solo los títulos o pasos (números).
  • Puede cambiar los números de paso mediante iconos de glyphicons. Para usar Glyphicons en etapas, debe agregar a cada línea de los campos Pasos, una barra vertical o línea de tubería seguida de ‘icono-[nombre del icono]’. Por ejemplo, si quiero reemplazar el número 1, lo escribo en la primera línea de Pasos: ‘Paso sin título|icono-usuario’. Vaya a Glyphicons para ver el nombre de los iconos que puede usar.
  • Puedes cambiar el diseño de los pasos por una barra de progreso indicando el porcentaje que se ha logrado.
  • Finalmente, puede ocultar los pasos del formulario marcando la opción ‘Sin pasos del formulario’.

El campo reCaptcha es un componente avanzado que te permite usar la tecnología de Google para verificar que los usuarios no sean bots y/o spammers. Puede modificar la configuración de reCAPTCHA, como cambiar el color del tema, el tipo de captcha y el tamaño. Un detalle a tener en cuenta es que solo se puede agregar un componente reCaptcha por Formulario.

– Espaciador

El componente Espaciador le permite agregar un espacio vertical preciso entre los campos de sus formularios. Simplemente arrastre y suelte un espaciador entre sus campos y establezca la cantidad de píxeles entre ellos.

Opciones:

• Altura: Es el espacio definido por el número de píxeles.

– Firma

El componente Firma permite a los usuarios finales firmar su formulario, ya sea con el mouse o con el dedo en un iPad/teléfono inteligente, su John Hancock directamente en el formulario. Por lo tanto, puede capturar firmas de forma segura para contratos, documentos legales y otros formularios en los que necesita un autógrafo físico.

Hay dos detalles que hay que tener en cuenta:

• El componente Signature agrega dos botones para permitir las interacciones de Canvas. Puede personalizar el texto en los botones ‘Limpiar’ y ‘Deshacer’ haciendo clic en el componente.
• Configuración de campo: el campo Firma tiene las siguientes opciones especiales:
  • Borrar: Habilita/Deshabilita el botón “Borrar”. Cuando un usuario final haga clic en el botón “Borrar”, se eliminará la firma. Y el lienzo quedará limpio para empezar de nuevo.
  • Deshacer: Activar/Desactivar el botón “Deshacer”. Cuando un usuario final hace clic en el botón “Deshacer”, se eliminará el último trazo de su firma. Puede continuar presionando este botón para deshacer su firma paso a paso.
  • Además, puede definir el ancho y alto del lienzo, el color del lápiz, así como cambiar el texto de los botones entre otras configuraciones comunes.

– Campo Matriz

El campo Matriz es un componente avanzado que le permite agrupar varios controles de formulario con el mismo tipo de entrada dentro de una tabla. Puede crear un campo de matriz con los siguientes tipos de entrada:

• Botón de radio (por defecto)
• Caja
• Seleccionar lista
• Texto
• Área de texto
• Número
• Rango (control deslizante)
• Correo electrónico
• Teléfono (Teléfono)
• URL
• Color
• Clave
• Fecha
• DateTime-Local
• Tiempo
• Mes
• Semana

Todos los controles del formulario son totalmente personalizables y, según su tipo, se aplicará la validación de entrada correcta.

Un tipo de entrada especial para Matrix es Select List, porque necesita agregar diferentes valores (opciones), para hacer esto simplemente marque “Valores” y en cada campo “Valor” ingrese valores separados por barras (“/”). Si desea habilitar una opción vacía predeterminada, debe usar la configuración de marcador de posición.

Nota: Cuando una tabla es muy grande, necesitaremos agregar la clase “table-responsive” dentro de la configuración “Container CSS Class”.

Buy Now!

El campo de botón es un componente que le permite enviar los formularios. Si bien es normal agregar un botón por formulario, nada le impide agregar más, por ejemplo, al principio y al final del formulario. Este componente puede ser de 3 tipos:

• Enviar: Para enviar el formulario. Está seleccionado por defecto.
• Restablecer: para restablecer el formulario a sus valores predeterminados.
• Imagen: muestra una imagen en el botón y, al igual que Enviar, se usa para enviar el formulario. Si usa este tipo de botón, debe agregar la URL de la imagen y también eliminar la clase CSS.
• Botón: este tipo no envía el formulario, pero se puede usar para interactuar con los campos a través de javascript.

Puede agregar un ícono a los botones tipo ‘Enviar’, ‘Restablecer’ y ‘Botón’, escribiendo en el atributo ‘Texto del botón’ la etiqueta del ícono. Por ejemplo:

<span class="glyphicon glyphicon-shopping-cart"></span>Compre Ahora!

Mostrará su botón con un bonito icono al principio:

Nota: La clase CSS: ‘btn btn-primary’ agrega el diseño predeterminado al botón. Vaya a Bootstrap CSS para obtener más información.

Un punto muy importante a considerar es la validación de campo que se ejecuta cuando los usuarios envían un formulario.

La validación de campo es el proceso mediante el cual se verifica que los datos enviados por los usuarios cumplen con ciertos requisitos. Por ejemplo, un campo de fecha requiere que el valor enviado al servidor tenga el siguiente formato aaaa-mm-dd. La validación asegura que esto suceda.