# Forms & Components Quick Reference Card

**Last Updated:** 2026-01-10

## Common Tasks

### Adding Email Collection to a Tool
1. Include: `email-modal.js` + `email-modal-utils.js`
2. Initialize: `new OrdioEmailModal({ toolName: 'Tool Name' })`
3. See: `docs/systems/shared-components/COMPONENT_USAGE_GUIDE.md` Pattern 1

### Adding Form Tracking
1. Load: `gtm-form-tracking.js` (already in head.php)
2. Call: `window.GTMFormTracker.trackAPIForm(endpoint, options)`
3. See: `docs/systems/shared-components/GTM_FORM_TRACKING.md`

### Creating New API Endpoint
1. Use Forms API v3 pattern from `docs/systems/apis/HUBSPOT_API_REFERENCE.md`
2. Add to `docs/systems/forms/FORM_TO_PAGE_MAPPING.md`
3. Update `docs/systems/forms/FORM_CONFIGURATION_REFERENCE.md`

### Adding Lead Capture to Page
1. Include: `lead-capture-popup.php` + `lead-capture-triggers.js`
2. See: `docs/systems/shared-components/COMPONENT_USAGE_GUIDE.md` Pattern 3

## Form Endpoints

| Endpoint | Form GUID Constant | Used By |
|----------|-------------------|---------|
| `collect-lead.php` | `HUBSPOT_FORM_GUID_TOOLS` | Tools/Calculators |
| `submit-template.php` | `HUBSPOT_FORM_GUID_TEMPLATE` | Template Downloads |
| `lead-capture.php` | `HUBSPOT_FORM_GUID_LEAD_CAPTURE` | Lead Capture Popup |
| `webinar-registration.php` | CRM API | Webinar Pages |

## Key Files

- **Form Config:** `v2/config/hubspot-config.php`
- **API Helpers:** `v2/config/hubspot-api-helpers.php`
- **UTM Tracking:** `v2/js/utm-tracking.js`
- **GTM Tracking:** `v2/js/gtm-form-tracking.js`

## Documentation

- **Master Index:** `docs/systems/README.md`
- **Quick Reference:** `docs/systems/DEVELOPER_QUICK_REFERENCE.md`
- **Form Mapping:** `docs/systems/forms/FORM_TO_PAGE_MAPPING.md`
- **API Reference:** `docs/systems/apis/HUBSPOT_API_REFERENCE.md`