Simple form

Make a form with a save button in a modal.

Intro

In this tutorial we continue with the modal that was made in the tutorial: button with modal. After finishing this tutorial, the modal will contain a form with four input fields. It will look something like the picture to the right.

Outlet

Several blocks offer the option to add an identifier via Set Outlet. The outlet is an option. We will use it for this modal, so we can refer to it when we need to close the modal. Type registermodal in the Set Outlet field.

Form element

A form element is a wrapper that contains all your form input fields. You create it by pulling out a content pin with the left mouse button. Type form in the menu searchbar and choose the form element.

The form element itself is not a visible item in the frontend page. It is used to retrieve the data input when we save it and send it to the back-end. A form element always needs an outlet. Please type registerform in the outlet field of the form element block.

The form element block has two in-pins: the Form Prefill pin and the Form pin. The prefill option is necessary if you want to edit existing data in your form. We will not do that here, but get back to that in another tutorial. The Form pin is where we will start adding the frontend input fields to the form. You might already have seen some of the options you can use to create a form. Because of the upcoming tutorials we will be using the option that takes a bit longer to create but has more customisable options. If you want to checkout the simple option you can go to Simple form extra

Grid layout

The grid layout contains out of rows and columns. Each row exists out of 12 sections which are spread over the width of the container it is in. We will create a row for each input we need. In this case we will create 4 rows. As you create these rows you will see it auto creates a column for each row. To add extra columns to a row click the + content we will need 1 extra pin on each row, as we will be creating a label and an input.

TIP

You can copy actions by selecting the actions you want to copy using (cmd/ctrl) + left click. Once you selected all the actions you want to copy, you can use (cmd/ctrl) + c to copy and (cmd/ctrl) + v to paste.

Set the column width

Next the columns must get the right width. By default, every new column block has the col-12 class, which is full width, since the Bootstrap grid has a maximum of 12 columns. For the first column, set it to col-4 by typing in the input field of the class block. The second column needs to be set in a similar way to col-8. By only typing col- it will automatically set the col for all devices. If you want different column width for different device sizes, you can use the col-sm-, col-md-, col-lg-, col-xl-. Each of these are saying only from -size- and above.

Add inputs

Each row now has two columns. The columns appear in the frontend from left to right, and in the blueprint from top to bottom. The left column in the modal only contains text. In another tutorial we will look into using text that can be translated. We will use non-translatable text here to keep things simple. Pull out the Content pin from the grid: column block. Select form: label and from the content pin in the form: label the custom text and type firstname: in the custom: string block.

In the other column we will create the input. Pull out the content pin form: text input. You have a selection of different inputs but for the firstname we will use the text input. Now pull out the Field pin and select fields: get single. Type firstname in the search field. If the field does not exist yet, you can create it with enter. If you make a new field definition for firstname, choose "string, value" as the type for this field. If the field definition already exists in your entity, just select the field from the list using enter.
The next 2 rows are similar to the first, instead of firstname you will need lastname and phonenumber.

Date input

The last field in the form is a date field. Rual Studio has many different formats built-in, and date is one of them. Every date in Rual is saved in Unix timestamp format. This means that it records the time in seconds, and you can choose later in which format you want to show it. Select the form: date input and pull out the Field pin to select the field that you will use for saving the data.

Add save button

Of course the whole idea of a form is to do something with the data the user has entered. In this case we will save the data to a new storage. To do that we need a function, and to get to that function we need something to trigger it. Please refer to the previous tutorial: button with modal if you want to look up how to make a button and add a left click event to create a new function saveRegistration, as shown in the picture to the right.