Introducción 

Form Builder es una pieza clave de Easy Forms. Es donde se crean y actualizan los formularios. El generador 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 del tema 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 genera con Form Builder. Desde aquí podrás reconocer el ID de cada 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 puedes manipular cada uno de los componentes.

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

• Antecedentes: 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: establece el grosor, el estilo y el color de los bordes alrededor de ciertos elementos de tu formulario.
• Sombras: agrega o elimina una sombra alrededor de tu formulario.
• Botones: Cambia el texto del botón Enviar.
• ¡Y mucho más!

– Agregar un campo

Hay dos formas de agregar un campo:

1. Haciendo 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 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.
   • En el momento de ingresar al área activa del Creador de formularios, un cuadro 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 los popovers.

– Reordenar los campos

Para reordenar un campo (componente):

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

– Arrastre 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 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 caída de columnas”; luego, el generador cambiará automáticamente el tamaño de todos los campos dentro de la zona de caída para crear columnas de igual ancho.

Puedes crear hasta cuatro columnas con este método. Sin embargo, puedes diseñar formularios con/hasta 12 columnas que se adapten perfectamente al espacio disponible en tu sitio web utilizando el Clase CSS de contenedor característica.

– 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ástrelo fuera de la zona activa.
3. Liberar.

Notarás que el componente ha desaparecido.

– Copiar ID de campo

Para copiar el ID del 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 Popover)
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 generador 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 es 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 Easy Forms.
2. Cambiar el diseño del formulario: El diseño del formulario se basa en Bootstrap CSS y se utiliza para localizar 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, puedes usarlo en un formulario de registro de correo, para colocar un campo de correo electrónico y un botón al costado.
3. Deshabilitar elementos de 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 generador de formularios. Sin embargo, tienes otras opciones de configuración mucho más avanzadas que Se puede 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, todas las opciones de configuración se muestran 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. Deberías 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 esto 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 del campo. Por ejemplo, podremos volver a enviar datos POST usando “nombre” o “edad” en lugar de “texto_0” o “número_0”.

– Como botón:

La opción “Como botón” le permite mostrar los campos del botón de radio y los campos de la casilla de verificación como botones.

– Casillas de verificación:

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

Por ejemplo, ingrese al editor Bulk y 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 de 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 finalmente, si el usuario envía el formulario sin realizar ningún cambio, enviará los valores: 2,4.

– Verificar 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 utilizarse 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. De forma predeterminada, 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.

Tú puedes 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 quieres colocar dos campos en dos columnas debes hacer lo siguiente:

