Use the Start panel in the FormHero Smart Forms platform to welcome respondents and introduce the form.
Use the Start panel to welcome respondents and introduce the form.
Tip You can hide the Start panel if you don’t want to include it. For example, if you’re sending respondents to another form, you could hide the Start panel on the second form.
Open the Start panel
1. Click the Start panel, then click EDIT NODE.
2. The editor appears.
Show/hide the Start panel
Show the Start panel
Select Display Start Node to User.
Hide the Start panel
Clear Display Start Node to User.
Preface
Use the preface to provide a title and introduction.
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.
Add a new section
- Click + beside Preface.
- 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 (☰) beside a section and drag it to a new location.
Remove a section
Click ( 🗑) beside the section you want to remove.
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.
Statement Settings
You can add additional content and choose how respondents advance to the next panel.
Add content
Use the Panel Body HTML section to add content using HTML. This gives you full control to add any HTML elements (such as headings, paragraphs, lists, linked images and webpage links) and format the content using CSS.
Next panel options
Use the Advance to Next Node section to choose how respondents move from the Start panel to the next panel. Respondents can advance by clicking the default button or a custom HTML element, such as an icon.
Use the default button
- Select When default button is clicked.
- To change the Button Label, select the sample text and replace it with your own text.
- To change the Button Color, select the toggle switch, then select a color. You can enter the RGB value or select a color from the color picker.
- To change the Button Text Color, select the toggle switch, then select a color. You can enter the RGB value or select a color from the color picker.
Use a custom HTML element
- Select When a custom HTML element is clicked.
- Enter the class name of the element in the Custom HTML Trigger (CSS Selector) section. The class name must begin with a period (for example, .custom-element).
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.
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. Note that you wouldn’t typically include hint text in the postface/afterword.
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.
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.
2. Select the type of changes you’ve made (Major, Minor or Quick Fix)
3. Add a note describing your changes.
4. Click SAVE.