Form component

Add fields

Click this button to open the list of available fields for use with a form (see the complete list below)

Text Inputs

List of available text input fields for use with a form. The following options are common to all text input fields:

• Field name – the name of the column in the data source

• Field label – the text above the field on the app screen

• Is this field required? (Yes/No)

• Default value – the form will automatically fill this value as default, giving the user the option to change it

• Placeholder – this can be used to describe what users can submit (eg ‘John Doe’ as  a placeholder for a name field)

• Have this form field act as an ID generator – when enabled the form field will generate a random ID

Text inputs – Number input

Text input field that allows numeric entry only. It includes all of the common options above plus

• What numbers should be allowed?

  • Allow all numbers 

  • Positive numbers only

• Decimal places allowed

Text inputs – Password input

Text input field type that allows password entry. Passwords are required to be at least 8 characters, contain at least 1 uppercase character, 1 lowercase character, 1 number, and 1 symbol.

It includes all the common options above plus

• Should the password be encrypted? – this will mean passwords cannot be read inside the data source

• Should a password be automatically generated when submitting a new entry? – this will disable the field for user input

• Ask users to confirm the password before submitting? – this will add a second input for users to enter their password again

Text inputs – Multiple line input

Text input field that allows multiple lines. It includes the common options listed above and:

• Rows – specifies the height of the text area in lines (default 2)

Text inputs – Rich text

Text input field that allows styling the content with multiple lines of text. Styling will create HTML tags when stored in the data source. It includes the common options listed above and:

• Rows – specifies the height of the text area in lines (default 5)

Multiple options

Multiple option fields allow a user to select one or many options. The following fields are common to all multiple options:

• Field name – the name of the column in the data source

• Field label – the text above the field on the app screen 

• Is this field required?  (Yes/No)

• Hide this field from users – when enabled users will not see this field

• Include select all – when enabled an additional option will be added for users select all multiple choice options

• Options – add an option and hit enter for a new line

• Default value – match one of the options from the field above to set this as the value, which the user can change.

Multiple options – Dropdown (single-select)

A single select option, the dropdown will hide value until a user clicks on it, taking up less space than radios.

• Option placeholder – text inside the dropdown that is shown until the user interacts with the dropdown.

Multiple options – Dropdown (type-ahead)

Enable users to select from a pre-set list of values, from a data source, or by adding a list of values to the form field settings

Upon typing in the input field, suggestions will be displayed to the user and will be refined with every typed letter.

Form field options

• Allow user to add their options – enable the option of not choosing a type-ahead pre-set value
  
  
• Populate suggestions from a list of values
  • Value options (one per line) – add the list of chosen values
  • Select the number of list items the user can select or add, or leave it blank to allow any amount
    
    
• Populate suggestions from a data source
  • Select a data source and column that includes the list of values
  • Select the number of list items the user can select or add, or leave it blank to allow any amount

Multiple options – Radios (single-select)

A single select option, radios will show each option on a separate line.

Multiple options – Checkboxes (multi-select)

A multi-select option, the checkbox will show each option on a separate line. Users can select any options. 

Multiple options – Matrix

Ask multiple questions on a single topic to users. 

Use the Row option to input questions and the Column option to input multiple answers to that question 

Multiple options – Reorder list

A multi-input option to enable users to order the list items to their preference.

Add multiple options to the list using the form settings, or select to use values from the data source.

The order set in the form settings will be what the user originally sees.

Files

• Image upload

• Attach a file

File fields for use with a form. The following options are common to these fields:

• Field name – the name of the column in the data source

• Field label – the text above the field on the app screen

• Is this field required? (Yes/No)

• Set a maximum width for uploaded images (Image upload only) 

• Set a maximum height for uploaded images (Image upload only)

• Select the folder where the images are stored – this will store user-submitted files into the File Manager.

Formatting

• Title

• Paragraph

Formatting fields that are not submitted, but used to style the form:

• Title – Text to title the form or sections of the form

• Paragraph – Text to describe fields or other info. HTML code can be used to style this further.

• Spacer – a horizontal line to break up larger forms

Date & time – date range

Enable users to select a date range in a single form field

Default

• No default value
• Autofill with a specific date if it’s empty
• Autofill with current date if it’s empty
• Always autofill with current date

When applying the current date

• Use the date when form is loaded
• Use the date when form is submitted

Date & time – time range

Default

• No default value
• Autofill with a specific time if it’s empty
• Autofill with current time if it’s empty
• Always autofill with current time

When applying the current date

• Use the time when form is loaded
• Use the time when form is submitted

Date & time – timer

Timer type

• Stopwatch
• Countdown timer

Autostart when form is loaded

If autostart is not selected, the user will need to activate the timer with the “start” button

• Enable autostart

Timer controls

• User can start stop and reset the timer
• User cannot control the timer

Date & time – timestamp 

• When the user first submits the form
• When the user updates the form
• Both initial submission and update

Buttons – Clear & Submit

The buttons at the bottom of the form to submit or reset the form:

• Show submit button 

• Submit button label – the text inside the submit button

• Show clear button

• Clear button label – the text inside the clear button

