The Text Area field has a setting that enables Rich Text. This feature allows for additional text formatting (bullet points, hyperlinks, font styling...ect.) and adding images. Once enabled, the Rich Text feature can be used in 2 places:
- The front-end: when an end user is filling out a Text Area field in a form
- The back-end: when setting-up default text. A common use for default text is to display instructions for the end-user to see when completing a form.
Note: To learn how to create a field, refer to the Creating a Field help article.
Enable Rich Text
To format text or add images in a Text Area field, the field must be enabled to Allow Rich Text in the Options tab.
Basic Text Formatting
To do basic formatting of text, such as bolding or italicizing, you can use the formatting menu buttons that become available in the text editor once you turn on Allow Rich Text.
Advanced Text Formatting
If you want to do formatting beyond the options presented in the menu (for example, changing the size or color of text), you will need to use HTML to format the text. To enter "HTML editing mode", click on the </> icon in the formatting menu.
HTML is also needed to add images to a Text Area field. Typically, if you want to include an image in a Text Area field, you can use the HTML below - where the URL is a link to the image you want to include:
<p><img src="ENTER URL HERE"></p>
If the image that you want to include is not available online, you can get it online yourself by adding it to a content storing site like Dropbox or Google Drive.
To resize an image, try using the following HTML:
<p><img src="ENTER URL HERE" height="ENTER HEIGHT HERE" width="ENTER WIDTH HERE"></p>
For more information on formatting images using HTML, refer to this HTML Images resource.
Viewing Rich Text
Once you've finished updating your HTML, you can see what it will look like to the end-user by de-selecting the </> icon.
Example Rich Text HTML
Below is an example of HTML used to set-up default instruction text.
You can't see all of the HTML in the screenshot above. Below is the full HTML text:
<p style="font-size: 14px;text-align: left;"><font color="blue">
<p style="text-align: center;"><img src="https://workablehr.s3.amazonaws.com/uploads/account/logo/149369/logicgate_logo.jpg" height="50" width="300" style="vertical-align: middle;"></p>
<p style="font-size: 14px;"><font color="blue"><b>You've been assigned as the business owner of the enterprise risk shown below. Please provide the required information by the due date and hit 'Complete' below.</b></font></p>
<p style="font-size: 14px;">The following questions should be answered by the individual(s) having the most knowledge of the operational and strategic aspects of the risk and business process being assessed. The Risk Owner is responsible for all responses, but can delegate related activities as necessary. The information will be used to complete the full risk assessment by the ERM team.</p>
This is what the Rich Text looks like to the end-user:
Note: This article is not an exhaustive list of advanced text formatting you can do with HTML. It is meant to provide some examples as a starting point. Below are some great resources to learn more about HTML coding: