Form Builder


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.


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.


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


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.


TypeDifferent request types.
URLThe service request URL.
HeadersConfigure request headers.
Value pathProvide a path to retrieve object data.
  1. Response data:
    { message: ['dogName'] }

  2. Value path:

  3. Result:

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


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


The following section explains what are the form options provided.

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

  • 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


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.