Pass referrer through to iframe?

One important data point for embedded forms is where the user came from (especially for contact forms, demo requests, etc.) - but it doesn’t look like Paperform allows that data to be captured in any way.

Since the embed script is setting the iframe dynamically, it would be possible to pass through the referrer as a URL param that we could catch on our Paperform side via a named pre-fill key. Example code here: https://stackoverflow.com/a/23766609

Would you be open to that, or am I missing a better way to accomplish this?

Here’s how I set it up for now (must first add a Hidden field with prefill ID of “referrer”):

<div data-paperform-id="fill-me-in" data-prefill-inherit="1" id="c-paperform"></div>
<script>
var el = document.querySelector('#c-paperform');
var ref = encodeURI(document.referrer);
if (ref == "") { ref = "Unknown"; }
el.setAttribute('data-prefill', 'referrer=' + ref);

(function() {var script = document.createElement('script'); script.src = "https://paperform.co/__embed"; document.body.appendChild(script); })()
</script>

Hey there.

Yeah, you have the right idea of it. By setting data-prefill-inherit="1" on the embed element, you can inherit from the parent page’s query string. It is the idiomatic way to pull a value into an embedded form.

Alternatively, you can effectively dynamically pre-fill statically. That is, you can use the static pre-filling option

data-prefill="key=value"

but set it using JavaScript to pre-fill values programmatically and in a way that isn’t as visible to the user. (The user can still inspect the source code and see what’s happening, but it at least won’t be in the URL.)

Example

Suppose I have a form with slug example. A plain embed would look like

<div data-paperform-id="example"></div><script>...</script>

Imagine that I want to add the URL of the current page to the form somehow, but I don’t want the user to see that I’m doing that.

To do that, I’d want to pre-fill a question of type hidden. I also wouldn’t want to place the URL directly into the query string of the website I’m on because that might look messy.

That means that we’d need to feed that value into data-prefill on the embed element directly. But, we need to do it dynamically since I might not want to hardcode the URL in every time, and especially not if I want to easily copy and paste this across many of the pages in my website.

Luckily, we can use JavaScript on the parent page to pull this for us.

It might look something like

const url = location.href;

const form = document.querySelector('[data-paperform-id]');
form.setAttribute('data-prefill', `hiddenUrl=${url}`);

This is just one example. You can certainly do something different or perhaps even more complicated depending on your use case.

Hope this helps!