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 dbExpress (SQLite),the Firebase Plugin and the JSON Api Plugin for adding CRUD functionalities (Create, Read, Update)

Thorium Builder Form Builder

User Form Example

Form Data

The Field List implemented in the user Form.


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 sent to the API and can be processed by your own code.

  • initialization. Select the behavior of the Form when it is loaded.

    Before Send. optional Java script function that is called before sending data to the server. 

    The function will receive 2 parameters, the Form Element object and an object containing some parameters  (headers…) that you can modify within the function: 


    The object received in the second parameter contains all the request parameters, the data sent to the server, an optional user-password, and the headers added to the request. You can change all of them at this step, and simply return the object at the end of the function.

    Submit Form. Select the behavior of the Form when the user select the Submit button:

  • Form 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.

  • Form 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