Links

URL Query Params ❺

Pass querystring params through to forms and text elements, automatically

Overview & Use Cases

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

Demos

Querystring Params
Demonstration page

Usage Notes

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">
  • 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.

Getting Started ( NOCODE )

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 above for details.