Booking fields

Related Youtube video: Matukio Tutorial #2 - How to set up bookingfields

In the booking fields section you can edit and create booking fields for the new booking form (The default one in Matukio - the fields are not used in the old booking form). The field name is mostly used internally and NOT SHOWN to the user, please note the lower informations to the topic. The Caption / Label / translation placeholder is the output shown to the user. COM_MATUKIO_FIELDS_CITY becomes for example "city" in english-language sites or "Ort" in german-language sites. You could use the translation directly there (e.g. Typing city instead of COM_MATUKIO_FIELDS_CITY) if you only use one language.

You can also create event specific fields in the event edit!

The following field types are available for an booking field:

  • Text (A simple one line text field for user inputs- e.g. <input type="text" ..>)

  • Textarea (A multiple line text input field)

  • Select (A drop-down select list with multiple items where users can select one)

  • Radiobuttons (Only one value selectable)

  • Checkboxes (Multiple values selectable)

  • Spacer (a separator to group your content - similar to a <hr> element)

  • Spacer Text (a separator with your own custom text)

If you use Select, Checkbox or Radiobuttons you need to provide the possible values in the Values field, e.g. which values the user can choose between. The syntax is the following {element1=Text1}{element2=Text2}. The text is displayed to the user and the element used for intern (id, name etc.) naming of the element. The element name is not allowed to have any special characters (including spaces). If you leave the element empty and set required to Yes, the validation fails if not another element is selected. This can be used to show for example "please select" as the first option, forcing users to select an element.

The booking form has two or three pages, three if it is a paid event and you use any payment plugins (If you disable all the second page will also not show up, but you can use fees). Only fields on page one are validated with JavaScript (all fields are additionally validated in PHP). The third page is mostly a confirmation page showing all user entries. PLEASE NOTE: The first and third page are always shown (and named like that), only the second page can be hidden (if no payment is done)! In most cases you want your new booking field to be on page one.

The second page is centered, around payment, users choose their payment method, enter coupon codes there etc.

If you set required to yes the user has to fill out or select something, else an error message will be displayed and the user can't submit the form.

The ordering defines on which position an booking field will be shown. (0 is the first position etc.).

It is also possible to add some custom CSS styles directly through the booking booking fields editor. For example width: 100px; will change the fields width to 100px.


You should not rename the fields firstname, lastname and email. This causes problems in Matukio. The field name is not displayed to the user (the Caption / Label is) and is only used for internal storage and naming. You should not use any special characters (spaces included!) in the field name (except the underscore), else the JavaScript code in the frontend will not work properly and the form will not work!