REDCap: Using HTML to Edit Field Labels
NOTE: A newer version of REDCap now includes a 'Rich Text Editor' feature. This feature is an easier way to add HTML to your field label and should be used when possible. Some 'quick use' buttons (like underline) are not included in this feature, so you may still use the HTML examples below. We recommend adding the HTML to the 'Source Code' area within the Rich Text Editor as this keeps your Field Label area cleaner (don't see the HTML).
What is HTML?
HTML stands for "Hyper Text Markup Language" and is a simple programming language for describing web pages in ordinary text. HTML uses "tags" to describe the behavior you would like to show on the page. Tags are like keywords and are sandwiched between less-than and greater-than symbols "<>" that tells the browser to display content in a particular way. For example, in "<u>" the u is a tag in HTML that tells the browser to underline the text. The majority of tags consist of two parts: the opening and closing tags. These tell the browser where to start and stop the customization. A closing tag is indicated by using a forward slash symbol directly after the less-than symbol "</ >". In the "underline" example, everything between the opening tag and the closing tag will be displayed as underlined.
How to use HTML in REDCap to Edit Field Labels
- When adding a new field or editing an existing one, the Field Editor will pop up.
- You can then add HTML code to the Field Label text box to edit its formatting.
Click a button below to see more HTML uses:
Unbolding Text
Field Labels are automatically bolded. To unbold certain field text...
HTML Code: <span style="font-weight: normal;">TEXT TO BE EDITED</span>
Example: Weight <span style="font-weight:= normal;"=>(kilograms)</span>
Result: Weight (kilograms)
Italicizing Text
HTML Code: <i>TEXT TO BE EDITED</i>
Example: What is your <i>favorite</i> color?
Result: What is your favorite color?
Underlining Text
HTML Code: <u>TEXT TO BE EDITED</u>
Example: What is your <u>favorite</u> color?
Result: What is your favorite color?
Centering Text
HTML Code: <center>TEXT TO BE EDITED</center>
Example: <center>Centered Text</center>
Result:
Indenting Text
HTML Code: <div style="padding-left:2em">TEXT TO BE EDITED</div>
Example: <div style="padding-left:2em">Indented Text</div>
Result:
Coloring Text
HTML Code: <font color="CHOOSE COLOR">TEXT TO BE EDITED</font>
Example: <font color="red">Provide a description of the adverse event:</font>
Result: Provide a description of the adverse event:
Instead of "red", you can also type "orange", "yellow", "blue", "green", "violet", "pink", "gray", or use the codes from this website for an expansive list of colors.
Hover Text
HTML Code: <acronym title="HOVER TEXT">ACRONYM</acronym>
Example: <acronym title="Body Mass Index">BMI</acronym>
Result: BMI
Important Text
HTML Code: <center><div class="red"><b>TEXT TO BE EDITED</div class="red"></center>
Example: <center><div class="red"><b>Is subject eligible for study?</div class="red"></center>
Result:
Creating Headings
HTML Code 1: <h1>TEXT TO BE EDITED</h1>
HTML Code 2: <h2>TEXT TO BE EDITED</h2>
HTML Code 3: <h3>TEXT TO BE EDITED</h3>
Changing Font Sizes
HTML Code: <div style="font-size: XXpt">TEXT TO EDIT CHANGED TO FONT XX</div>
Example:
<div style="font-size: 10pt">Font changed to size 10.</div>
<div style="font-size: 20pt">Font changed to size 20.</div>
Result:
You can use any size font you want, just replace the XX in the sample code above with whichever size fits
Link to a Webpage
HTML Code: <a href="INSERT LINK">Words/link to be displayed</a>
Example: <a href="https://kb.wisc.edu/ictr/92573">Using HTML</a>
Result: Using HTML
To have your link open to a new page or tab, include Target="_blank" in your HTML.
HTML Code: <a href="INSERT LINK" Target="_blank">Words/link to be displayed</a>
Example: <a href="https://kb.wisc.edu/ictr/92573" Target="_blank">Using HTML (New Page)</a>
Result: Using HTML (New Page)
Creating an Email Link
HTML Code: <a href="mailto:email@example.com">Email/Name to be displayed</a>
Example: <a href="mailto:redcap@ictr.wisc.edu">REDCap Support</a>
Result: REDCap Support
Creating Line Breaks in Field Notes
When creating Field Notes for reminder text displayed underneath your field, you are unable to press 'Enter' to create a new line. When you type in the Field Notes textbox, it automatically converts it into a paragraph.
If you want to start a new paragraph/line, use the <br> code. For example, if you have a numbered list, typing <br> before each number will enter that number on a new line.
More Advanced Uses of HTML for REDCap:
Changing the Direction of Matrix Headers
When creating a Matrix of Fields, the column headers are automatically lined horizontally. See the example below:
If you want to change the column headers to the diagonal position, Follow these steps:
- Type the code below in place of each choice in the Matrix Column Choices text box.
HTML Code: <div style="transform: rotate(-45deg); -webkit-transform: rotate(-45deg); white-space: nowrap; position: relative; top: -40px; left: -7px; margin-top: 50px;">TYPE HEADER TITLE HERE</div>
Adding HTML to option choices to rotate display of Matrix fields
Final display of rotated matrix headers -
The long column headers will overlap the borders of the matrix field as they do above. To get rid of them, add the HTML code <br> to move the subsequent word(s) to the next line.
Option to add break lines for headers that are too long -
Finally, you have your matrix with diagonal column headers that fit within the matrix.
Display of rotated headers with break lines to fit within window