Reading time 4 mins

Introduction

When you are creating a form, you can include the element "Info". 

This allows you to add some helpful text to a form, such as an explanation, instruction, or a warning. 

As standard, the info fields will appear to the user in the following format:

Should you wish to do so, you can add your own additional formatting to these info boxes using HTML tags.  For example, you may wish to add some bold elements to capture their attention.

Making the text larger - Setting the text as Headers

• You can change the size of the text to standard header options using the <h> tag and adding the header type number to the tag. E.g. <h1>, <h2>, <h3>, <h4> or <h5>. To close the tag, simply put </h1> (or the equivalent header number) at the end of the text. 

• Please examples below and how they appear in the Form Editor.

Setting text as Bold or Italic

• To make text appear in bold or in italics, you can use the following tags (again note the close tags to be used at the end of the text you are formatting).
  • <b>Use this tag to mark text as Bold</b>
  • <i>Use this tag to mark text as Italic</i> 

• You can set the tags partway through a sentence to show only a certain word in bold or italics.

• You can also use more than one tag together, for example, to make a word both bold and in italics:

Setting text colour

• You can make text appear in a given colour using the tag <font color=red> (simply enter the colour you wish to use) 

• To note, in HTML we need to use the American spelling for the word "color"!

• (Again, note the close tags to be used at the end of the text you are formatting </font color>)

• See an example below:

Adding paragraphs

• If you have a large body of text that you would like to use in a form, you may wish to split it into different paragraphs to break the text up a little. You can do this using the <p> tag.

Using bullet points (items in a list)

• If we want to add a list of items we have two options, either an "unordered list" i.e. bullet points, or an "ordered list", i.e. numbered. 

• To set an unordered list use the tag <ul> to indicate the start of an unordered list, and the <li> for each item in the list. E.g. below:
  • <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>

• This will appear as follows in the form editor:

• To set an ordered list use the tag <ol> to indicate the start of an ordered list, and the <li> for each item in the list. E.g., below:
  • <ol> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol>

• This will appear as follows in the form editor.

Adding a link to another website (An optional link)

• If you want users to access another website, then we'd recommend using the Form Editor Elements: Recorded Links (Linking to a document or webpage).

• However, this is a mandatory link, and if the user does not click on it then it won't let them Save and Complete.

• To create an optional link, you can use HTML in an Info box.

• An example:
  • <a href="https://www.gov.uk/coronavirus" target="_blank">Click Here to Access the Latest COVID 19 Updates</a>
    • The items in bold are for you to change to suit your needs.
• Breaking this down:
  • <a href="this is the website address - please copy and paste the full website address in here"
  • target="blank"> this ensures the link opens in a new window or web browser tab
  • the final part is the text you want people to see and click on to be taken to the website</a>

FAQ

Will these HTML tags format the text on external forms?

• Whilst you cannot make the text on external forms larger, bold/italic or change the colour, you can use the above to add paragraphs, create ordered/unordered lists and add links.