# Pardot enhanced form

External component: embeds a Pardot-hosted form in an iframe with auto-resize, loading state, and postMessage event handling for submission success and validation errors.

No API keys required — only a Pardot embed URL.

## Fields & Schema

| Field | Type | Required | Notes |
|-------|------|----------|-------|
| `externalComponentType` | Symbol | Yes | Must be `"Pardot enhanced form"` |
| `data.url` | string | Yes | Pardot iframe embed URL (the `src` value from the Pardot embed snippet). Returns `null` if absent. |
| `extraCopy` | Rich Text | No | Content shown in-place after successful submission. Ignored if `successRedirectUrl` is set. |
| `data.successRedirectUrl` | string | No | Full URL to redirect to after successful submission. Takes priority over `successMessage`. |
| `data.minHeight` | number | No | Minimum iframe height in px while loading. Default: `400`. |
| `data.allowedOrigins` | string | No | Space or comma-separated extra trusted origins. Only needed if the Pardot thank-you page is on a different domain than the form. |

## Getting the embed URL from Pardot

1. Log in to Pardot (Marketing Cloud Account Engagement).
2. Go to **Marketing → Forms**, click your form name.
3. Click **Actions → View embed code**.
4. Copy only the `src` attribute value from the `<iframe>` tag — e.g. `https://go.pardot.com/l/123456/2024-01-01/abc123`.

> The field expects a plain URL string, not the full `<iframe>` HTML snippet.

## Usage

```bash
cms-edit add "Pardot enhanced form" --content-type externalComponent --target content

cms-edit set @ref data --json '{
  "url": "https://go.pardot.com/l/123456/2024-01-01/abc123",
  "minHeight": 500
}'

# Set the success message via the extraCopy rich text field
cms-edit set @ref extraCopy --rich-text "Thank you! We will be in touch shortly."

cms-edit save
```

## Auto-resize and event support

Out of the box the iframe renders at `minHeight` and stays there. To enable auto-resize, success detection, and validation error scrolling, add custom JavaScript to your **Pardot form layout template**.

### Form page — paste before `</body>`

```html
<script>
(function () {
  'use strict';
  // Lock to your domain in production: var PARENT_ORIGIN = 'https://om1.com';
  var PARENT_ORIGIN = '*';

  function post(data) { window.parent.postMessage(data, PARENT_ORIGIN); }
  function emitResize() {
    post({ type: 'pardot:resize', height: document.documentElement.scrollHeight });
  }

  if (window.ResizeObserver) {
    new ResizeObserver(emitResize).observe(document.documentElement);
  }

  window.addEventListener('load', function () {
    post({ type: 'pardot:loaded' });
    emitResize();
  });

  var form = document.querySelector('form');
  if (form) {
    form.addEventListener('submit', function () {
      setTimeout(function () {
        var errors = document.querySelectorAll('.error, [class*="error"]');
        if (errors.length > 0) {
          post({ type: 'pardot:submit:error' });
          emitResize();
        }
      }, 150);
    });
  }
})();
</script>
```

### Thank You page — paste before `</body>`

```html
<script>
(function () {
  var PARENT_ORIGIN = '*'; // Lock to 'https://om1.com' in production
  window.parent.postMessage({ type: 'pardot:submit:success' }, PARENT_ORIGIN);
  window.parent.postMessage(
    { type: 'pardot:resize', height: document.documentElement.scrollHeight },
    PARENT_ORIGIN
  );
})();
</script>
```

In Pardot: **Marketing → Forms → Form Layout Templates** — edit the template assigned to your form and add the snippets. Re-publish the form after saving the template.

### Events received by the parent page

| Event type | Effect |
|------------|--------|
| `pardot:loaded` | Hides the loading spinner, fades in the iframe |
| `pardot:resize` | Updates iframe height smoothly |
| `pardot:submit:success` | Shows `successMessage` overlay or redirects to `successRedirectUrl` |
| `pardot:submit:error` | Scrolls the iframe into view so the user sees validation errors |

## Troubleshooting

| Symptom | Fix |
|---------|-----|
| Iframe stays at `minHeight`, never resizes | Custom JS not added to the Pardot layout template, or form not re-published after editing. |
| Success overlay never appears | Thank-you page script is missing, or Pardot is redirecting to an external URL after submission. |
| Events not received | Check that the iframe URL origin matches the `allowedOrigins` field if using a custom Pardot domain. |