Advanced Forms

In the previous section we have gone through how to make a custom form using the components available. Here we are going in to a bit more deep to create dynamic form components, perform OTP verification, how to the date/ time action. So, let's begin-

Perform OTP Verification(Phone)

In the phone component, we have a option to enable OTP required for phone verification. After enabling OTP required, a few more settings will be visible. First let's go through the request to send an OTP-

• OTP Code Digit: Select the code length we require.

• OTP Valid For: Here we choose a time, the code will be applicable.

• OTP Send API (green box): Select the API that will send a code to the phone number provided.

OTP send & verification settings

Now we are going to set the OTP verification part where the sent OTP will be verified using another API-

• Save OTP Response (marked in yellow): When a customer provides the OTP, it will be save in the selected attribute

• OTP Validate API (blue box): Here we have to select the API that will validate customers input

• OTP Confirms When: Here there are two options, API Status & Attribute.

  • We will use API status when we want to confirm validation by confirming if an API has been triggered successfully.

  • We will use attribute when we will receive a value that we want to check after the API is called.

Email Verification With Regex

When we add the email component, it will just check if it has (@) & (.com) in the end. But if we want, we can enable a validation check by expanding the More Option section

• Input Validation(green box): Here we can provide a specific set of rules that will try to match customer input.

• Validation Error Message(yellow box): Here we will provide an error message if the validation fails

Dynamic Option

For Choice List, Dropdown & Multiple Choice we can dynamically create the options using API

After clicking Fetch from API button, we will get a pop-up from where we have to select an available API.

Then we have to choose the attribute that is storing the response from the API (marked in green)

After that depending on the response we have to select data type from either string or object. If the response is delivered as multiple string than we can use String. But if the response delivered as objects containing multiple string than we have to use Object.

If we select Object, then we have to provide the key (elements of each object in the API's response)

Suppose this is a response (below image) saved in an attribute. There are multiple objects like "id=1" containing multiple text elements. As options, we want to provide the title of each object. So, after selecting object as API response data format, we have to type "title" in the button text box.

Dynamically Available Date & Time Slot

Date

Using API, we can get weekdays as well as dayoffs to be visible to customer from server. After connecting an API, we have select the attribute that holds the available weekdays values that will be shown to customers. Same goes for Exclusive Leaves.

Suppose a business has different weekdays that are stored in their CRM. Using the API feature, we can easily import the data & don't need to update in both places.

Time

Similarly after enabling time picker, we have to select an API. Then we have to select the attribute that holds the available time slots a customer can book an appointment, meeting.

This feature is best for healthcare industries where patients have to select appointment slots that are available for specific dates

Any questions? Please email us at [e-mail] or scan to chat with us.