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

 

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...

Screen_Shot_2021-11-01_at_9.23.03_AM_2.png

...makes it bold when it appears on a patient form! 

iPad_2_2.png

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:

Screen_Shot_2021-10-29_at_4.31.30_PM.png

 

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 &quot;Doctor&quot; 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:

  1. Open your form in the Form Builder.

  2. 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.

    Screen_Shot_2021-11-04_at_2.40.42_PM_2.png

  3. Double-click the Paragraph you want to change to open the Paragraph window and select the Has HTML checkbox.

  4. Locate the character you need to change:

    Screen_Shot_2021-11-02_at_8.32.26_AM.png

  5. Using the codes from the tables below, enter the HTML code in place of the character or punctuation:

    Screen_Shot_2021-11-02_at_8.32.59_AM.png

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
" &quot; &quot;Doctor&quot; "Doctor"
' &apos; Doctor&apos;s Doctor's
& &amp; Doctor &amp; Hygienist Doctor & Hygienist
[ &lsqb; &lsqb;Doctor [Doctor
] &rsqb; Doctor&rsqb; Doctor]
% &percnt; 75&percnt; 75%
# &num; &num;22 #22
- &hyphen; patient&hyphen;focused patient-focused
&mdash; ...procedure &mdash; which... ...procedure — which...
/ &sol; 1&sol;4 1/4

HTML for Spanish Characters

Character HTML Code Example Text Result on the Form
Á &Aacute; REFLUJO &Aacute;CIDO REFLUJO ÁCIDO
É &Eacute; TEL&Eacute;FONO TELÉFONO
Í &Iacute; SOPLO CARD&Iacute;ACO SOPLO CARDÍACO
Ó &Oacute; DIRECCI&Oacute;N DIRECCIÓN
Ú &Uacute; &Uacute;LCERAS ÚLCERAS
Ñ &Ntilde; NI&Ntilde;O NIÑO
á &aacute; reflujo &aacute;cido reflujo ácido
é &eacute; tel&eacute;fono teléfono
í &iacute; soplo card&iacute;aco soplo cardíaco
ó &oacute; direcci&oacute;n dirección
ú &uacute; &uacute;lceras úlceras
ñ &ntilde; ni&ntilde;o niño

 

Step 2: Adding HTML to Format Text

To format the text in your Paragraph:

  1. Using the codes from the HTML tables below, enter the beginning code before the text and the ending code after the text.

    Screen_Shot_2021-11-01_at_9.59.24_AM.png

    For lists, enter the codes before the first list item and after the last one:

    Screen_Shot_2021-11-02_at_8.19.24_AM.png

  2. 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>
  • Visa
  • Mastercard
  • Discover
Numbered <ol> </ol> <ol>Visa
Mastercard
Discover</ol>
  1. Visa
  2. Mastercard
  3. Discover
Lettered <ol type="a"> </ol> <ol type="a">Visa
Mastercard
Discover</ol>
  1. Visa
  2. Mastercard
  3. Discover

 

Related Articles

 

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