When you are creating a form, you can include the element "Info".
This allows you to add some helpful text to a form, perhaps 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
- Setting text as Bold or Italic
- Setting text colour
- Adding paragraphs
- Using bullet points (items in a list)
- Adding a link to another website (An optional link)
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 some examples 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 some 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>