How to connect Marketo Forms to Framer?

Integrating Marketo forms into your Framer website can help you capture leads and manage your marketing efforts effectively.

Note: Setting up a Marketo form requires custom code, and Framer doesn’t offer customer support for third-party code.

Follow these steps to add a Marketo form to your Framer site using a custom code component:

Step 1: Create a form in Marketo

Visit the Marketo website and sign up or log in to your account. Once logged in, follow this guide to create a form tailored to your needs.

Step 2: Obtain the embed code from Marketo

After creating your form, you'll need the embed code to add it to your Framer site. Follow the steps in this guide to obtain the embed code.

Step 3: Copy the Code Component

To create a new code component in your project, go to the assets panel and select “Code”. Then, click “Create Code File”. Replace the default code in the component with the following code:

import { addPropertyControls, ControlType, RenderTarget } from "framer"
import { useState, useEffect } from "react"
import { SettingsMessage } from "https://framer.com/m/Utils-QTIc.js@PVRWqcAS5FromVQ03eYl"

/**
 * @framerDisableUnlink
 *
 * @framerSupportedLayoutWidth any-prefer-fixed
 * @framerIntrinsicWidth 600
 * @framerSupportedLayoutHeight any-prefer-fixed
 * @framerIntrinsicHeight 300
 */
export default function MarketoForm(props) {
    const { embed, style } = props
    const [isEmbedValid, setIsEmbedValid] = useState(false)
    const [formId, setFormId] = useState(null)
    const [script, setScript] = useState(null)
    const [isLoading, setIsLoading] = useState(true)

    if (!embed || embed.length === 0) {
        return (
            <SettingsMessage
                title="Marketo Embed Component"
                description="Enter the Marketo Embed Code here"
                containerStyle={style}
            />
        )
    }

    useEffect(() => {
        setIsLoading(true)
        const embedRegex =
            /MktoForms2\.loadForm\("(.+?)", "(.+?)", (\d+)(?:, .+?)?\);/
        const embedMatch = embed.match(embedRegex)
        const [, link, value, id] = embedMatch || []

        setFormId(`mktoForm_${id}`)

        const embedFirstLine = `<script src="${link}/js/forms2/js/forms2.min.js"></script>`
        const isValidEmbed =
            embed.startsWith(embedFirstLine) && value && id && link
        setIsEmbedValid(isValidEmbed)

        if (isValidEmbed) {
            const newScript = document.createElement("script")
            newScript.src = `${link}/js/forms2/js/forms2.min.js`
            newScript.async = true

            const handleError = (error, message) => {
                setIsEmbedValid(false)
                setIsLoading(false)
                console.error(message, error)
            }

            const handleScriptLoad = () => {
                try {
                    if (window.MktoForms2) {
                        window.MktoForms2.loadForm(link, value, id)
                    }
                } catch (error) {
                    handleError(error, "Error loading form:")
                }
            }

            newScript.onload = handleScriptLoad
            document.body.appendChild(newScript)
            setScript(newScript)

            try {
                document.body.appendChild(newScript)
                setScript(newScript)
            } catch (error) {
                handleError(error, "Error appending script:")
            }
        }
        setIsLoading(false)

        return () => {
            if (script) {
                try {
                    document.body.removeChild(script)
                } catch (error) {
                    setIsEmbedValid(false)
                    console.error("Error removing script:", error)
                }
            }
        }
    }, [embed])

    return (
        <>
            {isLoading ? (
                <></>
            ) : isEmbedValid ? (
                <>
                    <style>{customCSS}</style>
                    <form id={formId} />
                </>
            ) : (
                <SettingsMessage
                    title="Your embed code is incorrect!"
                    description="Update the Marketo embed form in the component property."
                    containerStyle={style}
                    icon={"🚨"}
                />
            )}
        </>
    )
}

const customCSS = `
    .mktoLabel {
        width: auto !important;
        float: none !important;
        display: block !important;
    }
`

MarketoForm.displayName = "Marketo Form"

addPropertyControls(MarketoForm, {
    embed: {
        title: "Embed Code",
        type: ControlType.String,
        displayTextArea: true,
        description:
            "[Where to find my Marketo embed form](https://experienceleague.adobe.com/en/docs/marketo/using/product-docs/demand-generation/forms/form-actions/embed-a-form-on-your-website).",
    },
})

Step 4: Enter the embed code in Framer

In your Framer project, select the component you just pasted. In the properties panel on the right, paste the embed code you copied from Marketo into the Embed Code field.

That's it! You have successfully integrated the Marketo form with your Framer website.

Top use cases for Marketo forms in Framer

  • Capture Leads: Add a custom form to your Framer website to capture leads and grow your email list.

  • Contact Us Form: Create a contact form to connect with clients and leads. Include placeholder text to guide users on the required information.

  • Support Requests: Manage support requests efficiently by organizing tickets in one place with a simple form.

  • Collect Feedback: Gather user feedback to prioritize new features or functionality in your product.