Toggle menu

Alert Box

The alert box field lets you display a message on your form. The message can be shown or hidden in the same way as any other field. The text can be updated dynamically by changing the field's value.

The styling for each of the alert "types" and "styles" is provided by your site's CSS, which will give you a consistent look and feel across all of your forms.

Properties

LabelDescriptionType Name
TitleTitles are displayed in an h2 element. Although optional, the title should include headings like "success" so that you are not relying on colour alone to convey meaningTITLE
TextThe alert text to be displayed. By default, plain text is assumed. If you want to include HTML markup set the Allow HTML setting below to true.

The value of another field can be used by adding the field's name between # characters. The referenced field should have a value at the time the alert box field is rendered.

You can update the text dynamically by updating the field's value
TEXT
TypeEither Info, Success, Warning or Error. These values correspond to the CSS classes alert , alert--successalert--warn and alert--error. See below for examplesALERTTYPE
Alert StyleEither Standard or Contrast. Contrast adds alert--contrast to the CSS class. See below for examplesALERTSTYLE
Show Close ButtonIf true a close button will appear in the alert box. Closing an alert dismisses itSHOWCLOSEBUTTON
Allow HTMLWhether HTML markup should be allowed. By default the alert text is treated as plain textALLOWHTML
ShowDetermines when the alert should be output. The following options are available:

Always - the field will always be output
Form - the field will only be output when the page HTML is being rendered on the site (in "standard" mode)
Summary (Email) - the field will only be output when the page HTML is rendered in read-only mode, without controls, for example in emails
SHOW
Default FunctionA JavaScript function you can use to calculate the starting field value. This function is executed server-side when the field HTML is generated. See Common Field Properties for an exampleDEFFUNC
HandlersA JavaScript function that is executed browser-side whenever the page loads or the field value changes. See Common Field Properties for an exampleHANDLERS
Additional Styling ModifierAn optional CSS modifier for the field. See Common Field Properties for an exampleADDITIONALSTYLINGMODIFIER
DocumentationAdd documentation to your field to help explain any complex functionality to future users. You might include information on what the field does and how it relates to other fields on the form. Notes added here are only ever visible in the Forms Designer, they can be searched for, viewed and downloaded from the action panel. See Common Field Properties for an exampleDOCUMENTATION

Examples

This form shows the four types in each style. The title properties have been used to provide headings.

Share this page

Facebook icon Twitter icon email icon

Print

print icon