Web Forms
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 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
The first step of defining a Web Form is by specifying the manifest that describes how the form will be rendered:
CODE
|
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 |
Form template
Next, the form template describes the structure and content of the Web Form
CODE
|
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 |
| |||
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. |
|