Search

Adding Marketo Forms to your site

Integrating Marketo forms into your Framer website allows you to capture leads and manage marketing efforts effectively. Here's how to do it using a custom code component.

How to add Marketo Forms to your site

Create a form in Marketo

Visit the Marketo website and log in or create an account. Use this guide to create a tailored form.

Obtain the embed code

After creating your form, follow this guide to obtain the embed code.

Add a custom code component in Framer

In Framer, go to the Assets panel and select “Code.”
Click Create Code File and replace the default code with the script below:

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).",
    },
})

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).",
    },
})

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).",
    },
})

Enter the embed code

In your Framer project, select the Marketo form component you just added.
In the properties panel, paste the embed code from Marketo into the Embed Code field.

Top use cases for Marketo forms in Framer

Capture leads: Use a custom form to grow your email list.
Contact forms: Enable visitors to connect with you. Add placeholders for guidance.
Support requests: Streamline support by organizing requests with a simple form.
Collect feedback: Gather insights to prioritize product features or improvements.

By following these steps, you can seamlessly integrate Marketo forms into your Framer website.

If you're still experiencing issues, please reach out to us through our contact page for further help.

FAQ

Lesson FAQ

How do I add a Marketo form to my Framer site?

First, create a form in Marketo and obtain the embed code by following the official Marketo guides. In Framer, go to the Assets panel and select 'Code.' Click 'Create Code File' and replace the default code with the provided Marketo form script. Then, add the custom code component to your project, select it, and paste your Marketo embed code into the 'Embed Code' field in the properties panel.

What are the main use cases for integrating Marketo forms in Framer?

Top use cases include capturing leads to grow your email list, creating contact forms to enable visitors to connect with you, streamlining support requests with organized forms, and collecting feedback to prioritize product features or improvements.

What should I do if my Marketo form is not displaying correctly in Framer?

If your Marketo form is not displaying correctly, double-check that you have pasted the correct embed code into the 'Embed Code' field of the Marketo form component. If issues persist, you can reach out to the Framer support team through the contact page for further help.

Updated

February 26, 2026