I need help to pass hidden parameters in typeform form from the url. My Url is something like this.
usa.domasd.com/?utm_source=Social%20Media&utm_medium=Linkedin&utm_campaign=Mayank%27s%20profile
I need to fetch the utm values from the url that is I need values like utm_source,utm_medium etc.It needs to be passed in the typeform hidden values. Now the typeform is actually embedded in the page. Here is what my javascript code looks like
<script>
function parseURLParams(url) {
var queryStart = url.indexOf("?") + 1,
queryEnd = url.indexOf("#") + 1 || url.length + 1,
query = url.slice(queryStart, queryEnd - 1),
pairs = query.replace(/\+/g, " ").split("&"),
parms = {}, i, n, v, nv;
if (query === url || query === "") return;
for (i = 0; i < pairs.length; i++) {
nv = pairs[i].split("=", 2);
n = decodeURIComponent(nv[0]);
v = decodeURIComponent(nv[1]);
if (!parms.hasOwnProperty(n)) parms[n] = [];
parms[n].push(nv.length === 2 ? v : null);
}
return parms;
}
var secondUrl = window.location.href; // this one is for getting the url
console.log(secondUrl);
urlParams = parseURLParams(secondUrl);
console.log(urlParams['utm_source']);
document.getElementById("utm_source").value = urlParams['utm_source'];
document.getElementsByName("utm_medium").value = urlParams['utm_medium'];
document.getElementByName('utm_campaign').value = urlParams['utm_campaign'];
document.getElementByName('utm_term').value = urlParams['utm_term'];
document.getElementByName('utm_content').value = urlParams['utm_content'];
</script>
I have also tried to pass the values by typescript documentation code but it is not working. Any suggestion on how to resolve it and pass the data. I am using notion and super so platforms to make the website. Please check the typeform code here
<a class="typeform-share button" id="TypeForm1" href="https://form.typeform.com/to/XzRHXdmJ?utm_source=%40utmsource&utm_medium=&utm_campaign=&utm_term=&utm_content=&typeform-medium=embed-snippet" data-mode="popup" style="display:inline-block;text-decoration:none;background-color:#0445AF;color:white;cursor:pointer;font-family:Helvetica,Arial,sans-serif;font-size:20px;line-height:50px;text-align:center;margin:0;height:50px;padding:0px 33px;border-radius:25px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:bold;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;"
data-size="100" target="_blank">Launch me </a>
<script>
(function() {
var qs, js, q, s, d = document,
gi = d.getElementById,
ce = d.createElement,
gt = d.getElementsByTagName,
id = "typef_orm_share",
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>
Typeform Embed SDK provides an out-of-the-box solution to pass URL query parameters from the parent window to the embedded typeform.
it's the transitiveSearchParams
parameter.
Option 1: Plain HTML
<div
id="wrapper"
data-tf-widget="REPLACE_BY_YOUR_FORM_ID"
data-tf-medium="demo-test"
data-tf-transitive-search-params="foo,bar"
data-tf-hidden="my_hiddenfield=value,another_hiddenfield=somevalue"
data-tf-opacity="50"
></div>
<script src="//embed.typeform.com/next/embed.js"></script>
Option 2: using Javascript
Add the embed SDK to your website
<script src="//embed.typeform.com/next/embed.js"></script>
Then add your typeform to the page.
var url = "https://picsoung.typeform.com/to/QXS2h1" // NOTE: Replace with your typeform URL
const embedElement = document.getElementById("wrapper")
window.tf.createWidget("moe6aa", {
container: embedElement,
transitiveSearchParams: ["foo", "bar"],
medium: "demo-test",
hidden: { foo: "foo value", bar: "bar value" },
});
Option 3: Modify the snippet given by Typeform
Add data-tf-transitive-search-params="utm_source, utm_medium”
to the code snippet given by Typeform under the Share panel.