Skip to main content
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 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.
1

Open your Webflow project settings

In the Webflow Designer, click the Webflow menu (top left) and select Project Settings.
2

Add the SDK script

Go to the Custom Code tab and paste the following snippet into the Head Code section:
<script src="https://forms.conversion.ai/script.js"></script>
3

Publish your site

Publish your site for the script to take effect. The SDK is now available globally as window.ConversionFormsV1.

​
Add the form submission script

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

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.
You can use any ID you like — just make sure it matches the getElementById call in the script below.
2

Add the submission script

Go to Page Settings for the page that contains your form. In the Before </body> tag section, paste the following:
<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>
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.
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.
3

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.
4

Publish and test

Publish your site and submit a test entry. Check the Submissions tab in your Conversion dashboard to confirm the data came through.
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.