Try the new custom form field builder!

Screen Shot 2016-05-13 at 10.15.13In Cab Grid Pro v2.1 we are introducing custom booking form fields. This feature allows you to define additional form fields that are shown when the customer clicks the ‘Book’ button. The content of these fields will be sent along with the standard booking form information.

Custom form fields are defined in the ‘Options’ tab under ‘Additional Form Fields’. There is a certain syntax to be used to define options:

Firstly, each additional form field you require must be entered on a separate line in the Additional Form Fields text box. This is the only mandatory requirement. Here’s an example:

Basic Custom Form Fields

This will add 3 new fields to the booking form.

As no further parameters are defined, these will each be rendered as one line text fields:
eg Inbound Flight No. 

Defining Field Parameters

You can define additional form field parameters, such as the field type, whether it is a mandatory field or not, and any pre-defined value to be entered in the field.

Additional parameters are separated using colons (:). The format is as follows:

field-label:field-type:required:value(s)

The field-label can be any text you like (as long as it does not contain a colon.

The field-type will be a one line text field as illustrated in the example above, but can also be defined as one of the following.
(If you are defining additional parameters (required/values), you must enter a field type.)

  • TF (one line text field)
  • TA (multi line text area)
  • CB (check box: )
  • RB (radio button multiple choice: )*
  • SB (drop down select box:)*
  • DT (date & time input: )
  • DO (date only input: )

*The RBSB field types will require some additional values are defined (see below)

The required option can be set to either Y (to indicate the field must be completed by the customer) or N (if the field is not mandatory).

Finally, value(s) can be one or more text values. For multiple values, these should be separated with a comma.
eg value1,value2,value3,etc

A complete example

Custom Booking Field Paramenters

Let’s break this down…

Definition Rendered field Info
InBound Flight No.:TF:Y  A mandatory one line field
Outbound Flight No.:TF:N:BA123  A mandatory one line field with a predefined value
Additional Info:TA:N:Special Requirements  A multi line text box with a predefined value
Baby Seat:CB  A non-mandatory tick box
Onboard Drinks:RB:N:Yes,No
Yes:
No:
 Non-mandatory multiple choice radio buttons
Driver:SB:N:Matthew,Mark,Luke,John  A non-mandatory drop down list with values.
Return Date:DT:Y:2019 1 30 9 05
 A mandatory date & time input field preset to 30th January 2019 at 9:05am (v4.3.4+ Default value format: YYYY M D H MM)
Date of birth:DO:N:1971 2 14
 An optional date input field preset to 14th February 1971 (v4.5.4+ Default value format: YYYY M D)

 

Styling

The additional fields will be placed in the order you list them after the main booking form fields. They will acquire the style of the other fields or any additional style you define via custom CSS.
Each custom field will acquire a class name based on the field label. Spaces are replaced with underscores and a prefix of ‘cgpField’ is added, so the ‘Return Date’ field has a class ‘cgpField-Return_Date’.

Label/value translations syntax

Because custom form labels are entered by the user (not pre-defined by the plugin), it is not possible to use WordPress’ built in translation system to provide translations for custom form field labels.

As of Cab Grid Pro v4.0.3, the ‘Additional Form Fields’ box accepts alternate language versions of labels and field values. To implement this, the following syntax is required. (Note: The booking form field builder can be used to generate translated field labels and values.)

  1. Translations must be enclosed in curly braces immediately after the primary label text: {}
  2. The 2-char code for the target language is used as the key (fr,de,it,es,en,pt,etc). (Must be lower-case)
  3. The actual translation text must follow the key and an equals greater-than (=>) sign
  4. Additional translations (other languages) are separated with a pipe (|)
  5. The last translation should not be followed by a semi-colon

Putting this together, a translated custom form field might look like this:

Children { fr => Enfants | de => Kinder }

This would render a standard text field labelled, ‘Children‘ by default, but if the language was set to French (fr), the label would be ‘Enfants‘, and if German, the label would read ‘Kinder’

This can also be extended to values for certain field types. These include drop-down select boxes (SB), Checkboxes (CB), and Radio Buttons (RB). Following our example above, a custom form field with translated labels and values could look like this: (spaces have been added for clarity, but should generally be avoided)

Children { fr => Enfants | de => Kinder } : RB : Y : Yes { fr => Oui | de => Ja } , No { fr => Non | de = Nein }

This would render as follows:

Language Appearance
English (default) : Yes No
French : Oui Non
German : Ja Nein

Note: The output on the booking form emails will be the native (default) labels and values, not the translated versions.

Cab Grid Booking Form: Custom Form Field Utility

We have created a special tool the creates the necessary syntax including translations. Try the custom form field builder utility.
Here is a tutorial video showing how to use this tool:

Tags: , , , , ,

Pin It on Pinterest

Share This

Share this post with your friends!