Contents
Booking form style - Plugixa Car Rental
The booking form and the customer portal come with their own look: a deep blue for buttons and links, a yellow highlight, white cards on a pale grey. If your site uses other colours, change them here. One set of colours applies to every booking form and every portal page on the site.
Open Plugixa Car Rental -> Settings -> Booking form style. The section is only listed while the Booking form app is on in the App Manager.
The colours
| Field | Default | Where it is used |
|---|---|---|
| Accent | #1d3fbf |
“Buttons, links, the selected step.” Also the search panel at the top of the form, the frame of a chosen extra or payment method, and the focus ring of a field. |
| Highlight | #f2b705 |
“Badges such as “Lowest price” and the length of the rental.” Also the Find a car button. |
| Card background | #ffffff |
“Cars, panels and fields.” |
| Section background | #f4f6fa |
“Behind the cards, and the price boxes.” |
| Text | #0e1726 |
“Headings and body text.” |
Each field takes a hex colour, such as #1d3fbf or the short form #13b.
Type it, paste it, or click the swatch at the start of the field to pick one.
Anything that is not a hex colour turns the field red with “Use a hex colour
such as #1d3fbf.”, and is saved as the default instead.
Click Save at the top right of the Settings screen to apply the colours. Back to the default colours puts all five back to the values above; you still need to click Save.
The preview
The Preview beside the fields draws a car card, as the form shows it on the Car step, in the colours you are typing: the section background behind it, the card, the highlight badge, the price box and the accent button. It changes as you type, before anything is saved.
The figure in the preview is a sample and does not use your currency.
Text on the accent and highlight
You do not choose the text colour on a button or a badge. For the Accent and Highlight colours the plugin works out whether white or near-black text is easier to read on that colour, by the contrast rule used in web accessibility guidelines, and uses that. A pale yellow highlight gets dark text; a dark green accent gets white text. The preview shows the same choice.
The Text colour is used on the card and section backgrounds. Choose it so it reads well on both.
How the colours reach your pages
- Only colours that differ from the defaults are added to the page. A site that never changes this section adds nothing at all.
- The colours apply to the booking form and the customer portal, whether they are placed with a block or a shortcode. See Shortcodes and blocks.
- They do not change the rest of your site, and your theme’s colours do not change the form.
- If your site uses a page cache, clear it after saving, so visitors get pages with the new colours.
Tips
- Pick the Accent from your theme’s main button or link colour, so the form’s buttons look like the rest of your site.
- Keep the Card background and Section background close but not equal. The small difference is what separates the cars from the area around them.
- For a dark site, set the Card background and Section background to dark colours and the Text to a light one. Check the result on the booking form, including the Details step, because the field borders and some secondary text keep their own grey tones.