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 top of the form, and prompt you to label the element.

Pressing enter while in an 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 (such as a text box, location element, signature panel).

Default Value: (Default Empty)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.

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

Required: Yes or No (Default No), this ensures 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 its' inspection. If the car passes its inspection this text box does not appear.

 

Types of Elements


User Inputs

  • 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.
  • 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
  • Email: Email Element type is used exclusively for email inputs, including a custom keyboard and email validation.
  • Phone: Phone Element type is used exclusively for Phone inputs, including a custom keyboard and phone validation.
  • 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.

User Selections

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

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

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

  • Autocomplete: Autocomplete contains an option set, when a user starts typing in the input the options are filtered down based on the typed value.

Date & Time

  • 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.
  • Time: Allow the user to select a time. On a mobile device, this will display the native time picker.

Informational

  • Heading: This option allows you to add headings onto your form.

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

  • Information: This can be used to add informative text to a form, for example terms and conditions.
  • Image: The Image element can be used to add images to the form, more on Image Elements below.
  • Info Page: The info page element allows you to place an existing info page inside on another form or info page.

Advanced Elements

  • Camera: This will allow the user to take a photo using the native camera of their device, or allow you to upload a photo.
  • 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.
  • Signature: This element allows the user to sign the form using the touch screen or moue of the device

  • 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
  • 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.
  • File: File Element can be used to input external PDF documents into your forms.
  • Not a Robot: This is a CAPTCHA element added an extra layer of security to your forms.
  • Form: The form element allows you to place an existing form inside on another form.

 

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


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 your 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.

Pages

To help streamline and organise your forms they can be broken up into pages. This can be done by clicking the Add Page button. Pages require a title, at least one element and can be conditionally show.


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.


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.


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.


Repeatable Set

The ability to add several 'sets' of the same data multiple times can be extremely useful. In the forms builder we have an 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.