# Form Tracking Reference

## GA4 Form Events

### form_start
Fires on first interaction with form field.

```javascript
dataLayer.push({
  event: "form_start",
  form_id: "contact-form",
  form_name: "Contact Us",
  form_destination: "/submit-contact"
});
```

### form_submit
Fires on successful form submission.

```javascript
dataLayer.push({
  event: "form_submit",
  form_id: "contact-form",
  form_name: "Contact Us",
  form_destination: "/submit-contact",
  form_submit_text: "Send Message"
});
```

### generate_lead
Fires when form generates a qualified lead.

```javascript
dataLayer.push({
  event: "generate_lead",
  currency: "USD",
  value: 100,  // Estimated lead value
  form_id: "quote-request"
});
```

## Form Field Events (Custom)

### field_focus
```javascript
dataLayer.push({
  event: "field_focus",
  form_id: "signup-form",
  field_name: "email",
  field_type: "email"
});
```

### field_complete
```javascript
dataLayer.push({
  event: "field_complete",
  form_id: "signup-form",
  field_name: "email",
  field_type: "email",
  is_valid: true
});
```

### field_error
```javascript
dataLayer.push({
  event: "field_error",
  form_id: "signup-form",
  field_name: "email",
  error_message: "Invalid email format"
});
```

## Form Abandonment Tracking

### Detecting Abandonment
Track when user leaves form without submitting:

```javascript
// Track form start
let formStarted = false;
document.querySelectorAll('form input, form select, form textarea')
  .forEach(field => {
    field.addEventListener('focus', function() {
      if (!formStarted) {
        formStarted = true;
        dataLayer.push({ event: 'form_start', form_id: this.form.id });
      }
    });
  });

// Track abandonment on page leave
window.addEventListener('beforeunload', function() {
  if (formStarted && !formSubmitted) {
    dataLayer.push({
      event: 'form_abandon',
      form_id: 'contact-form',
      last_field: lastFocusedField,
      fields_completed: completedFieldCount
    });
  }
});
```

## GTM Trigger Configuration

### Form Submission Trigger
| Setting | Value |
|---------|-------|
| Trigger Type | Form Submission |
| Wait for Tags | Check (if AJAX form) |
| Check Validation | Check |
| Form ID | equals `contact-form` |

### Form Start Trigger (Custom Event)
| Setting | Value |
|---------|-------|
| Trigger Type | Custom Event |
| Event Name | form_start |
| Fire On | All Custom Events |

## Common Form Types & Tracking

### Contact Forms
Events: `form_start`, `form_submit`, `generate_lead`

### Newsletter Signup
Events: `form_start`, `form_submit`, `sign_up`

### Login Forms
Events: `form_start`, `login`

### Search Forms
Events: `search` (with search_term parameter)

### Multi-Step Forms
Track each step:
```javascript
dataLayer.push({
  event: "form_step",
  form_id: "checkout-form",
  step_number: 2,
  step_name: "Shipping Address"
});
```

## Validation Checklist

- [ ] Form has id or name attribute
- [ ] All required fields have names
- [ ] Submit button identifiable
- [ ] form_start fires on first interaction
- [ ] form_submit fires only on success
- [ ] generate_lead has value parameter
- [ ] Error events track validation failures
- [ ] Abandonment tracking implemented (optional)