Pass url parameters to a embedded forms/iframes on

Question

I want to pass url parameters (hidden fields) to iframe/embedded forms on our Hubspot landing pages.

The url parameters I want to pass to the Typeform are utm_source, email and referralcode.

An example of a page I'm currently working on:

<div class="typeform-widget"
     data-url="https://xxxxxx.typeform.com/to/xxxx"
     data-transparency="50"
     data-hide-headers=true
     data-hide-footer=true
     style="width: 100%; height: 600px;" > </div>

<script> (function() {
    var qs,js,q,s,d=document,
        gi=d.getElementById,
        ce=d.createElement,
        gt=d.getElementsByTagName,
        id="typef_orm",
        b="https://embed.typeform.com/";

    if (!gi.call(d,id)) {
        js=ce.call(d,"script");
        js.id=id;
        js.src=b+"embed.js";
        q=gt.call(d,"script")[0];
        q.parentNode.insertBefore(js,q)
    }
  })()
</script>

What code do I need to add to pass the url parameters to my embedded form? Thanks

Answer 1

This is possible using Typeform Embed API

See a working example on Glitch

You can edit here.

Steps to reproduce:

1. Include Typeform Embed SDK in your HTML

2. Extract parameters from URL

   let params = new URLSearchParams(location.search);

3. Reconstruct your form URL

   var url = "https://YOUR_SUBDOMAIN.typeform.com/to/YOUR_TYPEFORM_ID" url += "?utm_source=" + params.get('utm_source');

4. Display form in a target div

   const embedElement = document.querySelector('.target-dom-node') window.typeformEmbed.makeWidget( embedElement, url, { hideHeaders: true, hideFooter: true, } )

Hope it helps :)