> For the complete documentation index, see [llms.txt](https://docs.carpose.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.carpose.de/components/13_test-drive-form.md).

# Test Drive Booking

{% hint style="info" %}
The test-drive booking wizard lets a visitor pick a car from your test-drive fleet, choose a free day and time, and leave their contact details. You receive the appointment as a booking request and confirm it.
{% endhint %}

## Overview

The wizard has three steps:

1. **Fahrzeug** — a tile grid of every vehicle in your test-drive fleet, each with its photo and name. The visitor picks one.
2. **Termin** — the days that still have free slots for that vehicle, and the free times on the chosen day. The first bookable day is preselected, and the expected duration is shown next to the times.
3. **Kontakt** — salutation, first and last name, e-mail, optional phone number and message, and the privacy consent checkbox.

First name, last name, a valid e-mail address and the consent checkbox are mandatory; everything else is optional.

Availability is loaded per vehicle from your fleet's real calendar, so a visitor only ever sees times that are genuinely free. If someone books a slot while another visitor is filling in the form, the second visitor is returned to the appointment step with a refreshed list of times rather than losing what they typed.

A new booking is created with the status **pending** — it is a request, not a confirmed appointment. The visitor sees a summary of the vehicle, date and time, plus a note that you will confirm by e-mail.

## Adding the wizard

### Option 1 — inline

```html
<div
  data-carpose-component="test-drive-form"
  data-api-key="your-api-key"
  data-privacy-url="https://your-site.de/datenschutz"
></div>
```

### Option 2 — behind a button

```html
<div
  data-carpose-component="test-drive-form"
  data-api-key="your-api-key"
  data-variant="modal"
  data-title="Fahren Sie Probe"
  data-button-label="Jetzt Probe fahren"
  data-privacy-url="https://your-site.de/datenschutz"
></div>
```

### Option 3 — from the floating buttons

The wizard can also open from the [floating-buttons overlay](/components/11_floating-buttons.md) as a "Probefahrt buchen" button. Put `data-test-drive="true"` on the floating-buttons script tag or element to switch it on for a page — see [Wizard buttons](/components/11_floating-buttons.md#wizard-buttons).

Opened this way the wizard uses its default copy and takes the privacy link from your account settings, since there is no mount element to read attributes from.

## Configuration Attributes

| Attribute           | Required | Default                                                                           | Description                                                                                                                                                                                         |
| ------------------- | -------- | --------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `data-api-key`      | Yes      | —                                                                                 | Your Carposé API key                                                                                                                                                                                |
| `data-variant`      | No       | `inline`                                                                          | `inline` renders the wizard in place; `modal` renders a button that opens it in a dialog                                                                                                            |
| `data-title`        | No       | `Probefahrt buchen`                                                               | Headline above the wizard                                                                                                                                                                           |
| `data-subtitle`     | No       | `Wählen Sie ein Fahrzeug und einen Termin — wir bestätigen Ihnen die Probefahrt.` | Intro line. Set it to an empty value (`data-subtitle=""`) to hide it — that is different from omitting the attribute, which keeps the default                                                       |
| `data-button-label` | No       | `Probefahrt buchen`                                                               | Caption of the trigger button, for `data-variant="modal"`. Note this falls back to the built-in default, **not** to your `data-title` — set both if you want a custom caption on the button as well |
| `data-success-url`  | No       | —                                                                                 | Redirect here after a successful booking instead of showing the confirmation. Only `http://` and `https://` URLs are accepted                                                                       |
| `data-privacy-url`  | No       | —                                                                                 | Target of the link in the privacy consent checkbox. Only `http://` and `https://` URLs are accepted                                                                                                 |

## Your fleet

The vehicles shown are the **active** vehicles in your test-drive fleet, managed in the Carposé dashboard — this is a separate list from your vehicle inventory. Their photos and booking calendars come from the same place.

Two states are worth knowing, because neither is an error:

* **No vehicles at all** — the wizard says that no cars are currently available for a test drive. Check that your fleet has at least one active vehicle.
* **A vehicle with no free slots** — picking it reaches the appointment step and reports that no dates are currently available. The visitor can go back and choose another car.

If the fleet itself cannot be loaded, the wizard shows an error with a retry button.

## Events

The wizard dispatches `carpose-vehicle-test-drive-*` events for open, step, submit, success and error. See [Vehicle Search events](/events/02_vehicle-search.md#test-drive) for the payloads.

## Notes

* All wizard copy is German.
* The wizard renders inside a Shadow DOM, so your page styles cannot affect it and its styles cannot leak out. It does inherit your page's font family on purpose, so it blends into your typography. See [Shadow DOM Architecture](/misc-modules/01_shadow-dom-architecture.md).
* This is the standalone fleet wizard. Booking a test drive for one specific vehicle from an offer page is a separate flow — see [Offer Item](/offer-modules/02_offer-item.md).
* More than one test-drive wizard can be placed on the same page — for example an inline one and a modal trigger.