Panel

A Panel is a box that groups fields under a heading. It has three parts - a header, a body that holds the fields, and a footer - each of which can be styled separately, and it can be collapsed so a section of a form takes no room until it is wanted.


Use a Panel where a group of fields needs a title, needs to be visually separated from what is around it, or needs to fold away. A form made entirely of panels is harder to read than one with none, so save them for the groupings that mean something.


Settings

Field Header - The text in the panel's heading band. This is the panel's title, and is separate from Field Label.


Field Footer - The text in the band across the bottom. Leave it blank and no footer is shown.


Field Name - The name used to refer to the panel in conditions and in Set Field Value actions.


Body, Header and Footer

Body Padding - The space between the panel's edge and the fields inside it.


Header Padding and Footer Padding - The space inside the heading and footer bands.


Header Alignment and Footer Alignment - Whether the heading and footer text sit left, center or right.


Header BG Color, Header Text Color, Footer BG Color and Footer Text Color - The colors of the two bands. Leave them blank to use the site's theme, which is the better default because a form styled this way follows any later change to the site's branding.


Shadow Size - None, Small, Medium or Large drop shadow around the panel. A small shadow is a quieter way to separate a panel from the page than a heavy border.


Collapsing the panel

Show Panel Toggle - Adds a control to the heading that folds the panel open and closed. Use it for sections that most people can skip - optional details, notes, an advanced set of questions.


Toggle Alignment - Which side of the heading the toggle sits on.


Toggle Icon - The icon used for the toggle.


Toggle Open Action and Toggle Close Action - A Multi-Action field to run when the panel opens, and another when it closes. This is how opening a section can load what it needs rather than everything being fetched when the form first opens.


To have the panel start collapsed under some circumstances, use the Panel Toggled Closed When condition described in Field Conditions. Unlike hiding the panel, this leaves it on the form so the user can still open it.


Show Panel Close - Adds a close control to the heading that removes the panel from view, with an Action to run when it is used. Use this for a dismissible notice rather than for a section people will want back.


Background

A Panel can be given a background, which is what makes a panel read as a card or a tile rather than as a box.


Background Color - A solid color behind the panel's contents.


Background Image URL - An image behind the contents. Enter an absolute address or a site path; {field} and [variable] tokens are replaced when the form loads, ~/ stands for the site root and [SERVERBANNERURL] is the site's banner image.


Overlay Color and Overlay Opacity - A tint laid over the image so text stays readable against it. Leave the color blank for no overlay. Any photograph used behind text needs one.


Image Size - Cover fills the panel and crops the edges of the image, Contain fits the whole image inside, and Actual size uses the image as it is.


Image Position - Which part of the image is anchored when it is cropped.


Repeat (tile) the image - Tiles a small image across the panel instead of stretching one copy.


Text Color - The default color for the fields inside the panel. A field that sets its own color keeps it. Set this whenever a dark background would otherwise leave dark text unreadable.


Corner Radius - Rounds the panel's corners.


Hide the panel border - Removes the panel's outline, which is usually wanted once it has a background of its own.


Loading

Pre-Load Contents - By default the fields inside a panel are loaded whether the panel is open or not, so they can be read and set before anyone opens it. Turn this off and the contents load when the panel is opened instead. The reason to turn it off is an embedded E-form or a search inside the panel, which should not run until it is actually being looked at.