Form Builder

Concept

One of the core concepts for building form applications in BEEKAI is composing. Form module is the first place to start your building journey.

Component Setting

Let's start with a focus on the component level. Each form will be composed of components. The following table will example each attribute and help you create your component.

General

NameDescriptionExample
TypeWhat type of component to render for the user interface.
LabelA caption for an item in a user interface.
NameThis is the unique key to host your input data.
PlaceholderA string that provides a brief hint to the user
TooltipA short description to support your question.
Default valueThis is the initial value
AutocompleteIt will recall previous values entered in the same input.

Options/Lists

NameDescriptionExample
LabelDisplay label
ValueData value to submit when that option is selected.

Validation

NameDescription
RequiredIf the input value is required.
MinIt defines the minimum value that is acceptable and valid
MaxIt defines the maximum value that is acceptable and valid
Min lengthIt defines the minimum number of characters.
Max lengthIt defines the maximum number of characters.
PatternA regular expression the form control's value should match.
ValidateA custom validation logic.

Service

NameDescriptionExample
TypeDifferent request types.
URLThe service request URL.https://dog.ceo/api/breeds/list/all
HeadersConfigure request headers.
Value pathProvide a path to retrieve object data.
  1. Response data:
    { message: ['dogName'] }

  2. Value path:
    message

  3. Result:
    dogName

Store selected objectEnabled this option will store a separate field value with selected object data.

Display

NameDescription
Column widthComponent display width on a large screen.
Field widthField width within the column width
VisibleCustom logic to show and hide a component.

Setting

The following section explains what are the form options provided.

NameDescription
TitleTo be displayed at the form header.
DescriptionA brief description of the form.
StageSet your form to the public or under development.
User interface
  • Watermark: remove the watermark under the form

  • Header Bar: show or hide the header bar

    • File upload: upload a logo image

    • Image URL: provide an image URL

    • Logo destination URL: click on the logo to open your business site in another tab

Tracking
  • Google analytic: insert your tracking ID to integrate with Google analytic

Validation Strategy

This section gives you the ability to control when to trigger the form validation.

  • Submit validation mode: before the user click on the submit button

    • Change event: each time user press their keyboard

    • Blur event: when the user leaves the input

    • Submit event: only validate when the user clicks on the submit button

    • Touch event: input has value and leave the input

  • After submit validation mode

    • Change event: each time user press their keyboard

    • Blur event: when the user leave the input

Submission

You will have the option to take action based on successful or failed submissions.

  • Display custom message

    • Successful Message: display message when submission is successful.

    • Successful Message: display message when submission is failed.

  • Redirect user: redirect the user to another site after successful submission.

Video