Creador de formularios

Introducción

Form Builder es una pieza clave de iform4u. Es donde se crean y actualizan los formularios. El creador de formularios proporciona las herramientas necesarias para agregar y eliminar campos como otros elementos HTML.

Interfaz de usuario

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 establecer 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í podrás reconocer cada ID de elemento para manipular el Formulario de una forma 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: cambia el fondo de diferentes elementos de tu 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: cambia el texto del botón Enviar.
• ¡Y mucho más!

- Agregar un campo

Hay dos formas de agregar un campo:

1. Al hacer clic en un widget en el panel izquierdo. ¡Eso es todo! El componente del 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 Creador de formularios, un cuadro le indicará dónde se colocará el campo.
   • Una vez que lo hayas colocado donde lo necesitas, suelta el botón.

- Editar un campo

Para editar un campo:

1. Haga clic en el campo para editar y aparecerá una ventana emergente con información del campo.
2. Edite la información según sus requisitos.
3. Haga clic en Guardar.

Nota: Al presionar ESC se cerrarán las ventanas emergentes.

- Reordenar los campos

Para reordenar un campo (componente):

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

- Arrastra campos para crear columnas.

Para crear columnas con un campo (componente):

1. Haga clic en un widget en el panel izquierdo y arrástrelo al lienzo del generador de formularios.
2. Arrástrelo hacia la izquierda o hacia la derecha de un campo existente.
3. Un borde indicará dónde se colocará el campo.
4. Una vez que lo hayas colocado donde lo necesitas, suelta el widget.

Dentro del generador de formularios, puede arrastrar campos existentes a la "zona de colocación de columnas"; el generador cambiará automáticamente el tamaño de todos los campos dentro de la zona de colocación para crear columnas de igual ancho.

Puede crear hasta cuatro columnas con este método. Sin embargo, puede diseñar formularios con o hasta 12 columnas que se ajusten perfectamente al espacio disponible en su sitio web utilizando la Container Css Class .

- Copiar un campo

Para copiar un campo (componente):

1. Haga clic en un componente y manténgalo presionado.
2. Haga clic en el botón 'Copiar' en la ventana emergente

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

- Eliminar un campo

Para eliminar un campo (componente):

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

Notarás que el componente ha desaparecido.

- Copiar ID de campo

Para copiar el ID de campo, siga estos pasos:

1. Haga clic en un componente y manténgalo presionado.
2. Haga clic en los 3 puntos verticales (en el encabezado emergente)
3. Haga clic en Copiar ID.

Ahora puedes pegarlo en otro lugar, como un mensaje de correo electrónico personalizado o un diseño CSS.

Configuración básica del formulario

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:

1. Cambiar el nombre del formulario : el nombre del formulario sirve para reconocer el formulario en las páginas de administración y también se muestra como título de la página pública del formulario en iform4u.
2. Cambiar el diseño del formulario: El diseño del formulario se basa en Bootstrap CSS y se utiliza para ubicar la posición de las etiquetas en el formulario.
   • El diseño vertical muestra las etiquetas de campo de 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.
3. Deshabilitar elementos del formulario : le permite deshabilitar todos los campos del formulario. Es una opción avanzada que puede resultar útil si planeas interactuar con el formulario desde un archivo javascript externo.

Estas opciones básicas están íntimamente relacionadas con el creador de formularios. Sin embargo, tienes otras opciones de Configuración mucho más avanzadas a las que puedes acceder desde el Administrador de formularios .

Configuración de campo

Cada campo de formulario tiene muchas opciones de configuración, por ejemplo, la etiqueta, el valor predeterminado, la clase CSS, etc. Para configurar un campo, vaya a la vista previa y haga clic en él.

Opciones de configuración

A continuación, se muestran todas las opciones de configuración en orden alfabético. No todos están en todos los campos, pero si tienes algún problema, utiliza esta lista como referencia.

- Aceptar:

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

