Feb 16, 2026

Customizing Your LQC Booking Form with CSS

You can customize the look and feel of your LimoAnywhere AddOns booking forms using custom CSS. This guide lists the CSS selectors you can target to change colors, fonts, spacing, borders, and more.

Getting Started

Go to Settings > System > AddOns LA > CSS
Click Add New CSS and give it a name
Paste your custom CSS rules (without <style> tags)
Optionally add Google Fonts (e.g., Roboto,Lato)
Click Save
Go to Leads > Lead Forms, edit your form configuration, and select your CSS from the CSS dropdown
Use the Preview button to check your changes

Tip: Your custom CSS loads after the form’s default styles, so your rules will take priority. You generally don’t need !important.

Selectors That Work on All Forms

These selectors apply no matter which form type you’re using.

Form Container

What to Target	CSS Selector	What It Does
Form wrapper	`#lead_form`	The main form box — change background, padding, border-radius
Page background	`body`	The page behind the form (set `transparent` for embedded forms)
All labels	`label`	Every field label — change font, size, color
Headings	`h1, h2, h3`	Section headings

Example — Custom form background and labels:

#lead_form {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
}

body {
    background-color: transparent;
}

label {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    color: #333333;
}

Input Fields

What to Target	CSS Selector	What It Does
All inputs & dropdowns	`.form-control`	Every text field, dropdown, and date picker
Pickup address	`#autocomplete_pickup`	Just the pickup address field
Dropoff address	`#autocomplete_dropoff`	Just the dropoff address field
Date	`#date_pickup`	The pickup date field
Time	`#time_pickup`	The pickup time field
Passengers	`#num_passengers`	The passenger count field

Example — Rounded inputs with custom border:

.form-control {
    border-radius: 6px;
    border: 1px solid #cccccc;
    font-size: 14px;
    padding: 8px 12px;
}

Submit Button

What to Target	CSS Selector
Submit button (all forms)	`input[type=submit]`

Example — Branded submit button:

input[type=submit] {
    background-color: #d84315;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

When a customer types an address, a dropdown appears with suggestions. You can style it:

What to Target	CSS Selector	What It Does
Dropdown container	`.artusmode_autocomplete_results`	The dropdown box itself
Each suggestion	`.artusmode_suggest_address`	Individual address rows
Hovered suggestion	`.artusmode_suggest_hover`	The highlighted/selected row
Airport suggestions	`.artusmode_suggest_airport`	Airport-specific rows

Example — Custom autocomplete styling:

.artusmode_autocomplete_results {
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.artusmode_suggest_hover {
    background-color: #f0f0f0;
}

Contact Form

Our recommended form type. Full-featured vertical layout with rounded corners, the most configurable options, and the best customer experience.

What to Target	CSS Selector	What It Does
Form container	`#lead_form`	Main form (border-radius: 20px by default)
Submit button	`#submit_button`	The submit button
Submit wrapper	`#submit_button_wrapper`	Container around the submit button
Loading text	`#searching_text`	“Searching…” overlay after submit
First name	`#col_first_name`	First name field area
Last name	`#col_last_name`	Last name field area
Email	`#col_email`	Email field area
Phone	`#col_phone`	Phone field area
Phone input	`.iti`	International phone input wrapper
Occasion	`#col_occasion`	Occasion dropdown area
Service type	`#col_service_type`	Service type dropdown
Notes	`#col_notes`	Notes textarea area
Round trip	`#col_round_trip`	Round trip checkbox
SMS opt-in	`#col_sms_accepted`	SMS checkbox
Stops container	`#stops`	Intermediate stops section
Add stop button	`.add-stops`	The “Add Stop” button

Example — Contact form styling:

#lead_form {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 30px;
}

#submit_button {
    background-color: #d84315;
    color: #ffffff;
    border-radius: 6px;
}

Micro Form

Compact dark vertical form, great for sidebars and widget areas.

What to Target	CSS Selector	What It Does
Form background	`#lead_form`	Main form (dark `#1c1c1c` by default)
Content area	`#after_radio`	Area below the Transfer/Hourly toggle (`#353938` by default)
Field rows	`.input_group`	Each field wrapper
Submit button	`#book_button`	The “Book Now” button (orange by default)
Round trip area	`#round_trip_wrapper`	Round trip checkbox and label
Return fields	`#round_trip_extra_fields`	Return date/time (shown when round trip is checked)
Footer text	`#lead_form_micro_footer_text`	Text below the submit button
Radio labels	`#type label`	Transfer/Hourly toggle buttons
Selected radio	`input[type=radio]:checked + label`	The currently selected toggle

Example — Custom Micro form:

#lead_form {
    background-color: #1c1c1c;
}

#after_radio {
    background-color: #353938;
    padding: 20px;
}

#book_button {
    background-color: #F55518;
    color: #ffffff;
    border-radius: 6px;
    width: 96%;
    padding: 15px;
}

#type label {
    background-color: #1c1c1c;
    color: #ffffff;
}

input[type=radio]:checked + label {
    background-color: #353938;
}

Center Form

Centered layout with inline fields. Supports hero background images and flight info.

What to Target	CSS Selector	What It Does
Form container	`#lead_form`	Main form (flat design, no border-radius)
Submit button	`#book_button`	The book button
Trip type links	`.trip_type_option`	Transfer/Hourly text links
Active trip type	`.trip_type_option.active`	The selected trip type
Inactive trip type	`.trip_type_option.inactive`	The unselected trip type
Field wrappers	`.input_group`	Each inline field (11% width)
Input + icon wrapper	`.input-group`	The input with its icon
Icon cell	`.input-group-addon`	The icon next to the input
Focus highlight	`.wrap_focus`	Blue glow when input is focused
Flight section	`#flight_wrapper`	Airline + flight number fields
Return trip section	`#entire_round_trip`	All return trip fields

