fb-pixel

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)

From Cab Grid Pro version 5.2 placeholder text and title text (used in tooltips) can also be added using the following syntax:

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

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: )
  • AD (address input – will auto-complete if enabled)
  • HD (hidden field – requires Cab Grid Pro v5+)

*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).

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

The placholder is text that appears in certain fields (text, textarea, date) as a suggestion or to provide information. Once a user activates the field, the placeholder text is removed. Placeholders accept translations (as described below)

The title text shows when the user hovers over a field. If tooltips are enabled, this text will appear in an info bubble, otherwise the native system tooltip is shown after 1-2 seconds. Titles accept translations (as described below)

NOTES

  • If a parameter is not required (values, for example), a colon (:) must still be used to represent it when there are further parameters required. For example: Luggage:TF:N:::Give details of luggage In this case, a value and a placeholder are omitted, but the title (tooltip) is still provided.
  • Avoid using colon characters (:) in field names, values, placeholders, and tooltips.

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)
Oversized Luggage:TF:N::e.g. Snowboard Oversized Luggage  A non-mandatory one line field with a placeholder (no preset value)
Additional Stop:TA:N::Extra address…:Enter the address of an additional stop on route  A multi-line field with a custom placeholder and title (no preset value)

 

Providing a link within the booking form should generally be avoided since it encourages the customer to abandon the booking before completing it. However, there are some circumstances where have a link may be required.

The booking form syntax is not designed for links, but it should be possible to use regular HTML to build a link in the label. The only caveat is that the URL (or any part of the link) must not include a colon character (:)

Example:

Please agree to our Terms & Conditions:

The syntax to produce this is:
Please agree to our <a href="/help-and-support/custom-taxi-booking-form-fields/#cgA-links" target="_blank">Terms & Conditions</a>:CB:Y:I Agree::Click to agree

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.

However, the ‘Additional Form Fields’ box accepts alternate language versions for 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 or pipe

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.

Referencing Custom Form Fields in Messages

Cab Grid Text Substitution Syntax can be used to display details of Custom Form Fields in these messages:

  • BOOKING SENT MESSAGE (shown after booking request submitted) under the Cab Grid Pro OPTIONS tab
  • EMAIL ACKNOWLEDGEMENT MESSAGE (email sent to customer when booking request submitted) under the Cab Grid Pro OPTIONS tab
  • Automated Booking Responses (email sent when booking updated) under the SETTINGS section of the BOOKINGS tab (Booking Management Add-on required):
    • ACCEPT/CONFIRM MESSAGE
    • DECLINE MESSAGE
    • PAID MESSAGE
    • CANCEL MESSAGE
  • TWILIO SMS TEXT MESSAGES (SMS sent when booking updated) under the SETTINGS section of the BOOKINGS tab (Booking Management Add-on required):
    • ACCEPT/CONFIRM TEXT
    • DECLINE TEXT
    • CANCEL TEXT
    • PAID TEXT
  • REMINDER MESSAGE (Automated reminder message sent ahead of booking schedule) under the SETTINGS section of the BOOKINGS tab (Booking Management Add-on required)

The exact field name must be used in the placeholder syntax to insert the data entered by the customer during booking. If no data is entered the value will be blank (empty).

Example 1:

To include details of a Custom Form Field  named, “Flight Number” the syntax included in a message field would be something like this:Your flight number is ///Flight Number///.
The result might look like this:

Your flight number is BA123

Example 2:

To include details of a Custom Form Field, “Additional Stop Address” the syntax included in a message field would be something like this:You have requested an additional stop at ///Additional Stop Address///.
The result might look like this:

You have requested an additional stop at 1600 Pennsylvania Ave NW, Washington, DC 20500, USA

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: , , , , , ,

x
  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.49


No price found for this journey