The Form component lets you collect anything from quick contact details to multi-page questionnaires directly inside your app. Each submission can automatically save to a data source, trigger email or push notifications, or feed into other screens for a seamless user journey. This guide shows you how to add a form, pick the right fields, and publish it with confidence.

How to Use a Form Component

Get started

  1. Add a form to your screen
  2. Customise your form fields
  3. Configure form settings
  4. Test your form
  5. Form field types

Step 1 – Add a form to your screen

  1. Open your app and select the screen where you want the form to appear
  2. Using the components menu on the right hand side, drag and drop the form component onto your app screen
  3. The template gallery appears. Choose from a blank form or select a template
  4. Click “Preview” to see the template, then click “Use” to add it to the screen

Step 2 – Customise your form fields

Edit an existing field

  1. Select the field you want to edit
  2. The field settings open on the right
  3. Using the settings, you can update the form field information
  4. Once you are happy with your field edits, click save
  5. Now, you can continue making more edits, or if you are happy with your updates choose “Save & Close”

Add a new field

  1. Whilst in the form settings, click “Add fields +”
  2. Drag the desired field type onto the form
  3. Select the new field to open its settings
  4. Update the settings to suit your requirements. For more on the field settings, see the form fields type information below
  5. Once you are happy with your field edits, click “Save”
  6. Now, you can continue making more edits, or if you are happy with your updates choose “Save & Close”

Re-order fields

  1. Drag any field up or down in the Edit form tab to change its position
  2. Once you have made your changes, make sure to select “Save & Close”

Step 3 – Configure form settings

  1. Click the form to open the settings, and then open the “Settings” tab to configure your form
  2. Select a data source: choose an existing data source or create a new one to store form submissions
  3. When selecting a data source you will be given the option to add any field names that are part of your form to the data source so that the data can be collected on submission. And if your security rules are not configured, you will also have the option to add these.


  4. In the Submission section:
  • Load the data from the user’s profile: This option will mean that any existing information is already pre-filled in the form. This is useful for forms that are used to edit existing data.
  • Single submission: use this setting to restrict the number of times a form can be submitted if the user can submit the form more than once. Learn more here.
  • When the form is submitted add new submissions to a data source: This means the form submission will add a new entry to the data source.
  • When the form is submitted update existing entries in a data source: This is the option you should select for updating existing information. It means the current data will be replaced with the new data and will not create a new data source entry.
  • (Optional) Tick “Send an email notification” and click “Configure email template” to customise the email. Learn more on sending emails here

    5. For the “After the form has been submitted…” settings choose one:

  • Show a confirmation message – keep the user on the same screen
  • Take the user to another screen – redirect after submission
  • (Optional) In the Form template tab, click Save to reuse this form in other app

   6. Once you are happy with your configurations, click “Save & Close”

Step 4 – Test your form

  1. Switch to preview mode by clicking “Preview” in the top right corner
  2. If your app has a log in, make sure you are logged in to the app
  3. Submit a test entry using your form
  4. Open your chosen data source to confirm that the submission was saved correctly
  5. If you configured an email to be sent, also ensure that has delivered

Form field types

All Fliplet form fields share the same core controls within the settings that help you further configure the form. All field-specific options are listed inside the blocks below.

  • Field name – This should be the name used in your data source column so the data can be collected correctly
  • Field label – text your users see on screen
  • Placeholder – hint text inside an empty input
  • Default value & type – pre-fill with static text, user profile data, URL parameters, or today’s date. To learn more about using user profile data see here
  • Required? – add an asterisk (*) to indicate to users that this form is required. This will also prevent users from submitting a form until this field has a response
  • Read only / Cannot be edited – show data without allowing changes
  • Hide from users – keep a value invisible while still saving it. This is useful for pre filled fields. Fields such as user email set up using the logged in users data or time of submission or example
  • Width – full, half, or one-third column for responsive layouts
  1. Text inputs
  2. Multiple-option fields
  3. File uploaders
  4. Formatting
  5. Date & time
  6. Buttons
  7. Advanced

1. Text inputs

Single-line text

  • Use for: any one-line answer (e.g., names, titles)
  • Field-specific options: None
  • Example: “First name”

Number input

  • Use for: quantities, scores, budgets
  • Field-specific options:
    • What numbers should be allowed?
      • Allow all numbers
      • Positive numbers only
    • Decimal places allowed – leave blank for whole numbers only
  • Example: “Budget (USD)” – positive numbers, two decimal places

Password input

  • Use for: secure passwords (min 8 chars, 1 upper, 1 lower, 1 number, 1 symbol)
  • Field-specific options:
    • Encrypt password? – stores an unreadable hash in the data source.
    • Auto-generate password on new entry? – disables manual input and generates a secure string on submit
    • Ask users to confirm password? – adds a second “confirm password” box
  • Example: “Create account password” with encryption and confirmation enabled

Multiple-line text

  • Use for: longer free-text answers
  • Field-specific options: Rows – set text area height (default 2)
  • Example: “Project overview” – 5 rows

