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.

Select the spreadsheet to display in your Block.

Click here to read the full article on Block Spreadsheets

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.

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.

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.

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.

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.

Read more about Custom Actions here

There may be times when the standard submit action of creating or editing a record into your data source is what you're trying to achieve. Disabling this function usually gives way to another action that uses the submitted values in for something else.

​Example: Using the submitted form values trigger an OpenAI Request action.

Learn more about this type of setup here

In some situations, you may want to keep the structure of the form block but have a custom submit button located elsewhere on your page. If that's the case, hiding the block's submit button may be helpful, but it will require you to refer any user inputs through the {{form.Field}} dynamic variable, as it has been mentioned above.