Use hidden fields and URL parameters
Pass URL parameters (hidden fields) to your embedded Fillout forms to personalize text, track UTM campaigns, or track unique submissions for different users.
Overview
Passing data to your embedded Fillout form can be used to:
- Personalize text on your form via answer piping
- Track UTM campaigns
- Much more!
Pass dynamic URL parameters (hidden fields) to your embed
1. Register URL parameters, if you haven’t yet. More information here.
2. Publish your form and then head to the Share tab.
Select one of the Embed options and click
Get code
.3. Optionally set any settings.
Click
Copy
, and paste the code into your site4. In the Embed code, add data attributes for each URL parameter.
To pass a URL parameter to the embed, add a
data-[parameter]
attribute to the element in the snippet.For example, if you’re embedding this form on your site which is a Facebook-related campaign, and you have a URL parameter of
ref
, you can use data-ref="Facebook"
. Your embedding code will look something like this:<div data-fillout-id="cwb3NdqFmJus" data-fillout-embed-type="standard" style="width:100%;height:500px;" data-fillout-inherit-parameters data-fillout-dynamic-resize data-ref="Facebook"></div><script src="https://server.fillout.com/embed/v1/"></script>
Note: Embeds will automatically inherit URL parameters from the parent page that they’re on, so if your main site already has these, you simply need to register the parameter in your form to use it.