How to: Add HTML Elements to your Survey

HTML, or HyperText Markup Language, can be used to add instructions or information text throughout the survey. HTML can also be used to provide directions on next steps or disclaimers for your survey. You can use HTML to modify the spacing and appearance of your text or provide links, tables or other graphic elements that are not used directly within a question. You can only use HTML within the Html survey question type; it cannot be used in any other question type.

How to Add HTML Elements

  1. Go to the “Survey Designer”
  2. Navigate to the “Toolbox” panel
  3. Add the Html question type
  4. Go into the “Properties” panel
  5. Type the text you want to insert into the survey
  6. Add your HTML elements around your text to modify the spacing, appearance, and other elements
  7. Click “Save Survey”


You can click the “Test Survey” button to view your survey and HTML elements before administering.

Common HTML Elements

There are many different HTML elements you can use to add or modify the appearance of your text, URL, or images in your surveys. You can combine as many HTML elements together as you need. Below are some common HTML elements:

Format Spacing

You can modify the spacing of words and sentences by creating new paragraphs, creating line breaks, creating bulleted lists, and changing the font size within HTML.

New paragraph
  • To turn on: <p>
  • To turn off: </p>
  • Example: <p>In this first paragraph, we will explain how this survey works. We will discuss the purpose of the survey, what data we will collect, and how we will use that information for our Registry.</p> <p>In the second paragraph, we will explain how you can contact us with any questions or inquiries about studies.</p> html_paragraph_Medium.jpeg
  • To turn on: <p style=”margin-left5%;”>
  • To turn off: </p>
  • Example: <p>Thank you for your interest in the Ripple Research Lab. We appreciate your interest in joining our Registry and future studies. </p><p style="margin-left:5%;">If at any time you no longer want to be a part of our study, please let us know by calling us at 555-555-5555. You will need to tell us your name, date of birth, and email you used to fill out your survey so we can remove you from the Registry.</p><p>We look forward to having you and will reach out soon!</p>


You can make the indent larger by changing 5% to a larger number. To make the indent smaller, decrease the number lower than 5%.


Line Breaks
    • To turn on and off: <br>
    • To turn off: </br>
    • Example: Instead of this being on one line <br>I may want to break this idea up <br>into several different lines.</br>


Do not use two br tags consecutively! 



Create an unordered bulleted list
  • To turn on: <li>
  • To turn off: </li>
  • Example: <li>This is inclusion point one.</li> <li>This is inclusion point two.</li> <li>This is inclusion point three.</li>


You will need to start each point with <li> and end each point with </li> to differentiate between the different bullets


Create an ordered list
  • To turn on: <ol>
  • To turn off: </ol>
  • Example: <ol>1. You need to meet eligibility criteria one.</ol> <ol>2. You need to meet eligibility criteria two.</ol> <ol>3. You need to meet eligibility criteria three.</ol>


You will need to start each point with <ol> and end each point with </ol> to differentiate between the different list items.


Section Headings
  • To turn on: <h1> ; <h2> ; <h3> etc.
  • To turn off: </h1> ; </h2> ; </h3> etc.
  • Example: <h1>I want this text to be larger.</h1> <h4>This text should be smaller.</h4> <h6>This text should be very tiny.</h6>


The smaller h number represents a bigger font size; <h1> is the highest section heading and <h6> is the smallest.


Format Words

You can also modify how your words appear, including bolding, italicizing, underlining and the color of the font. You can also add a URL for your participants to learn more information.

  • To turn on: <b>
  • To turn off: </b>
  • Example: <b>I want this sentence to be bold.</b> html_bold_Medium.jpeg
  • To turn on: <i>
  • To turn off: </i>
  • Example: <i>I want this sentence to be italicized.</i> html_italicized_Medium.jpeg
  • To turn on: <u>
  • To turn off: </u>
  • Example: <u>I want this sentence to be underlined.</u> html_underlined_Medium.jpeg
Change the color
  • To turn on: <p style= “color:Red;”
  • To turn off: </p>
  • Example: <p style= “color:Red;”> I want this sentence to be red because it is important!</p>


You can change the color from Red to the color of your choice by modifying the HTML.


Separate your Text Using Borders and Dividers

Colored Borders around Text
  • To turn on: <h4 style=”border:2px solid Red;”>text
  • To turn off: </h4>
  • Example: ​​<h4 style="border: 2px solid Red;">This is a very important section of the form. I want this separated into a box.</h4>


You can replace h4 with any other section header, or with the paragraph option. Additionally, you can modify 2px to a larger number to increase the thickness of the border, or a smaller number to decrease the thickness of the border. You can also change the color from Red to a color of your choice.


  • To turn on: <hr class=”solid”
  • To turn off: >
  • Example: <p>I want to separate this text from the text below using a divider.</p> <hr class="solid"><p>Here is the rest of my text that I want separated.</p>


You can create a dashed, dotted, or rounded line by replacing “solid” with the word “dashed” , “dotted” , or “rounded” respectively.


Additional Elements

URL - Open in the Same Tab
  • To turn on: <a href=”url”>Website’s Name
  • To turn off: </a>
  • Example: Here is the <a href= “”>Ripple Science Website</a> to learn more about our features. html_url_Medium.jpeg
URL - Open in a New Tab
  • To turn on: <a href=”url” target=”_blank”>Website’s Name
  • To turn off: </a>
  • Example: Here is the <a href="" target="_blank">Ripple Science Website</a> in a new tab to learn more about our features. html_url_new_tab_Medium.jpeg

To indicate table data:

  • To start a table: <table>
  • To create a row: <tr>
  • To end a row: </tr>
  • To create a table header: <th>
  • To end that table header: </th>
  • To add a data point to a cell: <td>
  • To end that data point for a cell: </td>
  • To end a table: </table> 
  • Example: <style>

table {

  font-family: arial, sans-serif;

  border-collapse: collapse;

  width: 100%;


td, th {

  border: 1px solid #dddddd;

  text-align: left;

  padding: 8px;


tr:nth-child(even) {

  background-color: #dddddd;












    <td>Lab A12</td>

    <td>Maria Anderson</td>

    <td>Ann Arbor</td>



    <td>Lab 3D6</td>

    <td>Francis Collinsworth</td>






Please refer to your favorite HTML tutorial website for additional HTML elements.

Was this article helpful?
0 out of 0 found this helpful



Please sign in to leave a comment.