# Apex Track Experience — WPForms Vehicle Registration Pattern

## Architecture
The vehicle registration form uses a **custom HTML/JS snippet inside a WPForms HTML Content field** that populates a **Single Line Text field** with CSS class `apex-vehicle-field`.

## How it works

1. **HTML Content field** holds the snippet with cascading dropdowns (make → model → year → color)
2. **Single Line Text field** with CSS class `apex-vehicle-field` sits elsewhere in the form
3. JS in the snippet finds this field via `document.querySelector('.apex-vehicle-field input, .apex-vehicle-field textarea')` and populates it when the user selects a color
4. Format: `2022 Red Ferrari F8 Tributo 710` (year color make model hp)
5. When the form submits, WPForms includes that text field's value in the notification and entry

## Pitfalls

- **Hidden input fields are invisible to WPForms.** WPForms only submits its own form field elements. Standalone `<input type="hidden">` won't work — the data must go into a WPForms-managed field.
- **CSS class must be on the WPForms field, not the HTML widget.** Add the class in WPForms builder → field settings → Advanced → CSS Classes.
- **JS scope with Elementor.** The snippet runs inside its own IIFE (`(function(){...})()`) to avoid clashing with other scripts on the page.
- **Use `.onchange` assignments, not inline `onchange=` attributes.** Elementor's script loading can strip inline event handlers. Assign handlers in the IIFE via `element.onchange = function(){...}`.
- **The HTML Content field can contain the entire snippet** (CSS + HTML + JS + vehicle data). No external files needed.

## SMTP configuration

| Detail | Value |
|--------|-------|
| Server | c1113726.sgvps.net |
| Port | 2525 |
| Encryption | TLS (STARTTLS) |
| Credentials | contact@apextrackexperience.com (stored in WP Mail SMTP) |

## Notification gating

WPForms notifications can have a `paypal_commerce` flag that gates sending. When using "Pay Offline", remove it:
```php
unset($settings["notifications"]["1"]["paypal_commerce"]);
```

## Vehicle data
Inline JSON with makes → models → years → HP ratings. Source at `/root/portal-mockup/vehicles.json` on Core.