40 lines
2.2 KiB
Markdown
40 lines
2.2 KiB
Markdown
# 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.
|