• Debes agregar las extensiones de archivo comenzando desde el punto y separadas por comas.
• De forma predeterminada, todos los archivos serán validados y solo se aceptarán archivos de imagen con extensión '.gif, .jpg, .png'.
• Por ejemplo, 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 del campo se realiza tanto en el lado del cliente (navegador) como en el lado del servidor.

- Alias:

La opción Alias ​​le permite enviar notificaciones de WebHook utilizando el Alias ​​de campo en lugar del Nombre de campo. Por ejemplo, podremos reenviar 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 Casillas de verificación y se usa para agregar casillas de verificación al componente.

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

First Choice|1
Second Choice|2|selected
Third Choice|3
Fourth Choice|4|selected
Fifth Choice|5

La vista previa del formulario mostrará un componente Casilla de verificación con 5 casillas de verificación: Primera opción, Segunda opción, Tercera opción, Cuarta opción y Quinta opción. Se marcarán las casillas de verificación "Segunda opción" y "Cuarta opción". Y por último, si el usuario envía el formulario sin realizar ningún cambio, estará enviando los valores: 2,4.

- 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 sea un correo electrónico válido. Por defecto, está deshabilitado.

- Clase CSS:

Le permite agregar una o más clases CSS al campo de formulario.

- Clase CSS de contenedor:

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

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

Por ejemplo:

Si deseas colocar dos campos en dos columnas debes hacer lo siguiente:

1. Agregue la clase CSS contenedora al primer campo: `col-xs-6
2. Agregue la clase CSS contenedora al segundo campo: `col-xs-6

En este ejemplo, utilizamos las clases CSS predefinidas "sin relleno" para eliminar el relleno que Bootstrap CSS agrega a las columnas. Puedes agregarlos o no según tu diseño. De lo contrario, puede agregar la clase CSS contenedora col-xs-12 al resto de 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:form-group . Esta clase no se puede editar.
• Por defecto, el campo Botón viene con la clase:form-action . Esta clase no se puede editar.

- Atributos personalizados:

Puede agregar atributos personalizados a un campo. Estos atributos tienen dos partes: el nombre del atributo y el valor del atributo. Esta característica te permite crear formularios más accesibles, especialmente porque puedes usarla para agregar:

• Atributos de datos : útil para integrar campos de formulario con bibliotecas de JavaScript
• Atributos de Aria : Útil para describir mejor los campos del formulario y ofrecer más accesibilidad.

- Valor predeterminado:

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 desactivar un campo si desea que se muestre al usuario, pero no que se edite. (Tenga en cuenta que también puede desactivar un campo oculto). A diferencia de la opción Sólo 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 Área de texto permite configurar su tamaño. El tamaño debe ser un número entero e indica el número de filas mostradas 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 se utiliza a menudo para dar a los usuarios instrucciones sobre qué poner en él.

- Colocación del texto de ayuda:

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

- En línea:

La opción En línea está en los campos de casilla de verificación y en los botones de opción y se usa para cambiar la posición vertical de las casillas de verificación o los botones de opción por 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 garantizar que el texto que escriba aquí sea una URL absoluta que comience con las letras "http".

- Sólo números enteros:

Puedes activar esta opción si quieres que el valor de este campo sea solo un número entero. Si el usuario ingresa un número de coma 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 del Formulario. 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 puedes modificar esta posición cambiando el diseño del formulario.

- Etiqueta Clase CSS:

Le permite agregar una o más clases CSS a la etiqueta. Tenga en cuenta que si desea ocultar una etiqueta, puede agregar la clase css Bootstrap 3 'sr-only'.

Nota: De forma predeterminada, todos los campos vienen con la clase CSS: control-label. Se recomienda no quitarlo.

- Fecha mínima:

Se puede definir una fecha como fecha mínima a tener en cuenta en el proceso de validación del campo. Si el usuario ingresa una fecha anterior, 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á.

La fecha debe mantener el siguiente formato: aaaa-mm-dd (formato estándar HTML5) para fechas estáticas. Además, puedes utilizar etiquetas para validar fechas relativas:

• {today} : Hoy es la fecha mínima.
• {today:+1} : Mañana es la fecha mínima.
• {today:-1} : Ayer es la fecha mínima.

