Query Param

Use query parameter values to populate form inputs and text elements

Overview

The Query Param attribute allows you to automatically populate form fields and text elements with values from URL query parameters. This is useful for pre-filling forms, personalizing content, or passing data between pages.

Attribute Syntax

Settings

fs-queryparam-name · string · required

Defines the name of the query parameter to read from the URL. The element will be populated with the value of this parameter.

fs-queryparam-removequery · boolean

Defines whether the query parameters should be removed from the URL after the page loads. Set to true to clean up the URL.

Usage Examples

Text Element

<!-- Display query param in text -->
<!-- URL: /page?name=John -->
<p>Hello, <span fs-queryparam-name="name">Guest</span>!</p>
<!-- Result: Hello, John! -->

Common Use Cases

Pre-filled Contact Forms

Allow users to click email links that pre-fill contact forms with their information:

<a href="/contact?name=John%20Doe&email=[e-mail]&subject=Partnership">Contact Us</a>

UTM Parameter Tracking

Capture marketing campaign data in hidden form fields:

<input type="hidden" name="utm_source" fs-queryparam-name="utm_source">
<input type="hidden" name="utm_campaign" fs-queryparam-name="utm_campaign">
<input type="hidden" name="utm_medium" fs-queryparam-name="utm_medium">

Personalized Landing Pages

Display personalized content based on URL parameters:

<h1>Welcome back, <span fs-queryparam-name="name">valued customer</span>!</h1>

Multi-Step Forms

Pass data between form steps via URL parameters:

<!-- Step 2 of form -->
<input type="text" name="email" fs-queryparam-name="email" readonly>

Referral Tracking

Capture referral codes from URL parameters:

<input type="hidden" name="referralCode" fs-queryparam-name="ref">

Product Configuration

Pre-select product options from URL:

<!-- URL: /product?color=blue&size=large -->
<select name="color" fs-queryparam-name="color">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
</select>

How It Works

1. On page load, the attribute reads URL query parameters
2. Elements with fs-queryparam-name are found
3. For each element, the corresponding parameter value is retrieved
4. The element is populated based on its type:
   • Text elements: Updates textContent
   • Input fields: Sets the value
   • Checkboxes: Sets checked to true
   • Radio buttons: Checks the radio with matching value
   • Select dropdowns: Selects the option with matching value
   • Textareas: Sets the value

URL Encoding

Query parameter values should be URL-encoded:

Space: %20
@: %40
&: %26
=: %3D

Example:

/contact?email=user%40example.com&name=John%20Doe

Use JavaScript’s encodeURIComponent() function to properly encode query parameter values when generating URLs programmatically.

When using fs-queryparam-removequery="true", the query parameters are removed from the browser’s URL after values are populated, creating a cleaner URL without losing the captured data.

Integration with Other Attributes

Query Param works well with:

• Display Values: Show query param values elsewhere on the page
• Form Submit: Submit forms with query param data
• CMS Filter: Filter CMS content based on query parameters