Introducing Anvil Document AI. Operate faster.Learn more.
Workflows

Add and format explanation text in a Webform

You can create guided experiences for your customers as they’re filling out Webforms with explanation text. Provide instructions, add a visual break between questions, return customized templates and more. While seemingly simple, explanation text can serve as a powerful tool when customizing the Webform filling experience for your customers.

Back to Help Center

Explanation text is exactly what it sounds like- a block of text in a Webform that you can use to provide explanations. So why is it so special? Explanation text fields support Markdown, a formatting language which offers a range of text customization options. You can also reference objects, other Webform fields, and JSON expressions within explanation texts.

All this combined gives you more flexibility when customizing your Webforms and helps you create guided experiences for your customers.

Getting started

Explanation text fields can be added in the same way as any other Webform field. If you need a refresher on how to add a field to a Webform, please see this article first.

Once you have your explanation text field added, there are a couple of field options you can edit, the Content and the Font Size. Any changes you make within the field options will be instantaneous, so you can immediately see what the text looks like in your Webform.

  • Content: Where you input the text you want displayed in your Webform.

    • Formatting needs to be added with Markdown
    • To expand your viewing area, click and drag the bottom right corner of the content section.

    Expand content field by dragging the bottom right corner

  • Font size: Choose between Small, Default, and Large.

    • Applies to the entire contents of the explanation text field
    • Use Markdown to emphasize particular sections within your content, or add multiple explanation text fields if you want parts of your text to be a different font size. Explanation text font size options

Formatting explanation text

Now that you know how to add explanation text to your Webform, let’s dive into formatting your text. Formatting can help emphasize specific points and convey information more clearly. Explanation text fields can be formatted with Markdown.

If you’re not familiar with Markdown, it’s a universal markup language used to format plaintext. Explanation text fields specifically support the following flavors of Markdown:

Emphasis

StyleNotesMarkdown formatting
HeaderAnvil supports Header level 1. Any subsequent header levels are treated the same as H1.# Header
BoldUse two asterisks at each end of the text you want bolded.**bold text**
ItalicUse a single asterisk at each end of the text you want italicized.*italic text*
Bold & italicUse three asterisks at each end of the text you want emphasized.***bolded and italicized***
Nested bold & italicUse a mix of single and double asterisks at each end of your emphasized text.**Bolded sentence with an *italicized* word.**

*Italicized sentence with a **bolded** word.*
StrikethroughUse two tildes at each end of your strikethrough text.~~strikethrough~~

Here's an example of what emphasis formatting looks like in a Webform: Markdown emphasized text formatting on Webforms Emphasis formatting examples in Anvil Webforms: Headers, bold, and italicized text

Lists

StyleNotesMarkdown formatting
Numbered listsUse a number immediately followed by a period then a space to create numbered lists. Numbers don’t need to be in order. You can use the same number throughout your list or mix the numbers out of order and the output will still be in the correct order.1. Item 1
2. Item 2
3. Item 3

1. Item 1
1. Item 2
1. Item 3

3. Item 1
1. Item 2
2. Item 3
Bulleted listsUse an asterisk, dash, or plus symbol to create bulleted lists.* Item 1
* Item 2
* Item 3

- Item 1
- Item 2
- Item 3

+ Item 1
+ Item 2
+ Item 3
Nested ListsBoth ordered and bulleted lists can include nested items. Simply add four spaces in front of your nested item.1. Item 1
    * Nested
2. Item 2
    1. Nested

* Item 1
     * Nested
2. Item 2
     1. Nested

Here's an example of what list formatting looks like in a Webform: Markdown lists rendered on Webforms List formatting options in Anvil Webforms: Numbered, bulleted, and nested lists

Other

StyleNotesMarkdown formatting
HyperlinkAdd square brackets at each end of your text. Immediately follow it with your link wrapped with parenthesis.[text](wwww.useanvil.com)
Horizontal ruleAdd a line break before and after three dashes.---
CodeAdd a backtick at each end of your code. Code will be presented with a different font but the background color doesn't change.`code`

Here's an example of what these other formatting options look like in a Webform: Markdown other formatting options on Webform Other formatting options in Anvil Webforms: Hyperlinks, horizontal rules, and code

References in explanation text

Explanation text fields support object, field, and expression references. This means that you can dynamically customize your Webform to display information like your organization’s name, information input earlier on in the Workflow, and the result of a Webform (forge) expression.

Using references in your explanation fields can help personalize a Webform. Here are some scenarios where you might want to utilize references within your Webform:

  • Including your customer’s company name within an introductory page
  • Displaying information your customer cannot edit in the Webform
  • Providing dynamically calculated cost information for your customer to review
  • Creating custom instructions for different parties, including a specific customer’s title and name

We’ll specifically go over object and field references. For more information about expression references, please see our Advanced JSON Editor guide.

Object references

