Skip to main content

HTML Document Builder

  • Updated
Doc. Number Article Title Effective Date Version
FHC-XX HTML Document Buiider March 20, 2024 3.1

This article was developed to describe the HTML Document Builder function within the CRM. It is organized into the following sections:

Overview

The HTML Document is one of two formats of document templates in the CRM, the other one being the PDF Document. The HTML Document Builder allows a user to either type in a document template using basic word processor tools, or to modify its source code using HTML Coding and/or CSS Styles to allow for more customization.

Purchasing a Document Build

Building documents into the CRM can be resource-intensive, so you may decide to purchase a document build request. If so, please submit the document file you wish to be built to our sales team at sales@setforth.com for pricing. (Note: If you are a Centrex client, please contact sales@centrexsoftware.com)

You should only be sending the final version of the document, not one in progress. If you are still building out your document on your side or having it reviewed for revision, we will not start building it into Forth as it will require us to start over with each new version. If a revision is submitted, you must be willing and able to tell us exactly what differences were made.

**Please note that when we build a document template, we are not designing the document, we are merely replicating what has been submitted to us. We do not make any format/spelling/design changes to deviate from the submitted file without a specific written/documented request; These are the responsibilities of the requester.

IMPORTANT: It is the requester's responsibility to thoroughly review and test their built document template after a notice of completion is received.

When to Use the HTML Document Builder

When to use the HTML Document Builder:

  1. The source document file is not a PDF File (Word Processors like Microsoft Word work best)
  2. The source document requires tags to populate within paragraphs but does not offer blank spaces (inline text).
  3. A different document is required to be embedded into the middle of this document (This is rare and can usually be avoided using Document Packages)

When NOT to use the HTML Document Builder:

  1. If the document requires more than two different signers (for example, if the document needs a signature from a client, a co-client, and the assigned-to user)
  2. The source document is required to look exactly the same once built into the CRM; while there are many tools available in the HTML Document Builder, the results are rarely a 1-to-1 visual match.

 

Creating an HTML Document Template

To create a new HTML Document Template from scratch, from the Docs tab, select “Create A New HTML Document” from the Navigation Bar. Docs_Tab_Creating_New_HTML_Docs_Mar2023.png

From here, give the document a unique Document Title for the account and then select “Save Document” in the navigation bar. Once done, you can begin building out the template in the Template Body.

Create_a_New_HTML_Doc_Apr2023.png

For the most part, building an HTML-style document is similar to using basic word processors (examples: Microsoft Word, Google Docs, LibreOffice Writer, etc). You can either type the document directly into the Template Body section, or you can copy and paste the words over.

NOTE: If you copy/paste, the formatting will need to be updated once it’s placed into the CRM, so it’s best practice to do one page at a time and not copy/paste the entire document all at once.

If data needs to auto-populate into the document template, please be sure to use the correct tag. You can find a list of our tags in the Tags article, found within the Forth Help Center.

IMPORTANT: the HTML Document Builder does not auto-save, so save your document often during the building process. Additionally, do not open more tabs to other pages of the CRM while building the document.

NOTE: A "Debug HTML" button is available on the Navigation Bar to ensure the integrity of your HTML Code.

 

Assigning Required Template Fields

Before creating a template, it is wise to assign fields to be required. Click on the Docs tab, and then select any Document Template listed by clicking on the pencil icon at the far right of the Template table (see example below).

Docs Tab to Doc to Edit Required Fields Mar2024.png

On the following page, click "Edit Required Fields" found near the middle of the Navigation Bar.

Edit Required Fields in NavBar Mar2024.png

Under the "Add Required Fields" section, click the Field Name Dropdown Menu. You will see several fields listed, organized first by "standardized" and then by "custom".

Required Fields Dialog Box with Dropdown Options Shown Mar2024.png

On this page, select a field from the dropdown list and then assign whether it should be required for Template Generation by clicking the "Generation" button and/or assign whether it should be required for Clixsign document signing by clicking the "Signing" button. To add additional fields, click the "+add another field" hyperlink on the right side of the page as many times as you prefer. To remove a required field that you just chose, click on the small red dash icon to the right of that field (see example below). 

Required Fields with Options Selected Mar2024.png

Once you have completed your required field assignments, click the green "Save" button found at the bottom right of the page (see image above).

 

HTML Document Builder Tools

