Form

Overview

A form is a container of elements that submits the data collected from the user to the required destination. The form triggers a REST API to interact with the server. A form can be added to a cell.

A newly added form is shown below:

Note: You can configure the properties of the newly added form using the properties panel on the right-side panel. For more details, see Properties of a Form.

Properties of a Form

Properties of a form are available under the tabs Settings, Style, Logic, Callbacks, and Rules.

Settings Tab

Below are the general properties of a form:

Property	Description
Form Name	Indicates the name of the form.
Form ID	Holds the auto-generated ID of the form.
Block States	Holds a list of block states. The block states are configurable. A block can be defined in multiple states with different contents. Note: To know more about the block states, refer to the section State.

Style Tab

Below are the style properties of a form:

Group	Property	Description
Breakpoints	—	Indicates the breakpoints of a form. Note: For more details on the breakpoint, see Breakpoint.
General Settings	Width	Specifies the width of a form. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Height	Specifies the height of a form. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Padding	Specifies the padding of a form. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
	Direction	Represents the direction of the element. The contents can be arranged either in the vertical or horizontal direction. Note: Click and select Manually customize per orientation to set the direction separately for LR (Left to Right) and RL (Right to Left).
	Alignment	Represents the alignment of the element. The contents can be aligned as Left, Right, Center, Top, Bottom, or Stretch. Note: Click  and select Manually customize per orientation to set the alignment separately for LR (Left to Right) and RL (Right to Left).
	Wrap Items	Indicates whether the items in the form can be wrapped or not. Enable this toggle to wrap the items.
Scroll	Scroll Effect	Indicates the scroll effect. The value can be None or Sticky. If the value is Sticky, you need to provide Height from the Top and enable or disable Preview Sticky in Builder.
Background	Fill Type	Holds the fill type of the form background. The value can be Solid Colour, Gradient Colour, or Background Image
	Color	Holds the color of the form background.
	Opacity	Holds the opacity of the form background. The value can be set as a % value.
Corner Radius	Corner Radius	Makes the corner of the element rounded. The value can be set as a % or pixel value. Uniform values can be set for all the corners or different values can be set for each corner.
Border	Border Size	Sets the size of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
	Border Color	Sets the border of the page overlay. The value can be All, Top, Bottom, Left, and Right.
	Color	Holds the color of the page overlay border. The color is applied to the selected border as in Border Color. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Holds the opacity of the page overlay border. The value is set as a %.
Drop Shadow	Drop Shadow	Configures the shadow of an element. The value can be: H Offset – Indicates the horizontal offset. You can enter either a positive or negative value. V Offset – Indicates the vertical offset. You can enter either a positive or negative value. Blur – Holds the blur radius length of the shadow. If the value is larger, the shadow becomes larger and more blurred. Spread – Holds the spread value. The value can be: A positive value causes the shadow to expand and grow bigger. A negative value causes the shadow to shrink.
	Color	Specifies the color of the shadow.

Logic Tab

Below are the logic properties of a form:

Property	Description
URL	Holds the URL of any REST API. For example, https:// <EnvironmentName>/orchestrationservices/storefront/customers/login?locale=<Locale>&storeId=<StoreID>
Method	Specifies the REST API method. The value can be GET, POST, PATCH, PUT, or DELETE.
Request Format	Holds the request body format of the POST, PATCH, or PUT method. The value can be Array or Object. Note: You need to choose this property only if the parameters of the API need to be sent as an array or an object.
Update Datapoint	Specifies the datapoint or API to be triggered after a GET API. When the URL is a GET method, you need to get the response from that API and update/trigger another API. For example, while the user updates the shipping address for checkout, the user enters an address. Based on the user’s value, the delivery method datapoint or API is triggered and displayed there.
Authentication	Holds the authentication details to access the API. You can use this only if authentication is required to access the API mentioned in the URL property. You can give bearer token, local storage, or use another datapoint.

Callbacks Tab

The Callbacks tab helps to set the below callbacks for a form:

• Before – Indicates the action to be taken before triggering the form. For example, you can validate the form before submitting it.
• Success – Indicates the action to be taken after the successful triggering of the form. For example, the action can be redirected to a new page or change the block state of an element.
• Error – Indicates the action to be taken when there is an error after triggering the form.

Note: For more details on creating callback functions for a form, refer to the section Creating a Callback Function for a Form.

Rules Tab

The Rules tab helps to set up rules to change the state of a form. For example, the state of a form can be changed after the user selects the newsletter subscription option.

How To

A user can:

• Create a Form
• Edit a Form
• Add Elements to a Form
• Delete a Form
• Duplicate a Form
• Promoting a Form as a Public Block
• Creating a Callback Function for a From

Creating a New Form

You can create a new form on a page.

To create a new form:

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required page. For example,
   
4. Select the desired cell available on the page:
   
5. Click available at the top-left corner.
   A list of items that need to be added in a cell appears:
   
6. Drag and drop the form from the ELEMENTS section of the add-panel to the desired cell:
   
   Note: When a new form is created, it is placed as a standard form by default, however, it can be converted to a shared form.
   A new form is created in the desired cell of the page:
   

Editing a Form

You can edit a form available on a page.

To edit a form:

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required page. For example,
   
4. Select the desired cell available on the page.
5. Click the desired form:
   
6. Edit the form as needed using the properties in the right navigation panel.
   The form is edited.

Adding Elements to a Form

You can add elements to a form.

To add elements to a form:

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required page. For example,
   
4. Select the desired cell available on the page.
5. Click the desired form:
   
6. Add the elements from the ELEMENTS panel:
   
   The elements are added.

Deleting a Form

You can delete a form available on a page.

To delete a form:

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required page. For example,
   
4. Select the desired cell available on the page.
5. Click the desired form:
   
6. Click available in the right navigation panel:
7. Select Delete from Project from the dropdown list.
8. In the pop-up, click CONFIRM.
   
   The form is deleted.

Duplicating a Form

You can duplicate a form available on a page.

To duplicate a form:

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required page. For example,
   
4. Select the desired cell available on the page.
5. Click the desired form:
   
6. Click available in the right navigation panel:
   
7. Select Duplicate from the dropdown list.
   The form is duplicated.
   You can use the duplicated form from the generic bucket where it is required.

Promoting a Form as a Public Block

To promote a form as a public block,

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required page. For example,
   
4. Select the desired cell available on the page.
5. Click the desired form:
   
6. Click available in the right navigation panel:
   
7. Select Promote to Public Block from the dropdown list.
   The form is promoted as a public block.
   Note: For more details, see Public Blocks.

Creating a Callback Function for a Form

You can create a callback function for a form.

To create a callback function for a form,

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required page. For example,
   
4. Select the desired cell available on the page.
5. Click the desired form:
   
6. Select CALLBACKS in the right-side properties panel.
   
7. Select the desired callback type such as BEFORE, SUCCESS, or ERROR. For example,
   
8. Click Add Action.
   A new action has been added:
   
9. Provide the action details.
   Note: For more details on actions, refer to the section Actions.

 

Revision History 

Date	Description	Created By	Peer-Reviewed By	Approved By
2023-06-22	Page created and content added.	AN	JP	Suganya