- Fecha máxima:

Se puede definir una fecha como fecha máxima a tener en cuenta en el proceso de validación del campo. Si el usuario ingresa una fecha posterior, 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á.

La fecha debe mantener el siguiente formato: aaaa-mm-dd (formato estándar HTML5) para fechas estáticas. Además, puedes utilizar etiquetas para validar fechas relativas:

• {today} : Hoy es la fecha máxima.
• {today:+1} : Mañana es la fecha máxima.
• {today:-1 }: Ayer es la fecha máxima.

- Número mínimo:

Puede definir un número entero o de punto 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 se enviará 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 se enviará 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:

Se 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, Tamaño mínimo: 10311680 (resultante de la multiplicación de 1024 x 1024 x 5), el tamaño mínimo del archivo debe ser 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, 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, Tamaño máximo: 10311680 (resultante de la multiplicación de 1024 x 1024 x 5), el tamaño máximo de archivo debe ser 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 la cantidad mínima de archivos que el usuario final debe cargar para pasar la validación.

- Archivos máximos:

Puede definir un número entero como la cantidad máxima 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 Archivo .

- Longitud máxima:

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

- Múltiples:

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: ','.
• Si se ha habilitado la opción Múltiple en un campo de 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 numérico:

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

- Opciones:

La opción Opciones solo está en los campos de la 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:

One|1
Two|2|select
Three|3
Four|4
Five|5

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.

- Patrón

Es una opción avanzada y le permite agregar una expresión regular al campo que se utilizará en el proceso de Validación del 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 del botón de opción y se usa para agregar botones de opción al formulario.

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

One|1
Two|2|selected
Three|3
Four|4
Five|5

La Vista previa del formulario mostrará cinco botones de opción con las palabras: Uno, Dos, Tres, Cuatro y Cinco. Se seleccionará la opción Dos. Luego, si el usuario envía el formulario sin realizar ningún cambio, estará enviando el valor: 2

- Sólo lectura:

Cuando habilita esta opción, el campo se mostrará al usuario pero no podrá editarlo. La información en un campo de Solo lectura es recibida y validada por el servidor cuando se envía el formulario. También será recogido por el Responsable de Envío.

- 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 utilizará como intervalo al cambiar los valores de este campo utilizando 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 establecer 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 anteriormente. Ú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.

Tipos de campo

- Título

Los encabezados se utilizan para marcar las secciones del formulario, así como para darle un título. Por ejemplo, cuando ingresa 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 dar cuerpo a un formulario. Por ejemplo, puede utilizarlos para invitar a sus usuarios a completar el formulario o dar instrucciones. Cuando ingresa al Creador de formularios para crear uno, verá un párrafo con el texto "Este es mi formulario. Por favor 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 frente a 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 utiliza para validar datos de manera diferente. Los cinco tipos son:

• Texto : este es el tipo predeterminado para este componente. Y es uno que se usa comúnmente 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 haces clic en él. Utilice el tipo Color si desea que los datos recopilados sean el valor hexadecimal de un color, comenzando con el 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. Utilice este tipo de entrada si desea que el usuario ingrese datos que no se muestran en la pantalla. Tenga en cuenta que iform4u no está destinado a 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 se debe utilizar cuando desee que el usuario escriba el número. Por ejemplo, puedes 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 utiliza para recopilar datos numéricos, pero a diferencia de Número, 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, Solo enteros 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 además 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 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 utilizar un widget jQuery UI Datepicker como alternativa.

- Campo de correo electrónico

Se utiliza un campo de correo electrónico para recopilar correos electrónicos válidos. Por defecto valida que el texto contenga una '@' y un '.' 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 (Responder a).

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 registro A y MX. Se debe tener cuidado de que esta validación pueda fallar por problemas con los servidores DNS incluso cuando el correo sea válido. De forma predeterminada, 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 algunas configuraciones. 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 Casilla de verificación 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. Puedes usarlo si quieres 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 elección diferente. Cada elección puede estar compuesta de tres partes: Etiqueta, Valor e Imagen. Además, puedes consultarlos.

