REDCap How To guide
1 | P a g e
Document Last Updated: 21-Oct-16 Author: Sandra Henley-Smith Version: 1.0
Adding HTML Tags onto REDCap Instrument form fields
REDCap enables users to be able to change the colour of an instruments text, surrounding area
with a different colour text box, unbold text from the default bold, italic text. This document will
go through some of the HTML tags you are able to use within a REDCap a project, if you are
unsure if you can add a HTML tag please give it a go, or email red-cap@unimelb.edu.au to
have it added to this guide or to see if it is able to be added.
Adding HTLM tags to fields
1. Log into REDCap
2. Select your required project from the ‘My Projects’ tab
3. On the ‘Project Setup’ tab, under ‘Design your data collection instruments’ select
the ‘Online Designer’ button
4. In the ‘Data Collection Instruments’ open your required form i.e. the Visit Data form
5. Select the ‘Edit pencil’ button at the top left of the required filed you want to modify, if
updating an existing form
Please note: You can skip this step and go to the table in step 6 if you doing this when
adding new fields to the instrument
REDCap How To guide
2 | P a g e
Document Last Updated: 21-Oct-16 Author: Sandra Henley-Smith Version: 1.0
6. The below table lists the HTML tags and a sample of what they will look like on the instrument/form. The HTML tag is added
around the text in the Field Label section of editing or adding a new field.
Please note: The Text in the red between the tags is the text you right, the start with the <> and the end </> is the opening
and closing of the tag, below are examples and a guide only
How to change the
text
HTML Tag
Screenshot of the HTML tag
Unbold text
<div style="font-
weight:normal;">Date of Visit</div>
Small coloured Text,
in a paragraph style.
Other text colours
are: red, blue, green
<p style="color:red; font-
size:75%;">Date of Visit </p>
Large, bold green
text in a paragraph
style
Other text colours
are: red, blue, green
<p style="color:green; font-weight:bold;
font-size:150%;"> Date of Visit</p>
Coloured
monospace text in a
paragraph style.
Other text colours
are: red, blue, green
<p style="color:blue; font-family:
monospace;">Date of Visit</p>
Change the font-
family to Arial
<div f style="font-family:arial;" >Date
of Birth</div>
REDCap How To guide
3 | P a g e
Document Last Updated: 21-Oct-16 Author: Sandra Henley-Smith Version: 1.0
Change the font-
family to Verdana
<div style="font-family:verdana;"
>Date of Birth</div>
Change the font-
family to Courier
<div style="font-family:courier;"
>Date of Birth</div>
Black bold text in a
white box
<p style="display:block; padding:5px;
border:1px black solid; background-
color:white; ">Date of Visit </p>
Section Header with
confidential white
text and red box and
default bold
heading. With a line
break <br/>
Current Visit <br />
<div style="width:100%; color:#FFF;
background-color:#F00;
padding:5px; position:relative; top:-
5px; left:-5px;">Confidential</div>
Italic text and default
bold text
<i> Date of Visit </i>
Italic text and unbold
text
<div style="font-
weight:normal;"><i>Date of
Visit</i></div>
Text and
background box
colour green
Other colours to use
are: red, blue, green
<div class="green"> Date of Visit
</div>
REDCap How To guide
4 | P a g e
Document Last Updated: 21-Oct-16 Author: Sandra Henley-Smith Version: 1.0
Glossary of Terms
HTML term/tag
Meaning
p
Paragraph, this places the text into a paragraph format with space before the first line and after the first
line. This can be combined with other elements style= font family, font size, font weight, colour
br
This tag means a line break
div
This is a division or section, it is used within HTLM to contain other elements such as style= font family,
font size, font weight, colour