Example — Center form styling:

#lead_form {
    background: #ffffff;
    padding: 30px;
}

.input-group {
    border: 1px solid #cbcbcb;
    border-radius: 4px;
}

.input-group-addon {
    background-color: #ffffff;
    color: #666666;
}

Horizontal Form

Dark single-row form designed for website headers and banners.

What to Target	CSS Selector	What It Does
Form bar	`#lead_form`	The form strip (dark `#1c1c1c` by default)
Field wrappers	`.input_group`	Each inline field (11% width)
Submit button	`#book_button`	Rounded pill-shaped submit button

Example — Custom horizontal bar:

#lead_form {
    background: #1c1c1c;
    color: #ffffff;
    padding: 10px;
}

#book_button {
    background: #353938;
    color: #ffffff;
    border-radius: 50px;
}

Bootstrap Form

Two-column grid layout with icon + input field groups.

What to Target	CSS Selector	What It Does
Form container	`#lead_form`	Main form (two-column layout)
Icon + input wrapper	`.input-group`	The combined icon/field unit
Icon cell	`.input-group-addon`	The icon area next to each input
Vehicle image	`#category_image`	Vehicle preview thumbnail
Date + time row	`#when_pickup`	Container for date and time side by side

Example — Custom icon styling:

.input-group {
    border: 1px solid #cccccc;
    border-radius: 4px;
}

.input-group-addon {
    background-color: #eeeeee;
    color: #666666;
    width: 40px;
}

Short Form

Compact vertical form with side-by-side fields.

What to Target	CSS Selector	What It Does
Form container	`#lead_form`	Main form
Half-width fields	`.max-49p`	Fields that sit side by side (49% width)
Full-width fields	`.max-98p`	Fields that take the full row
Required field border	`.border-red`	Red border on required fields

Quote / Booking Confirmation Page

After a customer selects a vehicle, they go through the quote/booking page. Your CSS carries over to this page automatically.

Page Layout

What to Target	CSS Selector	What It Does
Page wrapper	`#content`	Main content area (light gray `#F3F3F3` by default)
Each step	`.page`	Individual step containers
Header bar	`#ribbon`	Top logo/header
Page heading	`h1`	The main heading

What to Target	CSS Selector	What It Does
All nav buttons	`.page_button`	Both next and previous buttons
Next button	`.page_next`	Continue / next step button
Back button	`.page_prev`	Previous step button
Confirm button	`.final_submit`	The “Confirm Reservation” button

Trip Summary

What to Target	CSS Selector	What It Does
Vehicle card	`.summary_vehicle`	The vehicle summary box
Vehicle name	`.vehicle_name`	Vehicle name text
Vehicle image	`.vehicle_image`	Vehicle photo
Total price	`.trip_total`	The grand total amount
Price breakdown	`.cost_breakdown`	Itemized price column
Stop list	`ul.stops_list`	List of pickup/dropoff/stops
Individual stop	`ul.stops_list li`	Each stop in the list

Other Sections

What to Target	CSS Selector	What It Does
Terms of service	`#tos`	TOS text area (scrollable)
Add-on cards	`.line_item_wrapper`	Each add-on/line item
Add-on image	`.line_item_image`	Add-on product image
Credit card area	`#wrap_credit_card`	Payment input section
Promo code input	`#promo_code`	Promo code text field
Billing text	`#billing_language`	Billing acceptance message

Example — Branded quote page:

#content {
    background-color: #f3f3f3;
    border-radius: 6px;
}

h1 {
    font-family: "Roboto", sans-serif;
    color: #1e293b;
}

.page_next {
    background-color: #d84315;
    color: #ffffff;
}

.final_submit {
    background-color: #28a745;
    color: #ffffff;
}

.summary_vehicle {
    background-color: #fbfbfb;
    border: 1px solid #dddddd;
}

.trip_total {
    font-size: 18px;
    font-weight: bold;
}

#tos {
    max-height: 300px;
    font-size: 12px;
}

Using Google Fonts

You can use custom Google Fonts on your forms:

Go to fonts.google.com and pick a font
In your CSS entry, put the font name(s) in the Google Fonts field (e.g., Roboto,Open Sans)
Reference the font in your CSS:

#lead_form, .form-control, label {
    font-family: "Roboto", sans-serif;
}

Quick Recipes

Change the form to match your website colors

#lead_form {
    background-color: #YOUR_COLOR;
}

input[type=submit] {
    background-color: #YOUR_BUTTON_COLOR;
    color: #ffffff;
}

label {
    color: #YOUR_TEXT_COLOR;
}

Make the form transparent (for embedding over a background image)

body {
    background-color: transparent;
}

#lead_form {
    background-color: rgba(255, 255, 255, 0.9);
}

Hide a specific field

#col_occasion {
    display: none;
}

Change input focus color

.form-control:focus {
    border-color: #YOUR_COLOR;
    box-shadow: 0 0 0 3px rgba(YOUR_R, YOUR_G, YOUR_B, 0.1);
}

Need Help?

Use the CSS Reference Guide panel on your Lead Form Configuration edit page for a quick-reference of selectors
Use the Preview button to test your changes before going live
Use your browser’s Inspect Element tool (right-click > Inspect) to find additional selectors

Was this article helpful?

Updated on February 16, 2026

Describe Your Issue