Además, puede elegir la herramienta Editor masivo para insertar opciones separadas por una barra vertical o una tubería. El formato debe ser el siguiente: Etiqueta|Valor|seleccionado. La segunda y tercera parte de este formato son opcionales.

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

One|1
Two|2|selected
Three|3
Four|4|selected
Five|5

La Vista previa del formulario mostrará 5 casillas de verificación con las palabras Uno, Dos, Tres, Cuatro y Cinco. Se seleccionará la opción "Dos" y "Cuatro". Y, si el usuario envía el formulario sin realizar ningún cambio, estará enviando los valores: 2,4.

Además, puedes agregar imágenes o íconos a las casillas de verificación para darle un toque más dinámico a tus formularios.

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

One
Two|2
Three|3|selected
Four|4|http://example.com/image-4.jpg
Five|5|http://example.com/image-5.jpg|selected

Crearemos cinco casillas de verificación:

• One : Crea una casilla de verificación con el valor: 'Uno' y la etiqueta: 'Uno'
• Two|2 : Crea una casilla de verificación con el valor: '2' y la etiqueta: 'Dos'
• Three|3|selected : Crea una casilla de verificación con el valor: '3', la etiqueta: 'Tres' y estará marcada de forma predeterminada.
• Four|4|http://example.com/image-4.jpg : Crea una casilla de verificación con el valor: '4', la etiqueta: 'Cuatro' y la imagen aparecerá al lado de 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: 'Cinco' y la imagen aparecerá al lado de la casilla de verificación y estará marcada de forma predeterminada.

Para agregar íconos en lugar de imágenes, solo debes reemplazar las URL de las imágenes por las clases CSS de los íconos. Por ejemplo:glyphicon glyphicon-user , mostrará el icono de usuario. Tenga en cuenta que, de forma predeterminada, la aplicación tiene el conjunto de iconos Glyphicons Pro; sin embargo, puedes usar otros íconos como Font Awesome o DevIcons. Para esto, sólo tienes que agregar las fuentes al tema CSS de tu formulario.

Importante: Para agregar una imagen o ícono 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 'inline'.

- Botón de opción

El botón de opción es un componente que le permite agregar un grupo de botones de opción al formulario. Este componente ofrece 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 son opcionales.

Por ejemplo, si ingresas en el campo "Radio" del formulario emergente:

One|1
Two|2|selected
Three|3
Four|4
Five|5

La Vista previa del formulario mostrará 5 casillas de verificación con las palabras Uno, Dos, Tres, Cuatro y Cinco. Se seleccionará la opción "Dos". Y si el usuario envía el formulario sin realizar ningún cambio, estará enviando el valor: 2.

Además, desde la versión 1.3 puedes agregar imágenes o íconos a los botones de opción 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 tercer parámetro de configuración del botón de opción. Por ejemplo, si configuramos nuestro componente como:

One
Two|2
Three|3|selected
Four|4|http://example.com/image-4.jpg
Five|5|http://example.com/image-5.jpg|selected

Crearemos cinco botones de opción:

• One : Crea un botón de opción con el valor: 'Uno' y la etiqueta: 'Uno'
• Two|2 : Crea un botón de opción con el valor: '2' y la etiqueta: 'Dos'
• Three|3|selected : Crea un botón de radio con el valor: '3', la etiqueta: 'Tres' y será seleccionado de forma predeterminada.
• Four|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.
• Five|5|http://example.com/image-5.jpg|selected : Crea un botón de opción con el valor: '5', la etiqueta: 'Cinco' y la imagen aparecerá al lado del botón de opción y se seleccionará de forma predeterminada.

Para agregar íconos en lugar de imágenes, solo debes reemplazar las URL de las imágenes por las clases CSS de los íconos. Por ejemplo:glyphicon glyphicon-user , mostrará el icono de usuario. Tenga en cuenta que, de forma predeterminada, la aplicación tiene el conjunto de iconos Glyphicons Pro; sin embargo, puedes usar otros íconos como Font Awesome o DevIcons. Para esto, sólo tienes que agregar las fuentes al tema CSS de tu formulario.

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

