All Collections
Personalising display and appearance
How do I change the appearance of the quote form?
How do I change the appearance of the quote form?

Changing colours, style and appearance of the quote from.

Mark Walker avatar
Written by Mark Walker
Updated over a week ago

Wordpress Quoteform

With the wordpress plugin options are provided for 3 different quote forms, each of which can be styled and configured independently.

You can easily select the text, background and button colours here to match them to your sites design.

For more complex styles you can add additional CSS by clicking the advanced box - your web developer will know how to prepare this or our team are available if you need any help.

IFrame Quote From

The iframe integration picks up the colours and styles that are set from withing your Transporters.io system. 

Login and go to Settings->General Settings->Display Options

Here you can choose colours for the main elements of the forms - this will also apply to your public order, invoice and driver/supplier pages.

For more complex styles you can add additional CSS by clicking the advanced box - your web developer will know how to prepare this or our team are available if you need any help.

Fixed Route Form

An optional fixed route form replaces the free typing address boxes with pre-configured dropdown lists. You will setup the available routes in your Transporters login at Settings->Pricing Rules->Fixed Routes.
For wordpress users this is activated through the tickbox on the plugins settings page.
For the iframe form you can change your iframe address to match https://yourcompany.transporters.io/quoteform/fixed

Tab Options

3 tabs are available on the first stage of the quote form to allow booking different types of journeys.

These are set in the Plugins settings page for Wordpress or Display Options for Iframe forms.

One Way - A single journey (A -> B)
Return - A 2 way Journey ( A -> B -> A)
Charter - A fixed duration journey (X hours duration)

Hold Ctrl and click to select or deselect multiple options. If you select no tabs then none will be displayed, but a return journey can still be selected on the second stage.

Display Mode

2 Different options are available for the second stage of the forms display.
These are set in the Plugins settings page for Wordpress or Display Options for Iframe forms.

Standard 2 step form
This was originally the only option, with vehicle, cargo and contact info all displayed at the same time on the second stage.
No prices can be displayed at this stage but the price can be provided immediately after submission of the second stage.

3 Step Multi-quote
In this mode cargo options are selectable and will filter down the appropriate sized vehicles.
Each vehicle is shown with an optional picture and description and if available by instant pricing config, its price.
Either a book now (if priced) or Get quote button is displayed on each vehicle.
Clicking this opens the final step of entering contact details and confirming.

Vehicle and Cargo Options

The names and choices of your vehicle types and cargo options (eg. passengers/luggage) are completely configurable from within your Transporters login area.

Go to Settings->Vehicles to find these options.

Journey Types

Journey Types are an optional question that can be added to the form to collect additional information from your customers.

These can be managed in Settings->Pricing Rules->Journey Types and if created will appear on the quote form.

Extra Booking Details

An extra booking details box is available if required, which can be named as you require to fit your needs. Common uses for this box is to collect Flight details or specific extra information your business requires.

To enable the booking details box go to Settings->General->Display Options and tick to enable "Booking Details", making sure to give it a description that explains what you wish to collect.

Tracking Conversions and Custom Functionality

If you run a Google Adwords campaign or similar you will likely want to track which ads are leading people to actually complete your booking form which is done through conversion tracking.

The best way to do this is through our callback function which is called on successful completion of a quote form request.

If you use the wordpress plugin then go to the plugins settings page, choose the correct form (1, 2 or 3) then click advanced and copy-paste the code below into the "Custom JS" box.

<script>
function transportersQuoteCompleteCallback(form_type, order_id){
  gtag('event', 'submit', {'event_category' : 'form','event_label' : 'quote form'});
}
</script>

If you use the Iframe form then do the same, but on the Settings->General->Display Options page, click advanced and paste into "Custom Javascript".

In both cases you may want to replace the line starting with gtag with your own suggested tracking code. If unsure what to insert ask your web developer or marketing partner to assist.

Did this answer your question?