Creating Custom HTML Forms

This information is for building your own HTML forms to import into Forms inMotion.  Typically this information would be used by someone familiar with javascript/css/html development and information about working with those technologies is beyond the scope of this document.

Sample form code can be downloaded from Github.

Creating a new HTML form

HTML forms should be HTML5 compliant.  When developing a new form, you should keep in mind how these will be rendered by the Forms inMotion application.  The form itself will be displayed to the end-user inside of an IFRAME element inside the Forms inMotion application's HTML interface.  IFRAME can present unique security restrictive challenges in different browsers so forms should be tested thoroughly before deploying.

All fields should have an ID tag.  Seriously, we key off the ID and it is part of the XML output on the server.  A missing ID tag means that your field will not be represented in the XML output.  You can use the name tag in addition, but Forms inMotion server is only looking for ID.

Querying for external information

Since forms are HTML standard, it is possible to use external AJAX calls to talk to a webservice.  This is acceptable for many public data sources (Google Maps, data.gov, etc.) but not ideal for private sources.  For these, the recommended approach is to use the internal Query API as documented in the article "Using the Query API".  

Function calls when the document is loaded in the application

• The Forms inMotion application will call into the frame once your form is completely loaded.  The function we are looking for is called PreDataLoad().  It should be defined like this:

function PreDataLoad() {
	//your important loading stuff here
}

• If this function is present in your custom HTML, the application will wait for this function to return true before proceeding
• After PreDataLoad() is complete, the application will inject the elementData field information.  This information will be present when reloading a saved form or when loading a forwarded form.
• After the field data has been loaded, you can perform additional formatting or configuration with the PostDataLoad() function.
• If the PostDataLoad() funciton is present in your custom HTML, the application will wait for the function to return true before proceeding

Another way to use these functions for testing OUTSIDE your Forms inMotion environment is to trigger your functions with jQuery .ready events such as below.

var alreadyLoaded = false;

$(document).ready(function() {
	PreDataLoad();
});

function PreDataLoad() {
	if (alreadyLoaded) {
		return;
	}
	alreadyLoaded = true;
	//your important loading stuff here
	PostDataLoad();
}


function PostDataLoad() {
	//your important post loading formatting stuff here
}

Data Validation Before Submission

It is also possible to include a function in your form that will run your own validation routines before submission.  If we don't find this function, we'll assume validation passed and continue submission.  The function must be named

VerifyFormDataCall

This can return true or false whether or not the validation passed.  A validation failed notification will be displayed if false is returned and submission will be cancelled.

Electronic Signature Inputs

• Canvas elements for signatures also need to have an ID tag.  If you want additional description data for them to appear in the signatures box, include it as a data-signatures field like this.
• If there are multiple groups of users and only certain groups should have access to the signature, this can be achieved using JS to add/remove the data-signature-ignore attribute to the canvas element. When the attribute is there the signature cannot be interacted with. 

<canvas style="width:550px; height:150px; " id="Signature" data-signature="Signature space for delivery"></canvas>

Using external includes in your form

• Consider the behavior of external includes in your form.  HTML forms are injected into iframes in order to be properly displayed in the Forms inMotion application. IFRAME behavior can be heavily restricted by the browser's security implementation.  External includes should always be made using the same protocol of your hosted Forms inMotion server (if your server address is https://yourserver.com/FormsinMotion/) then make sure that your external references all use https as well!  It may be easier to include things like jQuery, BootStrap, etc. directly in your code instead to prevent external includes problems.
• Fields should be defined as follows.  Non-standard or non-HTML5 implementations may prevent the form from being submitted.  You can wrap these things with labels or DIVs to make them conform to your style preferences, but the field definition must be as follows:

<input id="myinputname" />
<input id="mycheckbox" type="checkbox" />
<input id="myradio" type="radio" />
<select id="myselectbox"><option value="stuff">Stuff</option></select>
<textarea id="mytextarea"></textarea>

Notes on Form Design

• Be sure to set your body to a non-relative size in pixels. Your form is framed into the application using an iframe, so CSS VH or VW units do not work properly. If your body is set to 100% width or height, make sure that all of the elements in the DOM have a set height so your page is rendered properly.

Default Saved Form Name

It is possible to automatically populate the save message for a form package using an input on your form.  This can be a hidden input but it must have an ID of "FORMSINMOTION_SAVENAME".

<input id="FORMSINMOTION_SAVENAME" style="display:none;" />

Related articles

• Page:
  Creating Custom HTML Forms
• Page:
  HTML to PDF
• Page:
  Upgrading an existing HTML client on a Web Server