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

# Webflow

> How to install the Conversion Forms SDK on your Webflow website

This guide walks you through installing the Conversion Forms SDK on a Webflow site using custom code.

## Prerequisites

* A Webflow site on a paid site plan (required for custom code)
* A [Conversion form](/product-docs/forms/overview) with your form ID and field IDs ready

## Install the Forms SDK script

First, add the Forms SDK script to your Webflow site so it loads on every page.

<Steps>
  <Step title="Open your Webflow project settings">
    In the Webflow Designer, click the **Webflow** menu (top left) and select **Project Settings**.
  </Step>

  <Step title="Add the SDK script">
    Go to the **Custom Code** tab and paste the following snippet into the **Head Code** section:

    ```javascript theme={null}
    <script src="https://forms.conversion.ai/script.js"></script>
    ```
  </Step>

  <Step title="Publish your site">
    Publish your site for the script to take effect. The SDK is now available globally as `window.ConversionFormsV1`.
  </Step>
</Steps>

## Add the form submission script

You'll add a custom script that intercepts your Webflow form submission and sends the data to Conversion.

<Steps>
  <Step title="Give your form an ID">
    In the Webflow Designer, select your **Form Block** element. In the **Element Settings** panel (right side), set the **ID** to `conversion-form`.

    <Info>
      You can use any ID you like — just make sure it matches the `getElementById` call in the script below.
    </Info>
  </Step>

  <Step title="Add the submission script">
    Go to **Page Settings** for the page that contains your form. In the **Before `</body>` tag** section, paste the following:

    ```javascript theme={null}
    <script>
      const FORM_ID = "<YOUR_FORM_ID>";

      const FORM_FIELDS = {
        email: "<EMAIL_FIELD_ID>",
        name: "<NAME_FIELD_ID>",
      };

      const form = document.getElementById("conversion-form");

      form.addEventListener("submit", async (event) => {
        event.preventDefault();

        const formData = new FormData(form);

        const submitted = await window.ConversionFormsV1?.submit(
          FORM_ID,
          {
            [FORM_FIELDS.email]: formData.get("Email"),
            [FORM_FIELDS.name]: formData.get("Name"),
          }
        );

        console.log("Form submitted:", submitted);
      });
    </script>
    ```

    <Tip>
      Replace `<YOUR_FORM_ID>`, `<EMAIL_FIELD_ID>`, and `<NAME_FIELD_ID>` with the values from your Conversion form. You can find these in the form's code snippet on the Conversion dashboard.
    </Tip>

    To add more fields, add entries to the `FORM_FIELDS` object and include them in the `submit()` call. The keys in the object passed to `submit()` must be the field IDs from your Conversion form.
  </Step>

  <Step title="Match your input names">
    Make sure the `name` attribute on each form input in Webflow matches the keys you pass to `formData.get()`. You can set input names in the **Element Settings** panel.

    For example, if your email input has `name="Email"`, use `formData.get("Email")` in the script.
  </Step>

  <Step title="Publish and test">
    Publish your site and submit a test entry. Check the [Submissions](/product-docs/forms/dashboard/submissions) tab in your Conversion dashboard to confirm the data came through.
  </Step>
</Steps>

<Warning>
  Adding `event.preventDefault()` stops Webflow's default form submission behavior, including its built-in success/error states. If you need to show a success message, handle it in the script after confirming `submitted` is `true`.
</Warning>