Creating an iPad Form Advanced Guide

This guide is designed for YAPI users who are familiar with the document creation process, want to create more elaborate documents, and want to understand the "do and don'ts" when constructing data-integrated forms. It is recommended that users read the listed articles below before deep-diving into this expanded guide.

The following guide will show YAPI users how to create documents using advanced techniques.

Table of Contents

HTML Code

The YAPI Form Builder uses a computer language referred to as Hypertext Markup Language or HTML for short. This code can be wrapped around certain content and then used to change the characteristics of text within the Form Builder and allow for documents to be adjusted in ways that can better fit the form context, such as bolding or underlining important sections.

Currently, HTML is only supported within the Paragraph option within the Form Builder and can be enabled by clicking the Has HTML checkbox at the bottom of the Paragraph window.

2019-11-07_11-30-38.png

To apply HTML towards any typed content, simply add the associated code before and after the content.

Example: <b>Lorem ipsum dolor sit amet.</b>

Bold, Italics, Underlining

The following will show how to apply bolding, italics, and underlines to certain content. 

 HTML Code  Result
 <b> </b>   Lorem ipsum dolor sit amet.
<i> </i>  Lorem ipsum dolor sit amet.
<u> </u>  Lorem ipsum dolor sit amet.

Lists

Lists can also be introduced to documents. The list code can be used to quickly list and organize content with bullet points, letters, and numbers. Keep in mind with the way the YAPI builder recognizes text, the string of text will need to be on one line otherwise the order will contain gaps.  

Lists also include a <li> </li> tag dedicated to identifying specific lines or paragraphs for specific points. An example of how the lists should be applied within the Form Builder is the following:

Example: <ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
 HTML Code  Result
<ol> </ol>
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Nulla fringilla lacus ut imperdiet fermentum.
  3. Phasellus sed ex vitae elit suscipit dictum quis ac mi. 
<ul> </ul>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Nulla fringilla lacus ut imperdiet fermentum.
  • Phasellus sed ex vitae elit suscipit dictum quis ac mi.

Adjusting the characteristics of the list can be further expanded by clarifying the type that will be used on top of the currently assigned ordered tag. Adding these additional methods will require adjusting the main order type with the following:

Example: <ul style="list-style-type:disc;"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>

These supported types include: 

Unordered List Types

 HTML Code  Result
<ul style="list-style-type:disc;"> </ul> Screenshot_2019-11-13_at_12.00.29_PM.png 
<ul style="list-style-type:circle;"> </ul> Screenshot_2019-11-13_at_12.00.29_PM.png 
<ul style="list-style-type:square;"> </ul>

Screenshot_2019-11-13_at_12.00.29_PM.png 

<ul style="list-style-type:none;"> </ul>

 Screenshot_2019-11-13_at_12.00.29_PM.png

Ordered Lists Types

 HTML Code  Result
<ol type="1"> </ol> Screenshot_2019-11-13_at_12.00.29_PM__1_.png  
<ol type="A"> </ol> Screenshot_2019-11-13_at_12.00.29_PM__1_.png 
<ol type="a"> </ol> Screenshot_2019-11-13_at_12.00.29_PM__1_.png
<ol type="I"> </ol> Screenshot_2019-11-13_at_12.00.29_PM__1_.png 
<ol type="i"> </ol>  Screenshot_2019-11-13_at_12.00.29_PM__1_.png

Special Characters 

With the Has HTML checkbox enabled, certain standard special characters will render incorrectly from the final product. This is because special characters such as commas, ellipses, and quotations, require their HTML code to be introduced into the body for them to render correctly. Some typical special characters that will be used often with their associated code will be the following:

 HTML Code  Result
 "  &quote;
 '  &apos;
 & &amp; 
 < &lt; 
 > &gt; 

Styles

Text can be manipulated in a manner that can adjust the size, font, and alignment of the content being inputted. These styles can be prefaced before key sentences or paragraphs to adjust the text characteristics. Many of the styles can also be used in conjunction with each other without needing to introduce a new line.

Example: <p style="font-size:100%;""font-family:courier;""text-align:center;">

Text Size 

The text size of the text can be manually adjusted by introducing a percentage to the font-size style. 

 HTML Code  Result

<p style="font-size:100%;"> </p>

 Normal

<p style="font-size:125%;"> </p>

 Bigger!
 

Text Font

 The YAPI Document Editor is able to support some commonly used fonts to diversify the content within documents.

 HTML Code  Result
<p style="font-family:courier;">

Courier

A good list of options to choose from are:

  • Arial (the default font)
  • Times New Roman
  • Helvetica
  • Times
  • Courier New
  • Courier 
  • Verdana 

Text Alignment 

The alignment of the text can be used to make certain content be available in certain portions of the page. 

 HTML Code  Result
<p style="text-align:left;"> </p>  Left
<p style="text-align:right;"> </p> Right

<p style="text-align:center;"> </p>

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