javascriptjqueryhtmlurltypeform

Passing URL parameter in iframe issue


ser goes to http://yoursite.com/your-typeform-page?code=1 using a browser, that page needs to add a IFRAME with url as data-url=https://yoursite.typeform.com/to/U5aOQR?code=1

I want to pass url parameter as input to iFrame.

<script>
 queryString = window.location.search;
var urlParams  = new URLSearchParams(queryString);
var code = urlParams.get('code')

 </script>

  <div class="typeform-widget" data-url="https://yoursite.typeform.com/to/U5aOQR?code"+ code 
 style="width: 100%; height: 500px;"></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>

 </div>

Basically I want to pass value of code from line 4 to input as string in line 9.

Thank you for your time and consideration.


Solution

  • I think your question is a duplicate of this question.

    You can see a working example I made 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

      url += "?utm_source=" + params.get('utm_source');
      
    4. Display form in a target div

      window.typeformEmbed.makeWidget(
        embedElement,
        url, 
        {
          hideHeaders: true,
          hideFooter: true,
        }
      );```
      

    Hope it helps :)