Patient Charts

Metaforms supports a wide range of Patient Charts (Patient Forms) for your surveys and can replicate almost any chart format.

It provides features such as Style Tags, loops, hybrid questions, qualifying logic, and custom JavaScript (jQuery) - helping you design complex Patient Charts quickly and efficiently. Metaforms can reproduce the exact chart layout from your questionnaire, or you can customize and enhance the design as needed, even if the original format is not well structured.

Here are a few examples to explore:

1. Patient Chart Created in a Loop (Table Format)

This is a custom Patient Chart that appears in a loop for each qualified patient profile. It displays multiple questions on a single screen in a structured layout, along with the patient’s name and avatar. • A Style tag is created to match the questionnaire layout exactly. • Based on qualifying criteria, hidden questions and loops are generated. • An HTML table is used to organize all questions in the correct cells. • jQuery is added to handle trigger-based logic and validations.

2. Patient Chart with Variable Number of Questions per Row

The example below demonstrates a flexible layout where each row in the table may contain a different number of questions. It includes answer grids within table cells, and each element’s width is carefully managed for a clean, responsive design.

3. Patient Chart with Hybrid Questions and Trigger-Based JavaScript

Example 1

• The first question is a hybrid question with a checkbox in the first column and radio buttons in the remaining columns.

• JavaScript ensures that only the targeted question updates dynamically, without affecting others.

• The last question appears based on the answer to the second-last question, and its text updates dynamically based on the numeric value entered.

• Validation is applied to every optional question.

Example 2

• The checkbox options selected in the second column are automatically reflected in the checkbox question in the third column.


• The FEV1 percentage question appears only if “Yes” is selected in the preceding question.


• Validation is applied to all optional questions.

Example 3

• The fourth row contains hidden cells that only appear when the qualifying checkbox option is selected.

• The cell size automatically adjusts based on the visible content.

Example 4

• This example contains nested JavaScript logic.


• A grid hybrid question is displayed based on the selected answer in the first question.


• JavaScript enables text input only when the checkbox in that row is selected.


• When the first question’s input changes, the hybrid question hides again, and all responses are cleared.

4. Patient Chart with Hybrid Questions Only (No Custom HTML Table)

Metaforms also allows you to create Patient Charts consisting solely of hybrid questions, without using custom HTML tables. These charts usually contain multiple input fields in a single grid cell.



• Multiple questions of various input types are arranged both row-wise and column-wise.


• JavaScript hides unnecessary rows or columns and merges their input fields into the required layout dynamically.

5. Patient Chart with More Than 20 Questions on a Single Page

In the examples below, all questions are displayed on a single screen, following the same sequence and pattern as in the original questionnaire.

Metaforms is highly flexible - whether you’re building a complex chart with nested logic or a simple patient profile grid, you can adapt the structure, styling, and interactivity according to your survey requirements.