The tools available in the Template Body are very similar to the ones used in most word processor software, but a few are unique to the CRM.

  • File:
    • New Document - This will clear the current document body to start from scratch
    • Print - This will print the document
  • Edit:
    • Undo
    • Redo
    • Cut
    • Copy
    • Paste
    • Paste as text
    • Select all
    • Find and replace
  • Insert:
    • Media - Allows media to be inserted/edited in a document template
    • Image - Allows an image to be placed
    • Link - Allows a link to be created
    • Special Character - Allows you to enter a special character not usually defined on a standard keyboard
    • Horizontal line - Adds a horizontal line
    • Anchor - Creates an anchor
    • Page break - Creates a page break that tells the document template to continue document generation from the next page down.
    • Date/Time - Adds a formatted date tag
    • Nonbreaking space - Adds a space
    • Template - Adds a template
  • View:
    • Show invisible characters
    • Show blocks
    • Visual aids - allows a user to toggle on/off visual aids (like anchors)
    • Preview - Previews the document template using a default Test User contact.
    • Fullscreen - Makes the document template body take up the full screen.
    • ? Help - Shows a user helpful shortcut keys, as well as allows them to view active plugins for the document builder.
  • Format: This tab contains easy formatting options such as Bold, Italicize, Underline, etc.
  • Table: This tab will allow you to quickly create a table based on a highlighted number of rows/columns, or will allow you to make modifications to an already existing table’s/cell’s properties
  • Tools: This contains an option to access the source code of the document, or allow a user to run a spellcheck.

Buttons of Note:

Paste Button: This will paste any currently copied text (text format does not copy over)

Source Code: This is a shortcut to the source code, allowing a user to edit the HTML that makes up the document template.

  • To access the HTML Editor, click the <> image that appears on the page (boxed in red below).

HTML_Template_Code_Block_Key.png

Help: Shows a user helpful shortcut keys, as well as allows them to view active plugins for the document builder.

 

Basic Style Header

Before you begin creating the document body, establish a basic style header. Basic style headers establish a default look of the document (font family, font size, margins, etc.) so as to remain consistent in the document unless otherwise specified. The header just needs to be added to the source code of the document. Below is an example of a basic style header that you can use:

<style><!--

p { font-family:Arial; font-size: 14px; }

li { font-family:Arial; font-size: 14px; }

div { font-family:Arial; font-size: 14px; }

table { font-family:Arial; font-size: 14px; }

td { font-family:Arial; font-size: 14px;}

body { margin-top: 50px; margin-bottom: 50px; margin-right: 50px; margin-left: 50px; }

--></style>

 

Previewing a document using a Customer ID

Normally when you preview an HTML document, it will show the preview using a default Test User in the CRM. To preview a document using a customer ID, begin by previewing the document as normal. From the preview view, navigate to the URL of the page and add the following to the end of it:

&id=###       (Where ### equals the contact ID for the contact you wish to showcase the preview with)

When you press enter to refresh the page, it will show a new preview, this time using the matching ID’s contact to fill in the data.

 

Border Styles

When building tables, sometimes you will need to format tables/cells to appear in a specific way:

style=”border-collapse: collapse;”

Collapse Table cells so they butt up against each other.

style=”border-bottom: 1px solid black;”>

Adds a solid black line to the bottom of the table cell.

style=”border: 1px solid #000000;”

Adds a Black border to the entire cell.

style="border-width: 1px; border-style: solid;"

Adds a black border around an image.

 

Extra Commands:

&UseGecko=true&InsetHorizontal=0&Inset Vertical=0&FooterText=blank

Most commonly used Extras command. Sets the doc margins to 0. This is necessary for .png images that span the length and width of a full page. (EX: DOE docs)

 

&UseGecko=true

Another commonly used Extras command. This should be used when embedding documents within other documents using the {doc:12345} tag. This command should be inserted in the parent document so that the images of child documents display properly.

&InsetHorizontal=0

Sets horizontal margin to 0

&InsetVertical=0

Sets vertical margin to 0

&FooterText=

Removes footer text or page numbering.

&Orientation=landscape

Sets the document orientation to landscape, rather than portrait.

InsetHorizontal=X&InsetVertical=X

Set custom margins. Replace "X" with a number.

 

Article Version History: 

Version Effective Date Description
Basic 5/11/2021 Initial Release
0.1 10/14/2022 Formatting Updates Only - no Subject Matter Update
1.0 12/29/2022 Subject Matter Updates - confirmed with Training Dept; Added header and Version Control footer
2.0 01/27/2023 Updated the first few sections for better focus.
2.1 04/07/2023 Refreshed all screenshots to better reflect the current user interface of the CRM.
3.0 03/19/2024 Added new section on assigning required fields; minor grammatical edits.
3.1 03/20/2024 Rearranged new section just added in version 2.0 and minor grammatical updates.
     
     

 

Related to

Related articles