AttRibutes
Query Param
What is this page about?

Attributes, by Finsweet, offers a free series of Solutions that provide essential features to improve your Webflow websites.

Query Param

Use URL parameter values to populate form fields in Webflow

Watch a quick tutorial

Query Param • Flash Card

Copy Script

For advanced users familiar with this solution. Includes all attributes from this page. Click on attributes and values to copy them.

Required attributes

Identify the element that will receive the query param value

Add to any Text element or input field

fs-queryparam-name
=
"
NAME
"

Optional attributes

Clean URL

Only add once to the page!
Add it to any element with "fs-queryparam-name = NAME"

fs-queryparam-removequery
Copy
true
Copy
fs-queryparam-removequery
=
"
true
"
1

Add this <script> inside the <head> tag of your page or project

This script is the universal Attribute script: you only need to include it once, even if you have multiple Attribute solutions on the page. Learn more .

<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-queryparam
></script>

Copy Script
2

Add this required attribute to the elements

Query Param Name

This is the name of the Query Param that will pass its value to any field
fs-queryparam-name
=
"
NAME
"

This attribute returns the value of the param. Set the attribute on a text element or input that you want to receive the param value.

Add this attribute:
Name
fs-queryparam-name
Copy
Value
NAME
Copy
Example:
fs-queryparam-name = "utm_platform"
Add it to those type(s) of element(s):
Text Block
Input
Text Area
Select Field
Checkbox
Radio Button
EXAMPLE

For example, our URL with query parameter is: https://finsweet.com/?utm_medium=Twitter. Placing fs-queryparam-name = "utm_medium" on a text element will update the content of the text element to "Twitter".

NOTE

If you want to add a query parameter to a hidden field in an embedded form, follow the example below. The input's value will be synchronized with the corresponding query parameter value.

<input type="hidden" fs-queryparam-name="utm_platform">

NOTE

Boolean (true/false) values will be matched to true/false query parameter values. For instance, utm_campaign="true" will set the checkbox to a checked state.

IMPORTANT

When using a Select Field, the parameter value must match the value of the selected field to be displayed.

3

Use URL paremeters

Steps for Constructing Query Parameters:

1. Begin with the base URL, excluding any query parameters:

‍

2. Append a question mark (?) to the URL to indicate the start of query parameters:

‍

3. Specify the name of the query parameter:

‍

4. Insert an equal sign (=) to pair the name with its value:

‍

5. Input the value for utm_platform:

‍

6. To add more name/value pairs, use the ampersand (&) symbol:


7. Introduce an additional name/value pair:


8. Add parameters with spaces and an exclamation mark (!) using %20 and %21, respectivelly:

‍

The encoded query parameter with: "Welcome%20Summer%20Sale%21"

translates to "Welcome Summer Sale!" in its decoded form.

‍

For a comprehensive HTML URL Encoding Reference, visit W3Schools.

4

Publish your project! Done, easy right?

Check more elements and settings below
Optional

Add more

settings

Remove Query

Remove the query params from the URL after the page has loaded.
fs-queryparam-removequery
=
"
true
"

Use this option to immediately remove the query from the browser.

Add this attribute:
Name
fs-queryparam-removequery
Copy
Value
true
Copy
Default:
fs-queryparam-removequery = "false"
Add it to any element with
fs-queryparam-name = "NAME"
EXAMPLE

https://finsweet.com/?utm_medium=Twitter&utm_campaign=SeriesA‍

will update to‍

https://finsweet.com/‍

very quickly after page load.

Useful for having a "clean" URL while taking advantage of query parameters.

WARNING

This option can only be set once per page.

WARNING

Both fs-cmsfilter and fs-queryparam use URL query parameter logic.

  • CMS Filter enables query parameter logic to display active filters on the page.
  • Query Param provides the functionality to remove query parameters from the URL.

When both solutions are in use, CMS Filter logic takes precedence, and Query Param logic is disabled. This approach is taken to prevent conflicts between the two types of query parameter logic.

Still need help?

Get Support