Try the new custom form field builder!

Screen Shot 2016-05-13 at 10.15.13The CabGrid Pro custom booking form fields 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:

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. 

Basic Custom Form Fields

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 CabGrid 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+)
  • TITLE (Title section text – requires Cab Grid Pro v5.5+)
  • PARA (Paragraph or line of text – requires Cab Grid Pro v5.5+)

*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 placeholder 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)
MyTitle:TITLE:N:Passenger Details PASSENGER DETAILS A full width title. The value parameter forms the text shown.
MyInfo:PARA:N:A line of explanatory text shown as a full width paragraph on the booking form. A line of explanatory text shown as a full width paragraph on the booking form. A full width paragraph. The value parameter forms the text shown.

 

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 (:), so you will be unable to link to external sites using a protocol prefixed address such as ‘http://cabgrid.com/support’. It is possible to omit the protocol prefix and simply use two backslashes, e.g. ‘//cabgrid.com/support’.

Since the PARA field type was introduced in Cab Grid Pro v5.5, our recommendation is to include any links (or HTML) in a PARA field separate to the form input itself:

Example:

Please agree to our Terms & Conditions
Tick here to agree:

The syntax to produce this is:
Terms Link:PARA:N:Please agree to our <a href="/help-and-support/custom-taxi-booking-form-fields/#cgA-links" target="_blank">Terms & Conditions</a>
Tick here to agree:CB:Y:Terms accepted::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:

Additional Text or Titles in Custom Booking Forms

[Note: From Cab Grid Pro v5.5 the TITLE and PARA syntax can be used to add titles and text. The information below can be used in earlier versions.]
There are occasions it might be useful to add a title or further descriptive text to a form field or group of fields. There is currently no direct method for inserting additional titles or descriptive text to the taxi booking form. However, the following work-arounds may be of interest…

Use pseudo CSS elements to insert content:

The :before or :after pseudo elements allow content to be inserted before or after the targeted html element(s).

Example:

First, identify the HTML class name for the form field to insert text before or after. Each custom form field is assigned a class name based its label. Use the web browser inspector to find the class name assigned to the main list <li> element (or view source). Let’s say you’ve identified a custom field with a class name of, “cgpFieldCont-Inbound_Flight_No“.

Now compose a style declaration to insert a title. The new style must be inserted in the Cab Grid Pro OPTIONS tab in the ‘STYLING CSS’ box. Use the content: attribute to define the text content to be displayed above this field:

.cabGridPro .cgpFieldCont-Inbound_Flight_No:before {
content: 'Flight Details';
display: block;
width: 100%;
max-width: 100%;
margin: 10px;
padding: 30px;
border-bottom: 1px solid blue;
font-size: 200%;
}

Note, this work-around does not allow additional text inserted to be easily translated (if you are running a multi-lingual site).

Use a hidden custom form field to insert content:

[Note: Cab Grid Pro v5 offer an HD item that inserts hidden form fields. The information below can be used in earlier versions.]
Using the method described at the top of this page, add a new custom form field, then hide the input element through CSS:

Example:

Enter the label in the ‘ADDITIONAL FORM FIELDS’ box under the Cab Grid Pro OPTIONS tab. There is no need to provide any further settings.
Flight Details

Next, find the class name for this element using the web browser inspector or viewing the source code. e.g. “cgpFieldCont-Flight-Details“.

Now add styling in the ‘STYLING CSS’ box (also under the OPTIONS tab):

.cabGridPro .cgpFieldCont-Flight-Details {display: block;width: 100%;max-width: 100%;margin: 10px;padding: 30px;border-bottom: 1px solid blue;
.cabGridPro .cgpFieldCont-Flight-Details label {font-size: 200%;}
.cabGridPro .cgpFieldCont-Flight-Details input {display:none;}

Disable Built-in Booking Form Fields

Whilst not recommended, it is also possible to disable Cab Grid’s built-in booking form fields.

Tags: , , , , , ,

x
  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.491.49


No price found for this journey