-1

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

picsoung
  • 6,314
  • 1
  • 18
  • 35
Hajo de Bel
  • 11
  • 1
  • 1
  • You could update the `data-url` attribute via javascript (element.setAttribute) to include them as GET parameters? However, there is no valid HTML form in your example, so I don't know if this will answer your question. – BRO_THOM Mar 28 '18 at 12:22

1 Answers1

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 :)

picsoung
  • 6,314
  • 1
  • 18
  • 35