Miniform panel

Learn how to use miniform panels to add questions to your Smart Form.

Organize your questions using Miniform panels. A Miniform can contain a single question or a set of related questions. For example, you could group questions about the respondent’s contact information on the same Miniform. You can also use a Miniform to simply present information or instructions.

Respondents will progress through the Miniforms in the order you specify. You can also use logic branches to direct respondents to different Miniforms based on their answers.

Add a Miniform panel

1. Drag a Miniform from the sidebar and drop it on an arrow between two existing panels.

drag-node-01

 

To add your first Miniform, drop it between the Start and Submission panels. As you continue to build your form, you can place Miniforms between any of the existing panels. For example, you could place a new Miniform in the middle of your form.

drag-node-03

 

The editor appears when you drop the Miniform.

miniform-editor

Tip  If you don’t want to customize the Miniform right now, click Apply to simply add the Miniform to the form. When you’re ready to work on it, click on the Miniform in the the workspace, then EDIT NODE.

Preface

Use the preface to provide a title and introduction. You can also include questions in the preface.

Customize the default sections

By default, the preface contains a title (h1) and introduction (h3) with some sample text. You can use these sections or add your own sections. To use the existing sections, select the sample text and replace it with your own text.

miniform-preface-01

 

Add a new section

1. Click + beside Preface.

2. Select the type of section you want to add.

Heading 1, Heading 2, Heading 3
Add a first-level, second-level or third-level heading.
Rich Text 
Add a paragraph. You can format the text using options such as bold, italic, bullets and numbering. You can also insert webpage links.
Raw HTML 
Add content using HTML. This gives you full control to add any HTML element (such as headings, paragraphs, lists, linked images and webpage links) and format the content using CSS.
Image 
Upload an image. Note that the image is converted to a Base64 encoded string and is stored in the form template. This can significantly increase the form size if you add a lot of images, making it difficult for users to access your form on a mobile device or when using a slower network. As an alternative, use Raw HTML and link to a hosted image instead.
Hint Text 
Add content formatted as hint text. Note that you wouldn’t typically include hint text in the preface.

Rearrange the sections

Click (☰) and drag the section to a new location.

miniform1

Remove a section

Click  ( 🗑) beside the section you want to remove.

miniform2

Note the simplicity of adding and deleting sections.

Change the panel label

You can use the section used to label the panel in the workspace. If you’ve used the same first section in multiple panels, you may want to use a different label so you can tell them apart.

1. Click ( 🏷️) beside Preface

2. Select the label you want to use.

Fields

Use fields to add one or more questions to a panel. For example, use a Short Text field if you want respondents to enter their name.

Add a field

miniform-add-03

 

1. Click + beside Fields and select a field type.

miniform-add-02

 

2. A new question (with sample text) is added to the Fields section. Click  to expand the field settings.

miniform-add-03

 

3. Enter the field options. The options are different for each type of field.

    1. Short Text
    2. Long Text
    3. E-mail
    4. Number/Amount
    5. Checkbox
    6. Multi-Checkbox
    7. Legal
    8. Dropdown
    9. Date
    10. Combobox/Autocomplete
    11. Tiered Selector

 

Arrange fields

Arrange the fields in the order you want the questions to appear on the panel.

To move a field, click (☰) beside the field and drag it to a new location.

fields-rearrange

 

Not Applicable/Skip

If there are no required fields on the panel, a Not Applicable/Skip button is shown. Respondents can click this button to advance to the next panel without completing the questions on the current panel.

To make a field required, slide the "Make this field required" option to 'on'.

Screen Shot 2019-08-30 at 2.41.01 PM

Customize the button label

Select the existing text and replace it with your own text.

Left-side and Right-side Content

Use the left-side and right-side content sections to add content (such as text or images) to the left or right side of the panel.

 

left-and-right-side-content-example

 

 

Tip  This content will only be shown on the current panel. Use the smart form options to add a side panel to the entire form.

Add left-side or right-side content

Enter HTML content in the Left-side Content or Right-side Content box. You can use CSS to set the content width and position and to style the content.

Postface/Afterword

Use the postface/afterword to add text at the end of the panel.

Add a new section

1. Click (+) beside Postface/Afterword.

2. Select the type of section you want to add.

Heading 1, Heading 2, Heading 3 Add a first-level, second-level or third-level heading.
Rich Text  Add a paragraph. You can format the text using options such as bold, italic, bullets and numbering. You can also insert webpage links.
Raw HTML  Add content using HTML. This gives you full control to add any HTML element (such as headings, paragraphs, lists, linked images and webpage links) and format the content using CSS.
Image  Upload an image. Note that the image is converted to a Base64 encoded string and is stored in the form template. This can significantly increase the form size if you add a lot of images, making it difficult for users to access your form on a mobile device or when using a slower network. As an alternative, use Raw HTML and link to a hosted image instead.
Hint Text  Add content formatted as hint text; it appears at the bottom of the field. Note that you wouldn’t typically include hint text in the postface/afterword.Screen Shot 2019-08-30 at 2.55.49 PM

 

Info-bubble HTML can be used to give users additional details and context into the information the information needed when the user hovers over the 'i' icon.Screen Shot 2019-08-30 at 2.54.32 PM

 

Rearrange the sections

Click (☰) and drag the section to a new location.

Remove a section

Click  ( 🗑) beside the section you want to remove.

Save the panel

When you’re done adding content, be sure to save both the panel and the smart form.

Save the panel

Click Apply.

 

miniform-save

 

 

Important  Do not click X in the top-right corner or the panel won’t be saved.

Save your smart form

Be sure to save your smart form often so you don’t accidentally lose your work. Any unsaved changes will be lost if you close your smart form or your web browser.

1. Click SAVE.

 

form-save

2. Select the type of changes you’ve made (Major, Minor or Quick Fix)

3. Add a note describing your changes.

4. Click SAVE.