Forms

Updated: July 15, 2021
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:

  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:

  • 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. Edit attached forms

Click the Edit button under Attached Forms from the distribution agreements details screen.

3. Select your form

Select your saved Agreement, Product and Item custom forms within each field.

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