Type: User Input
CSS Enabled: ❌
This article covers a feature that unlocks custom form creation and design, but is considered to an advanced-level feature. For a more straightforward and simple approach to gathering user inputs, please look to the features below:
The User Input Blocks are a set of individual blocks that are made up of the conventional form field types: Input, TextArea, Select and Switch. Combine these blocks with one another and any other block that exists in Frontly, and you'll find there are limitless ways to create the custom form solution you need for your app!
Selecting a User Input Block
Each user input block can be found from the block selector. To access them more easily, click on the 'User Input' tab.
Setting Up User Input Blocks
Each user input block comes with their own block settings and styling options. When placed in a page as a root block, it will always take up 100% of the width of your page.
Placing them into a Layout block (Row or Column) will give you much more flexibility in in their width sizing, as shown below.
Click here to learn how to create more versatile layouts with Row and Column Blocks
Use these in conjunction with other blocks (Text, Button, Image, etc) to create the sections, questions and submission buttons you need to create a complete experience for your users.
Saving User Inputs
The most conventional way to trigger a submission of your user's inputs is incorporating a button block into your custom form and by referencing each user input block's Field ID with the form variable.
Click here to learn how to store your form submitted values throughout your app.
Setting Up Validation
Setting up validation for your user inputs will require an extra step in a custom form. After configuring your fields' validation rules, you'll have to connect these fields to a 'Form Validation' action, typically triggered by a click action.
Click here to get an understanding of the use case and setup of field validation.
In addition to including this validation action into your action setup, you'll also have to set up a run condition to ensure the rest of your actions aren't firing unless that inputs have been properly validated.
Example
You wish to have a 'Form Validation' step prior to storing your user's inputs into your Google Sheets data source. In other words, the 'Google Sheet' action should not record any data until the data has been validated first. See below:
Without any run conditions set up at the 'Google Sheet' level, this action and all actions after it will run continue to run regardless if the input in step one was invalid.
By requiring the 'Google Sheet' action to fire only if the 'Form Validation' response was set to 'TRUE', the system will continue to force your users to enter a valid input before it can be successfully created as a record into the data source.
Using the 'Action Step' variable to reference the response of the validation step, this is how the run condition would look for the 'Google Sheet' action in the above sequence.
Note: This run condition will be only required to be configured for the action step immediately after the 'Form Validation'. Subsequent actions will proceed to execute normally provided their own individual run conditions (if any) are met.