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. To do this, click the Page layout... link and personalize the information.
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.
Each line of the Page headers and Page footers section corresponds to a line in the HTML page. 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.
Rendering templates are stored in the Administration > Configuration > Form rendering node. 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:
  • Label format : Ajuste de palabra o sin ajuste de palabra,
  • Number of cells :: consulte Colocación de los campos en la página ,
  • Horizontal alignment (Izquierda, Derecha, Centrado) y Vertical alignment (Alta, Baja, Media),
  • Width de la zona: esto puede expresarse como porcentaje o en ems, puntos o píxeles (valor predeterminado),
  • Maximum Length : Maximum number of characters allowed (for Text, Number and Password type controls),
  • Lines :: número de líneas para una zona de Multi-line text tipo,
  • Style inline :: le permite sobrecargar la hoja de estilo 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:
You can personalize this message by clicking the Personalize this message link.
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. Click Ok to confirm insertion.