Rich text

  • Use for: multi-line answers requiring bold, lists, links (stored as HTML)
  • Field-specific options: Rows – textarea height (default 5)
  • Example: “Detailed bio” with formatting

2. Multiple options

Dropdown (single-select)

  • Use for: choosing one value from a space-saving menu
  • Field-specific options: Option placeholder – hint text until a choice is made
  • Example: “Country”

Dropdown (type-ahead)

  • Use for: large or dynamic lists with search-as-you-type
  • Field-specific options:
    • Allow user to add their options – lets users enter values not in the list
    • Populate suggestions from a list of values
      • Value options – one per line
      • Limit number of list items – optional cap
    • Populate suggestions from a data source
      • Select a data source and column
      • Limit number of list items (optional)
  • Example: “Skills” tag field with custom add enabled

Radios (single-select)

  • Use for: one answer, all options visible
  • Field-specific options: None
  • Example: “Preferred contact: Email · Phone”

Checkboxes (multi-select)

  • Use for: allow any combination of answers
  • Field-specific options: None
  • Example: “Select interests”

Matrix

  • Use for: ask multiple questions on a single topic
  • Field-specific options:
    • Row – list questions (one per line)
    • Column – list possible answers (one per line)
  • Example: Rate satisfaction across five features

Reorder list

  • Use for: let users drag items into a preferred order
  • Field-specific options: Enter list values manually or pull from a data source. The initial order you set is what users first see
  • Example: Rank project priorities

3. Files

Image upload

  • Use for: user photos or screenshots
  • Field-specific options:
    • Max image width (px)
    • Max image height (px)
    • Select the folder where images are stored in File Manager
  • Example: “Upload profile picture”

Attach a file

  • Use for: PDFs, DOCX, ZIP … any document
  • Field-specific options: Select the folder to store uploaded files
  • Example: “Attach your CV”

4. Formatting

Title

  • Use for: headings within a form section
  • Field-specific options: None
  • Example: “Personal details”

Paragraph

  • Use for: explanatory text (HTML allowed)
  • Field-specific options: None
  • Example: Terms & conditions summary

Spacer

  • Use for: visual divider (horizontal line)
  • Field-specific options: None
  • Example: Break up a long form

5. Date & time

Date range

  • Use for: select a start and end date in one field.
  • Field-specific options:
    • Default – No default · Specific date · Current date if empty · Always current date
    • When applying current date – Use date on load · Use date on submit
  • Example: “Holiday dates”.

Time range

  • Use for: select start and end times
  • Field-specific options:
    • Default – No default · Specific time · Current time if empty · Always current time
    • When applying current time – Use time on load · Use time on submit
  • Example: “Meeting slot (09:00–11:00)”

Timer

  • Use for: stopwatch or countdown inside a form
  • Field-specific options:
    • Timer type – Stopwatch · Countdown
    • Autostart when form is loaded
    • Timer controls – User can control · User cannot control
  • Example: Task duration stopwatch

Timestamp

  • Use for: automatically record date/time (ISO 8601)
  • Field-specific options: Capture on submission · on update · both.
  • Example: Log when a record was last edited

6. Buttons

Clear & Submit

  • Use for: standard actions at the bottom of a form
  • Field-specific options:
    • Show submit button · Submit button label
    • Show clear button · Clear button label
  • Example: “Submit / Reset”

Custom button

  • Use for: trigger your own JavaScript (e.g., myCustomAction())
  • Field-specific options: Function name (see developer docs)
  • Example: “Calculate total” custom action

7. Advanced

Code scanner

  • Use for: scan barcodes/QR codes to capture data
  • Field-specific options: None
  • Example: Inventory check by scanning product codes

Geolocation

  • Use for: capture the user’s latitude/longitude.
  • Field-specific options:
    • Load automatically – pre-fill location on load.
    • Hidden – collects location silently (field becomes optional).
    • Required – user must provide a location.
    • Precise location required – collect exact coordinates.
  • Example: Record inspection site location.

Star rating

  • Use for: user feedback (1–5 stars).
  • Field-specific options: Default value – select a default star rating
  • Example: Rate a training session.

Slider

  • Use for: choose a value between min and max
  • Field-specific options:
    • Description
    • Minimum value number · Maximum value number
    • Number of steps (increments)
    • Default value type & Default value
    • Note: this field is required and cannot be left blank
  • Example: Satisfaction 0–100 in 20-point steps

Signature

  • Use for: collect handwritten signatures
  • Field-specific options:
    • Select folder where images are stored
  • Example: Approve work order on site

Address

  • Use for: autocomplete postal addresses
  • Field-specific options:
    • Restrict search to certain countries (max 5)
    • Allow users to manually add or edit address
  • Example: Shipping address lookup

Map

  • Use for: pick a location on an interactive map.
  • Field-specific options:
    • Default map type – roadmap · satellite · hybrid · terrain
    • Automatically collect user location
    • Placeholder
  • Example: Drop a pin for an event venue.

Default value types

  • Enter a value (static)
  • User profile data (logged-in user)
  • App storage variable (Fliplet.App.Storage)
  • Link query parameter (URL)

Related Articles

Was this article helpful?
YesNo