Docs

Appearance

HTML Widget ​

Designer › Layout › Widgets › HTML

The HTML widget shows your own content in the form: instructions, a notice, a link, a picture or a table. It can include values from the form's fields, and they update while people fill in the form.

For example: Request: Laptops for new starters (quantity 2), where the title and the quantity come from the item.

Add the widget ​

  1. In the Layout tab, open Widgets on the left.
  2. Drag HTML into a section.
  3. Write the content straight in the widget on the canvas.
  4. Save the form.

The editor has the usual formatting: headings, fonts, colours, alignment, lists, links, images and tables. The code button (Code View) shows and edits the HTML itself.

The properties panel has only the common parts: Title, Label and Field theme.

Show field values ​

Type {{ in the editor and pick a field, or use the field button (Add field token). It shows as a chip with the field's internal name. In the code view it's {{Title}}.

Fields you can use: Text, Multiline text, Number, Currency, Percentage, Choice, Lookup, Person and Group, Yes/No, Date, Date Time and Hyperlink.

In the form, each token shows the field's current value, and changes as people fill in the form:

FieldShows
Date, Date TimeThe date in the site's regional format and time zone
Number, Currency, PercentageThe number formatted as in the field
Yes/NoYes or No
Person and GroupThe name
LookupThe item's label
HyperlinkThe address
Several valuesThe values separated by commas
An empty fieldNothing

Field tokens work the same way in a Header/Footer widget, in the text of a Spacer, in a section's description, on the confirmation screen and in the message of a workflow action's confirmation popup. Where there is no {{ list, type the token yourself, for example {{Title}}. Tokens in square brackets, such as [today] or [editUrl], work only in emails. In the form they show nothing.

The HTML widget in the form: "Request: Laptops for new starters (quantity 2)"

Good to know ​

  • Scripts and event handlers are removed from the HTML. To run code, use a Custom button or a JavaScript rule.
  • Icons from Font Awesome work, for example <i class="fa-solid fa-circle-info"></i>.
  • An empty HTML widget shows nothing in the form.

Related: Layout Tab (Overview).