> ## Documentation Index
> Fetch the complete documentation index at: https://docs.os.default.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Set up the Pixel and Forms SDK

> Connect a domain, configure a form, install the SDK, and verify a submission from start to finish.

Follow this guide to connect a domain, approve a detected form, install the Forms SDK, and verify a
workflow.

After you complete this guide, Default can capture and process submissions from your custom form.

## Before you begin

You need:

* Admin access to your Default workspace.
* A test page with the form you want to connect.
* Access to the page's shared layout or tag manager.
* Synthetic visitor data for testing.

<Warning>
  Test submissions are real. They can run published workflows, so use synthetic data while you
  configure the form.
</Warning>

This tutorial uses the Forms SDK. Use the automatic Pixel when your page has a standard HTML form
and your code does not control submission.

## Connect your domain

<Steps>
  <Step title="Add your domain">
    Open **Signals**. Select **Add Domain**, then enter the domain that hosts your form.

    <Frame>
      <img src="https://mintcdn.com/default-b6d0c477/39YvaBpPGQDPEJa1/images/forms/add-domain-dialog.png?fit=max&auto=format&n=39YvaBpPGQDPEJa1&q=85&s=199b1b707b5764b9e59ade849d57c6e2" alt="Add domain dialog with app3.localhost entered" width="2880" height="1800" data-path="images/forms/add-domain-dialog.png" />
    </Frame>
  </Step>

  <Step title="Copy the Pixel install snippet">
    Copy the generated snippet. Default includes your public key in the snippet.

    <Frame>
      <img src="https://mintcdn.com/default-b6d0c477/39YvaBpPGQDPEJa1/images/forms/pixel-install-snippet.png?fit=max&auto=format&n=39YvaBpPGQDPEJa1&q=85&s=90acb4ef21b908546fc133517b1d5e83" alt="Pixel installation dialog with the generated script snippet" width="2880" height="1800" data-path="images/forms/pixel-install-snippet.png" />
    </Frame>
  </Step>

  <Step title="Install the Pixel on every tracked page">
    Put the configuration block before the script. Install both in your shared layout or site-wide tag
    manager.

    ```html theme={null}
    <script>
    	window.__defaultPixel__ = { key: 'your_public_key' }
    </script>
    <script async src="https://pixel.default.com/index.js"></script>
    ```

    Open the test page after you publish this change. The domain turns **Active** when Default
    receives traffic.

    <Frame>
      <img src="https://mintcdn.com/default-b6d0c477/39YvaBpPGQDPEJa1/images/forms/connected-domain.png?fit=max&auto=format&n=39YvaBpPGQDPEJa1&q=85&s=f95e4ec919a29c3fe221ae4ab91c0149" alt="Signals page with the app3.localhost domain added" width="2880" height="1800" data-path="images/forms/connected-domain.png" />
    </Frame>
  </Step>
</Steps>

## Detect and approve your form

<Steps>
  <Step title="Open the page that contains the form">
    Visit the exact page with the installed Pixel. Use the form normally so Default can detect its
    fields.
  </Step>

  <Step title="Review the detected form">
    Open **Forms**. The new form appears with **Awaiting approval** status.

    <Frame>
      <img src="https://mintcdn.com/default-b6d0c477/39YvaBpPGQDPEJa1/images/forms/form-awaiting-approval.png?fit=max&auto=format&n=39YvaBpPGQDPEJa1&q=85&s=72bd45171967d9eb234d176a6a876942" alt="Forms list with Request a demo awaiting approval" width="2880" height="1800" data-path="images/forms/form-awaiting-approval.png" />
    </Frame>
  </Step>

  <Step title="Approve the form">
    Open the form actions and select **Review**. Confirm the domain, path, form name, and fields.

    <Frame>
      <img src="https://mintcdn.com/default-b6d0c477/39YvaBpPGQDPEJa1/images/forms/review-form-action.png?fit=max&auto=format&n=39YvaBpPGQDPEJa1&q=85&s=ea636e8f57f73990915e1513fc83f5bf" alt="Request a demo form actions with Review available" width="2880" height="1800" data-path="images/forms/review-form-action.png" />
    </Frame>
  </Step>

  <Step title="Map each detected field">
    Map every detected field to the correct Default field. Save the mappings before you continue.

    <Frame>
      <img src="https://mintcdn.com/default-b6d0c477/39YvaBpPGQDPEJa1/images/forms/field-mapping-dialog.png?fit=max&auto=format&n=39YvaBpPGQDPEJa1&q=85&s=f973ff3a801f530cd4d29c22f7eeb04b" alt="Email, first name, and company fields mapped to Default fields" width="2880" height="1800" data-path="images/forms/field-mapping-dialog.png" />
    </Frame>
  </Step>

  <Step title="Confirm the active form">
    Open the form detail page and confirm its status is **Active**. Check the form name before you
    install the SDK.

    <Frame>
      <img src="https://mintcdn.com/default-b6d0c477/39YvaBpPGQDPEJa1/images/forms/active-form-detail.png?fit=max&auto=format&n=39YvaBpPGQDPEJa1&q=85&s=86ca4089e4fd49081a3c133b3782e472" alt="Active Request a demo form detail page" width="2880" height="1800" data-path="images/forms/active-form-detail.png" />
    </Frame>
  </Step>

  <Step title="Choose the form rules">
    Open **Edit Form** → **Settings**. Turn on the rules that match your intake policy.

    <Frame>
      <img src="https://mintcdn.com/default-b6d0c477/39YvaBpPGQDPEJa1/images/forms/form-settings.png?fit=max&auto=format&n=39YvaBpPGQDPEJa1&q=85&s=63eb6c24a557598c477f188697e0c299" alt="Request a demo form settings with submission and enrichment rules enabled" width="2880" height="1800" data-path="images/forms/form-settings.png" />
    </Frame>
  </Step>
