fix(global): show CMS thank-you message after HubSpot submit instead of blank box

Author: maccomaccomaccomacco

apps/strapi/src/api/hubspot-form/content-types/hubspot-form/schema.json

@@ -25,6 +25,14 @@
     "placeholderHeight": {
       "type": "integer",
       "default": 300
+    },
+    "thankYouImage": {
+      "type": "component",
+      "component": "utilities.basic-image",
+      "repeatable": false
+    },
+    "thankYouMessage": {
+      "type": "richtext"
     }
   }
 }

apps/strapi/src/populateDynamicZone/forms/hubspot-form-ssr.ts

@@ -1,5 +1,11 @@
+import basicImagePopulate from "../utilities/basic-image"
+
 export default {
   populate: {
-    form: true,
+    form: {
+      populate: {
+        thankYouImage: basicImagePopulate,
+      },
+    },
   },
 }

apps/strapi/types/generated/contentTypes.d.ts

@@ -1157,6 +1157,8 @@ export interface ApiHubspotFormHubspotForm extends Struct.CollectionTypeSchema {
       Schema.Attribute.DefaultTo<300>
     portalId: Schema.Attribute.String & Schema.Attribute.Required
     publishedAt: Schema.Attribute.DateTime
+    thankYouImage: Schema.Attribute.Component<"utilities.basic-image", false>
+    thankYouMessage: Schema.Attribute.RichText
     updatedAt: Schema.Attribute.DateTime
     updatedBy: Schema.Attribute.Relation<"oneToOne", "admin::user"> &
       Schema.Attribute.Private

apps/ui/src/components/page-builder/components/forms/strapi-hubspot-form-ssr/HubSpotSsrForm.tsx

@@ -4,7 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { WarningIcon } from "@phosphor-icons/react/ssr"
 import { useMutation } from "@tanstack/react-query"
 import { useTranslations } from "next-intl"
-import { useMemo } from "react"
+import { useMemo, type ReactNode } from "react"
 import { useForm } from "react-hook-form"
 
 import { SectionTitle } from "@/components/elementary/section-header"
@@ -32,6 +32,12 @@ interface HubSpotSsrFormProps {
   readonly onSubmitted?: (values: Record<string, unknown>) => void
   /** Optional heading rendered above the form. Omitted when absent. */
   readonly title?: string | null
+  /**
+   * Server-rendered content shown in place of the form after a successful
+   * submission. Takes precedence over HubSpot's `inlineMessage`, which is
+   * empty for forms built in the HubSpot new editor.
+   */
+  readonly thankYouContent?: ReactNode
 }
 
 interface SubmitPayload {
@@ -41,6 +47,18 @@ interface SubmitPayload {
 
 interface SubmitResult {
   inlineMessage?: string
+  redirectUri?: string
+}
+
+/** Returns the trimmed string, or undefined when empty or not a string. */
+function nonEmpty(value: unknown): string | undefined {
+  if (typeof value !== "string") {
+    return undefined
+  }
+
+  const trimmed = value.trim()
+
+  return trimmed.length > 0 ? trimmed : undefined
 }
 
 async function submitHubSpotForm(
@@ -90,6 +108,7 @@ function HubSpotSsrFormInner({
   enableRecaptcha,
   onSubmitted,
   title,
+  thankYouContent,
 }: HubSpotSsrFormProps) {
   const t = useTranslations("forms")
 
@@ -119,10 +138,22 @@ function HubSpotSsrFormInner({
         return
       }
 
+      // HubSpot may answer with a redirect target; honour it first.
+      const redirectUri = nonEmpty(data.redirectUri)
+
+      if (redirectUri) {
+        window.location.href = redirectUri
+
+        return
+      }
+
       const postSubmitAction = schema.configuration?.postSubmitAction
 
-      if (postSubmitAction?.type === "redirect_url" && postSubmitAction.value) {
-        window.location.href = postSubmitAction.value
+      if (
+        postSubmitAction?.type === "redirect_url" &&
+        nonEmpty(postSubmitAction.value)
+      ) {
+        window.location.href = postSubmitAction.value as string
       }
     },
     onError: (err) => {
@@ -156,17 +187,35 @@ function HubSpotSsrFormInner({
   }
 
   if (submitMutation.isSuccess && !onSubmitted) {
+    // 1. CMS-managed thank-you block (preferred: works for every HubSpot form,
+    //    including new-editor forms whose inlineMessage comes back empty).
+    if (thankYouContent) {
+      return <>{thankYouContent}</>
+    }
+
+    // 2. HubSpot-provided HTML, skipping empty strings so the fallback below
+    //    always applies (`??` alone would render a blank box for "").
     const postSubmitAction = schema.configuration?.postSubmitAction
     const message =
-      submitMutation.data.inlineMessage ??
-      postSubmitAction?.value ??
-      t("submissionSuccess")
+      nonEmpty(submitMutation.data.inlineMessage) ??
+      (postSubmitAction?.type !== "redirect_url"
+        ? nonEmpty(postSubmitAction?.value)
+        : undefined)
+
+    if (message) {
+      return (
+        <div
+          className="text-foreground text-sm leading-relaxed"
+          dangerouslySetInnerHTML={{ __html: message }}
+        />
+      )
+    }
 
+    // 3. Generic, translated fallback.
     return (
-      <div
-        className="text-foreground text-sm leading-relaxed"
-        dangerouslySetInnerHTML={{ __html: message }}
-      />
+      <p className="text-foreground text-sm leading-relaxed" role="status">
+        {t("submissionSuccess")}
+      </p>
     )
   }
 

apps/ui/src/components/page-builder/components/forms/strapi-hubspot-form-ssr/HubSpotThankYou.tsx

@@ -0,0 +1,53 @@
+import type { Data } from "@repo/strapi-types"
+
+import { Markdown } from "@/components/elementary/markdown/Markdown"
+import { StrapiBasicImage } from "@/components/page-builder/components/utilities/StrapiBasicImage"
+
+type HubSpotFormEntry = Pick<
+  Data.ContentType<"api::hubspot-form.hubspot-form">,
+  "thankYouImage" | "thankYouMessage"
+>
+
+/**
+ * Returns true when the CMS entry carries a custom thank-you block.
+ * HubSpot forms built in the new editor return an empty `inlineMessage`
+ * from the legacy submissions API, so the CMS content is the reliable source.
+ */
+export function hasThankYouContent(
+  form: Partial<HubSpotFormEntry> | null | undefined
+): boolean {
+  return Boolean(form?.thankYouMessage?.trim() || form?.thankYouImage?.media)
+}
+
+/**
+ * Server-rendered thank-you block shown in place of the form after a
+ * successful submission. Mirrors the "On submit" step configured in HubSpot:
+ * an optional image (e.g. the logo) followed by a markdown message.
+ */
+export function HubSpotThankYou({
+  form,
+}: {
+  readonly form: Partial<HubSpotFormEntry> | null | undefined
+}) {
+  if (!hasThankYouContent(form)) {
+    return null
+  }
+
+  return (
+    <div className="flex flex-col items-center gap-6 py-6 text-center">
+      {form?.thankYouImage?.media ? (
+        <StrapiBasicImage
+          component={form.thankYouImage}
+          className="h-auto max-h-24 w-auto"
+          hideWhenMissing
+        />
+      ) : null}
+
+      {form?.thankYouMessage?.trim() ? (
+        <Markdown className="[&_p]:text-muted-foreground [&_h1]:text-xl [&_h1]:font-bold [&_h2]:text-xl [&_h2]:font-bold [&_p]:text-sm [&_p:last-child]:mb-0">
+          {form.thankYouMessage}
+        </Markdown>
+      ) : null}
+    </div>
+  )
+}

apps/ui/src/components/page-builder/components/forms/strapi-hubspot-form-ssr/StrapiHubSpotFormSsr.tsx

@@ -6,6 +6,7 @@ import { fetchHubSpotFormSchema } from "@/lib/hubspot"
 import { logNonBlockingError } from "@/lib/logging"
 
 import { HubSpotSsrForm } from "./HubSpotSsrForm"
+import { HubSpotThankYou, hasThankYouContent } from "./HubSpotThankYou"
 
 export async function StrapiHubSpotFormSsr({
   component,
@@ -49,6 +50,11 @@ export async function StrapiHubSpotFormSsr({
             formId={form.formId}
             enableRecaptcha={component.enableRecaptcha ?? false}
             title={component.title}
+            thankYouContent={
+              hasThankYouContent(form) ? (
+                <HubSpotThankYou form={form} />
+              ) : undefined
+            }
           />
         </div>
       </Container>

apps/ui/src/components/page-builder/components/sections/strapi-conversion/StrapiConversion.tsx

@@ -2,6 +2,10 @@ import type { Data } from "@repo/strapi-types"
 
 import { FormUnavailableAlert } from "@/components/elementary/FormUnavailableAlert"
 import { HubSpotSsrForm } from "@/components/page-builder/components/forms/strapi-hubspot-form-ssr/HubSpotSsrForm"
+import {
+  HubSpotThankYou,
+  hasThankYouContent,
+} from "@/components/page-builder/components/forms/strapi-hubspot-form-ssr/HubSpotThankYou"
 import { fetchHubSpotFormSchema } from "@/lib/hubspot"
 import { logNonBlockingError } from "@/lib/logging"
 
@@ -33,7 +37,16 @@ export async function StrapiConversion({
 
   const formSlot =
     formSchema && portalId && formId ? (
-      <HubSpotSsrForm schema={formSchema} portalId={portalId} formId={formId} />
+      <HubSpotSsrForm
+        schema={formSchema}
+        portalId={portalId}
+        formId={formId}
+        thankYouContent={
+          hasThankYouContent(form?.form) ? (
+            <HubSpotThankYou form={form?.form} />
+          ) : undefined
+        }
+      />
     ) : (
       <FormUnavailableAlert error={formError} />
     )