Language-Based Redirects When You Don’t Need a Thank You Message

Posted bypaodelatorrePosted inSin categoría

Sometimes you do not actually want an inline thank you message.

Examples:

  • A short global form embedded on marketing pages where the “real” experience is a localized landing page
  • A form inside an Experience Cloud site where post-submit routing should go back into the site, not stay inside the Pardot iframe
  • Situations where design and content teams already built beautiful thank you pages per language

In those cases, we can keep the multilingual form and tracking logic exactly as before, but instead of rendering thank you text, we immediately redirect to a language-specific URL after a successful submit.

The trick: let marketers control the destination URLs in Pardot content, while the layout template handles the language detection and redirect.

How the redirect pattern works

The flow looks like this:

  1. The visitor fills out the global form.
  2. Pardot renders its usual #pardot-thankyou container.
  3. Inside the thank you content, we drop a tiny invisible configuration block with URLs per language.
  4. The layout template script:
    • Detects the current language (same detectLanguage() helper as before)
    • Reads the URL map from the configuration block
    • Redirects the top window to the matching URL

No extra forms. No hardcoded URLs in the layout template. The only thing that changes per form is the thank you content in the Pardot UI.

Step 1: Add a language redirect map in the thank you content

In the form’s Completion Actions / Thank You Content, instead of a visible thank you paragraph, we set something like this:

<div id="pardot-thankyou">
  <div
    id="lang-redirect-map"
    data-en="https://example.com/en/thank-you"
    data-fr="https://example.com/fr/merci"
    data-es="https://example.com/es/gracias"
    data-de="https://example.com/de/danke">
  </div>
  <p>
    <!-- Optional fallback if JS is disabled -->
    Thank you for your submission.
  </p>
</div>

Key points:

  • id="lang-redirect-map" identifies the config block
  • Each data-xx attribute maps a language code to a URL
  • You can include as many languages as you support
  • If JavaScript fails, the user will still see the plain <p> message

This is 100% editable by admins and marketers inside Account Engagement. No template change required when URLs change.

Step 2: Detect language (reuse the same helper)

We reuse the same detectLanguage() helper from the previous posts. It checks:

  • Optional ?lang= query string
  • Language segment in the URL (/en, /fr, /es, etc)
  • Special handling for Chinese (/zh-cn, /zh-hans)
  • Fallback to en
const CODES = ["en","es","fr","de","it","ja","ko","zh"];
const decodeLoose = s => {
  if (!s) return s;
  let v = String(s).replace(/\+/g, " ");
  for (let i = 0; i < 2; i++) {
    try {
      const dv = decodeURIComponent(v);
      if (dv === v) break;
      v = dv;
    } catch {
      break;
    }
  }
  return v;
};
const detectLanguage = () => {
  const qs = new URLSearchParams(location.search);
  const q = (qs.get("lang") || "").toLowerCase();
  if (q && translations[q]) return q;
  const url = decodeLoose(location.href).toLowerCase();
  if (url.includes("/zh-cn/") || url.includes("/zh-hans/")) {
    return "zh";
  }
  for (const c of CODES) {
    const re = new RegExp(`(^|/)${c}(?:/|$|\\?|#)`);
    if (re.test(url)) return c;
  }
  return "en";
};

Now the redirect logic just needs a language code and a map of language → URL.

Step 3: Read the redirect map from the thank you content

Inside the layout template, right after the i18n configuration, we add:

function getThankYouRedirectMapFromThankYou() {
  const ty = document.getElementById("pardot-thankyou");
  if (!ty) return null;
  const el = ty.querySelector("#lang-redirect-map");
  if (!el) return null;
  const map = {};
  Array.from(el.attributes).forEach((attr) => {
    if (!attr.name.startsWith("data-")) return;
    const lang = attr.name.replace("data-", "").toLowerCase();
    const url = (attr.value || "").trim();
    if (!url) return;
    map[lang] = url;
  });
  return Object.keys(map).length ? map : null;
}

This converts your HTML attributes into a simple object:

{
  en: "https://example.com/en/thank-you",
  fr: "https://example.com/fr/merci",
  es: "https://example.com/es/gracias",
  de: "https://example.com/de/danke"
}

Step 4: Redirect to the correct localized page

Next, we wire up the function that actually performs the redirect once the thank you is present:

function maybeRedirectByLanguage() {
  const ty = document.getElementById("pardot-thankyou");
  if (!ty) return; // thank you not on the page yet
  const urlMap = getThankYouRedirectMapFromThankYou();
  if (!urlMap) return; // no config map, just show inline thank you
  const lang = typeof detectLanguage === "function" ? detectLanguage() : "en";
  const target = urlMap[lang] || urlMap["en"];
  if (!target) return;
  // Escape the iframe and redirect the full page
  window.top.location.href = target;
}

Two important details here:

  • We fall back to English if the current language is not in the map
  • We use window.top.location.href so that if the form is embedded in an iframe (for example in Experience Cloud or a CMS), the browser navigates the full page, not just the iframe

Step 5: Watch for the thank you to appear

Pardot replaces the form with #pardot-thankyou after a successful submit. That means we cannot run the redirect only at DOMContentLoaded. Instead, we combine an immediate check with a MutationObserver.

(function initLangRedirectWatcher() {
  // Try once in case the thank you is already present
  maybeRedirectByLanguage();
  // Watch for DOM changes and look for #pardot-thankyou
  const root = document.body || document.documentElement;
  const mo = new MutationObserver(maybeRedirectByLanguage);
  mo.observe(root, { childList: true, subtree: true });
})();

Now, as soon as Pardot injects the thank you container, our script:

  1. Reads the redirect map
  2. Detects the language
  3. Navigates to the correct URL

Where this pattern fits vs. thank you content blocks

At this point in the series you have two options for post-submit behavior.

  1. Inline multilingual thank you content
    • Uses things like [[i18n.short_thankyou]] or [[i18n.highvalue_thankyou]]
    • Great for campaigns where the thank you needs to be highly customized or show multiple content blocks per UTM
  2. Redirect-based thank you
    • Uses the #lang-redirect-map data attributes from this post
    • Ideal when UX and SEO are already handled by dedicated localized pages

You can mix and match on different forms while still reusing the same layout template, the same translations object, and the same language detection.

The result is one global form engine that:

  • Localizes labels, error messages, and privacy text
  • Respects regional consent and opt-in rules, including China and Taiwan
  • Can either show inline multilingual thank you messages or send users to a localized page right away

All without cloning a form every time a new region, campaign, or language comes along.

Leave a comment