How to add an attribute:

close icon
Hey! Give us some feedback here.
Functional

Query Param

Use query parameter values to populate form inputs and text elements.

1,980,330

loads per month

Query Param
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
Step #2

Implement in Webflow

Apply attributes to elements on the page

Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.

navigator arrow
Get Query Param Value
I want to add the value of the query param to this
div block icon

Text Block, Heading, Paragraph

Or
field element

Form Input

See how it works
see webflow attributes
Add this attribute
Description
Name
fs-queryparam-name
copy icon
Value
name
copy icon
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.

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

Placing fs-queryparam-name = "utm_medium" on a form input will update the value of the input to "Twitter". Use on native Webflow Input or hidden input inside an Embed Block.
navigator arrow
New to URL query params? Guide to working with query params
See how it works
see webflow attributes
The structure of query params in steps

1. Start with the base url, without query params
- https://finsweet.com

2. Add a question mark (?) to url
- https://finsweet.com?

3. Add the name of the query param
- https://finsweet.com?is-cool

4. Add an equal sign (=) to create a name/value pair
- https://finsweet.com?is-cool=

5. Add the value of is-cool
- https://finsweet.com?is-cool=true

This is a complete URL query param!

Assign fs-queryparam-name="is-cool" to a Text Element or form input to use the value "true" in the project.

Add additional name/value pairs using the ampersand (&) symbol

6. Add a ampersand (&) to the end of the first name/value pair
- https://finsweet.com?is-cool=true&

7. Add an additional name/value pair
- https://finsweet.com?is-cool=true&platform=webflow

8. Repeat this as many times as needed
- https://finsweet.com?is-cool=true&platform=webflow&brandname=finsweet&is-attributes-creator=definitely&likes-wix=false


navigator arrow
Guide to adding reserved characters (like spaces) to URL query params
See how it works
see webflow attributes
Some characters are not allowed to go in URLs. To add these special characters to URLs, we need to follow URL Encoding rules.

Reserved characters:
! * ' ( ) ; : @ & = + $ , / ? % # [ ]

HTML URL Encoding Reference: https://www.w3schools.com/tags/ref_urlencode.asp

In the live example below, we show spaces and one exclamation point (!) in the query param value.

%20 = space
%21 = !

&utm_campaign=Welcome%20Summer%20Sale%21

This outputs Welcome Summer Sale!


navigator arrow
Guide to working with Webflow form elements
See how it works
see webflow attributes
Hidden input
- Set the attribute in HTML in an Embed block.
- For example, <input type="hidden" fs-queryparam-name="utm_platform">
- We will match the value with the param value.

Text input / Text area

- Set the attribute on the input/textarea.
- We will match the input value with the param value.

Select
- Set the attribute on the select element.
- We will match the selected value the param value.

Radio input
- Set the attribute on the label or input element.
- We will match selected radio input with the query param value.

Checkbox input
- Set the attribute on the label or input element.
- We will match true/false values with the true/false query param value.
- For example, utm_campaign="true" will "check" the checkbox.


navigator arrow
Option
Remove query
I want to immediately remove the query params from the URL after the page has loaded.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-queryparam-removequery
copy icon
Value
true
copy icon
Use this option to immediately remove the query from the browser.

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.
Where?
Add to an element with fs-queryparam-name = "name".

This option can only be set once per page.
navigator arrow
Review if using Query Param + CMS Filter on the same page
See how it works
see webflow attributes
Both fs-cmsfilter and fs-queryparam have URL query param logic.

CMS Filter allows us to turn on query param logic to show active filters on the page. Query Param allows us to remove query params from the URL.

If both solutions use the query param logic, CMS Filter logic will be enabled and Query Param logic will be disabled.

We do this to avoid a query param logic conflicts.

Working examples

See this solution working live in this Webflow project.

Example
Add query param value in plain text and in a text input
Copy and paste this example directly on Webflow
copy icon
Copy this example
Adding "Welcome Summer Sale!" to plain text through utm_campaign:
utm_campaign
Adding "twitter" to text input through utm_platform:
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Frequently Asked Questions

Everything you need to know about this attributes solution.

No FAQ items found yet. Join Finsweet Community on Slack if you have any question related to this solution.

Developer documentation

external link icon

Next time implement inside Webflow

external link icon
Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.