Connect a Framer web form

Follow these steps to integrate the DefaultConnector component into your Framer app and connect your web form to Default:

1. Create a new component in the Assets tab

2. Copy the following code into your new component file and save

import DefaultLoaderV3 from "https://framer.com/m/DefaultLoaderV3-vr4F.js@lD4ZNsYe9IHUPwOCn7M2"
import * as React from "react"
import { addPropertyControls, ControlType } from "framer"

/***
 * @framerSupportedLayoutWidth auto
 * @framerSupportedLayoutHeight auto
 */
export default function DefaultConnector({ formId, teamId }) {
    return (
        <div style={{ position: "absolute" }}>
            <DefaultLoaderV3 formId={formId} teamId={teamId} />
        </div>
    )
}

addPropertyControls(DefaultConnector, {
    formId: {
        title: "Form ID",
        type: ControlType.String,
        placeholder: "Form ID",
    },
    teamId: {
        title: "Team ID",
        type: ControlType.String,
        placeholder: "Team ID",
    },
})

3. Add the DefaultConnector to your design

Drag the now created DefaultConnector component from your Assets, and place it on your Framer page canvas

4. Configure the DefaultConnector component for your page.

• Select the component by clicking on it from the Layers panel.

• Configure the component by entering your corresponding Default Form ID and Team ID in the Component's Properties panel.