URL Querystring Data Source

Pass querystring params through to forms and text elements, automatically

Extract querystring parameters from the current URL, and apply the contents to tagged elements on your page.

Use Cases

• Use querystring data in your FORM data, to collect it for submissions ( e.g. utm_ params )

• 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!” )

Examples

$query

Shortcut. ? can be used as a shortcut in place of $query., for example ?name is equivalent to $query.name

Demonstration

SA5 Data-Binding to URL Query Paramsdata-binding.webflow.io

Custom Data-Sources & Data-Binding - WebflowCustom Data-Sources & Data-Binding

Demos

Querystring Paramsurl-tracking.webflow.io

Demonstration page

Url Query Params & Navigation - WebflowUrl Query Params & Navigation

Cloneable site

Getting Started

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Apply wfu-bind to Desired Elements

For example, use wfu-bind=?name if you want to apply the value of querystring param name to that element.

See below for details.

Usage Notes

wfu-bind = ( data source )

Required. Place on any element where you want data binded from a source.

For query

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-bind=X, WFU will replace the value attribute with the value of the querystring param X.

• This works with type=hidden INPUT elements as well, so the data can be passed through invisibly.

<input wfu-bind="?name" type="hidden" name="test2-field">

• The querystring param you use in wfu-bind is case-sensitive. ?name and ?Name are different.

• Checkbox elements will be set to the boolean truthy value.

• Select elements will be set to the matching select value.

• On any other elements with a custom attribute of wfu-bind=X, WFU will replace the inner text of the element with the value of the querystring param X.