DEMO - URL Query Params Passthrough
NO-CODE. Designed for Webflow.
Extract querystring parameters from your URL, and apply the contents to tagged elements on your page.
- Use querystring data in your FORM data, to collect it for submissions ( e.g.
- Pass querystring data through to other links on the page, so it will get carried through
- Use querystring data in visible fields, e.g. to personalize a page from an Email newsletter link click ( “Hey Mary!” )
Configure everything using simple custom attributes.
This tool will carry any URL querystring params into your webpage, and apply them as follows;
On any INPUT elements with a custom attribute of
wfu-query-param=X, WFU will replace the
valueattribute with the value of the querystring param
X. This works with
type=hiddenINPUT elements as well, so the data can be passed through invisibly.
On any other elements with a custom attribute of
wfu-query-param=X, WFU will replace the inner text of the element with the value of the querystring param
For all links on your page, WFU will modify the link’s
href, depending on what you request.
wfu-query-param=*, or an absence of the
wfu-query-paramattribute, will merge all params from the page’s current URL into the link href.
wfu-query-param=foo,bar,bat, will only merge the querystring params named
batfrom the page’s current URL into the link href.
wfu-query-param=-(a hypen) will suppress processing of this link, and no changes will be made.
Getting Started ( NOCODE )
STEP 1 - Add the Library
There are currently no configuration options for this library, so we’ll use a no-code integration approach.
Add this script to the
</body> custom code area, either site-wide or on the specific pages you want the script to affect.
<script type="module" src="https://email@example.com/src/nocode/webflow-url.js"></script>
STEP 2 - Apply
wfu-query-param to Desired Elements
For example, use
wfu-query-param=X if you want to apply the value of param
X to that element.
Applied to form INPUT elements, it will display the value in side the textbox.
To create a hidden form INPUT element, create it in your FORM as an HTML Embed element,
containing the HTML
<input> element code, e.g.;
<input wfu-query-param="test2" type="hidden" name="test2-field">
Applied to any other elements, the inner text of the element will be replaced with the value of the param.
<a> links on the page will automatically be affected.
You do not need the custom attribute on them, unless you’re wanting to specify which params are merged in.
The processing of a specific link can be suppressed by applying the
wfu-query-param custom attribute with a hyphen (
-) as the value.
Note that this will be expanded on eventually with configuration options, and the ability to merge querystrings.