Forms

Updated: June 24, 2022
Contents

    Overview

    The Forms Management module enables Distributors to create and manage custom forms on the CloudBlue Connect platform. These forms are used to collect additional information from Vendors to perform the following operations:

    1. Request additional data before a Vendor enrolls a Distribution Agreement.
    2. Acquire Product-level information before a Vendor submits a listing request.
    3. Get additional Item-level information before a Vendor submits a listing request.

    Custom forms can be especially helpful for acquiring necessary information for various business scenarios. Example use cases include, but not limited to the following scenarios:

    • Generating an Agreement type form to collect banking or finance information. Such data could be essential for creating and enrolling distribution agreements that should meet your business requirements.
    • A Product type form can be used to specify support channels for Software-as-a-Service products. Therefore, your customers can submit questions or report occurring issues to relevant support agents.
    • Creating an Item type form to specify different phone numbers for different items (SKUs). Thus, some customers can request certain items from one phone number and get different items from another number.

    The following provides instructions on how to create and attach custom forms on the Connect platform.

    Creating forms

    Create a custom form on the Connect platform by following the steps below.

    1. Start creating a new form

    Click the Create Form button from the Forms module.

    2. Define your custom form

    Define your custom form within the following pop-up window:

    • Name: Enter a name for your form.
    • Type: Specify your form type.
      • Agreement: Select this type to get additional data before your Vendor enrolls a Distribution Agreement.
      • Product: Choose this type to request more Product-related information before your Vendor submits a listing request. Thus, Distributors can get specific Product data for certain Marketplaces (e.g., specific product description) 
      • Item: Select this type to acquire additional Items-related information before your Vendor submits a listing request. Therefore, Distributors can request specific Items data for particular Marketplaces (e.g., MSRP, detailed SKU description, Item dependencies, etc.) 
    • JSON schema: Specify your custom form via the JavaScript Object Notation format. Refer to Schema Definition below for more details.

    3. Save your custom form

    Click the Save button to save your defined custom form.

    Therefore, your defined custom form will be successfully created and saved within the Forms module.

    Attaching Custom Forms

    Once a custom form is successfully saved, Distributors can attach custom forms within a created Distribution Agreement.

    Information

    Each type of your custom form can be attached to your generated distribution agreement. Furthermore, note that one custom form can be used with multiple distribution agreements.

    The following steps showcase how to successfully attach your created form to your distribution agreement.

    1. Access distribution agreement details

    Click on your distribution agreement name from the Agreements tab of the Partners module to access the distribution agreement details screen.

    Alternatively, click on your distribution agreement name under Distribution Agreements from the program agreement details.

    2. Navigate to Details

    Switch to the Details tab button upon accessing your distribution agreement.

    3. Attach your created form

    Click the Edit button next to your Attached forms. The following menu allows selecting your create Agreement, Product and Item custom forms via corresponding fields.

    Once all forms are selected, click the Save button to save your attached custom forms.

    Therefore, your selected custom forms will be attached to your distribution agreement. Your Vendor will be prompted to fill out your custom form before enrolling the distribution agreement and/or submitting a listing request.

    Schema definition

    Custom forms are defined via the aforementioned JSON schema field. Each element in your custom form (input field, checkboxes, etc. ) must be described as a JSON element. Connect provides the form preview field that facilitates and rectifies your custom form creation. 

    Following types of elements of the Form are currently supported:

    Text Input

    Basic text input field. 

    JSON Schema:

    {
       "required":true,
       "type":"text",
       "id":"name",
       "title":"Name",
       "note":"Text field description"
    }

    Preview:

    Text Area

    JSON Schema:

    {
       "type":"textarea",
       "id":"notes",
       "title":"Notes"
    }

    Preview:

    Checkboxes

    JSON Schema:

    {
       "type":"checkbox",
       "id":"checkeable_options",
       "title":"Checkable options",
       "note":"Check box Note",
       "meta":[
          {
             "value":"option_1",
             "label":"Option 1"
          },
          {
             "value":"option_2",
             "label":"Option 2"
          },
          {
             "value":"option_3",
             "label":"Option 3"
          },
          {
             "value":"option_4",
             "label":"Option 4"
          }
       ]
    }

    Preview:

    Dropdown

    JSON Schema:

       {
          "id":"chooseable_options",
          "type":"dropdown",
          "title":"Selectable options",
          "meta":[
             {
                "label":"Option 1",
                "value":"option_1"
             },
             {
                "label":"Option 2",
                "value":"option_2"
             },
             {
                "label":"Option 3",
                "value":"option_3"
             },
             {
                "label":"Option 4",
                "value":"option_4"
             }
          ]
       }

    Preview:

    Description

    Use the ‘description’ element to add any text between other elements from your custom form:

    JSON Schema: 

    {
       "id":"Description",
       "type":"description",
       "value":"**Bold Text** and new line:  \nAnother line of text"
    }

    Preview:

    Section 

    Divide elements into groups by using this element:

    JSON Schema:

    {
       "id":"section",
       "type":"section",
       "value":"Home Address"
    }

    Preview:

    Object fields

    Each element of the form can be described using the following attributes:

    PropertyTypeOptionalDescriptionExample
    idstring
    Field Identifier, should be unique, it will be used to refer field data in the resulting object. Should be alphanumeric plus underscore, lowercase.name
    typestring
    Field type, one of: text | section | checkbox | dropdown | textarea – (refer to Schema Definition above)text
    titlestring
    Field title, (localizable)Display Name
    requiredbooleanIf set to true – field should be filled in before submitting formtrue
    filterstringRegular expression to check data for validity/^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s./0-9]*$/
    metaarrayAdditional data for checkbox and dropdown[ { “label”: “Label 1”, “value”: “option_1” }, { “label”: “Label 2”, “value”: “option_2” }]
    custom_errorstringCustom error to show if filter was not satisfiedEmail should be in format login@domain.name
    valuestringDefault value
    notestringSome additional explanation is written under the field 

    Form Example

    Use the following form as an example for your custom form:

    [
       {
          "id":"name",
          "type":"text",
          "title":"Name",
          "required":true
       },
       {
          "id":"section",
          "type":"section",
          "value":"Home Address"
       },
       {
          "id":"email",
          "type":"text",
          "title":"Email",
          "custom_error":"Email should be in format login@domain.name"
       },
       {
          "id":"phone",
          "type":"text",
          "title":"Phone"
       },
       {
          "id":"checkeable_options",
          "type":"checkbox",
          "title":"Checkable options",
          "meta":[
             {
                "label":"Option 1",
                "value":"option_1"
             },
             {
                "label":"Option 2",
                "value":"option_2"
             },
             {
                "label":"Option 3",
                "value":"option_3"
             },
             {
                "label":"Option 4",
                "value":"option_4"
             }
          ]
       },
       {
          "id":"chooseable_options",
          "type":"dropdown",
          "title":"Selectable options",
          "meta":[
             {
                "label":"Option 1",
                "value":"option_1"
             },
             {
                "label":"Option 2",
                "value":"option_2"
             },
             {
                "label":"Option 3",
                "value":"option_3"
             },
             {
                "label":"Option 4",
                "value":"option_4"
             }
          ]
       }
    ]
    Is this page helpful?
    Translate with Google
    Copied to clipboard