Update Marketo integration: add inline message feature on form submission (#976)

conico974 · web-flow · commit a83d1d573b33 · 2025-09-08T11:54:27.000+02:00
* Update Marketo integration: add inline message feature on form submission

* fully replace the form with the post submit message

* fix white background on dark mode

* format

* remove cache overrides

* review

---------

Co-authored-by: Nicolas Dorseuil &lt;nicolas@gitbook.io&gt;
diff --git a/.changeset/major-jeans-beam.md b/.changeset/major-jeans-beam.md
@@ -0,0 +1,5 @@
+---
+'@gitbook/integration-marketo': minor
+---
+
+Marketo: add option to set an inline message on submit
diff --git a/integrations/marketo/src/form.tsx b/integrations/marketo/src/form.tsx
@@ -11,6 +11,7 @@ type Action = { action: '@ui.modal.close'; returnValue: { formId?: string } };
 export const marketoFormBlock = createComponent<
     {
         formId?: string | undefined;
+        message?: string | undefined;
     },
     {},
     Action,
@@ -24,6 +25,7 @@ export const marketoFormBlock = createComponent<
                 return {
                     props: {
                         formId: action.returnValue.formId || undefined,
+                        message: action.returnValue.message || undefined,
                     },
                 };
             }
@@ -35,13 +37,20 @@ export const marketoFormBlock = createComponent<
     async render(element, { environment }) {
         element.setCache({ maxAge: 0 });
         const formId = element.props.formId;
+        const message = element.props.message;
         const accountId = environment.installation?.configuration?.account;
 
         const cacheKey = getWebframeCacheKey();
         const webframeURL = new URL(`${environment.integration.urls.publicEndpoint}/webframe`);
         webframeURL.searchParams.set('formId', formId || '');
         webframeURL.searchParams.set('munchkinId', accountId || '');
         webframeURL.searchParams.set('v', cacheKey);
+        if (element.props.message) {
+            webframeURL.searchParams.set(
+                'message',
+                encodeURIComponent(element.props.message) || '',
+            );
+        }
 
         return (
             <block
@@ -54,6 +63,7 @@ export const marketoFormBlock = createComponent<
                             componentId: 'settingsModal',
                             props: {
                                 currentFormId: formId,
+                                currentMessage: message,
                             },
                         },
                     },
@@ -88,15 +98,16 @@ export const marketoFormBlock = createComponent<
  * A modal to configure the Mailchimp block.
  */
 export const settingsModal = createComponent<
-    { currentFormId?: string },
-    { formId?: string },
+    { currentFormId?: string; currentMessage?: string },
+    { formId?: string; message?: string },
     {},
     MarketoRuntimeContext
 >({
     componentId: 'settingsModal',
 
     initialState: (props) => ({
         formId: props.currentFormId || '',
+        message: props.currentMessage || '',
     }),
 
     async render(element, context) {
@@ -111,6 +122,7 @@ export const settingsModal = createComponent<
                             action: '@ui.modal.close',
                             returnValue: {
                                 formId: element.dynamicState('formId'),
+                                message: element.dynamicState('message'),
                             },
                         }}
                     />
@@ -121,6 +133,10 @@ export const settingsModal = createComponent<
                         <text>Marketo Form ID</text>
                         <textinput state="formId" />
                     </box>
+                    <box>
+                        <text>Optional Post-Submit Message</text>
+                        <textinput state="message" />
+                    </box>
                 </vstack>
             </modal>
         );
diff --git a/integrations/marketo/webframe/public/webframe.html b/integrations/marketo/webframe/public/webframe.html
@@ -1,4 +1,7 @@
 <html>
+    <head>
+        <meta name="color-scheme" content="light dark">
+    </head>
     <style>
         * {
             margin: 0;
diff --git a/integrations/marketo/webframe/src/webframe.ts b/integrations/marketo/webframe/src/webframe.ts
@@ -2,6 +2,7 @@ const gitbookWebFrame = window.parent;
 const params = new URLSearchParams(window.location.search);
 const formId = params.get('formId');
 const munchkinId = params.get('munchkinId');
+const message = params.get('message');
 
 let cachedSize: { height: number } | undefined;
 
@@ -60,12 +61,22 @@ if (!form) {
 
 form.id = elId;
 
-window.MktoForms2.loadForm('//app-sj15.marketo.com', munchkinId, formId, () => {
+window.MktoForms2.loadForm('//app-sj15.marketo.com', munchkinId, formId, (mktoForm) => {
     console.info('marketo-embed: form loaded');
     sendAction({
         action: '@webframe.ready',
     });
 
+    if (message) {
+        mktoForm.onSuccess(() => {
+            form.innerHTML =
+                '<div class="mktoFormRow"><h3 class="mktoHtmlText">' +
+                decodeURIComponent(message) +
+                '</h3></div>';
+            return false; // Prevent the default form submission behavior
+        });
+    }
+
     recalculateSize();
 
     // Listen for any DOM changes and send the new size to the parent.
diff --git a/integrations/marketo/webframe/types/MarketoForms.d.ts b/integrations/marketo/webframe/types/MarketoForms.d.ts
@@ -2,7 +2,10 @@ export {};
 
 // https://experienceleague.adobe.com/en/docs/marketo-developer/marketo/javascriptapi/forms-api-reference?lang=en
 declare global {
-    interface MarketoForm {}
+    interface MarketoForm {
+        onSubmit: (callback: () => void) => void;
+        onSuccess: (callback: () => boolean) => void;
+    }
 
     interface GlobalMarketo {
         loadForm: (

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@gitbook/integration-marketo': minor
 +---
++
 +Marketo: add option to set an inline message on submit