Buttons –  Custom button

• Add a custom function to your form by including the custom button.
  Learn more here.

Advanced form fields

Click the “Add fields +” button to open the list of available fields and scroll down for advanced fields

Code Scanner

Enables users to easily capture data by streamlining data entry processes and reducing errors.

Geolocation

Enables you to collect the location of the user submitting a form.

Location will be collected in Longitude & Latitude coordinates and recorded in the data source -e.g. 51.525493,-0.0822173
The user must give permission on their device to enable the location to be collected.

• Load Automatically – automatically populate the user’s location* and show them a confirmation message that the location has been collected. Location can be changed by the user selecting “update my location”
  
  
• Hidden – Once the user has allowed location services, the form field automatically gathers location data and no data will be shown to the user *
  *This field cannot be hidden and required. If the field is hidden it will automatically be set to optional as the user may decline to allow location to be collected
  
  
• Required – There must be a location entered in the form field either automatically or submitted by the user
  
  
• Precise location required- if selected the form will collect the user’s precise location*
  
  * Approximate location gives access to the general radius, but not a perfect pinpoint.  For example, approximate location can record what area of which city you happen to be in, but won’t know which street you’re on. Approximate location allows the form to use location services to work properly, like an app offering you suggested activities based on your location, without needing to share exactly where you are.
  Precise location is the exact coordinates down to a pinpoint on a map. Precise location is used if the purpose of your data relies on your exact whereabouts.
  
  Note: 
• All location fields by default will collect approximate location. Only collect precise locations if the requirement is enabled
  
  
• Location will be collected when the form is loaded if “load automatically” is enabled. If not, the location should be gathered when the “use my location” button is pressed by the user
  
  
• Users can refresh the location they are submitting the form at a later point in time by using the “update location” button
  
  
• Users will be shown an error message if location services are not turned on, on their device

Star rating

• Field label – the text above the field on the app screen

• Is this field required? (Yes/No)Hide this field from users – when enabled users will not see this field

• Description – a description above the field to inform the user of any further information

• Default value – the value that is shown by default

Enable users to select a numerical value on a sliding scale between a minimum and maximum value.

Use the “number of steps” setting to determine the increments available to select on the slider.

For example, a slider with a value of 0 to 100 with 20 steps, will enable the user to select a value of 0, 20, 40, 60, 80 or 100

• Field label – the text above the field on the app screen

• Description – a description above the field to inform the user of any further information

• Minimum value number – the lowest value available

• Maximum value number – the highest value available

• Number of steps – the value of the increments

• Default value type – learn more here

• Default value – the value that is shown by default

Note this field is required and cannot be left blank 

Signature

• Is this field required? (Yes/No)

• Description – a description above the field to inform the user of any further information

• Height (px) – the height of the space where users can sign

• Select the folder where the images are stored – choose a folder to save the images to within the file manager

Address

• Is this field required? (Yes/No)

• Description – a description above the field to inform the user of any further information

• Restrict search to certain countries (max 5) – reduce the search countries to streamline your search

• Allow users to manually add or edit address – enable users to also manually input or edit their address, if it cannot be found
  

Enter a value

The enter a value option will allow you to enter a specific value as the default input for the form field

User profile data

If a value is set using Fliplet.App.Storage then the key can be referenced and set as the form fields value

Link query parameter

Form Name

Textbox where the name of the form can be entered

Select a data source to store form submissions

Click to select or create a data source for form submissions. For more information, see the separate article on Data Sources.

Add new submissions to a data source 

Check this box to add new form submissions to the data source. Once checked, the following fields appear:

• Submit the form when the device is (select one of the two options):

  • Online and offline

  • Online only

• Save users’ progress on the form (select one of the two options)
  Note: progress will not be saved after a user logs out of the app

  • Always

  • Never

• Send an email notification whenever a form is submitted – Check this box to send a configurable email notification. For more information, see the Email Template article.

Update existing entries in a data source

Check this box to allow the form to update existing entries in a data source. This requires users to have an Internet connection.

Load the data from a user’s profile

Check this box to load existing data from the data source for the signed-in user into the form. This requires users to log in to your app.

Send an email notification whenever the data is updated

This allows you to configure an email template when existing data is updated. Note: if you do not specify a reply-to email, then the reply will default to no-reply@fliplet.com.
For more information, see the Email template article.

When the form is submitted, do you want to generate an email on the device?

Check this box to load a users’ email program and generate an email based on a configurable email template. For more information, see the Email Template article.

Take the user to another screen

Select this to take the user to another screen after form submission. After selecting, the following fields appear:

• Select a screen – allows selection of the screen which will appear after form submission

• Add query parameters – allows query variables that take the user to a specific part of the screen

• Select an animation – allows selection of the animation that will be triggered after the form submission.

Show a confirmation message

Selected by default, with an editable message template in HTML.

Set this form as a template

Check this box to set the form as a template that other users in your organization can reuse.

Form name

The name of the form template. This field appears after the’ Set this form as a template’ box is checked.

Template description

The description of the form template. This field appears after the ‘Set this form as a template’ box is checked.