Using HTML to Customize Forms
When creating and editing YAPI forms, Paragraphs (a specific type of question you can add in the Question Area in the Form Builder) automatically display as simple left-justified text without formatting, color, or size adjustment and in a single font. By adding HTML to your text, you can make your form more easily readable for your patients.
Use the guide below to learn how to customize your forms with HTML by formatting text, adding lists, and coding special characters and punctuation. We also recommend watching our Customizing Forms with HTML & Merge Tags tutorial video.
Table of Contents |
Prefer to watch a video? Click |
|
|
|
to view full screen.
How HTML Works in YAPI Forms
Warning! HTML only works within Paragraphs in the Form Builder, not other question types. Also, when using HTML you must replace all special characters and all punctuation other than commas and periods with HTML. To learn more about this, see the Replacing Punctuation & Special Characters section below.
HTML is basic code added into text to display the text properly or give it a particular effect. In some cases, you'll add HTML before and after a piece of text to give it a new characteristic; in others, you'll replace a letter or piece of punctuation with HTML so it displays properly. For example, taking a block of text and putting a code like <b> before it and </b> after it this like this...
...makes it bold when it appears on a patient form!
With HTML, you can change the text within a Paragraph including:
- Bolding text
- Italicizing text
- Underlining text
- Changing the text's size
- Changing the text's color
- Aligning text right or center
- Adding bullets
- Adding numbering
- Adding special characters
When adding HTML, always select the Has HTML checkbox so that YAPI doesn't show the code itself on your form:
Step 1: Replacing Punctuation & Special Characters
With the Has HTML checkbox selected, you must replace all punctuation other than periods, commas, and semicolons as well as all special characters with HTML code. For example, use "Doctor" for the text to appear as "Doctor" on your form. We recommend doing this first, then moving on to Adding HTML to Format Text.
To add HTML in place of a special character or punctuation:
-
Open your form in the Form Builder.
-
Make sure Scrollable Single Page is selected at the top.
Warning! Required. If you don't select this checkbox, HTML code will display on the patient's signed copy of the form when it's filed into your practice management software.
-
Double-click the Paragraph you want to change to open the Paragraph window and select the Has HTML checkbox.
-
Locate the character you need to change:
-
Using the codes from the tables below, enter the HTML code in place of the character or punctuation:
Note: Periods, commas, and semicolons don't need to be replaced with HTML. YAPI reads them without it!
HTML for Punctuation
| Character | HTML Code | Example Text | Result on the Form |
|---|---|---|---|
| " | " | "Doctor" | "Doctor" |
| ' | ' | Doctor's | Doctor's |
| & | & | Doctor & Hygienist | Doctor & Hygienist |
| [ | [ | [Doctor | [Doctor |
| ] | ] | Doctor] | Doctor] |
| % | % | 75% | 75% |
| # | # | #22 | #22 |
| - | ‐ | patient‐focused | patient-focused |
| — | — | ...procedure — which... | ...procedure — which... |
| / | / | 1/4 | 1/4 |
HTML for Spanish Characters
| Character | HTML Code | Example Text | Result on the Form |
|---|---|---|---|
| Á | Á | REFLUJO ÁCIDO | REFLUJO ÁCIDO |
| É | É | TELÉFONO | TELÉFONO |
| Í | Í | SOPLO CARDÍACO | SOPLO CARDÍACO |
| Ó | Ó | DIRECCIÓN | DIRECCIÓN |
| Ú | Ú | ÚLCERAS | ÚLCERAS |
| Ñ | Ñ | NIÑO | NIÑO |
| á | á | reflujo ácido | reflujo ácido |
| é | é | teléfono | teléfono |
| í | í | soplo cardíaco | soplo cardíaco |
| ó | ó | dirección | dirección |
| ú | ú | úlceras | úlceras |
| ñ | ñ | niño | niño |
Step 2: Adding HTML to Format Text
To format the text in your Paragraph:
-
Using the codes from the HTML tables below, enter the beginning code before the text and the ending code after the text.
For lists, enter the codes before the first list item and after the last one:
- Click OK to close the window, then Save.
Tip: Entering these codes at the beginning and end of a piece of text is called "wrapping." You've told the formatting where to start and where to end, so you've "wrapped it up" in code, like a blanket covering the entire thing, giving it all the same property.
HTML for Adding Bold, Italics, & Underlining
| Formatting | Beginning Code | Ending Code | Example | Result |
|---|---|---|---|---|
| Bold | <b> | </b> | <b>Hello!</b> | Hello! |
| Italics | <i> | </i> | <i>Hello!</i> | Hello! |
| Underline | <u> | </u> | <u>Hello!</u> | Hello! |
HTML for Changing the Text Size
| Formatting | Beginning Code | Ending Code | Example | Result |
|---|---|---|---|---|
|
Bigger Text |
<p style="font-size:125%;"> | </p> | <p style="font-size:125%;">Hello!</p> | Hello! |
| Smaller Text | <p style="font-size:75%;"> | </p> | <p style="font-size:75%;">Hello!</p> | Hello! |
Adjust the percentage within the code to customize your sizing even further.
HTML for Changing the Font
While defaulting to Arial, the Form Builder also supports these commonly used fonts:
| Formatting | Beginning Code | Ending Code | Example | Result |
|---|---|---|---|---|
| Times New Roman | <p style="font-family:times;"> | </p> | <p style="font-family:times;">Hello!</p> | Hello! |
| Helvetica | <p style="font-family:helvetica;"> | </p> | <p style="font-family:helvetica;">Hello!</p> | Hello! |
| Courier | <p style="font-family:courier;"> | </p> | <p style="font-family:courier;">Hello!</p> | Hello! |
| Courier New | <p style="font-family:courier new;"> | </p> | <p style="font-family:courier new;">Hello!</p> | Hello! |
| Verdana | <p style="font-family:verdana;"> | </p> | <p style="font-family:verdana;">Hello!</p> | Hello! |
HTML for Aligning Text Right or Center
While the Form Builder defaults to having text aligned on the left, you can also align your text to the right or center it:
| Formatting | Beginning Code | Ending Code | Example | Result |
|---|---|---|---|---|
| Right-Aligned | <p style="text-align:right;"> | </p> | <p style="text-align:right;">Hello!</p> | Hello! |
| Centered | <p style="text-align:center;"> | </p> | <p style="text-align:center;">Hello!</p> | Hello! |
Tip: If you're adding more than one HTML element to a piece of text, you can combine the codes. For example, if you needed to change the size, font, and alignment of your text, you could combine it like this: <p style="font-size:150%; font-family:courier; text-align:center;">
HTML for Creating Lists
| Formatting | Beginning Code | Ending Code | Example | Result |
|---|---|---|---|---|
| Bulleted | <ul> | </ul> | <ul>Visa Mastercard Discover</ul> |
|
| Numbered | <ol> | </ol> | <ol>Visa Mastercard Discover</ol> |
|
| Lettered | <ol type="a"> | </ol> | <ol type="a">Visa Mastercard Discover</ol> |
|