Page Comparison

The Rich Text Editor available in the Field Label and other locations in REDCap provides point and click menu functionality to change the formatting of fields and surveys.  The variety of fonts, sizes, colors and other functionality, however, are limited.

REDCap allows the use of some HTML and CSS in the Field Labels, Field Notes, Multiple Choice coding, and other locations.  HTML and CSS allows access to a wide variety of functionality to change the look and feel of surveys.  For example, here is a full list of named colors you can access!

Some basic information about HTML:

• HTML works by enclosing the text you want to format with HTML "tags".
• The tags can be included in your Section, Descriptive, Question and/or Answer texts.
• A tag is a type of instruction or command that will change the appearance of text as well as perform other functions on your REDCap forms because they are web pages.
• The tags are enclosed with greater and less than < brackets > and may be written in capital and lower case letters.
• You need to both open a tag and close it.
• You close it with the same tag but add a /

Example < center > centering text < /center >. *Do not leave spaces in tags when using the actual tag - see below for examples.

The REDCap rich text editor allows you to change

Check out this example survey for formatting ideas: https://redcap.vanderbilt.edu/surveys/?s=JA3AXMHYC7

W3 Schools also has great resources for HTML and CSS

Styles of Fonts with HTML

...

<strong>This text is bold.</strong>

...

When you use the HTML code, <strong>Insert text here.</strong> , this will be produced. 

...

<em>Do this and your text will be in italics style.</em>

When you use the HTML Code, <em>Insert text here.</em>, this will be produced.

<em>Do this and your text will be in italics style.</em>

Bold and Italics 

To make a format italics and bold, you will use the HTML code:

<strong><em>To get your text italics and bold, do this.</em></strong>

When you use the HTML Code, <strong><em>Insert text here.</em></strong>, this will be produced. 

...

<font color="red">This color will be red.</font>
<font color="purple">This color will be purple.</font>
<font color="green">This color will be green.</font>
<font color="blue">This color will be blue.</font>

...

When you use the HTML code <font color="any color">Insert text here.</font>, you can get any color you want with the font.  Here is a full list of named colors.

<font color="red">This color will be red.</font> 
<font color="purple">This color will be purple.</font>
<font color="green">This color will be green.</font>
<font color="blue">This color will be blue.</font>

...

<div style="font-size: 10pt">This is how you change the size of the font.</div>
<div style="font-size: 14pt">This is how you change the size of the font.</div>
<div style="font-size: 20pt">This is how you change the size of the font.</div>
<div style="font-size: 22pt">This is how you change the size of the font.</div> 

When you use the HTML code <font size="any number">Insert text here.</font>, you can get any 

<div style="font-size: 10pt">This is how you change the size of the font.</div>
 
<div style="font-size: 14pt">This is how you change the size of the font.</div>
 
<div style="font-size: 20pt">This is how you change the size of the font.</div>
 
<div style="font-size: 22pt">This is how you change the size of the font.</div> 
 

Background Class Colors with CSS

REDCap's css includes some familiar background-colored warning boxes. Here is an example where a descriptive text question is used as a warning when someone tries to collect another time point in a longitudinal study without checking the enrollment status of the participant first. The code presented below is placed in the Field Label column (column E) in your data dictionary, or the Field Label box in the Online Designer.

Image RemovedImage Added

The code looks like: (please note that the code should all be place as a single line)

<div class="red" style="text-align:center;">
<h3 style="text-align:center;">Participant is not ACTIVE</h3>
Please review participant status form before continuing.
</div>

Copy and paste single line of the code below directly in the Field Label cell or your Online Designer
<div class="red" style="text-align:center;"><h3 style="text-align:center;">Participant is not ACTIVE</h3>Please review participant status form before continuing.</div>

Image Added

You can also use "yellow" and "green".

Image Added

 Image Added

Highlight a sub-section within a larger section with CSS

This can be used to highlight or distinguish sub-sections within a larger section, without using the Section Header column. This is a 'descriptive' field.

Image RemovedImage Added

The code looks like:

<div class="red" style="text-align:center;">
<h3 style="text-align:center;">Participant is not ACTIVE</h3>
<table width="100%" bgcolor="CCFFCC"><tr><td>OCT Tumor</td></tr></table>
Please review participant status form before continuing.
</div>

The line of code added is:
<table width="100%" bgcolor="CCFFCC"><tr><td>OCT Tumor</td></tr></table>

You can use standard colors ("red", "yellow", "green", "blue", etc.), or hexadecimal color codes (link to more html colors)

Smaller italic text for additional data in a question with CSS

Here is a common one for adding some meta-data to a question.

Image Removed

The code looks like:

...

)

...

Text in a box and colored, centered, larger text using H3 with CSS

Image RemovedImage Added

The code looks like: (with some extra carriage returns so it doesn't scroll so far to the right)

<p style="border:1px solid black;padding:2px;">
<span style="display:block;border:1px solid grey;padding:10px;font-size: 125%;">
I am going to ask you a few questions to determine whether you are eligible to be in the study. 
<span style="font-weight: normal; font-style:italic;">
[Interviewer: Ask all questions without stopping until you reach "Determine Eligibility before continuing!"]
</span></span></p>
<h3 style="text-align: center; color: #800000;">Identifying Information</h3>
1. Name:

...

Highlighting 

Image RemovedImage Added

The code looks like:

Demographics<div style="width: 100%; background-color: #fffacd; padding: 5px; position: relative; top: -5px; left: -5px;">Demographics Information<br />
 
<div style="width:100%; color:#FFF; background-color:#F00; padding:5px; position:relative; top:-5px; left:-5px;">Confidential</div></div>

...

The code looks like:

...

<div class="green">Full Name</div> 

...