Creating a Form
1 Form

Creating a form

Firstly, we need to create a form. We can do this by going to the admin dashboard and clicking on the "Ides multi-step form" tab. Then click on the "New" button.

From here on, we can add steps to our form. Each step can have multiple fields. We can add a step by clicking on the "Add step" button. We can add a field by clicking on the "Add ..." button within the step.

Known issues

Since this was a quick project, meant to work for a small scope, there are some known issues. These are:

  • When removing an item from a step, you can't add a new item currently. To solve this, simply save the form and edit it again.
  • When removing a step, you can't add a new step currently. To solve this, simply save the form and edit it again.
  • The context menu only opens within a step, this means that you can't remove a step before adding a field to it. Simply add a field, then remove the step.

tl;dr; Save the form and edit it again to fix issues with removing items or steps.

Adding a step

To add a step, you can click on the "Add step" button. To rename it, simply double-click on the step name.

Adding a field

To add a field, you can click on the "Add ..." button within the step.

Text input

This is a simple text input field. It has a few settings you can configure.

Type

The text input field has a few subtypes. These are:

  • Text
  • Number
  • Email
  • Phone
  • Url
  • Date
  • Time
  • Date + time
  • Color

You should always select the correct subtype for the field, as this will make sure that the correct keyboard is shown on mobile devices.

Name

The name of the field. This is used to identify the field later on, when creating the email template. Make sure to use a descriptive name.

The name attribute should be unique, and should not contain any spaces. If in doubt, ask ChatGPT with the prompt below

chatgpt.txt
Please generate a unique name for an HTML input field. The name should not contain any spaces. The name should be descriptive of its purpose. Use snake case. Be concise. Only respond with the name.
The description of the input field is:
<description>

Autocomplete

The autocomplete attribute is used to tell the browser to predict the value. This is useful for things like addresses, where the browser can suggest the address based on the user's history. The autocomplete attribute is optional, and can be left empty.

Placeholder

The placeholder text for the field. This is the text that is shown when the field is empty.

Matrix

This is a table with a predefined set of rows and columns. It has a few settings you can configure.

Top columns

The top columns are the columns that are shown at the top of the table. These can be used to group the columns below them.It follows a specific format, such as 2:Year 1 and are comma separated. The first number is the amount of columns that the top column should span, and the second is the name of the top column. For example, 2:Year 1,2:Year 2 will create two top columns, each spanning two columns. The first top column will be named "Year 1", and the second will be named "Year 2".

The top columns are optional, and can be left empty. In the case of using it for years there is also a function you can use to fill in the years automatically. This function is {yearsAgo(<number>). For example, 2:{yearsAgo(3)} will create a top column named "2020", spanning 2 columns. The title is calculated at runtime, so it will always be the current year minus 3.

Control & attributes

The control is the type of input that is used for the cells. The attributes are the attributes that are added to the input. For example, if you want to add a checkbox, you can use checkbox as the control, and {"checked": true} as the attribute. This will create a checkbox that is checked by default. the attributes are optional, and can be left empty. They are a JSON object, so make sure to use double quotes.

Rows and Columns

The rows and columns are used to get the titles for the table. These are comma separated, for example: Row 1,Row 2,Row 3 or Column 1,Column 2,Column 3. The rows and columns are optional, and can be left empty.

Adding a model

The models can be created through the 'custom fields' or 'extra velden' tab. The models are used to let the user enter data that can have many values. For example, a user can have multiple addresses, or multiple phone numbers. In the context of the existing forms, it's mostly used to let the user enter multiple architects, or multiple contractors.

The model has a name and a value. The name is used to identify the model, and should start with model_. For example, if you have a model named model_architect, the name shown to the user will be Architect. The value is JSON representation of the input fields. For example, if you have a model named model_architect, the value could be {"label": "E-mail address of the Architect", "type": "email"}. This will create a model with two fields, one named name and one named email.

In the view, the user will by default get to see the fields once. If the user wants to add more fields, they can click on the + add model button.

I recommend, this feature is only used by developers. If you want to try it yourself, always make sure to verify the input you entered is valid, by pasting it in json-lint (opens in a new tab). you should read the document below:

Creating a Form2 Internationalization