Forms

Modified on Fri, 27 Jan 2023 at 12:59 PM

This article covers all the features of forms within the OneBlink LcS, for a simple guide to get started building forms check out the Build my first form article.



Forms List


The form list page will show you all of the forms you currently have saved in your account. The form list includes a search bar and tag filtering allows you to easily find the form you are looking for. 


Each form in the list will show the form name, the description, any tags, the workflow events configured for the form and if the form is public or private. Use the three dots to open the form menu.


The form menu

  • Copy - Create a copy of the form
  • Delete - Delete the form
  • Download - This will download the JSON definition of the form, which will allow you to share to form between organisations
  • View Schema - This option allows you to view the JSON schema of that specific form
  • Migrate to Environment - Migrating the form allows you to create a copy of the form in another environment.
    For more information check out this article.



Creating A Form


On the Forms list page, you’ll see a plus button at the bottom right of your screen, clicking this button will allow you to create a new form.




Form Building


Form Lock


When a form is being edited the Save button will become enabled. This will allow you to save any of the changes you have made. While the Save button is enabled the form will be locked for any other team members, meaning that no one else will be able to edit the form while you are editing it. This prevents the possibility of your work being overwritten. A form can be unlocked by another user if the need is required. 


Summary


Settings


Form Name - The name of your form, this is also the name that will appear in the app.

Description - A brief description of the form and what it contains.

Tags - Tags allow for an easy way to filter and sort your forms in the forms list.

Associated Apps - Select from a drop-down the apps you want this form to appear in.



Buttons

These controls allow you to set where you want your user to go when clicking the cancel or submit button.

  • My App - Take the user back to the app home screen after the form has been submitted.
  • Back - The users is taken back to the previous page they were on
  • Close Page - The page is closed
  • Redirect URL - The redirect URL will take the user to the specified URL. This can be used to take users to a company website, receipt page, thank you screen etc.


Validation


Validation allows you to configure an API endpoint to run server side validation on form submit. 

For more information check out this article.


Personalisation & Receipt Generation


Personalisation & Receipt generation allow you to configure an API endpoint that triggers on form load. 

For more information check out this article.


Access


This setting allows you to configure a Start and End date and time for your forms. If the form is accessed outside of this date range the users will see an unpublished message instead of the form. The Start and End dates are both optional, if neither is configured the form is always available. If only a Start date is configured the form will only be available after that Start date. If only an End date is configured then the form will only be unavailable until that date.


Information


From here you can see the information about the form, 

  • Form ID - The specific identifier for the form
  • Created - The date and time the form was created 
  • Last Updated - The date and time the form was last updated
  • Form link(s) - The links to the apps that contain this form.


Builder


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


Forms Library


When opening the builder and no elements have been created, you are presented with the option to open the Forms Library from here you can choose ab template form to start with instead of needing to start from scratch. 

For more information check out this article.


If you don't want to start with a template instead 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 select the element type and then add a label.


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.
  • Email - The email element customises the keyboard on mobile and tablet devices making it easier to enter an email. 
  • Phone Number - The phone number element customises the keyboard on mobile and tablet devices making it easier to enter a phone number.
  • 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.

  • Checkboxes - These will allow the user to tick multiple options from a list of options
  • Select - Show a drop down select box that will allow the user to choose from a list of options.

  • Autocomplete - Similar to the select element but allows the user to limit the list by typing in the input filtering the list to match what is typed.

  • Switch - The switch element can be set to either off or on.

Date & Time

  • Date - Allow the user to select a date.

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

Informational

  • Heading - Headings allow you to add headings onto your form.

  • Information - This can be used to add informative text to a form.
  • Image - The Image element can be used to add images to the form.
  • Section - Sections allow for collapsable groups of elements helping to streamline form navigation.

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, including the ability to annotate photos.
  • Repeatable Set - Create a repeatable set of form elements, you can add as many of these sets as needed when completing the form.
  • 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 and values of number, checkboxes, single select and other calculation elements and create complicated calculations with them. 
    For more information check out this article.
  • Location - The location element will display a map with the user’s current position. The user can zoom in and out, and move the pin to update their location if needed.
  • Files - Files Element can be used to capture any external files into the form.
  • Not a Robot - This is a CAPTCHA element added an extra layer of security for your public facing forms.
  • Form - The form element allows you to place an existing form inside on another form.
  • Summary - The Summary element can display the inputs of other elements elsewhere in the form.
  • Checklist - This element is like a radio button but includes built in conditional notes (multi-line text) and media (files)


Integration elements

These are form elements that are associated with a specific integration.  

  • Freshdesk Dependant field - Allow for form users to fill in a freshdesk dependant field on the form. 
    For more information check out this article.
  • Geoscape Address - This element allows users to search on geoscapes address services to search on a list of valid addresses. 
    For more information check out this article.
  • Point Address - This element allows users to search on NSW Point address services to search on a list of valid addresses.
    For more information check out this article.
  • Civica Street Name and Name record - Theses elements allow for the population of Civica street names and name records. 
    For more information check out this article.
  • BSB - The BSB element will allow users to enter a 6 digit BSB and validate that it is a real BSB
  • ABN/ACN - The ABN/ACN element will take in an ABN or ACN and check that is is valid. 


Element Details

Clicking on an element will open the element details.


  • Label - The label is what will appear on the form next to the element. 
  • Hint - The can be used to add an information (i) icon to the label, allowing you to add additional information to the element. 
  • Placeholder - Placeholders are greyed out text that appears in the element input usually showing the user an example of what they should be entering. 
  • Default Value - Some form elements can be set in the forms builder to display default data.
  • Required - Yes or No (Default No), this ensures that this element must be filled out before the form can be submitted.
  • Required Message - This input allows you to add your own custom message if the user does not fill in this element
  • Read Only - This will make the element unable to be edited. 
  • Show Conditionally - This option is used when you want the element to only be shown under a certain condition
    For more information check out this article.


Advanced

  • Name - The name is how the element will be referred to in the submission data, but default all special characters are removed, the case is changed to lowercase and spaces are replaced with underscores. 
  • CSS Classes - CSS classes can be added to any element and used in the Advanced Styling section to target elements with the same classes. 
  • Data Lookup and Element Lookup - These are used to call APIs to either populate existing form elements with data or create new elements.
    For more information check out this article.
  • Meta Data - Add JSON data to the element allowing developers to consume the data.


Drag and Drop

The builder makes use of drag and drop capability to help create a simple to use interface.

  • Re-order elements - 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. 
  • Move elements between pages - You are also able to use these to move the element between pages, by dragging the element and holding over the page title. 
  • Re-order Form Pages: 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 separate pages. This can be done by clicking the Add Page button. Pages require a title, and at least one element. Pages can also be conditionally show to create more dynamic forms.


Preview

The Preview button will show you a preview of your rendered form. You are able to interact with the preview to ensure everything is working as expected.

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

The preview also allows you to move between your available apps by selecting the drop-down in the top left of the preview.



Workflow


When a form is submitted, the form data is automatically saved to a cloud data store.

In addition to this, there are a number of other workflow events that can be triggered as part of a submissions.

For more information check out this article.



Getting Help

If you need any assistance with Forms please reach out through the Report Issue menu or email support@oneblink.io


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article