To start building out your form, click on the Builder tab in the forms menu.

You can then press the ‘ADD NEW ELEMENT’ button to create your first element. This will add a new element to the bottom of the form, and prompt you to name the element.

You pressing enter while in a element will create a new element.

 

Element Details

Clicking on an element will open the element details.


Label: This is what will be displayed to the user for this form element.

Name: This is what the element will be named when submitting data. If you’re not sure, just leave the default option.

Type: This is the type of element you want to add (such as a text box, location element, signature panel).

Default Value: (Default Empty) This can be used to add default inputs into elements.

Read Only: This will make the element unable to be edited. 

Required: Yes or No (Default No), this ensure that this element must be filled out for the form to be submitted.


Data Lookup and Element Lookup: These are used to call API's to either populate existing form elements with data, or create new elements.

For more on Lookups click here

 

Show Conditionally: This option is used when you want the element to only be shown under a certain condition. For example, if a car fails its inspection test you can design the form so that a text box becomes available to describe the reason the car failed it's inspection. If the car passes its inspection this text box does not appear.

 

Types of Elements

  • Autocomplete: Autocomplete contains an option set, when a user starts typing in the input the options are filtered down based on the typed value.
  • Barcode Scanner: This element turns your devices camera into a barcode scanner, you can even restrict the specific types of barcodes you are scanning against.
  • Calculation: This element allows you to take the input of number elements into the form and create calculations with them. 
    • For more on the calculation element checkout the article
  • Camera: This will allow the user to take a photo using the native camera of their device, or allow you to upload a photo.
  • Checkboxes: These will allow the user to tick multiple options from a list of options

    • Display as Buttons - Will display the checkboxes as button instead of boxes

    • Label - What will be displayed next to the checkbox

    • Value - The value that will be submitted. Use the default if you’re not sure what this is.

  • Date: Allow the user to select a date. On a mobile device, this will display the native date picker.

    • Date From/To - You can specify that the date entered into the element must be between a start and end date.

  • Date and Time: Allow the user to select both the date and time.

  • Email: Email Element type is used exclusively for email inputs, including a custom keyboard and email validation.
  • File: File Element can be used to input external pdf documents into you forms. 
  • Form: The form element allows you to place an existing form inside on another form.
  • Heading: This option allows you to add headings onto your form.

    • You may select multiple size options: Title, Large, Medium, Small, Normal 

  • Image: The Image element can be used to add images to the form, more on Image Elements below.
  • Information: This can be used to add informative text to a form, for example terms and conditions.
  • Location: The location element will display a map with the user’s current position. The user may zoom in and out, and move the pin to update their location if needed.

  • Info Page: The info page element allows you to place an existing info page inside on another form or info page.

  • Not a Robot: This is a captcha element added an extra layer of security to your forms. 

  • Number: Allow the user to add numbers. This will display the numerical keypad to the user for ease of use.

    • Min/Max - You are able to set a minimum and maximum number 

    • Display as Slider - You are able to make the number element appear as a slider, this will make the min and max inputs required

  • Radio Button: Allow the user to select one item from a list of options

    • Display as Buttons - Will display the radio buttons as button instead of circles

    • Label - What will be displayed next to the checkbox

    • Value - The value that will be submitted. Use the default if you’re not sure what this is.

  • Repeatable Set: Create a repeatable set of form elements, these can be added and removed with a + (plus) and bin button. See below for more information on repeatable sets:

  • Select: Show a drop down select box that will allow the use to choose from a list of options.

  • Signature: This element allows the user to sign the form using the touch screen of the device

  • Text: Allows a user to enter a single line of free form text.

  • Text (Multi-line): Allows a user to enter a multiple lines of free form text.

  • Time: Allow the user to select a time. On a mobile device, this will display the native time picker.

 

Once you have finished creating your form, you can click on the Save button to save your changes.


Preview

The Preview button will show you a preview of your rendered form, within the builder. The preview is entirely intractable, however you are not able to submit the form from the preview.

When you make a change to the form you must save the changes before they will appear in the preview.


Drag and Drop


We have some drag and drop functionality in the builder to make the form building experience as smooth as possible.


You are able to click the drag handles (the 2 horizontal lines) on the far left of each element. These allow you to drag the element up or down the page to reorder you form elements. 

You are also able to use these to move the element between pages, by dragging the element and holding over the page title. 

Finally you are able to re-order your form pages by dragging and dropping the page left or right to create your desired order. 



More On Forms:



Default Data

Some form elements can be hard coded in the forms builder to display default data. This is simply something that will appear in the input of an element when the form is rendered. This can be used as an example of what is expected to be input in the element, or used for place holder information. 


Form Pre-population

Now in the forms builder you will be able to pre-populate your elements with data allowing element values to be passed into the forms renderer when requesting a form. This will require a developer to use the OneBlink SDK. All the elements that contain an input e.g text, number, and email can be filled with pre-populated data. 

For information on the OneBlink SDK check out our developer docs.


Form and Info Page Elements

These elements allow you to place external forms and info pages into a form. This can be extremely useful when you have a series of elements that repeat throughout multiple forms. Instead of creating the same elements across these forms you are able to instead add a Form element and like to the form.


You are not able to link to the same form more than once in one form. However you are able to link the same info page elements multiple times in the same form. 

These could be used for something as simple as page headers or footers.


Repeatable Set

The ability to add several 'sets' of the same data multiple times can be extremely useful. In the forms builder we have a new element type ‘Repeatable Set’. You are able to set a minimum and maximum number of repeatable sets. You are also able to have multiple nested repeatable sets. To represent when an element is inside a repeatable set the element will be indented in the builder. In the form itself the repeatable sets will be distinguished by alternating colour.