Formatting REDCap Forms with HTML

To apply formatting to text or other parts of your forms in REDCap you will need to use some HTML.

This survey demonstrates how to do this for your forms by using HTML tags. Use this survey form and samples of code below to explore different ways of formatting.

When you are ready - copy the code and paste into your own REDCap fields!

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 text below is a hidden field which contains the instructions added in the survey settings:

To apply formatting to text or other parts of your forms in REDCap you will need to use some HTML.
This survey demonstrates how to do this for your forms by using HTML tags. Use this survey form and samples of code below to explore different ways of formatting.

When you are ready - copy the code and paste into your own REDCap fields!

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.

To use this survey tool:

Look at each sample text or format
Review the html code which generated the sample, in the field below it.
Make changes to the code and view results of changes to understand how it works
Refresh the page if you want to start again at any point with the original formatting and code

REMEMBER: When you are ready - copy the code and paste into your own REDCap fields!

Text type formats:

Bold text
Unbold your text
2nd way to Unbold your text
Italics text
Underlined text
Centered Text

Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.

Expand

This is the result if you change the syntax in the box above:

______

Font sizes - substitute in any # number for the size

Font Size 1
Font Size 2
Font Size 3
Font Size 4

Code for above formatting
Type in the box and change options to see possible results below.

*You need to click outside of the box to see the updated changes below.

Expand

This is the result if you change the syntax in the box above:

______

Font color examples
Font Color Blue
Font Color Gold
Font Color Purple
Font Color Red
Font Color Gray
Font Color Green
Font Color Navy
Font Color Orange

Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.

Expand

This is the result if you change the syntax in the box above:
Substitute in a colour name and see if it works.
Instead of colour names you can also use the HEX codes. Click here for a list of colour names and codes
______

You may wish to combine different sizes and colours of text. Instead of colour names you can also use the HEX codes. Click here for a list of colour names and codes
Font size 3 and green colour
Font colour blue and size 4

Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.

Expand

This is the result if you change the syntax in the box above:

______

Additional Formats

Remember you can use different formatting in the response text too

1. Bold Extremely satisfied

2. Italics Somewhat satisfied

3. Underlined Somewhat unsatisfied

4. Color Extremely unsatisfied

5. SIze N/A

reset

Code for above formatting
Type in the box and change options to see possible results below.

*You need to click outside of the box to see the updated changes below.

Expand

This is the result if you change the syntax in the box above:

______

Headings Sizes

Heading 1

Heading 2

Heading 3

Heading 4

Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.

Expand

This is the result if you change the syntax in the box above:

______

Sample Header Text 2

Code for above formatting
Type in the box and change options to see possible results below.
Eg replace palevioletred with the word orange to see the banner turn orange or change the number of points from 10 to 80 to see the changes.

Expand

This is the result if you change the code in the box above:
______

Sample Header Text 1

Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.

Expand

This is the result if you change the code in the box above:

______

Sample of a bullet list
Item List:

Coffee
Tea
Milk

Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.

Expand

This is the result if you change the code in the box above:
______

Sample of a numbered list
Item List:

Coffee
Tea
Milk

Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.

Expand

This is the result if you change the code in the box above:
______

Sample of a numbered lists from a particular number start point
Item list:

Coffee
Tea
Milk

Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.

Expand

This is the result if you change the code in the box above:
______

This is ^{superscripted} text.

Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.

Expand

This is the result if you change the code in the box above:

______

This is _subscripted text.

Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.

Expand

This is the result if you change the code in the box above:

______

This is an email link: Send Mail

This type of link will only work if you have a default email software installed. Spaces between words should be replaced by %20 to ensure that the browser will display the text properly

Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.

Expand

Result of code for above:
______

This is a link to another web page: Link opens in the same page

This is a link to another web page: Link opens into a new tab

Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.

Expand

Result of code for above:

______

This allows hover over text for additional explanations

This tag allows you to provide text with dashes indicating you should hover for additional explanations

Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.

Expand

This is the result if you change the code in the box above:

______

Here is how we may indent text:

Topics will include:
Creating Surveys
Enabling Surveys for your project
Anonymous vs. Non-anonymous Surveys
Survey Responses
Survey Settings
Notifications
So many OPTIONS!

Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.

Expand

Result of code for above. Try changing 3 to 15 and see result below.

______

Example of a warning box with centered text.

Some questions have been skipped!

Click the "PREVIOUS" button to review questions you missed.

Code for above formatting
Type in the box and try changing the colour from red to green blue or yellow or orange to see possible results below.

*You need to click outside of the box to see the updated changes below.

Expand

Result of code for above:

______

TIP!!:Sometimes you can use a variable with this type of box above and add branching logic to it.

The logic shows the box only if certain conditions are met eg some fields are missing.
For example: adding [var1] = '' or [var2] = '' or [var3] = '' or [var4] = '' to the branching will only display the variable with the red warning box if one of the variables is empty/missing.

A nice bordered box with larger text

Code for above formatting

Type in the box and try changing the colours from aliceblue to green or sizes of the border from 9px to 50px or size of font form 150% to 50% or 200% view the result. to see possible results below.

*You need to click outside of the box to see the updated changes below.

Expand

This is the result of code from above.

______

I am going to ask you a few question to determine your eligibility for the study

Interviewer:"Ask all questions without stopping until you reach "Determine Eligibility before continuing"

Expand

This is the result of code from above.

______

You can use these descriptive fields and HTML to display progress bars at the top of your survey forms.

12% Complete

< spanclass="sr-only">18% Complete

< spanclass="sr-only">32% Complete

< spanclass="sr-only">80% Complete

Example code for above formatting for the 80% complete bar above
Type in the box and change % options to see the different size bars possible - results below.

*You need to click outside of the box to see the updated changes below.

Expand

This is the result if you change the syntax in the box above:

______

Data Dictionary of this survey.

You may download the data dictionary of this survey if this may be useful to you.
**Note it is the data dictionary of this survey BEFORE you made any changes in the code

Attachment:FormattingTipsAndTricks_DD.csv

You have selected an option that triggers this survey to end right now.

To save your responses and end the survey, click the 'End Survey' button below. If you have selected the wrong option by accident and/or wish to return to the survey, click the 'Return and Edit Response' button.

Formatting REDCap Forms with HTML

Use this menu of links to jump to a specific section

Text Formatting

Formatting Options and Examples

Headings and Banners

Heading 1

Heading 2

Heading 3

Heading 4

Lists

Subscript and Superscript

Types of Links

Organising your text on the page

Coloured boxes examples

Some questions have been skipped!

Progress Bars

Project Data Dictionary

You have selected an option that triggers this survey to end right now.