You can use HTML code to change the look of question text, validation rule text, help texts, information texts, and email body (in Subject Events). You can for example change the color, size, or force a line break, and insert hyperlinks.
This article describes examples of HTML codes commonly used in Greenlight Guru Clinical. It also describes how to insert the HTML codes in different text fields. For more information and examples of common HTML code styles, you can also visit the following websites:
- https://www.w3schools.com/html/html_formatting.asp
- https://www.websiteplanet.com/blog/html-guide-beginners
Examples of HTML Codes commonly used in Greenlight Guru Clinical
Bold, Italic, and Underlined Text
You can surround text with <b>TEXT</b> (bold), <i>TEXT</i> (italic) or <u>TEXT</u> (underlined).
<b>Greenlight Guru Clinical</b> Greenlight Guru Clinical
<i>Greenlight Guru Clinical</i> Greenlight Guru Clinical
<u>Greenlight Guru Clinical</u> Greenlight Guru Clinical
Change the Text Size
The text size can be changed by adding <h> in front of the text and </h> after the text. "h" stands for heading and a number should be added in order to specify the type/size of the heading.
3 examples of sizes for text:
<h1>Greenlight Guru Clinical</h1>
<h2>Greenlight Guru Clinical</h2>
<h3>Greenlight Guru Clinical</h3>
These HTML codes will result in the text with the following sizes, respectively.
You can also specify the text size using the following HTML code: <p style="font-size: px">insert text</p>.
3 examples of text sizes (20px, 30px, and 40px):
Change the Color of the Text:
To change the color of a text the following should be inserted as a HTML code, e.g. style="color: red;"
HTML code for a few colours:
<p style="color: red;">Greenlight Guru Clinical</p>
<p style="color: blue;">Greenlight Guru Clinical</p>
<p style="color: green;">Greenlight Guru Clinical</p>
<p style="color: orange;">Greenlight Guru Clinical</p>
Change the Size and Color of the Text
It is also possible to change both the colour and size at the same time using the following HTML code: <h style="color: insert color;">insert text</h>
Examples:
Line breaks
You can use the following HTML code to force a line break of a text: <br>TEXT</br>
The text in between <br> and </br> will be forced down to the next line.
If the text should be forced down multiple lines, you can add a <br> to the HTML code.
Examples:
Two lines down: <br><br>insert text</br>
Three lines down: <br><br><br>insert text</br>
Insert Hyperlinks
You can insert a hyperlink using the following HTML code: <a href="url">TEXT</a>
Example:
<a href="https://www.greenlight.guru/">Greenlight Guru Website</a>
If the hyperlink automatically needs to be opened in a new browser tab, use the following HTML code: <a href="url" target="_blank">TEXT</a>
Example:
<a href="https://www.greenlight.guru/" target="_blank">Greenlight Guru Website</a>
Left/Right Align Text
You can left or right-align texts using the following HTML code:
<p style="text-align:left/right;">insert text</p>
Examples:
<p style="text-align:left;">Greenlight Guru Clinical</p>
<p style="text-align:right;">Greenlight Guru Clinical</p>
Make Unordered (Bullet) List
You can insert an unordered list using the following HTML code:
<ul><li>Option 1</li><li>Option 2</li><li>Option 3</li></ul>
The <ul></ul> defines that this should be an unordered list and the <il></il> defines each group of the list.
Example:
<ul><li>Treatment A</li><li>Treatment B</li><li>Treatment C</li></ul>
Make Ordered (Numbered) List
You can insert an ordered list using the following HTML code: <ol><li>Option 1</li><li>Option 2</li><li>Option 3</li></ol>
The <ol></ol> defines that this should be an ordered list and the <il></il> defines each group of the list.
Example:
<ol><li>Treatment A</li><li>Treatment B</li><li>Treatment C</li></ol>
Add Image in Information Text Field
To add an image to an information text, you must change your image into an URL and use the following HTML code:
<p><img src="INSERT URLs" alt="INSERT DESCRIPTION" width="xxx" height="xxx"></p>
How to Insert HTML Codes in Greenlight Guru Clinical
Introduction Texts and Information Texts
HTML codes are inserted in the same way for introduction texts and information texts:
1. Click on the "<>" button:
This will open the console where you can insert the HTML code:
2. Insert the HTML code to format the text. Finish by clicking on the "<>" button again:
In this example, the <h3></h3> code is combined with the <p style="color: green;"></p> code to make the text bigger, bold, and green.
Other Text Fields
Other text fields are for example: question texts, help texts, validation rule texts, and email texts. For such text fields, the HTML code has to be inserted directly in the text field. The HTML code will only activate once the form is "in use" i.e. when it is previewed or answered in a study in test mode or data collection mode.
Example 1: Question Text
Here the <u></u> and <b></b> codes are used to make sections underlined and bold, respectively:
Example 2: Validation Rule Text
Here the <p style="color: red;></p> code is used to make the validation rule text red:
Help Videos
The video below demonstrates how to insert an image into an information text field: