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.
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.
registermodal in the
Set Outlet field.
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
+ content we will need 1 extra pin on each row, as we will be creating a
label and an
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.
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-xl-. Each of these are saying only from
-size- and above.
Content pin from the
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.
form: date input and pull out the
Field pin to select the field that you will use for saving the data.
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.