Version: 9.2

HTML Page Structure

The form definition (i.e. form template) has to be a valid HTML 5 file containing the form enclosed by a <form> tag.

You don’t have to define a HTML title, the title of the HybridForms implementation will be inserted automatically as well as the included standard style definitions and scripts but keep the empty tag otherwise an upload error will occur.

HTML structure
<!DOCTYPE html>
<html>
<head>
    <title></title>
    ...
</head>
<body>
    <form>...</form>
</body>
</html>

In case of the necessity of custom styles and/or JavaScript include external stylesheet(s) and/or JavaScript file(s) to keep your HTML-code clear:

import style and script
<head>
    ...
    <link rel="stylesheet" data-hf-href="example.css">
    <script data-hf-src="ExampleHelpers.js"></script>
    ...
</head> 

Note

Please declare any namespaces defined in your external JavaScript files inside the HTML <body> ahead of the opening <form> tag otherwise you will receive a severe error when opening the HybridForms App.

Namespace declaration
<body>
    <script type="text/javascript">
        WinJS.Namespace.define("HFFormdefinition.ExampleHelpers", {});
    </script>
    <form>
    ...
    </form>
</body> 

Note

Please keep your CSS up to the CSS 3.0 Standard and especially ensure you are referencing images by the correct quoted path (i.e. url("{{HFFormPath}}/image.png")) inside your CSS file.

Images

You have two possibilities to add images to your form – by using the form element "DrawingControl" (see Chapter DrawingControl) to provide a background image for marking or highlighting any important spots at the picture or by using an image for design purpose (e.g. a logo or a default thumbnail to be displayed on the dashboard).

Image reference
<div class="r1 c1">
   <img src="{{HFFormPath}}/self-evaluation-130x130.svg" class="self-evaluation">
</div>

Note

All referenced files have to be stored at the server as attachments of the form definition.

HTML Page Structure

Images​

Images