Step Type: Form
- Updated
A form step allows you to present multiple questions to the user on a single step.
Basic Properties
The form step has the following properties:
| Property | Function | Examples |
|---|---|---|
| Title | The large text displayed at the top. | In the last 7 days… |
| Text | The smaller descriptive text below the title. | Please answer the following questions |
|
Image URL / Upload |
Optional image that will appear below the instructions. If uploading a file from your computer, this will automatically be hosted on CareEvolution's servers. | https://orgimages.careevolutionapps.com/yourimage.png |
| Image Alt Text | Alt text for the included image, for accessibility purposes. | A person with hands on their abdomen, and a distraught facial expression. |
| Optional | Whether the step is optional. If a step is optional, a “skip” button will appear at the bottom of the step and the user will not be required to fill out the step. | |
| Form Items | The questions on the form. | See below |
| Next Button Text | Overrides the default text used for the "Next" button. | Get Started, Proceed, Learn More, Join Now, etc. |
| Footnote |
Optional note that appears at the bottom of the step. Supports Markdown formatting. |
Conditions may apply. |
Form Items
Additionally, you can create any number of form items. Form items have "drag and drop" reordering to allow for easy item rearrangement. Each form item has the following properties:
| Property | Function | Examples |
|---|---|---|
| Identifier | The identifier of the form item. Responses to this question will be stored with this as the key. | SMOKING_YESNO |
| Optional | Whether the form item is optional. Optional form items do not need to be filled out in order for the participant to proceed to the next question. | |
| Hide or Show This Item | Whether the form item is hidden or shown based on previous answers or participant data. See below for more details. |
Never If a condition is met |
| Text | The text of the question | How much pain are you in right now? |
| Position | Where to display the Text relative to the answer field. See below for more details. |
Position: Auto Position: Left |
| Answer Format | How you would like the person to answer the question. Different answer formats have additional options. See Answer Formats. |
Text Choice Date Scale (Discrete) |
Selectively Hide or Show Form Items
You may conditionally hide or show a form item based on the result of a previous answer in this form or survey, participant demographic data, or custom fields.
- Select "Hide" or "Show", and "If a condition is met" to enable selectively displaying or hiding the form item. By default, all items will be "never hidden".
- Select a condition and value from the drop-down menu. This example will show the current form item if the participant answers 'yes' to a previous form item asking if they're a smoker.
- You may use the "AND," "OR," and "NOT" buttons to create more complex conditions. This example will show the current form item if the participant reported to be a smoker AND has Type 1 Diabetes.
Position and Layout Options
Form Items can be displayed in two ways, with the text either above or to the left of the answer field, depending on the answer format. Additionally, you may allow some items to be displayed horizontally depending on screen width.
Position and layout settings have the following properties.
| Property | Function | Examples |
|---|---|---|
| Position | Which position should the Text be displayed relative to the answer field. |
Position: Top Position: Left |
| Allow Horizontal Layout | Whether this item can be displayed in a horizontal layout, i.e., in the same row as other form items, if there is sufficient screen width. If unchecked, form item will fill the width of the screen regardless of size. | |
| Minimum Width | The minimum width, in pixels, that the field can occupy. This is required if Allow Horizontal Layout is checked, and must be between 50 and 680. |
140 250 |
[note] Some answer formats, such as Scale and Weight, have only one available layout position.[/note]
There are numerous ways to configure form item positions depending on your needs. Below are a few quick references for common horizontal configurations, but your configuration may vary depending on the items preceding and succeeding those you would like in a horizontal row. In each case, ensure the "Allow Horizontal Layout" button is checked for all items you are formatting.
- In order to create two equal-size fields in the same row on most phone screens, set both items to a minimum width of 150. Note that on larger screens, if an item directly preceding or succeeding these items is set to a width of less than 350, all three may appear on the same line.
- In order to create two equal-size fields in the same row on wider screens (such as desktop web browsers), but separate rows on a phone screen, set both items to a minimum width of 300.
- In order to create three equal-size fields in the same row on wider screens (such as desktop web browsers), but separate rows on a phone screen, set all three items to a minimum width of 200.
Was this article helpful?