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

# Embed forms in Webless

> Send your existing form embed code to Webless and choose the right integration method.

<Check>
  JavaScript embed scripts are the recommended option. Use an iFrame only when a
  JavaScript embed is not available.
</Check>

## Choose an embed method

<Tabs>
  <Tab title="JavaScript embed">
    This is the default option for HubSpot, Marketo, Pardot, Typeform, and many
    other form platforms.

    * The form renders natively on the page
    * Analytics and CRM tracking usually work as expected
    * You usually only need to copy the platform's generated embed snippet
  </Tab>

  <Tab title="iFrame fallback">
    Use an iFrame when your platform does not offer a JavaScript embed or when
    the JavaScript option is blocked.

    ```html theme={null}
    <iframe
      src="https://your-form-platform.com/your-form-id"
      width="100%"
      height="600"
      frameborder="0"
    ></iframe>
    ```

    UTM parameters and cookie-based attribution often work less reliably in an
    iFrame.
  </Tab>

  <Tab title="API integration">
    API integrations provide the cleanest data model and the most control, but
    they require implementation work on both sides. Treat this as a custom
    project with Webless.
  </Tab>
</Tabs>

## Common platforms

<AccordionGroup>
  <Accordion title="HubSpot" icon="circle-plus">
    **Where to find it**

    * Go to **Marketing** -> **Forms**
    * Open the form
    * Click **Actions** -> **Share**
    * Copy the full snippet from **Embed code**

    **Example**

    ```html theme={null}
    <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
    <script>
      hbspt.forms.create({
        portalId: "YOUR_PORTAL_ID",
        formId: "YOUR_FORM_ID",
        region: "na1"
      });
    </script>
    ```
  </Accordion>

  <Accordion title="Marketo" icon="circle-plus">
    **Where to find it**

    * Go to **Design Studio** -> **Forms**
    * Open the form
    * Click **Form Actions** -> **Embed Code**

    **Example**

    ```html theme={null}
    <script src="//app-xxx.marketo.com/js/forms2/js/forms2.min.js"></script>
    <script>
      MktoForms2.loadForm("//app-xxx.marketo.com", "000-AAA-000", 1234);
    </script>
    ```
  </Accordion>

  <Accordion title="Pardot (Salesforce Account Engagement)" icon="circle-plus">
    **Where to find it**

    * Go to **Content** -> **Forms**
    * Open the form
    * Click **View Embed Code**

    **Example**

    ```html theme={null}
    <script type="text/javascript">
      piAId = "000000";
      piCId = "00000";
      piHostname = "pi.pardot.com";
    </script>
    <script type="text/javascript" src="https://pi.pardot.com/pd.js"></script>
    ```
  </Accordion>

  <Accordion title="Gravity Forms" icon="circle-plus">
    **Where to find it**

    * Open your WordPress admin
    * Go to **Forms**
    * Use the form ID shown next to the form name

    **Example**

    ```text theme={null}
    [gravityforms id="1" title="false" description="false"]
    ```
  </Accordion>

  <Accordion title="Typeform" icon="circle-plus">
    **Where to find it**

    * Open the form
    * Click **Share** -> **Embed in a web page**

    **Example**

    ```html theme={null}
    <div data-tf-live="YOUR_FORM_ID"></div>
    <script src="//embed.typeform.com/next/embed.js"></script>
    ```
  </Accordion>

  <Accordion title="Formstack" icon="circle-plus">
    **Example**

    ```html theme={null}
    <script src="https://www.formstack.com/forms/js.php?1234567-abcd1234ef"></script>
    ```
  </Accordion>

  <Accordion title="JotForm" icon="circle-plus">
    **JavaScript**

    ```html theme={null}
    <script src="https://form.jotform.com/jsform/YOUR_FORM_ID"></script>
    ```

    **iFrame**

    ```html theme={null}
    <iframe
      id="JotFormIFrame-YOUR_FORM_ID"
      src="https://form.jotform.com/YOUR_FORM_ID"
      width="100%"
      height="600"
    ></iframe>
    ```
  </Accordion>

  <Accordion title="Microsoft Forms and Google Forms" icon="circle-plus">
    **Microsoft Forms**

    ```html theme={null}
    <iframe
      width="640"
      height="480"
      src="https://forms.office.com/Pages/ResponsePage.aspx?id=YOUR_FORM_ID"
      frameborder="0"
      allowfullscreen
    ></iframe>
    ```

    **Google Forms**

    ```html theme={null}
    <iframe
      src="https://docs.google.com/forms/d/e/YOUR_FORM_ID/viewform?embedded=true"
      width="640"
      height="800"
      frameborder="0"
    >
      Loading...
    </iframe>
    ```
  </Accordion>

  <Accordion title="Oracle Eloqua" icon="circle-plus">
    **Where to find it**

    * Go to **Assets** -> **Forms**
    * Open the form
    * Click **Actions** -> **View Form HTML**

    **Example**

    ```html theme={null}
    <script src="https://img.en25.com/i/elqCfg.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      var elqSiteID = "YOUR_SITE_ID";
    </script>
    <form
      method="post"
      action="https://s.la1.elq.com/e/f2?elqFormName=YOUR_FORM_NAME&elqSiteId=YOUR_SITE_ID"
    >
      <!-- form fields -->
    </form>
    ```
  </Accordion>

  <Accordion title="Custom or in-house forms" icon="circle-plus">
    If you use a custom form builder, send Webless one of the following:

    * A JavaScript embed snippet
    * An iFrame embed snippet
    * The hosted form URL
  </Accordion>
</AccordionGroup>

## What to send Webless

* The complete embed script or iFrame code
* The form platform name
* The form name
* Any campaign or tracking IDs you want associated with submissions

## FAQ

<AccordionGroup>
  <Accordion title="I only have a form URL" icon="link">
    That is fine. Send the form URL to Webless and ask whether it can be
    embedded through an iFrame.
  </Accordion>

  <Accordion title="My code looks different from the examples" icon="help-circle">
    Form platforms change their embed output over time. Copy the full code your
    platform provides and send that version directly.
  </Accordion>

  <Accordion title="The script URL starts with // instead of https://" icon="slash">
    That is normal. `//` is a protocol-relative URL. Do not replace it with a
    single slash.
  </Accordion>
</AccordionGroup>