Skip to main content
Skip table of contents

Web Forms

Overview

Web Form Features

System Compatibility

PDF Form - Web Form

Matrix Overview

Building a simple webform

Overview

The Web Form feature for E-Signing is designed to provide a modern, intuitive, and scalable system for seamless web form creation with API integration. Web Form enables the Customer to design and deploy customizable web forms effortlessly. Web Form enhance user accessibility and input management during the document signing process.


Web Form provide a scalable solution for managing user input during E-Signing workflows.

The E-Signing Web Form is a lightweight JSON-based structure that declaratively describes dynamic forms in a platform independent format.

The Web Form feature is designed to allow customers to create interactive, multi-page forms using a JSON-based definition file. This approach ensures:


• Seamless user interactions and structured data collection.
• Support for multiple languages to achieve a wider reach.
• Responsive design for optimal rendering across various devices and form factors.
• A flexible alternative to traditional PDF-based forms.


The Customer has control over form creation and customization.

The syntax supports a wide variety of form fields, validation rules, conditional logic, layout controls, and multiple languages in a standardized way.

Web Form Features

Input Format
• Web form are created using a Web Form Definition File in JSON format.
• This file defines the structure, layout, and supported elements a form.
• The JSON format ensures flexibility, and seamless integration with the E-Signing platform.


Supported HTML Elements
The web form supports a predefined set of interactive HTML elements:
• Text Elements: Header, Paragraph
• Input Fields: Textbox, Text Area, Password Field, Date Picker, Color Picker
• Selection Controls: Radio Button, Checkbox, Select Box
• Media and Links: Image, Hyperlink (Href link)


Multi-Page Forms
• Web Form support multi-page forms with built-in navigation.
• This enhances user experience and allows for structured data collection across different sections.


Language Translations
• Flexible multilingual support for all user texts and prompts.
• Improves the reach for a wider audience, improving the user experience.


Submission Format
• Before submission, the web form definition must be converted to Base64 format.
• This aligns with the existing document submission formats (PDF, TEXT, XML) used in E-signing workflows.


System Compatibility

  • Web Form are available through the REST API interface.

  • The feature is compatible only with the new E-Signing output format ASiC (Associated Signature Container).

  • After the Web Form is signed, a ZIP file (ASiC) is generated containing the Web Form Definition, the user’s input, and the digital signatures – all securely packaged.

PDF Form - Web Form

  • To make data entry easier, the PDF Form is combined with a Web Form, allowing users to fill in their information, which is then automatically transferred back into the PDF.

  • The feature is compatible with all the new E-Signing output formats https://doc.ingroupe.com/developer/signed-document-formats

Matrix overview

The Web Form definition format is the most flexible document type that E-Signing supports.

Feature \ Type

Text

PDF

PDF Form

XML

Webform

Human-readable

Easy for users and developers to read and edit manually. Improves accessibility.

Structured data

Data organized in fields or elements for easy parsing, and automation into existing workflows.

⚠️Limited

Fillable fields

Ability for users to input data directly into the document.

Dynamic behaviour

Supports interactivity such as conditional display or validation rules.

⚠️Limited

Adaptive layout control

Ability to control positioning and appearance of content on page/screen.

⚠️Fixed

⚠️Fixed

⚠️XSLT

Input validation

Support for enforcing correct data input to reduce errors.

⚠️Limited

Machine-readable output

Output    Output easily processed by automated systems without extra steps.

⚠️OCR

Multilingual

Supports multiple languages in the same document. Users can switch at any time.

Rich content

Suitable for rendering rich content with images and other visuals.

The Web Form definition file is the input format used to describe an E-Signing Web Form. The definition file provides the structure and description of the collected data.

Structure and data

Description

manifest

Meta-information about the form, including its unique identifier, version number and presentation hints.

templates

A template defines the structure of a form, including its pages and sections.

sections

A section describes a page that groups related form entries together.

For example, a "Contact Info" section may contain entries for name, address, and phone number.

entries

An entry represents one data item that the form will collect, and also provides a hint on how that item will be rendered to the user.

For example, An entry with id "full-name" can be rendered as a text field. The value submitted will have the id as form parameter name.

