Survey HTML Formatting Support

Survey HTML Formatting Support

Overview

Within the Survey creation setup screen there has been support provided for limited HTML display formatting within the Thrio Survey text component.  This capability provides administrators and survey designers more flexibility in building their Surveys to meet their business style needs.

Thrio Surveys provide a large amount of functionality for users to design their surveys to meet their business needs.  The following describes HTML formatting available within Thrio Survey Text components which allows users to change the formatting of their survey text fields to meet their business style needs. One consideration administrators and designers need to review and test for is any performance impact of added HTML functionality.

As there are frequent HTML format changes with some functions being deprecated Thrio cannot predict when existing HTML formatting Tags may be deprecated. We ask that administrators, designers using this functionality maintain visibility to HTML support changes.

Text Formatting HTML Tags:

  • <u> ... </u> - Allows underlining text
  • <strike> ... </strike> - Will strikeout words, letters
  • <sup> ... </sup> - Superscript format
  • <sub> ... </sub> - Subscript format
  • <small> ... </small> - Fineprint size text
  • <tt> ... </tt> - Typewriter style text
  • <pre> ... </pre> - Pre-formatted text
  • <blockquote> ... </blockquote> - Text block quotes
  • <strong> ... </strong> - Text displays normally as Bold
  • <em> ... </em> - Emphasis - normally displays as italics
  • <h?> heading </h?> - Heading (h1 is the largest value, h6 is the smallest)
  • <p> paragraph </p> - Creates a paragraph of the text                    
  • <b> bold </b> - Turns text bold
  • <i> italic </i> - Turns text italics
  • <a href="url"> link name </a> - Generates a link to another web page, selecting will open that page in current window
  • <img src="filename.jpg"> - Displays a externally accessible image (see more options below)
  • <br> - Creates a line break / new line
  • <span style="color:red"> red </span> - Changes to text color

Image HTML Tags:

  • <img src="url" alt="text"> - Loads an image, image needs to be an externally accessible link
  • <img> Tag Options:
  • src="url" - URL or filename of image (required option)
  • alt="text" - Alternate Text (required option)
  • align="?" - Image alignment within surrounding text ()
  • width="??" - Image width (in pixels or %)
  • height="??" - Image height (in pixels or %)
  • border="??" - Border thickness (in pixels) (option deprecated)

Special Character HTML Tags:

  • &lt; < - Less-Than character
  • &gt; > - Greater-Than character
  • &amp; & - Ampersand /"and" sign
  • &quot; " - Quotation " " character
  • &copy; © - Copyright character
  • &trade; ™- Trademark character

List HTML Tags:

  • <ol> ... </ol> - Ordered list
  • <ul> ... </ul> - Un-Ordered list
  • <li> ... </li> - List item (within ordered or unordered)
  • <ol type="?"> - Ordered list type: A, a, I, i, 1

Table HTML Tags:

  • <table> ... </table> - Defines a Table
  • <table> Tag Options:
  • background-color: #FFE4C4; - Example background color
  • border="?" - Thickness of external border
  • <tr> ... </tr> - Table row within table
  • <th> ... </th> - Header cell within table row
  • <td> ... </td> - Table cell within table row

Example HTML Code:

Example Image HTML Code:

<img src="https://assets.website-files.com/5cfe835e5de647d0f98b6223/5cfe84de71000a7ba35710d5_New_Small%20Email%20Sig.png" alt="logo">

Example List HTML Code:

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>ListExample.html</title>

</head>

<body>

<h1>List Example</h1>

<h2>Example Thrio Workitem Types</h2>

<ul>

<li>Inbound Campaign</li>

<li>Outbound Campaign</li>

<li>Outbound Dialer Campaign</li>

<li>SMS Campaign</li>

<li>Email Campaign</li>

<li>Chat Campaign</li>

</ul>

</body>

</html>

Example Table HTML Code:

<!DOCTYPE HTML>

<html lang = "en">

 <head>

   <title>TableExample.html</title>

   <meta charset = "UTF-8" />

   <style type = "text/css">

   table, td, th{

     border: 1px solid black;

 background-color: #FFE4C4;

   }

   </style>

 </head>

 <body>

<h1>Table Example</h1>

   <h2>HTML5 Format</h2>

   <table>

     <tr>

       <th>Campaigns</th>

       <th>Workitems</th>

       <th>Status</th>

     </tr>

     <tr>

       <td>Outbound Team</td>

       <td>Outbound Calls</td>

       <td>Busy</td>

     </tr>

     <tr>

       <td>Inbound Team</td>

       <td>Inbound Calls</td>

       <td>Available</td>

     </tr>

     <tr>

       <td>SMS Team</td>

       <td>Inbound SMS</td>

       <td>Aftercall Work</td>

     </tr>

   </table>

 </body>

</html>

Click Here to Download Linked File

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.