Mobile Form Builder

The Form Builder lets you create User forms, for instance a Form for entering contact information. It can be used as a simple User Form, but it is also implemented with the Firebase Plugin and the JSON Api Plugin for adding CRUD functionalities (Create, Read, Update)

Thorium Builder Form Builder

User Form Example

Input Fields Tab

Use + and - buttons to add or remove List Items.
You can also reorder the items by drag&drop within the list.

  • Field Name . The Internal name for the selected field. (attribute “name” in HTML)

  • Field Type.

    • Text Input: a single line text.

    • Long Text: a multi-line text (eg. Comments)

    • List: a list of value, with one selection possible.

    • Radio Buttons: a set of buttons with one possible choice.

    • Switch (checkbox): a widget with only Yes/No Possibility.

    • Range Slider: a slider with possibility to choose a value between 0 and 100.

    • File Input: a Picture or another File Type. (Firebase Plugin only)

  • Label.  The label displayed to the User near the field.

  • Help Text.  The help text displayed to the User below the field.

  • Icon.  An optional Icon displayed at the beginning of the line.

  • Icon Color.  Icon Color for the selected line.

  • Data Type.  Only for Text Input, you can choose the type of text the field is designed for (email, password, date….)

  • Required. The field can’t be empty

  • Place Holder.  An Help text displayed within the field when it is empty. eg. “Enter your email"

  • Pattern.  A validation formula. You can allow only a set of values for a field.For instance, if you set the Patten to apple|banana , then the user will only be able to enter apple or banana.If you want to allow only numbers to the field, use the following pattern: [0-9]*  

  • Error Message . The message displayed to the user if the field validation failed

  • Read Only . The field is Read-Only

  • Clear Button . The field has a Clear button (Text Inputs only)

  • Hidden Field . The field is hidden

Thorium Builder Smart Select

Exemple of Smart Select Mode

Form Workflow

When a user submit a form, by default it will send an email with all the entered fields to an administrator of the WebApp. Since the 1.1 version, it is also possible to define an API address that will be called automatically when the user submit the form.This API can be local (for example your own PHP code added to the project) or a remote API.The Form data will be automatically send to the API and can be processed by your own code.

Thorium Builder Form Workflow
  • Triggered Action. Select the behavior of the Form when the user select the Submit button:

    • Send an email to. You will recaive an email with all the contents of the form (requires php mail on the server)

    • Call API. Submitting the form will call a remote script where you can handle the form data as you need.

    • Call a Javascript function. if you are a developper, then you can write a function that will handle the form data.

  • Success. you can setup here what’s happening when the Form has been succesfully sent,  and you can also set a default message to display to the user.

  • Error.  you can set a default message to display to the user in case of error.

Form Layout

This is the place where you can setup the general apparance of the form:

  • Layout. Standard or Inline

    Thorium Builder Standard Mode
    Thorium Builder Inline Mode

    The same User Form with Standard & Inline display mode

  • Hairlines. Show Lines between fields

  • Inset. add left & right margins to the form.

  • Headers Background and Text Color . set the default colors for Headers (Separators)

    Thorium Builder Form Heading
    Thorium Builder Form Heading

    User Forms with Header (Separator) (Light Mode & Dark Mode)

  • Submit Button Text. Text for the Submit Button.

  • Button Color. Background   Color for the Submit Button.

  • Fill Button, Raise, Rounded….  Button Style (See the  Buttons  documentation for more details)

Copyright©  Nymphide Lab 2020 - All Rights Reserved