hermes-skills/skills/email/email-workflows/references/apex-wpforms-vehicle-pattern.md

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:

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.