</Steps>

## Install the Forms SDK

<Steps>
  <Step title="Copy the SDK sample">
    Open the **Install** tab. Copy the **Use the SDK** sample. It includes your public key, Pixel form
    UUID, and mapped field names.

    <Frame>
      <img src="https://mintcdn.com/default-b6d0c477/39YvaBpPGQDPEJa1/images/forms/form-install-sdk.png?fit=max&auto=format&n=39YvaBpPGQDPEJa1&q=85&s=0ca4b21dc4ca1cbd364f503c6feddbc5" alt="Form Install tab with the Forms SDK sample" width="2880" height="1800" data-path="images/forms/form-install-sdk.png" />
    </Frame>
  </Step>

  <Step title="Separate initialization from submission">
    Load and initialize `sdk.js` when the page starts. Call `submitForm()` only inside your form
    handler.

    Use the HTML form ID for `recordFormInteraction({ formId })` and `submitForm({ formId })`. Use the
    Pixel form UUID only for `submitForm({ pixelFormId })`.

    See [Build a reliable Forms SDK flow](/pixel-sdk-best-practices) for a complete example.
  </Step>
</Steps>

## Verify the result

<Steps>
  <Step title="Test the field values">
    Open the **Test** tab. Enter synthetic values that match the mapped field types.

    <Frame>
      <img src="https://mintcdn.com/default-b6d0c477/39YvaBpPGQDPEJa1/images/forms/form-test-actions.png?fit=max&auto=format&n=39YvaBpPGQDPEJa1&q=85&s=be383354adebc70581a680d436b7dd8a" alt="Form Test tab with synthetic request demo values" width="2880" height="1800" data-path="images/forms/form-test-actions.png" />
    </Frame>
  </Step>

  <Step title="Send a test submission">
    Select **Send test submission**. Confirm the result has `"success": true`.

    <Frame>
      <img src="https://mintcdn.com/default-b6d0c477/39YvaBpPGQDPEJa1/images/forms/submission-result.png?fit=max&auto=format&n=39YvaBpPGQDPEJa1&q=85&s=8f6cb02b5521668b34d76010ef52bc35" alt="Successful synthetic form submission result" width="744" height="1282" data-path="images/forms/submission-result.png" />
    </Frame>
  </Step>

  <Step title="Create the Form Submission trigger">
    Create or open a workflow. Add a **Form Submission** trigger and select the approved form.

    Add the steps that should run after submission. Publish the workflow before you test those steps.

    <Frame>
      <img src="https://mintcdn.com/default-b6d0c477/39YvaBpPGQDPEJa1/images/forms/workflow-form-submission-trigger.png?fit=max&auto=format&n=39YvaBpPGQDPEJa1&q=85&s=d10dcb737db0a7bf8a5035cc3f382721" alt="Workflow canvas with the Request a demo Form Submission trigger" width="2880" height="1800" data-path="images/forms/workflow-form-submission-trigger.png" />
    </Frame>
  </Step>

  <Step title="Verify the page end to end">
    Submit the form from its test page with synthetic data. Confirm the submission appears in
    **Recent Submissions** and the published workflow produces the expected result.

    If the workflow returns a scheduler, confirm it opens in the configured modal, inline target, or
    page redirect.
  </Step>
</Steps>

## Troubleshooting

| Problem                                 | What to check                                                                                    |
| --------------------------------------- | ------------------------------------------------------------------------------------------------ |
| The domain does not connect             | Confirm the snippet is in the page `<head>`. Then load the exact domain you added.               |
| The form does not appear                | Confirm the Pixel runs on the form page. Interact with the form, then check **Forms** again.     |
| The form stays in **Awaiting approval** | Open **Review**, map every required field, and save the changes.                                 |
| The test submission fails               | Confirm the public key, Pixel form UUID, and mapped response names match the **Install** sample. |
| The workflow does not run               | Confirm the workflow uses the approved form and is published before you submit.                  |

## Next steps

<CardGroup cols={2}>
  <Card title="Build a reliable Forms SDK flow" icon="shield-check" href="/pixel-sdk-best-practices">
    Add early initialization, pre-enrichment, result handling, and safe scheduler messages.
  </Card>

  <Card title="Understand the full integration" icon="code" href="/pixel-sdk-integration-guide">
    Learn how identity, form capture, workflows, and scheduler handoffs work together.
  </Card>

  <Card title="Use the API reference" icon="sliders" href="/pixel-sdk-reference">
    Find every configuration option, method, return value, and scheduler event.
  </Card>
</CardGroup>