Objects refer to things like your Organization, a Workflow (weld), a Webform (forge), etc), a Webform submission (submission), and a Workflow submission (weldData).

You can reference different parts of each object depending on what information you want displayed in your Webform.

Objects

In the context of what can be referenced inside of a Webform explanation text field:

  • Organization: Synonymous with your company’s account in the Anvil app. Organization details is the second to last option in the main menu bar
  • Workflow (weld): The Workflow that you are actively working with. Workflows is the fourth option from the top of the main menu bar
  • Webform (forge): The Webform(s) included in the Workflow you’re working with.
    • Since Workflows can include multiple Webforms, this refers to the Webform you’re actively adding explanation text to.
    • You cannot reference other Webforms within the Workflow.
    All forges will be listed in order in the forge dropdown menu
  • Webform submission (submission): The result of a completed Webform.
    • Each Webform within a Workflow has its own submission
    • Referenced information will be specific to the particular Webform submission you’re working with.
    Submissions will include all the data captured in the Webform
  • Workflow submissions (weldData): The result of a completed Workflow.
    • This includes all Webform submissions within a single Workflow
    All Workflow submissions will be included in order completed

Types of object references

Here’s a list of the different object parts that you can reference:

  • Name: The name of the object.
  • Slug: A string included in the URL that directs you to the object.
  • EID: A unique 20 alphanumeric character ID associated with the object.
  • ID: A unique numeric ID associated with the object.

Referencing Objects

Every object supports different reference types and references can be formatted as {{object.objectType}}. For example, if you want to reference an organization's name then you would enter {{organization.name}} in your explanation text.

Please note that the Webform editor test mode may not accurately display all object references. Instead, launch a test submission to view the result of your object references.

Here’s a full list of objects and the types of references they support:

  • organization.: name, slug, eid, id
  • weld. (Workflow) : name, slug, eid, id
  • forge. (Webform) : name, slug, eid, id
  • submission. (a Webform’s submission) : eid, id
  • weldData. (a Workflow’s submission) : eid, id

Webform field references

Explanation text also supports Webform field references, which means you can customize your Webforms to include information that your customer inputs in the Webform. While not strictly required, we highly recommend only referencing fields that appear in the Webform before the explanation text field. Otherwise, the reference will appear blank until information is entered in the referenced Webform field.

Webform field references can be formatted as {{forgeID:fieldAlias}}. For example entering {{1234:shortTextFieldAlias}} in your explanation text will display the information entered in your short text field.

Compound field references

Compound field types (e.g. Name, Address, List, etc.), support partial references. This helps if you only want to display parts of the information from a specific field.

To do this, you’ll need to specify the part you want displayed at the end of your field reference with dot notation. Here are some examples of partial field references for compound field types:

Name type fields

Allows for full name, first name, middle initial, and first and second last name references.

Field typeReference formattingOutput
Full name {{1234:nameAlias}}Alex B. Chu Diaz
First name{{1234:nameAlias.firstName}}Alex
Middle initial{{1234:nameAlias.mi}}B
Last name{{1234:nameAlias.lastName}}Chu
Second last name{{1234:nameAlias.secondLastName}}Diaz

Address type fields

Allows for full address, street1, city, state, zip, and country references.

Field typeReference formattingOutput
Full address{{1234:addressAlias}}123 Street Name, City, ST, 45678, USA
Street{{1234.addressAlias.street1}}123 Street Name
City{{1234:addressAlias.city}}City
State{{1234:addressAlias.state}}ST
Zip{{1234:addressAlias.zip}}45678
Country{{1234:addressAlias.country}}US

List type fields

Allows for indexed internal field references. If a List field contains email and phone number fields, you can reference specific email or phone number information entered in the list.

Format partial list field references as {{forgeID:listAlias[indexNum].internalFieldAlias}}. Please note that list index numbering starts at 0, not 1.

If you want to reference the third email in the list, you’d enter {{1234:listAlias[2].listEmailAlias}} in your explanation text.

Tying it all together

You can use a combination of Markdown formatting and references to customize your Webforms. Here’s an example of finishing instructions created with both in a Webform.

Leverage Markdown formatting and references in explanation text

We used the following template to create the example above. You can copy the template into your explanation text and modify to suit your needs:

Congratulations {{1234:customerName.firstName}}, your {{weld.name}} 
is now complete!

Please bring the following items to your appointment: 


* A signed copy of this form 
* A valid passport 
* $20 in cash or cashiers check 
    * If you will be paying with cashier’s check,
      make checks payable to: **{{1234:businessName}}**.
    * We **do not** accept credit card payments
* 2 recent passport photos 
    * Photos must be *(2”x2”)* 

For full instructions and requirements please visit our
[Website](www.websiteexample.com). If you have any 
additional questions before your appointment, please 
email {{1234:businessEmail}} or call {{1234:businessPhone}}. 
Back to Help Center

Other common posts

1 - 0 of 0