Nota: Recuerde que puede mostrar su botón de opción horizontalmente activando el atributo 'en línea'.

- Seleccionar lista

Una Lista de selección es un menú desplegable que permite al usuario seleccionar una o varias opciones, dependiendo de la configuración que elija. La principal diferencia con el componente Botón de opción es que puedes agregar muchas opciones sin cambiar su tamaño. Por lo que se recomienda su uso cuando existen muchas opciones por ejemplo: ¿Seleccionar tu 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 son opcionales.

Por ejemplo, agregue las siguientes "Opciones":

One|1
Two|2|selected
Three|3
Four|4
Five|5

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, enviará el valor de 2.

Seleccionar Lista con grupos de opciones ¶

Para crear un grupo de opciones<optgroup> , incluya el texto entre corchetes dobles, por ejemplo:

[[Swedish Cars]]
Volvo
Saab
[[German Cars]]
Mercedes
Audi

- Campo oculto

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 envían valores predeterminados sin cambiar la interfaz del formulario.

Nota: Puedes 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.

- Carga de archivos

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 de envío detallada. Hay dos detalles que debes 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 archivos permitidos para imágenes son: '.gif, .jpg, .png'. Para modificar el tipo de archivo permitido, debe hacer clic en el componente y en el campo del 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, Tamaño máximo: 10311680 (resultante de la multiplicación de 1024 x 1024 x 5 = 5 MB).

- Fragmento

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

Tenga cuidado al ingresar un código HTML válido; de lo contrario, el Creador de formularios no guardará el formulario y mostrará un mensaje de error indicando 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 el mismo ID.

Para agregar una tabla HTML, ingresar un enlace o mostrar una imagen, primero deberá hacer clic en el botón Pantalla completa. Esto abrirá el editor Wysiwyg sobre el Creador de formularios, por lo que obtendrá más espacio para ingresar todo el contenido necesario. Además, puede hacer clic en el botón Código para mostrar el contenido como código HTML.

Nota: Aunque puedes agregar código CSS y JavaScript en un formulario. No es recomendable hacerlo, en estos casos puedes 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íos y su código podría ser incompatible.

- reCaptcha ¶

El campo reCaptcha es un componente avanzado que le permite utilizar la tecnología de Google para verificar que los usuarios no sean bots y/o spammers. Puedes 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 puedes 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. Por cada salto de página creado, agregará una nueva página. Además, se mostrará un encabezado encima del 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 debes tener en cuenta:

1. El componente Salto de página agrega dos botones para permitir la navegación por el formulario. Puede personalizar el texto en el botón 'Siguiente' o 'Anterior' haciendo clic en el componente.
2. Pasos del formulario: aparece encima del formulario. Ajustes:
   • Haga clic en Pasos del formulario para verificar 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 mostrar solo los títulos o pasos (números).
   • Puede cambiar los números de paso mediante íconos de glifos. Para usar Glyphicons en etapas, debe agregar a cada línea de los campos de Pasos, una barra vertical o tubería seguida de 'icono-[nombre del ícono]'. Por ejemplo, si quiero reemplazar el número 1, lo escribo en la primera línea de Pasos: 'Paso sin título|usuario-icono'. Vaya a Glyphicons para ver el nombre de los íconos que puede usar.
   • Puedes cambiar el diseño de los pasos por una barra de progreso que indica el porcentaje que se ha logrado.
   • Finalmente, puede ocultar los pasos del formulario marcando la opción "Sin pasos del formulario".

Nota: 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".

- Espaciador

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

Opciones:

• Alto : 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, con su John Hancock directamente en el formulario. Por lo tanto, puede capturar de forma segura firmas para contratos, documentos legales y otros formularios en los que necesite un autógrafo físico.

Hay dos detalles que debes tener en cuenta:

1. El componente Firma agrega dos botones para permitir interacciones de Canvas. Puede personalizar el texto de los botones 'Limpiar' y 'Deshacer' haciendo clic en el componente.
2. Configuración de campo: el campo Firma tiene las siguientes opciones especiales:
   • Borrar : Activa/Desactiva el botón "Borrar". Cuando un usuario final hace clic en el botón "Borrar", se eliminará la firma. Y el lienzo quedará limpio para empezar de nuevo.
   • Deshacer : Activa/Desactiva el botón "Deshacer". Cuando un usuario final hace clic en el botón "Deshacer", se eliminará el último trazo de su firma. Puede seguir presionando este botón para deshacer su firma paso a paso.
   • Además, podrás 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 de matriz

El campo Matriz es un componente avanzado que le permite agrupar múltiples 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 opción (por defecto)
• Caja
• Seleccionar lista
• Texto
• Área de texto
• Número
• Rango (control deslizante)
• Correo electrónico
• Tel (teléfono)
• URL
• Color
• Contraseña
• Fecha
• FechaHora-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 campo de Matriz puede tener cualquier cantidad de preguntas (filas) y respuestas (columnas), luego puede establecer diferentes valores para cada respuesta.

Un tipo de entrada especial para la Matriz es Lista de selección, 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.

También puedes hacer preguntas abiertas; con la variación de entrada de texto, cada fila contiene un conjunto de cuadros de entrada de texto. Esta variación se ve y actúa de manera similar al campo de texto. Lo mismo se aplica a otros campos de entrada basados ​​en texto, como un área de texto o campos numéricos.

Una característica especial del campo Matrix es la posibilidad de ocultar las preguntas. Simplemente marque la opción "En línea" y las preguntas desaparecerán. Puede utilizar esta función si solo desea hacer una única pregunta en formato tabular.

Nota : Cuando una tabla es muy grande, necesitaremos agregar la clase "que responde a la tabla" dentro de la configuración "Clase CSS de contenedor".

- Puntuación neta del promotor (NPS)

NPS es probablemente la métrica de satisfacción y lealtad del cliente más importante a seguir y ahora está disponible en iform4u.

iform4u NPS le ayuda a recopilar comentarios auténticos de los clientes, para que pueda comprender realmente el rendimiento de su organización. Es una forma de registrar lo que piensan tus clientes, sus niveles de satisfacción y si te recomendarían.

Pregúntales cosas como:

“En una escala del 1 al 10, ¿qué probabilidades hay de que nos recomiende a sus amigos?”

Esto le brinda información cualitativa sobre "por qué" sus clientes se sienten así, lo que tiende a funcionar mejor que esas encuestas genéricas anuales de satisfacción del cliente.

Este componente le permite personalizar la pregunta, mostrar etiquetas, texto de ayuda y más. Además, se puede mostrar como botones o como botones de radio. Por defecto, el diseño muestra botones. Simplemente elimine la clase CSS: oculta y reemplace la clase CSS del botón con: btn btn-label btn-nps.

- Botón

El campo del botón es un componente que le permite enviar los formularios. Si bien es normal agregar un botón por formulario, nada 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 de forma predeterminada.
• Restablecer : para restablecer el formulario a sus valores predeterminados.
• Imagen : muestra una imagen en el botón y, como Enviar, se utiliza para enviar el formulario. Si utiliza este tipo de botón, deberá 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 utilizar para interactuar con los campos vía javascript.

Puedes agregar un ícono a los botones tipo 'Enviar', 'Reset' y 'Botón', escribiendo en el atributo 'Texto del Botón' la etiqueta del ícono. Por ejemplo:

<span class="glyphicon glyphicon-shopping-cart"></span> Buy Now!

Mostrará su botón con un bonito ícono 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.

Validación de campo

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

La validación de campos es el proceso mediante el cual se verifica que los datos enviados por los usuarios cumplan 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 garantiza que esto suceda.

Debes tener en cuenta que iform4u funciona con campos HTML5 estándar, por lo que siempre puedes consultar la documentación de HTML5 para obtener más información. Además de la validación por tipo, los campos pueden tener otros requisitos, como "Obligatorio" y "Único".

Muchos de estos requisitos son validados en el cliente, por el navegador; pero todos están validados en el servidor, por iform4u.