Show Menu
TEMAS×

Renderización de formularios

Selección de la plantilla de renderización del formulario

La configuración de formulario permite seleccionar la plantilla utilizada para generar las páginas. Para acceder a ellas, haga clic en el botón Settings de la barra de herramientas de detalles del formulario y seleccione la pestaña Rendering . Existe una cantidad de plantillas (hojas de estilo) disponibles de forma predeterminada.
La sección inferior del editor permite ver una renderización de la plantilla seleccionada.
La funcionalidad de zoom permite editar la plantilla seleccionada.
Puede modificar o desactivar estas plantillas. Para ello, haga clic en el vínculo Page layout... y personalice la información.
Se puede:
  • Cambiar la imagen utilizada como logotipo y adaptar su tamaño,
  • Especificar también la ruta para acceder a la imagen de previsualización cuando los usuarios seleccionen esta plantilla de renderización.
La pestaña Headers/Footers permite cambiar la información que se muestra en los encabezados y pies de página de cada página de formulario que use esta plantilla.
Cada línea de las secciones Page headers y Page footers corresponde a una línea de la página HTML. Haga clic en Add para crear una línea nueva.
Seleccione una línea existente y haga clic en el botón Detail para personalizarlo.
Puede cambiar el contenido de la línea, añadir bordes y cambiar los atributos de fuente a través de las pestañas correspondientes. Haga clic en OK para confirmar estos cambios.
Los campos Position permiten definir la posición de los elementos en el encabezado y pie de página de la página.
Las plantillas de renderización se guardan en el nodo Administration > Configuration > Form rendering . Para obtener más información, consulte Personalización de la renderización de formularios .

Personalización de la renderización de formularios

Modificación del diseño de los elementos

Se puede sobrecargar la hoja de estilo para cada elemento del formulario (campos de entrada, imágenes, botones de opción, etc.).
Para ello, utilice la pestaña Advanced .
Permite definir las siguientes propiedades:
  • Posición de la etiqueta : consulte Definición de la posición de las etiquetas ,
  • Formato de etiqueta : Ajuste de palabras o Sin ajuste de palabras,
  • Número de celdas : consulte Colocación de los campos en la página ,
  • Horizontal alignment (izquierda, derecha, centrado) y Vertical alignment (alto, bajo, centrado),
  • Anchura de la zona: esto puede expresarse como porcentaje o en ems, puntos o píxeles (valor predeterminado),
  • Longitud máxima: número máximo de caracteres permitidos (para controles de tipo texto, número y contraseña),
  • Líneas : número de líneas de una zona del tipo Multi-line text .
  • Estilo de línea : permite sobrecargar la hoja de estilos CSS con ajustes adicionales. Estos se separan con caracteres ; como se muestra en el ejemplo siguiente:

Definición de encabezados y pies de página

Los campos se agrupan en una estructura de directorio cuya raíz tiene el mismo nombre que la página. Selecciónela para modificar el nombre.
El título de la ventana se debe introducir en la pestaña Page de la ventana de propiedad del formulario. También puede agregar un contenido definido al encabezado y al pie de la página (esta información se muestra en todas las páginas). Este contenido se introduce en las secciones coincidentes de la pestaña Texts , como se muestra a continuación:

Adición de elementos al encabezado HTML

Puede introducir elementos adicionales para su inserción en el encabezado HTML de una página de formulario. Para ello, introduzca los elementos en la pestaña Header de la página correspondiente.
Esto permite hacer referencia a un icono que se muestra en la barra de título de la página, por ejemplo.

Definición de una configuración de control

Cuando el usuario rellena el formulario, se realiza una comprobación automática de ciertos campos según su formato o configuración. Esto permite hacer que ciertos campos sean obligatorios (consulte Definición de campos obligatorios ) o comprobar el formato de los datos introducidos (consulte Comprobación del formato de datos ). Las comprobaciones se realizan durante la aprobación de la página (haciendo clic en un vínculo o en un botón que habilita una transición de salida).

Definición de campos obligatorios

Para hacer que ciertos campos sean obligatorios, seleccione esta opción al crear el campo.
Si el usuario aprueba esta página sin haber introducido el campo, se muestra el siguiente mensaje:
Puede personalizar este mensaje haciendo clic en el vínculo Personalize this message .
Si el usuario aprueba esta página sin haber introducido el campo, se muestra el siguiente mensaje:

Comprobación del formato de datos

Para las comprobaciones de formularios cuyos valores se almacenen en un campo existente de la base de datos, se aplican las reglas del campo de almacenamiento.
Para las comprobaciones de formularios cuyos valores se almacenan en una variable, las reglas de aprobación dependen del formato de la variable.
Por ejemplo, si crea una comprobación Number para almacenar el número de clientes como se muestra a continuación:
El usuario debe introducir un número entero en el campo de formulario.

Definición de la visualización condicional de campos

Se puede configurar la visualización de campos en la página para que se muestren en función de los valores que el usuario elija. Esto se puede aplicarse a un campo o a un grupo de campos (cuando se agrupan en un contenedor).
Para cada elemento de la página, la sección Visibility permite definir las condiciones de visualización.
Las condiciones pueden afectar al valor de los campos o de las variables de la base de datos.
En la ventana de selección de campos, se puede elegir entre los siguientes datos:
  • El directorio principal contiene los parámetros del contexto del formulario. Los parámetros predeterminados son el identificador (que coincide con el identificador encriptado del destinatario), idioma y origen.
    Para obtener más información, consulte esta página .
  • El subdirectorio Recipients contiene los campos de entrada insertados en el formulario y almacenados en la base de datos.
    Para obtener más información, consulte Almacenamiento de datos en la base de datos .
  • El subdirectorio Variables contiene las variables disponibles para este formulario. Para obtener más información, consulte Almacenamiento de datos en una variable local .
Para obtener más información sobre este tema, consulte el caso de uso disponible aquí: Mostrar diferentes opciones en función de los valores seleccionados .
También puede condicionar la visualización de las páginas del formulario con el objeto Test . Para obtener más información, consulte esta página .

Importación de elementos desde un formulario existente

Se pueden importar campos o contenedores de otros formularios web. Esto permite crear una biblioteca de bloques reutilizables que se insertan en formularios, como el bloque de direcciones, el área de suscripción del boletín informativo, etc.
Para importar un elemento en un formulario, siga los siguientes pasos:
  1. Edite la página en la que desea insertar uno o más elementos y, a continuación, haga clic en Import an existing block en la barra de herramientas.
  2. Seleccione el formulario web que contiene los campos que desea importar y seleccione los contenedores y campos que desea importar.
    El icono Edit link a la derecha del nombre del formulario de origen permite ver el formulario web seleccionado.
  3. Haga clic en Ok para confirmar la inserción.