# TF-04 — fillPardotField & Hidden Fields

| | |
|---|---|
| **Feature** | `fillPardotField()` auto-populates hidden tracking fields before form submission |
| **Test Page** | [`test-pages/02-sfae-source.html`](../test-pages/02-sfae-source.html) |
| **Live URL** | https://sfae-forms.jjlo.app/test-pages/02-sfae-source.html |
| **Status** | ✅ Ready |
| **Last Verified** | 2026-05-24 |
| **Code Location** | `02-sfae-source.html` L3293–L3345 |

---

## What We're Testing

Before the prospect submits the form, a set of hidden fields are auto-filled via `fillPardotField()`.
These fields capture tracking and compliance data that the prospect never sees.

### Fields Auto-Filled

| Field (CSS class) | Value | When |
|---|---|---|
| `CONS_registration_gdpr_timestamp` | ISO timestamp | On GDPR checkbox check |
| `CONS_registration_comercinal_emails_timestamp` | ISO timestamp | On marketing consent check |
| `CONS_user_agent` | `navigator.userAgent` | On page load |
| `CONS_page_URL` | `window.location.href` | On page load |
| `CONS_exact_form_version` | `window.location.href` (should be form ID) | On page load |
| `CONS_IP_adadress` *(sic)* | IP from ipify API | Async, on page load |

---

## Test Steps

### 1. Locate Hidden Fields in DOM
- [ ] Open `02-sfae-source.html`
- [ ] DevTools → Elements → search for `CONS_page_URL`
- [ ] Confirm it's an `<input type="hidden">` inside `#pardot-form`
- [ ] Repeat for `CONS_user_agent`, `CONS_IP_adadress`, `CONS_exact_form_version`

### 2. Verify Auto-Fill on Load
After a few seconds (time for ipify to respond):
- [ ] In DevTools console, run: `document.querySelector('.CONS_page_URL input').value`
  - Expected: current page URL (`http://localhost:…` or `https://sfae-forms.jjlo.app/…`)
- [ ] Run: `document.querySelector('.CONS_user_agent input').value`
  - Expected: your browser's user agent string (non-empty)
- [ ] Run: `document.querySelector('.CONS_IP_adadress input').value`
  - Expected: your public IP address (e.g. `203.x.x.x`)
- [ ] Run: `document.querySelector('.CONS_exact_form_version input').value`
  - Expected: same as page URL (note: this should eventually be a hardcoded form ID like `DE-C01-F03`)

### 3. Verify GDPR Timestamp Fill
- [ ] Find the GDPR consent checkbox in the form
- [ ] Before checking it: run `document.querySelector('.CONS_registration_gdpr_timestamp input').value` → should be empty
- [ ] Check the GDPR checkbox
- [ ] Run the query again → should now show an ISO 8601 timestamp (e.g. `2026-05-24T10:30:00.000Z`)

### 4. fillPardotField Function Behavior
- [ ] Open DevTools console
- [ ] Run: `fillPardotField('CONS_page_URL', 'https://test-value.example.com')`
- [ ] Run: `document.querySelector('.CONS_page_URL input').value`
- [ ] Expected: `https://test-value.example.com`
- [ ] Function correctly targets the field by CSS class name inside `#pardot-form`

### 5. Console — No Errors
- [ ] No `TypeError` or `Cannot read property` errors in console
- [ ] ipify fetch succeeds (no network error) — check Network tab for `api.ipify.org` → 200

---

## Pass Criteria

All hidden fields are populated before form submission. `fillPardotField()` correctly sets values by CSS class. GDPR timestamp fills on checkbox interaction.

## Known Issues

| Issue | Notes |
|---|---|
| `CONS_exact_form_version` uses page URL instead of form ID | Intentional placeholder — update when deploying to production form |
| `CONS_IP_adadress` has a typo (double 'd') | Field name is hardcoded in SFAE — do not correct in JS without updating the SFAE field too |
| ipify may be blocked in some corporate networks | Test on personal connection if IP field is empty |