Skip to main content
This guide walks you through installing the Conversion Forms SDK on a Framer site using a code override.

​
Prerequisites

  • A published Framer site
  • A Conversion form with your form ID and field IDs ready

​
Install the Forms SDK script

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

Open your Framer project settings

In the Framer editor, navigate to Site Settings > General > Custom Code.
2

Add the SDK script

Paste the following snippet into the End of <head> tag 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.

​
Create a code override

Code overrides in Framer let you attach custom logic to any component. You’ll create an override that intercepts form submissions and sends the data to Conversion.
You will need a separate override file per form. Therefore, each override file should be named with an identifier to it’s associated Conversion form
1

Create a new code override file

In the Framer editor, open the Assets panel and click + under Code Overrides to create a new file.
2

Add the override code

Replace the file contents with the following:
import type { ComponentType } from "react"
import { useRef, useEffect, forwardRef, useImperativeHandle } from "react"

// Add Conversion form field IDs: Conversion > Forms > Settings > Fields
const FORM_FIELDS = {
    email: "<EMAIL_FIELD_ID>",
    name: "<NAME_FIELD_ID>",
}

// Add Conversion form ID: Conversion > Forms > Settings > General > Submit the form programmatically > 'const submitted' block > Line 2
const CONVERSION_FORM_ID = "<YOUR_FORM_ID>"

export function withConversionForm(Component): ComponentType {
    return forwardRef((props, ref) => {
        const formRef = useRef(null)

        useImperativeHandle(ref, () => formRef.current)

        useEffect(() => {
            const container = formRef.current
            if (!container) return

            const form = container.querySelector("form")
            if (!form) return

            const handler = async () => {
                const formData = new FormData(form)
                const data = Object.fromEntries(formData.entries())

                try {
                    const submitted = await (
                        window as any
                    ).ConversionFormsV1?.submit(CONVERSION_FORM_ID, {
                      // Update data keys: Framer > Form element > Field > Name
                        [FORM_FIELDS.email]: data["Email"] || "",
                        [FORM_FIELDS.name]: data["Name"] || "",
                    })
                    console.log("Form submitted:", submitted)
                } catch (err) {
                    console.error("Conversion Forms error:", err)
                }
            }

            form.addEventListener("submit", handler)
            return () => form.removeEventListener("submit", handler)
        }, [])

        return (
            <div ref={formRef}>
                <Component {...props} />
            </div>
        )
    })
}
Replace <YOUR_FORM_ID> and field IDs with the values from your Conversion form. You can find these in the form’s Settings page, under Submit the form programmatically.
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

Apply the override to your form

Select the form component on your Framer canvas, then in the right panel under Code Overrides, choose the withConversionForm override.
Make sure to add the code override file to the parent form element. It does not need to be attached to each individual form field
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.
The name attribute on each form input in Framer must match the keys you pass to formData.get(). For example, if your email input has name="Email", use formData.get("Email").