1. Agregue la clase CSS del contenedor al primer campo: `col-xs-6
2. Agregue la clase CSS del contenedor 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 preservar el mismo relleno en cada campo.

¡Importante! Puedes ir a la Documentación CSS de Bootstrap para más información.

Nota:

• De forma predeterminada, todos los campos excepto Button vienen con la clase: form-group. Esta clase no se puede editar.
• De forma predeterminada, 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 función 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 de forma predeterminada, 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.

– Discapacitado:

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 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 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, a menudo, se utiliza para dar instrucciones a los usuarios sobre qué incluir en él.

– Colocación de 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 se encuentra en los campos Casilla de verificación y Botones de opción y se utiliza para cambiar la posición vertical de las casillas de verificación o botones de opción a 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’.

– Solo enteros:

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 entero:

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 puedes modificar esta posición cambiando el diseño del formulario.

– Clase CSS de etiqueta:

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 de Bootstrap 3 ‘sr-only’.

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

– Fecha mínima:

Puede definir una fecha como la fecha mínima a tener en cuenta en el proceso de campo de validación. Si el usuario ingresa una fecha anterior, el formulario no se enviará y en su lugar aparecerá un error de validación. Si esta opción no está definida, 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:

Puede definir una fecha como la fecha máxima a tener en cuenta en el proceso de campo de validación. Si el usuario ingresa una fecha posterior, el formulario no se enviará y en su lugar aparecerá un error de validación. Si esta opción no está definida, 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.

– Număr min:

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 esta opción no está definida, esta limitación no existirá.

– Număr maxim:

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 esta opción no está definida, 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 carga un archivo de tamaño menor al que has definido, el formulario no se enviará y, en su lugar, aparecerá un error de validación. Si esta opción no está definida, 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 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 carga un archivo con un tamaño mayor al definido, el formulario no se enviará y en su lugar aparecerá un error de validación. Si esta opción no está definida, 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 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ínimo.

– 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 Archivo.

– Longitud máxima:

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.

– 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últiples en un campo de correo electrónico, puede agregar varias direcciones de correo electrónico válidas separadas por comas. Por ejemplo: ‘name@example.com,name2@example.com’.
• Si se ha habilitado la opción Múltiples en un campo Seleccionar lista, 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 será utilizada en el proceso de Validación del Formulario. La expresión regular utilizada de forma predeterminada 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*$/’.

– Opțiuni:

La opción Opciones solo se encuentra en los campos Seleccionar lista 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, enviará 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 Radio y se utiliza para agregar botones de opción al formulario.

Por ejemplo, si haces clic Editor masivo e ingrese 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, enviará el valor: 2

– Sólo lectura:

Cuando habilita esta opción, el campo se mostrará al usuario pero él 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á recopilado por el Gerente 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.

– Numărul step:

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 enteros’, se recomienda establecer su ‘Número de paso’ en 1.

– Unique:

Esta opción le permite comprobar 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.

Tipos de campos

– Título

Los encabezados se utilizan para marcar secciones del formulario, también para darle un título. Por ejemplo, cuando ingresa al Generador 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 que se utilizan para dar forma a un formulario. Por ejemplo, puedes utilizarlos para invitar a tus usuarios a completar el formulario o dar instrucciones. Cuando ingresas al Creador de formularios para crear uno, verás un párrafo con el texto “Este es mi formulario”. Por favor, rellénelo. ¡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 utiliza para validar datos de forma diferente. Los cinco tipos son:

• Texto: Este es el tipo predeterminado para este componente. Y es uno que se usa comúnmente en 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 muestran automáticamente una paleta de colores cuando haces 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 los datos a recopilar son 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 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 se debe utilizar cuando se desea que el usuario escriba el número. Por ejemplo, podrías 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 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 de números enteros: ¡No se aceptan decimales! También puede configurar el número mínimo y máximo a 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 haciendo clic en el campo. Este componente puede tener 5 tipos diferentes de entrada:

• Fecha: El tipo de entrada a utilizar si desea recopilar fechas. Debes tener el formato: aaaa-mm-dd.
• Fecha y hora local: El tipo de entrada a utilizar si desea recopilar fechas y horas. Los datos recopilados tendrán el formato ISO estándar: aaaa-mm-ddThh:mm:ss.
• Tiempo: El tipo de entrada a utilizar si desea recopilar horas en el formato: hh:mm. Para recopilar segundos en este formato: hh:mm:ss debes establecer un paso de “1” segundo.
• Mes: Este tipo de entrada es compatible con los navegadores modernos y debe utilizarse 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 utilizarse 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 fechas cuando el campo es una fecha. Pero en el futuro todos lo harán. Por ahora, los navegadores que no lo admiten 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. De forma predeterminada, valida que el texto contiene un ‘@’ y un ‘.’ más dos o más caracteres para el dominio de correo electrónico. Además, debes utilizar este campo para enviar notificaciones que tengan los correos de tus usuarios como remitentes (Respuesta a).

Una opción avanzada de este campo es la capacidad 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 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. También puedes cambiar algunas configuraciones. Por ejemplo, puedes cambiar la altura del área de texto para mostrar más espacio a tus usuarios. Para ello, haga clic en el área de texto y cambie 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 a continuación, 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 opción puede estar compuesta por tres partes: Etiqueta, Valor e Imagen. Además, puedes comprobarlos.

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, enviará 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 se marcará 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á 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: ‘Cinco’ y la imagen aparecerá junto a la casilla de verificación y estará marcada de forma predeterminada.

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 icono del usuario. Tenga en cuenta que, de forma predeterminada, la aplicación tiene el conjunto de íconos Glyphicons Pro; sin embargo, puede utilizar otros íconos como Font Awesome o DevIcons. Para ello sólo tienes que añadir las fuentes al tema CSS de tu formulario.

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

Nota: Recuerde que puede mostrar sus casillas de verificación horizontalmente activando el atributo ‘en línea’.

– Botón de radio

Radio Button 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 de 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 ingresa 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, enviará 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 opción con el valor: ‘3’, la etiqueta: ‘Tres’ y se seleccionará 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á junto al botón de opción y será seleccionada de forma predeterminada.

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 icono del usuario. Tenga en cuenta que, de forma predeterminada, la aplicación tiene el conjunto de íconos Glyphicons Pro; sin embargo, puede utilizar otros íconos como Font Awesome o DevIcons. Para ello sólo tienes que añadir las fuentes al tema CSS de tu formulario.

Importante: Para agregar una imagen o un í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 radio es que puedes agregar muchas opciones sin cambiar su tamaño. Entonces se recomienda su uso cuando hay 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 de 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 2.

Seleccione Lista con grupos de opciones

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

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

– Campo oculto

Al agregar un campo oculto al formulario, esto no se mostrará en el formulario. Sin embargo, los campos ocultos son útiles para cálculos matemáticos o para 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 del formulario, por ejemplo para crear reglas condicionales utilizando 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 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 archivos 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 definiendo 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 localice 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 = 5MB).

– 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 darle estilo a su código HTML rápidamente.

Tenga cuidado al ingresar un código HTML válido; de lo contrario, Form Builder 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 a través del generador 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 se recomienda hacerlo, en estos casos puedes crear un tema CSS y/o cargar un archivo javascript externo. Recuerda que el formulario que creaste 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 permite utilizar 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 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 actualizarlo.

– Pausa de página

El campo de salto de página es un componente avanzado que le permite crear formularios de varios pasos o de varias páginas. Por cada salto de página creado agregarás 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 hay que tener en cuenta:

1. El componente Page Break agrega dos botones para permitir la navegación del formulario. Puede personalizar el texto del botón ‘Siguiente’ o ‘Anterior’ haciendo clic en el componente.
2. Pasos del formulario: Aparecer encima del formulario. Configuraciones:
   • 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 que se muestren solo los títulos o pasos (números).
   • Puede cambiar los números de paso mediante íconos de glifos. Para utilizar Glyphicons por etapas, debes agregar a cada línea de los campos Pasos, una barra vertical o tubería seguida de ‘icon-[nombre del ícono]’. Por ejemplo, si quiero reemplazar el número 1, lo escribo en la primera línea de Pasos: ‘Untitled Step|icon-user’. Vaya a Glyphicons para ver el nombre de los íconos que puede usar.
   • Puedes cambiar el diseño de los pasos de una barra de progreso indicando el porcentaje que se ha alcanzado.
   • 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.

Opțiuni:

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

– Firma

El componente Firma permite a sus usuarios finales firmar su formulario – ya sea con el mouse o el dedo en un iPad/teléfono inteligente – su John Hancock directamente en el formulario. De esta forma, podrás capturar de forma segura firmas de contratos, documentos legales y otros formularios en los que necesites un autógrafo físico.

Hay dos detalles que hay que tener en cuenta:

1. El componente Firma agrega dos botones para permitir interacciones de lienzo. Puede personalizar el texto en los botones ‘Limpiar’ y ‘Deshacer’ haciendo clic en el componente.
2. Configuración del campo: El campo Firma tiene las siguientes opciones especiales:
   • Claro: Habilitar / Deshabilitar el botón “Borrar”. Cuando un usuario final hace clic en el botón “Borrar”, se eliminará la firma. Y el lienzo estará limpio para empezar de nuevo.
   • Deshacer: Habilitar / Deshabilitar 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, puedes definir el ancho y altura del lienzo, el color del lápiz, así como cambiar el texto de los botones entre otras configuraciones comunes.

– Campo matricial

El campo Matrix 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 matricial con los siguientes tipos de entrada:

• Botón de radio (predeterminado)
• Checkbox
• Seleccionar lista
• Texto
• Área de texto
• Número
• Rango (deslizador)
• Correo electrónico
• Tel (Teléfono)
• URL
• Color
• Contraseña
• Fecha
• Fecha y hora local
• Tiempo
• Mes
• Semana

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

Un campo Matrix puede tener cualquier número de preguntas (filas) y respuestas (columnas), luego puedes establecer valores diferentes para cada respuesta.

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

También puedes hacer preguntas abiertas; con la variación 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 en el campo Matrix es la capacidad 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 realizar una única pregunta en formato tabular.

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

– Puntuación neta de promotores (NPS)

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

Easy Forms NPS le ayuda a recopilar comentarios auténticos de los clientes, para que realmente comprenda cómo se desempeña 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 de 1–10, ¿qué probabilidades hay de que nos recomiendes a tus amigos?”

Esto le brinda una visión cualitativa de “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 opción. De forma predeterminada, 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.

– Campo repetidor

El campo Repetidor dentro del generador de formularios es un componente potente que le permite agregar dinámicamente múltiples conjuntos de campos anidados (subcampos). Básicamente, le permite crear una “plantilla” de campos (por ejemplo, un campo de texto, un campo de correo electrónico o un campo de fecha) y luego permite que el rellenador del formulario “repita” todo ese grupo tantas veces como sea necesario.

El componente Repetidor es altamente configurable, lo que le permite controlar no solo los campos repetidos en sí, sino también el comportamiento general y la apariencia de la sección repetible.

Configuración general del campo

• Etiqueta: El título principal que se muestra para toda la sección del repetidor (por ejemplo, “Invitados”, “Miembros”).
• Texto de ayuda: Información adicional o instrucciones para guiar al usuario sobre cómo utilizar el repetidor.
• Clases CSS: Clases CSS personalizadas para diseñar el contenedor del campo repetidor para que coincida con el diseño de su sitio web.
• Min: Si el formulario comienza con una o más filas repetidas vacías de forma predeterminada. Es el número mínimo de secciones repetidas que un usuario debe agregar (por ejemplo, “al menos un invitado”).
• Máximo: El número máximo de secciones repetidas que un usuario puede agregar (por ejemplo, “hasta 5 habilidades”). Dejar esto vacío significa 1 repetición.
• Texto del botón “Agregar”: El texto que se muestra en el botón que agrega una nueva sección repetida (por ejemplo, “Agregar otro invitado”, “Agregar más”).
• Texto del botón “Eliminar”: El texto que se muestra en el botón que elimina una sección repetida (por ejemplo, “Eliminar”, “Eliminar”).
• Clases CSS de botones: Las opciones para la aparición de los botones “Agregar” y “Eliminar”.

Campos anidados (subcampos) dentro del repetidor

Aquí es donde reside el núcleo de la potencia del repetidor.

Puede agregar casi cualquier tipo de campo de formulario estándar al repetidor y luego configurar cada uno de ellos individualmente:

• Entrada de texto: Para texto de una sola línea (por ejemplo, “Nombre”, “Ciudad”).
• Área de texto: Para texto de varias líneas (por ejemplo, “Descripción”, “Comentarios”).
• Campo numérico: Para entrada numérica (por ejemplo, “Edad”, “Cantidad”).
• Campo de correo electrónico: Para direcciones de correo electrónico.
• Campo de número de teléfono: Para números de teléfono.
• Selector de fecha: Para seleccionar fechas (por ejemplo, “Fecha de inicio”, “Fecha de finalización”).
• Selector de tiempo: Para seleccionar horarios.
• Menú desplegable/Seleccionar: Para opciones de opción única de una lista predefinida.
• Botones de radio: Para opciones de opción única con botones visuales.
• Casillas de verificación: Para opciones de opción múltiple.
• Campo URL: Para direcciones de sitios web.
• Campo oculto: Para valores privados y ocultos.

Para cada uno de estos campos anidados, normalmente puedes configurar:

• Etiqueta: La etiqueta para el campo individual (por ejemplo, “Nombre del invitado”).
• Marcador de posición: Texto de sugerencia que se muestra dentro del campo de entrada.
• Valor predefinido: Un valor precargado.
• Requerido: Si el campo debe completarse antes del envío.
• Único: Verificar si la información ingresada en este campo no ha sido enviada previamente
• Clases CSS: Para cada estilo de campo anidado.

– Botón

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 de forma predeterminada.
• Restablecer: Para restablecer el formulario a sus valores predeterminados.
• Imagen: Muestra una imagen en el botón y, al igual que 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 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> Buy Now!

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

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

Validación de campo

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 ciertos requisitos. Por ejemplo, a 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 Easy Forms funciona con campos HTML5 estándar, por lo que siempre puedes ir a la documentación HTML5 para obtener más información. Además de la validación por tipo, los campos pueden tener otros requisitos, como ‘Requerido’ y ‘Único’.

Muchos de estos requisitos son validados en el cliente, por el navegador; pero todos son validados en el servidor, por Easy Forms.