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

# Embedding Forms

> Embed forms on your website and pre-fill values with query parameters

## Sharing and Embedding Options

Every Clarky form has a public URL and a ready-to-paste iframe embed. You can use whichever is most convenient:

<CardGroup cols={2}>
  <Card title="Public URL" icon="link">
    Share a direct link to the hosted form on `clarky.ai/f/[form-id]`.
  </Card>

  <Card title="Iframe Embed" icon="code">
    Drop a snippet of HTML onto your own website to embed the form inline.
  </Card>
</CardGroup>

## The Public Form URL

Every form has a public, shareable URL of the form:

```
https://clarky.ai/f/[form-id]
```

You can find the URL and copy it from the form's view/preview page. It works in any browser and automatically renders the right experience based on the form's style — traditional or survey.

<Tip>
  The public URL is great for sharing on social media, in emails, or in QR codes. No technical setup required.
</Tip>

## Iframe Embed Code

The form editor's view page includes copy-paste embed code for both styles. Pick the snippet that matches your form.

<Tabs>
  <Tab title="Traditional">
    Traditional forms work well at a fixed height inside an existing page layout:

    ```html theme={null}
    <iframe
      src="https://clarky.ai/f/[form-id]?embed=true"
      width="100%"
      height="600"
      style="border: none;">
    </iframe>
    ```

    The `?embed=true` flag adjusts the form for in-page embedding (no extra padding around the edges).
  </Tab>

  <Tab title="Survey">
    Surveys are full-screen experiences and need room to breathe. Give the iframe full width and a generous minimum height:

    ```html theme={null}
    <iframe
      src="https://clarky.ai/f/[form-id]"
      width="100%"
      height="100%"
      style="border: none; min-height: 600px;">
    </iframe>
    ```
  </Tab>
</Tabs>

<Note>
  Replace `[form-id]` with the actual form ID. The form's view page already shows the snippet with the correct ID filled in — copy directly from there.
</Note>

## Pre-Filling Values via Query Parameters

You can pre-populate any field by passing its ID as a query parameter on the form URL. This is incredibly useful for things like:

* Linking from a marketing email and pre-filling the recipient's name and email
* Tracking the source of a lead by pre-filling a custom "source" field
* Personalizing forms based on what a user clicked to get there

### Example

```
https://clarky.ai/f/[form-id]?first_name=John&emails=john@example.com
```

In this example, the **First name** and **Email** fields will be filled in with "John" and "[john@example.com](mailto:john@example.com)" before the user even sees the form.

### Standard Field IDs

Use these IDs for standard contact fields:

| Field          | Query parameter |
| -------------- | --------------- |
| First name     | `first_name`    |
| Last name      | `last_name`     |
| Email          | `emails`        |
| Phone          | `phone_numbers` |
| Company        | `company`       |
| Job title      | `job_title`     |
| Address line 1 | `address_line1` |
| Address line 2 | `address_line2` |
| City           | `city`          |
| State          | `state`         |
| Postal code    | `postal_code`   |
| Country        | `country`       |

### Custom Field IDs

Each custom field also has a unique ID (visible in the form editor). Pass that ID as a query parameter the same way:

```
https://clarky.ai/f/[form-id]?cf_referral_code=PROMO2025
```

<Tip>
  Pre-filling works with both traditional and survey forms. On surveys, pre-filled answers appear when the user reaches the matching question.
</Tip>

## Common Embedding Patterns

<AccordionGroup>
  <Accordion title="Marketing Email Personalization">
    Build the form URL dynamically in your email tool:

    ```
    https://clarky.ai/f/[form-id]?first_name={{contact.first_name}}&emails={{contact.email}}
    ```

    When recipients click through, their info is pre-filled — they only have to fill in what's missing.
  </Accordion>

  <Accordion title="Lead Source Tracking">
    Add a hidden custom field for "lead source" and pass it via query string from each landing page or campaign:

    ```
    https://clarky.ai/f/[form-id]?cf_source=homepage-hero
    ```

    Now every submission tells you exactly where the lead came from.
  </Accordion>

  <Accordion title="Embedded on a Landing Page">
    Drop the iframe snippet inside any landing page, blog post, or marketing site. The embedded form picks up the same submission flow as the public URL — contacts, pipeline stages, tags, and notifications all behave identically.
  </Accordion>

  <Accordion title="QR Codes and SMS">
    The public form URL works perfectly in QR codes for printed materials, business cards, or in-store signage. Surveys are especially good here because the full-screen experience feels native on mobile.
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Review Submissions" icon="table" href="/features/forms/submissions">
    See how your embedded form's responses are tracked
  </Card>

  <Card title="Traditional Forms" icon="rectangle-list" href="/features/forms/traditional">
    Build a standard form
  </Card>

  <Card title="Survey Forms" icon="message-question" href="/features/forms/survey">
    Build a one-question-at-a-time experience
  </Card>

  <Card title="Forms Overview" icon="circle-info" href="/features/forms/overview">
    Back to the Forms overview
  </Card>
</CardGroup>