# WPForms Vehicle Selector Integration

When embedding the vehicle selector inside a WPForms form, the vehicle data must be written to a WPForms-managed field for submission.

## Setup (user does this)

1. In WPForms builder, add a **Single Line Text** field
2. Label it "Vehicle" or "Vehicle Specs"
3. In **Advanced → CSS Classes**, enter `apex-vehicle-field`
4. Keep the existing **HTML Content** field with the vehicle dropdown snippet

## JS mechanism

The snippet detects the WPForms field via:
```javascript
var wpf = document.querySelector('.apex-vehicle-field input, .apex-vehicle-field textarea');
if(wpf) wpf.value = mk + ' ' + md + ' ' + yr + ' - ' + cl + ' - ' + hp + ' HP';
```

The format string is: `year color make model hp`
Example: `"2022 Red Ferrari F8 Tributo 710"`

## Critical pitfalls

- **Variable scope:** `hp` must be defined in the same scope as the WPForms population line. Store it as `var hp = d[mk][md][yr]` before the `wpf.value` line. If `hp` is not defined at that scope, the field stays blank.
- **Event handler method:** Do NOT use inline `onchange="vrUpdateModels()"` — WordPress/Elementor loaders may strip them. Use `.onchange = function() {...}` or `addEventListener()` inside an IIFE.
- **Vehicle data embedding:** Embed the JSON data as a JS object literal (`var d = {...}`), NOT fetched via `fetch()`. Elementor HTML widgets may not execute async fetches reliably.
- **Selector debugging:** If the field doesn't populate, check if `wpf` is null in browser dev tools. The CSS class `apex-vehicle-field` must match exactly what was entered in WPForms.
- **Notification gate:** WPForms notifications may be gated behind payment completion. If "Pay Offline" is an option and the notification never fires, check the notification settings for `paypal_commerce: "1"` or similar payment gate flags. Remove them from the notification JSON to send immediately on form submission.