Type: User Input
CSS Enabled: ✅
The Form Block is your standard go-to tool for gathering information on websites and apps. It's where you type in your details, give your opinions, or join stuff. Using the Form Block, you will provide a user-friendly method for your users to interact with the digital world and share information.
Notable Settings
Spreadsheet
Select the spreadsheet to display in your Block.
Click here to read the full article on Block Spreadsheets
Form Mode
The Form block offers two modes:
Create - Add a new row in the selected spreadsheet when the form is submitted, using the values provided by the user in the form.
Edit - Edit a specific row in the selected spreadsheet when the form is submitted, using the values provided by the user in the form.
Edit Mode Settings
Row ID
When Edit mode is selected, you need to tell Frontly which row the user will be editing. This is done by entering a frontly_id. Most often, this will be done dynamically using Dynamic Variables, for example, when inside a Custom Detail View, using the 'parent' data source like {{ detailview.frontly_id }}.
Click here to read the full article on Dynamic Variables.
In rare situations where you are looking to always update the same specific row, you could enter a static value like '12', but this is not generally what you need.
Row Column
Entering a value and pairing it with a column selection will return the first result in your column to your users and its row details to your user.
Click here to learn more about the Row ID and Column functionality and best practices.
Form Fields
These settings determines the fields displayed in your form, where the available fields will based on what exists in your spreadsheet.
To hide fields from the form, click the toggle to turn them off.
To re-arrange the order of your form fields, just drag and drop in the 'Form Fields' section in the config panel.
To edit a field's label or field type, click the field to open the editor window.
Field type options: Input, Select Dropdown, MultiSelect Dropdown, Switch (toggle), Checkbox, Date, Image, Markdown and Hidden.
Actions
Custom Submit Action
Define a custom action to be triggered when the form is submitted. This action will run in addition to the default 'edit' or 'create' action based on your settings, which will either update an existing row or create a new row in the selected spreadsheet.
If you want to fetch any of your user submitted values for your submit form actions, you can use the {{form.Field}} dynamic variable.
For example, let's say your form has a field called First Name and another field called Company. To use these values in the form submit action, you'll inject the following:
{{ form.First Name }} and {{ form.Company }} respectively
Read more about Custom Actions here