Form Block
Patrick avatar
Written by Patrick
Updated over a week ago

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.


Overview of Functions

Label

A simple visual label that displays at the top of your Block container. Also used for your internal reference in the page builder.

Spreadsheet

Select the spreadsheet to display in your Block.
โ€‹

Click here to read the full article on Block Spreadsheets

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, and 'Hidden'.


Hidden Fields / Hidden Values

If you select the 'Hidden' type for a field, you will see a new field appear in the field settings called Hidden Value, which allows you to define a pre-defined value to be sent to the spreadsheet instead of collecting user input for this field.


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 its use cases.

Submit Button Text

Define custom text to display on submit button instead of 'Save Changes'.


Layout Position

If you've selected a Layout for your page, you will see the Layout Position select dropdown. This setting determines which 'slot' in your Layout the current Block is located in. As you change the Layout Position, you'll see your block move around into different Layout slots.

Alternatively, you can add a new block to a specific layout slot by clicking on the slot directly.

Click here to read the full article on Page Layout


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.

Read more about Custom Actions here

Using Form Values In the Submit Action

Among other dynamic variables, the Form Submit Action has access to a variable called 'form' which contains the submitted field values.

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 can type {{ form.First Name }} or {{ form.Company }}

Did this answer your question?