resources

User resources such as language translations and basic graphics. Language texts are used to provide internationalization support.

Building a simple webform

Form Manifest

Form Template

Entry Definition

Form manifest

The first step of defining a Web Form is by specifying the manifest that describes how the form will be rendered:

CODE
"manifest": {
    "formId": "formdef-current-page-indicator",
    "version": 2,
    "config": {
        "separator": ";",
        "progress": "ICONS"
    }
}

Attribute

Usage

formId

An identifier for this Web Form.

version

A generation number used for controlling available features.

config

Optional configuration paragraph

separator

The character to use for returning multi-value input choices

progress

Type of progress indicator rendered on the form:

ICONS - progress indicator with graphics visuals
INDEX - page number indicator
TABS - form pages are rendered as tabs
TEXT - custom text
NONE - no progress indicator

Form template

Next, the form template describes the structure and content of the Web Form

CODE
    "templates": [
        {
            "pageId": "user-info",
            "sections": [{
                    "id": "user-bio",
                    "entries": [{
                            "id": "full-name",
                            "type": "TEXT_SINGLE",
                            "placeholder": "full-name",
                            "validation": [ "required" ]
                        }, {
                            "id": "email",
                            "type": "TEXT_SINGLE",
                            "validation": [ "required", "pattern:^[0-9]" ]
                        }]
                }]
        }]

Attribute

Usage

templates

An array of templates represents the pages of a Web Form.

Multipage forms have multiple templates.

pageId

A unique identifier for the template (page).

sections

A section is a collection of related form fields on a single page.

A page can have multiple sections.

id

An identifier for a specific section.

entries

A section contains one or more form fields.

Each form field is defines by a single entry within the entries array.

Entry definition

Attribute

Usage

Example

id

A unique ID for the specific entry.

When a webform is submitted, the ID of the entry will be used as the form field name.

The ID is also used to look up translation texts for the form field label.

type

The type of the entry determines how it is displayed to the user:

HEADING - Heading text
INTRO - Short intro paragraph
PARAGRAPH - Content/text 
TEXT_SINGLE - Single line text
TEXT_MULTI - Multi-line text
CHOICE_SINGLE - Single choice (radio)
CHOICE_MENU - Single choice (dropdown)
CHOICE_MULTI - Muti choice (checkbox)
CHOICE_COLOUR - Colour picker
CHOICE_DATE - Date picker
HIDDEN - Hidden field
PASSWORD - Password field
IMAGE - Image

CODE
{
    "id": "frame-colour",
    "type": "CHOICE_COLOUR"
}, {
    "id": "frame-size",
    "type": "CHOICE_MENU",
    "value": "small",
    "values": ["small", "medium", "large"]
}, {
    "id": "gears",
    "type": "CHOICE_SINGLE",
    "label": "select 1 things",
    "value": "three",
    "values": ["one", "three", "fifteen"]
}, {
    "id": "accessories",
    "type": "CHOICE_MULTI",
    "label": "select from things",
    "value": "reflectors;stickers",
    "values": ["reflectors", "bell", "stickers"]
}, {
    "id": "multiple-lines",
    "type": "TEXT_MULTI",
    "values": ["line one", "line two"]
}

placeholder

A placeholder string for the form field. For text inputs only.

The placeholder value will be used as a placeholder text if it is not found in the language texts resources.

value

An initial value for the form field.

values

An array of initial values for the form field. For multi-value form elements such as menus and choices.

validation

An array of validation rules for the form element. Rules can include constraints such as:

required - Ensures the form element has a submitted value.
date-range: - Specifies one or more date ranges for the input.
number-range: - Specifies one or more numeric ranges for the input.
pattern:<regex> - Ensures the input matches a specific regular expression pattern.

CODE
// dates between 2900-01-01 and 2920-12-31,
// or any date after 2950-01-01
date-range: 2900-01-01,2920-12-31 | 2950-01-01+
CODE
// numbers between 1 and 12,
// or numbers greater than 64
number-range:1,12 | 65+
CODE
// a regular expression for the numbers 0 to 9
pattern:^[0-9]

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.