# TF-01 — iFrame Embed & Rendering

| | |
|---|---|
| **Feature** | iframe embed of SFAE Pardot form via `dk-contact-form` component |
| **Test Page** | [`test-pages/01-iframe-embed.html`](../test-pages/01-iframe-embed.html) |
| **Live URL** | https://sfae-forms.jjlo.app/test-pages/01-iframe-embed.html |
| **Pardot Form** | `DE \| C01-F03--de \| Generic Contact Form Service` |
| **Pardot URL** | https://www2.emea.dormakaba.com/l/952052/2025-11-24/k29g7 |
| **Status** | ✅ Ready |
| **Last Verified** | 2026-05-24 |

---

## What We're Testing

The `dk-contact-form` component on dormakaba.com renders a Pardot landing page inside an `<iframe>`.
This test verifies that:
1. The iframe loads and renders the form correctly
2. The component attributes (`dk-contact-form-url`, `dk-contact-country`, etc.) are present
3. The URL parameters are injected into the `src` attribute correctly
4. The page chrome (header, hero, two-col layout) simulates a real product page context

---

## Prerequisites

- A working internet connection (form loads from `www2.emea.dormakaba.com`)
- Chrome or Firefox (iframe cross-origin rendering)

---

## Test Steps

### 1. Page Load
- [ ] Open `test-pages/01-iframe-embed.html` in browser
- [ ] Dev toolbar visible at top (dark bar with "DEV · Page 1 — iFrame Embed")
- [ ] Page header shows "dormakaba" brand logo with red "kaba"
- [ ] Hero section shows "Contact Us — Test Page"
- [ ] Two-column layout: copy on left, form wrapper on right

### 2. iFrame Rendering
- [ ] iframe loads within the `.form-wrapper` container (white box, right column)
- [ ] Pardot form renders inside the iframe (fields visible: First Name, Last Name, Email, etc.)
- [ ] No browser security error / blocked content warning
- [ ] Form is not blank / not showing a 404 or error page

### 3. Component Attributes
Open DevTools → Elements, inspect the `<iframe>` element and verify:
- [ ] `dk-contact-form-url` = `https://www2.emea.dormakaba.com/l/952052/2025-11-24/k29g7`
- [ ] `dk-contact-country` = `US`
- [ ] `contact-form` = `component-iframe`
- [ ] `class` includes `contact-form_form-iframe-transp`
- [ ] `width` = `100%`, `height` = `1600px`

### 4. URL Parameters
In the **URL inspector panel** at the bottom of the page, verify all parameters are decoded correctly:
- [ ] `theme` = `light`
- [ ] `Lang_Browser` = `en-US`
- [ ] `Form_URL` = `https://go.dormakaba.com/de/test/contact-de`
- [ ] `Language` = `DE`
- [ ] `country` = `US`
- [ ] `Autoresponder_header_img` has a valid URL (placeholder SVG)
- [ ] `Doc_Download_Url` ends with `#`
- [ ] `Doc_Img_Url` contains `installation%20of%20products.avif`
- [ ] Empty params (`Autoresponder_body_text`, `Doc_Name`, `Doc_History_Name`, `Autoresponder_Subject`) show as *(empty)*

### 5. Dev Toolbar Navigation
- [ ] Click "→ Page 2: SFAE Source" link in the dev toolbar
- [ ] Navigates to `02-sfae-source.html` correctly

### 6. Responsive
- [ ] Resize window to 768px wide — layout collapses to single column
- [ ] iframe remains visible and usable at narrower widths

---

## Pass Criteria

All checkboxes above checked. The form must render inside the iframe and all URL params must appear in the inspector.

## Known Issues / Edge Cases

| Issue | Workaround |
|---|---|
| iframe may show "cookies required" on some browsers | Test in Chrome with third-party cookies enabled |
| `Doc_Img_Url` contains unencoded space in the table display | This is a display artifact — the actual src attribute is correctly encoded |
| Height is hardcoded to 1600px | This is intentional (matches dormakaba component default); auto-resize is a future feature |