hermes-skills/skills/software-development/portal-ui-mockups/references/wpforms-vehicle-integration.md

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:

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.