Custom Look with HTML Code

Use HTML code in your Forms and email templates to customize the look of your Study

You can use HTML code to change the look of question texts, validation rule texts, help texts, information texts, introduction 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  website:  https://www.w3schools.com/html/html_formatting.asp

Examples of HTML Codes commonly used in Greenlight Guru Clinical

Bold, Italic, and Underlined Text

You can surround text with <b></b> (bold), <i></i> (italic) or <u></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

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 text sizes:

Screenshot 2023-09-26 at 11.03.00


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):

Screenshot 2023-09-26 at 11.18.56

Text Color

You can change the color of a text using the following HTML code: <p style="color: ">insert text</p>.

4 examples of text colors:

<p style="color: red;">Greenlight Guru Clinical</p>Screenshot 2023-09-26 at 10.38.36

<p style="color: blue;">Greenlight Guru Clinical</p>  Screenshot 2023-09-26 at 10.40.18

<p style="color: green;">Greenlight Guru Clinical</p>  Screenshot 2023-09-26 at 10.40.43

<p style="color: orange;">Greenlight Guru Clinical</p>  Screenshot 2023-09-26 at 10.41.13

Combine HTML Codes to Increase Size and Change Color

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:

Screenshot 2023-09-26 at 14.40.49

Force Line breaks

You can use the following HTML code to force a line break of a text: <br>insert 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">link text</a> 

Example:

<a href="https://www.smart-trial.com/">Greenlight Guru Clinical 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">link text</a>

Example:

<a href="https://www.smart-trial.com/" target="_blank">Greenlight Guru Clinical 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>

Screenshot 2023-09-26 at 13.01.14

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>

Screenshot 2023-09-26 at 13.02.19

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:

Screenshot 2023-09-29 at 13.45.04

This will open the console where you can insert the HTML code:


Screenshot 2023-09-29 at 13.46.17

2. Insert the HTML code to format the text. Finish by clicking on the "<>" button again:

Screenshot 2023-09-29 at 13.50.54

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. 

Screenshot 2023-09-29 at 13.50.19

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:

Screenshot 2023-09-29 at 15.04.51

 

Example 2: Validation Rule Text

Here the <p style="color: red;></p> code is used to make the validation rule text red:

Screenshot 2023-09-29 at 15.12.11

Screenshot 2023-09-29 at 15.13.00