Booking, person, service, event, resource and category supports adding custom fields using a customized form. The form is built with Liquid. Please read the Liquid documentation for more information. You can use HTML and all standard Liquid syntax. In additional to the standard Liquid tags MakePlans has made available various standard fields (for booking and person in public booking form) as well as custom field types (for booking, person, service, event, resource and category).
There are two types of forms:
-
The booking form on the public booking site. This allows you to create a custom form for customers making a booking. You can change the label of the standard fields and add custom fields.
-
Additional form fields in the administration system. This allows you to add custom fields to a booking, person, service, event, resource or category form in the administration system. You do not need to add standard fields to these forms, whatever you add is in addition to the standard fields. The custom fields can have a different label than on the public booking site but the field name must be identical. You can also add custom fields here that are not available on the public booking site.
Default form:
{% name %}
{% phone %}
{% email %}
{% count %}
{% note %}
Count is only included if the service allows more than 1 person per reservation.
Form with all standard fields:
{% name %}
{% phone %}
{% email %}
{% date_of_birth %}
{% national_id_no %}
{% street %}
{% postal_code %}
{% city %}
{% state %}
{% country_code %}
{% count %}
{% coupon_code %}
{% note %}
Custom label for phone number and custom checkbox field:
{% name %}
{% phone 'Mobile phone number' %}
{% checkbox 'Do you want lunch when you arrive?', 'lunch', 'checked="checked"' %}
Make email and phone number required:
{% name %}
{% phone nil, 'data-required="true"' %}
{% email nil, 'data-required="true"' %}
By setting the label to nil the default translation label for the standard field is used, it is recommended unless you want to specify another label text.
{% textarea 'Information from supplier', 'supplier_info' %}
{% select 'Expertise level', 'level', ['Beginner','Average','Expert'] %}
With default select value:
{% textarea 'Information from supplier', 'supplier_info' %}
{% select 'Expertise level', 'level', ['Beginner','Average','Expert'], '', '{"selected":"Average"}' %}
Standard fields:
- Name
- Phone
- Count
- Note
- Date of Birth
- National Id Number
- Street
- Postal code
- City
- State
- Country
- Terms
- Marketing consent
- Coupon code
Custom field types:
These fields are only available in the public booking form. They are already present in the person administration form.
For all these fields you can omit the label and it will use the standard label for the specified field. {% name %} will produce a label with 'Name'.
All standard fields are saved to the person except for count and note which is saved to the booking.
Important: You can only define these fields once in a form. If you add two name or notes fields you will lose input data. So for example to have multiple notes fields you can add additional custom fields, but these will then be unique separate fields and not related to the standard MakePlans notes field.
Full syntax: {% field 'label', 'html_attributes', 'options' %}
The html_attributes and options parameters are optional.
Basic example: {% name %}
Custom label example: {% name 'Full name' %}
Basic example: {% email %}
Custom label example: {% email 'E-mail address' %}
Basic example: {% phone %}
Custom label example: {% phone 'Cellular' %}
Basic example: {% count %}
Custom label example: {% count 'How many are coming?' %}
Basic example: {% note %}
Custom label example: {% note 'Additional details' %}
Basic example: {% date_of_birth %}
Custom label example: {% date_of_birth 'Your birthday' %}
Basic example: {% national_id_no %}
Custom label example: {% national_id_no 'Social Security Number' %}
Basic example: {% street %}
Custom label example: {% street 'Street address' %}
Basic example: {% postal_code %}
Custom label example: {% postal_code 'Zipcode' %}
Basic example: {% city %}
Custom label example: {% city 'Town' %}
Basic example: {% state %}
Custom label example: {% state 'Region' %}
Produces a drop-down of all countries which defaults to the country specified on the account.
Basic example: {% country %}
Custom label example: {% country 'Select your country' %}
A checkbox for accepting terms.
Basic example: {% terms_accepted %}
Custom label example: {% terms_accepted 'I accept' %}
You can add your terms using <p>{{ booking.client.terms }}</p>.
A checkbox for giving consent to adding to third party newsletter services.
Basic example: {% opt_in_marketing %}
Custom label example: {% opt_in_marketing 'Yes but do not spam me' %}
Basic example: {% coupon_code %}
Custom label example: {% coupon_code 'Secret code' %}
Custom fields can be used in both the public booking form and all administration forms.
Example syntax (exact syntax differs between custom field types): {% custom_field_type 'label', 'field_name', 'html_attributes', 'options' %}
The html_attributes and options parameters are optional. field_name is used internally for key identification and also in all API as well as data exports.
Syntax: {% text 'label', 'field_name', 'html_attributes', 'options' %}.
Basic example: {% text 'Describe yourself with one word', 'self_description' %}
Extended example: {% text 'Describe yourself with one word', 'self_description', 'data-required="true"' %}
Syntax: {% checkbox 'label', 'field_name', 'html_attributes', 'options' %}.
Example: {% checkbox 'Do you want lunch?', 'lunch', 'checked="checked"' %}
By default a blank option is added to ensure the user is not selecting a value by mistake. To set a different default selected value specify it in options. To not include a blank option set include_blank to false in options.
Syntax: {% select 'label', 'field_name', ['value1', 'value2'], 'html_attributes', 'options' %}.
Basic example: {% select 'Favourite food', 'food', ['Pizza','Taco','Sushi','Pinnekjøtt'] %}
Extended example: {% select 'Favourite colour', 'colour', ['Red','Yellow','Blue','Green'], 'class="funkyclass"', '{"selected":"Blue"}' %}
Syntax: {% textarea 'label', 'field_name', 'html_attributes', 'options' %}.
Example: {% textarea 'Information from supplier', 'supplier_info' %}
Hidden
Syntax: {% hidden 'field_name', 'html_attributes', 'options' %}.
Example: {% hidden 'secret' %}
A date field will trigger a datepicker on the field in any form. In addition the name of the field should be suffixed with _at such as last_visit_at. This will ensure that the value is always treated as a date. Just using date will only ensure so visually in the form.
Syntax: {% date 'label', 'field_name', 'html_attributes', 'options' %}.
Example: {% date 'Membership date', 'became_member_at' %}
A URL field will display a clickable URL.
Syntax: {% url 'label', 'field_name', 'html_attributes', 'options' %}.
Example: {% url 'Website', 'website_link' %}
Input field with type number.
Syntax: {% number 'label', 'field_name', 'html_attributes', 'options' %}.
Example: {% number 'How old are you?', 'age' %}
You can use locale to render output based on language. For example:
{% if locale == 'nb' %} Viking {% else %} Not viking {% endif %}
Fields will produce a <label> and <input> or other specified form field and wrapped in a container such as <p> or <div>.
Standard fields which fails validation will have the <input> field wrapped in a <div class="field_with_errors">.
There is no guaranteed way to validate custom fields. The only way to do some sort of validation is using JavaScript or HTML5 form validation which both can be skipped by the user.
All values are stored as strings.
You can add additional HTML attributes in the html_attributes parameter.
By default the required fields are based on your verification method. Name is always required. If you have SMS verification then phone number is a required field, and if you have selected e-mail verification then e-mail address is required.
In addition you can have basic client side requirement of filling out fields. This is done by setting data-required attribute to true. There is a HTML5 attribute for required fields but as browser behaviour differs and it is not supported in all browsers we recommend that you specify data-required="true" instead of required="true".
Standard field example: {% street 'Your street', 'data-required="true"' %}
Custom field example: {% text 'Car model', 'car_model', 'data-required="true"' %}
Please be aware that this is only done client side in the browser. We do not do any server side verification of these additional required fields.
If you need to override HTML attributes or set options for a standard field you do not need to set a custom label. You can use the standard system label by setting the label to nil: {% phone nil, 'data-required="true"' %}.
There is no server side validation done for custom fields. We offer some simple client side validations, most notably with required fields, but keep in mind that a user easily can skip these validations.
Validation can be added using data-attributes: data-validate="validation". Options are set using data-validate-{method}-{setting} The following validation methods are available:
date. Date format can be set usingvalidate-date-format-visualand/orvalidate-date-format. See Moment.js for format options.national_id_no. Validates national id number, intended to be used for the standard field national_id_no. Only supports Norwegian rules for id number. Country can be set usingvalidate-national_id_no-default-country_code, value should be of ISO 3166-1 alpha-2 format.number. Validate that the value is less than or equal to a max value. The value can be set usingvalidate-number-max.
With the parameter options you can define object specific configurations.
By default all custom fields are saved to the main object in the form (for example booking in the public booking form). You can save a field to another object, for example a person instead of the booking, by specifying that a field should be saved to another object: '{"object":"person"}'. Please note that this only works in the public booking form and applies only to the person when saving a booking.
To set the default selected option for a select box: '{"selected":"Value"}'.