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.
Get Query Param Value
I want to add the value of the query param to this
Text Block, Heading, Paragraph
Or
Form Input
See how it works
Add this attribute
Description
Name
fs-queryparam-name
Value
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.
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.
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.
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
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
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!
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!
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.
- 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.
Option
Remove query
I want to immediately remove the query params from the URL after the page has loaded.
See how it works
Add this attribute
Description
Name
fs-queryparam-removequery
Value
true
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.
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.
This option can only be set once per page.
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.
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.
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
Check the dev documentation
Next time implement inside Webflow
Use Finsweet Extension
