Introduction

Custom forms enable lenders to create tailored questions that your customers must answer when applying for loans or services. This flexibility ensures lenders gather all the relevant information for better decision-making. These forms are structured in JSON, which is easy to customize and supports various input types, validations, and actions.

This guide provides an overview of the form structure and steps to create a custom form.

Understanding the JSON Structure

The JSON form is divided into the following components:


1. Meta Section

This section defines the form's metadata:

  • name: The form's name.
  • description: A brief explanation of the form's purpose.
  • version: The form's version.
  • url: The platform link where the form is hosted.
  • status: Indicates if the form is active.
"meta": {  "name": "Test Org Inc.",  "description": "Customized application flow for Test Org Inc.",  "version": "1.0",  "url": "https://test-org.lsq.app",  "status": "active"
}


2. Pages

The pages array contains multiple sections of the form. Each page has:

  • name: The page identifier.
  • title: The page title displayed to borrowers.
  • description: A summary of the page.
  • actions: Buttons like "Continue" or "Cancel" to guide borrowers.
{  "name": "Education",  "title": "Education Details",  "description": "Provide your education details.",  "actions": [    { "type": "continue", "label": "Continue" },    { "type": "cancel", "label": "Cancel", "message": "Are you sure you want to cancel?" }  ]
}


3. Sections

Each page contains sections grouped logically. A section includes:

  • name: The section identifier.
  • description: A brief introduction.
  • fields: The input fields borrowers must complete.


4. Fields

Fields define the actual input elements. Key attributes include:

  • id: Unique identifier.
  • name: Field name.
  • type: Input type (e.g., short_text, select, number, date).
  • label: Field label displayed to users.
  • description: A short explanation of the field.
  • validation: Rules borrowers must follow.
  • options (optional): Predefined choices for select fields.

Example:

{  "id": "institution",  "name": "Institution",  "type": "short_text",  "label": "Institution Name",  "description": "Input your institution name",  "validation": {    "required": true,    "minimum_length": 1,    "maximum_length": 256  }
}

5. Validations

You can enforce specific rules to ensure proper data collection:

  • required: Ensures the field is mandatory.
  • minimum_length / maximum_length: Controls text input length.
  • minimum / maximum: Sets numeric limits.
  • allowed: Specifies allowable file formats (for uploads).
  • multi_select: Determines if multiple options can be selected.


6. Actions

Define how users navigate the form:

  • Continue: Moves to the next page.
  • Cancel: Discards current entries with a confirmation prompt.
  • Submit: Finalizes the form.
"actions": [  { "type": "continue", "label": "Continue" },  { "type": "submit", "label": "Submit" }
]

Input Types

Here are some input types you can set up:

  1. Short Text: For single-line text.
    "type": "short_text"
  2. Select: For dropdown or multiple-choice options.
    "type": "select",
"options": [
  { "label": "High School", "value": "High School" },
  { "label": "Bachelors Degree", "value": "Bachelors Degree" }
]
  3. Number: For numeric inputs.
    "type": "number",
"validation": { "minimum": 1, "maximum": 100000 }
  4. Date: For date inputs.
    "type": "date"
  5. Phone: For phone number inputs
    {
  "id": "phone_number",
  "name": "Phone Number",
  "type": "phone",
  "label": "Phone Number",
  "description": "Enter your phone number",
  "validation": {
    "required": true
  }
}
  6. Email: For capturing email addresses.
    {
  "id": "email",
  "name": "Email Address",
  "type": "email",
  "label": "Email Address",
  "description": "Enter your email address",
  "validation": {
    "required": true,
    "minimum_length": 5,
    "maximum_length": 256
  }
}

  7. Image Upload: 

    For uploading images like IDs or photos.

    {
  "id": "profile_picture",
  "name": "Profile Picture",
  "type": "upload",
  "label": "Upload Your Profile Picture",
  "description": "Upload a clear image of yourself",
  "validation": {
    "required": false,
    "allowed": "jpg,png",
    "maximum_length": 5
  }
}

  8. Document Upload

    For uploading documents like proof of income or identification.

    {
  "id": "income_proof",
  "name": "Proof of Income",
  "type": "upload",
  "label": "Upload Proof of Income",
  "description": "Upload a document proving your income (e.g., payslip or bank statement)",
  "validation": {
    "required": true,
    "allowed": "pdf,jpg,png",
    "maximum_length": 10
  }
}

  9. URL: For links or references.
    "type": "url"

Example Form in JSON

Below is a simplified example of a form:

{
  "meta": {
    "name": "Application Form",
    "description": "Capture customer's details",
    "version": "1.0",
    "status": "active"
  },
  "pages": [
    {
      "name": "Personal Information",
      "title": "Customer Details",
      "description": "Provide personal information",
      "actions": [
        { "type": "continue", "label": "Next" },
        { "type": "cancel", "label": "Cancel", "message": "Are you sure?" }
      ],
      "sections": [
        {
          "name": "Basic Info",
          "description": "Provide your basic details",
          "fields": [
            {
              "id": "full_name",
              "name": "Full Name",
              "type": "short_text",
              "label": "Your Full Name",
              "description": "Enter your full legal name",
              "validation": { "required": true, "minimum_length": 2, "maximum_length": 
               100 }
            },
            {
              "id": "dob",
              "name": "Date of Birth",
              "type": "date",
              "label": "Your Date of Birth",
              "validation": { "required": true }
            }
          ]
        }
      ]
    }
  ]
}

Tips for Customization

  1. Clearly define field labels and descriptions to avoid confusion.
  2. Use appropriate validations to ensure high-quality data.
  3. Group related questions into logical sections.
  4. Test the form to verify user experience and data accuracy.

By following this guide, you can create effective and user-friendly custom forms to collect the data you need.