How to use dynamic content & query parameters in Onepage?

What are Query Parameters?

Query parameters (the part of a URL after ?) are a powerful way to pass information to your Onepage. They’re especially useful for multi-step forms, tracking campaign data, and making your marketing more precise.

This guide will help you get started with query parameters today to achieve better results tomorrow.

Why use Query Parameters?

Campaign Tracking. Marketers commonly use parameters like
?utm_source=facebook to identify which campaigns generate the most leads.
Personalization. Adding ?name=Max to a link can automatically pre-fill a “Name” field with “Max,” enhancing the user experience.

How to modify your Links

A typical query parameter structure looks like this:

https://example.com/form-page?param1=value1&param2=value2

? indicates the start of query parameters.
param1 and param2 are parameter keys (e.g., coupon, utm_source, ref).
value1 and value2 are parameter values (e.g., NY2026, google, maxmustermann)

Let’s have a closer look at the possibilities for using query parameters in Onepage

Case 1: Auto-fill form fields

Within Onepage, you’ll reference these parameters in form fields using:

{{query.param1}}

For example, if your link is https://example.com/form?coupon=NY2025, use {{query.coupon}} in the “Default value” to auto-fill that field with NY2025.

Case 2: Auto-fill in select fields - finding & using the select field ID

Using query parameters with input fields is straightforward, but what about Select fields like cards, chips, or dropdowns?

Click the three-dot menu next to “Default value” in your Select field settings.
Copy the generated ID (e.g., 294c124c-aa43-46df-adba-...).
In your URL, set a parameter using that ID. For example:
```
?selectedOption=294c124c-aa43-46df-adba-...
```
Now, after copying an ID, replace Default value content to the desired parameter name, like selectedOption to get something like this :

Case 3: Displaying any Input’s value

You could use this function for a variety of use cases, for example:

Interactive quizzes: Display answers immediately to confirm user input ("You selected: Barcelona").
Booking confirmations: Dynamically show the entered booking date ("You chose: April 12, 2025") to reassure users.

How it works:

Add a form field and assign it an internal name (e.g., userName).
Insert a text element to display the entered value dynamically, using syntax: {{ form.field.userName }}

For “Select” fields:

Add a “select” field and assign it an internal name (e.g., mySelect).
Insert a text element to display the entered value dynamically, using syntax: {{form.field.mySelect.values }}

For the “Name” field:

Set internal name (e.g. INTERNAL_NAME).
Insert a text element to display the entered value dynamically, using syntaxes:

Show first name: {{ form.field.INTERNAL_NAME.firstName }}
Show middle name: {{ form.field.INTERNAL_NAME.middleName }}
Show last name: {{ form.field.INTERNAL_NAME.lastName }}

Let us compare the builder view:

And the live view:

Visibility options

If you wish to create a Fallback (default value), please follow this instruction:

Additionally set value for “default” {{ form.field.userName|default('Default value') }}
|default('Any string') is the format, it will be shown in case no parameter was provided.

If you wish to hide the text block until the value is selected:

Insert the following code in your text element:
{% if form.field.mySelect.values %}Selected: {{ form.field.mySelect.values }}{% endif %}
Replace form.field.mySelect.values with syntax of the source element. Refer to Case 3 to see which syntax can be used for a specific element-type.
Replace Selected: with your text.

📌 Please note: you can also combine this with normal text inputs. F.e:

{% if form.field.bedrooms and form.field.bathrooms and form.field.area %}Based on a {{ form.field.propertyType.values }} with {{form.field.bedrooms }} bedrooms, {{ form.field.bathrooms }} bathrooms, and {{ form.field.area }} m² area.

Case 4: Displaying any input in next steps or finish steps

The process is identical, to the previous step. Simply use the same query parameters further on without changes.

Case 5. Use JavaScript to manipulate queries

You can use this option to do various transformations by writing custom JS and then referring to this function in the builder.

How it works:

Write a function, adding it to <Body> site code.
Address it on your page and apply to any of the inputs.
The syntax is — {{ transformMyText(form.field.myInput) }}

If performing actions on an external server is needed :

In this example, we use custom JavaScript code to call a remote server and local form variables to store the returned data.

1. Create the form elements.

Write custom code to fetch data from the remote server.

Click to view the code

<script>
    function fetchTotalPrice(form) {
        form.var.asyncData = 'loading...'
        fetch(`https://broad-smoke-df46.onepage-io.workers.dev/?price=${form.field.myPrice}&count=${form.field.myCount}`)
            .then(res => res.text())
            .then(data => form.var.asyncData = data)
    }
</script>

2. form.var.asyncData = data — stores the data received from the server in a local variable.

3. Call the custom code {{ fetchTotalPrice(form) }}

4. Display the variable Total price: {{ form.var.asyncData }}

📌 Please note: In this example, the server creation step is not included, as it is specific to each customer.

If you require an asynchronous approach:

📌 Please note: This is a variation of a previous example, but with asynchronous data fetching in a separate step, followed by automatic navigation to the next step using code.

To manually move to the next step, use: form.state.nextFrame().

In this example, we wait for the data from the server, and once it's received, we automatically proceed to the next step.

Click to view the code

<script>
    function fetchTotalPrice(form) {
        fetch(`https://broad-smoke-df46.onepage-io.workers.dev/?count=${ form.field.myCount }&price=${ form.field.myPrice }`)
            .then(res => res.text())
            .then(data => form.var.asyncData = data)
            .then(() => form.state.nextFrame())
        
    }
</script>

If you need to save the data from the server:

Please see our video instruction.

In these examples, we use CloudFlare workers as a server.
Link to the server: https://demo-server.onepage-io.workers.dev/
This server just multiplies values: https://demo-server.onepage-io.workers.dev/?price=200&count=5

Click to view the code

const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET,HEAD,POST,OPTIONS",
  "Access-Control-Max-Age": "86400",
}

const wait = (time) => new Promise(r => setTimeout(r, time))

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url)
    const query = new URLSearchParams(url.search)
    
    const price = +query.get('price') || 1
    const count = +query.get('count') || 1

    await wait(1000)
    return new Response(`${ price * count }`, { headers: corsHeaders });
  },
};

Real-life examples

1. Coupon Landing Page

🔗 Link: https://yourdomain.com/offer?coupon=SUMMER50
📌 Usage: A text field’s default value is {{query.coupon}}, so it autofills with “SUMMER50.”

2. Newsletter sign-up

🔗 Link: https://yourdomain.com/signup?utm_source=Instagram
📌 Usage: Hidden field capturing utm_source for analytics.

3. Pre-selected service package

🔗 Link: https://yourdomain.com/services?plan=294c124c-aa43-46df-adba-...
📌 Usage: A select field automatically chooses the correct plan option.

4. Showing a custom text based on one of the three inputs while hiding it until selection is made

Click to view the code

{% if form.field.energyConsumption.values %}{% if form.field.energyConsumption.values == "Small house (1-2 kW)" %}Small house selected: Ideal for basic energy needs. {% endif %}{% if  form.field.energyConsumption.values == "Mid-sized / Duplex (3-5 kW)" %}Mid-sized / Duplex selected: Perfect for moderate household usage.{% endif %}{% if form.field.energyConsumption.values == "Large house (6-10 kW)" %}Large house selected: Recommended for large homes with high consumption. {% endif %} {% endif %}

5. Applying a promo-code to improvised checkout

Click to view the code

<script>
  function applyDiscount(code) {
    const originalPrice = 300;
    if (code.trim().toLowerCase() === 'minusfifty') {
      return (originalPrice - 50).toFixed(2);
    }
    return originalPrice.toFixed(2);
  }
</script>

6. “Cost estimation” with all the information from Step 1 and Step 2 come together to form the final price

Click to view the code

<script>
  function calculateFinalPrice(form) {
    let base;

    // Get base price by property type
    switch (form.field.propertyType.values) {
      case "Apartment":
        base = 60;
        break;
      case "House":
        base = 80;
        break;
      case "Office":
        base = 100;
        break;
      default:
        base = 70; // fallback
    }

    // Start fresh each time
    let total = base;

    const bedrooms = Number(form.field.bedrooms || 0);
    const bathrooms = Number(form.field.bathrooms || 0);
    const area = Number(form.field.area || 0);

    total += bedrooms * 10;
    total += bathrooms * 5;
    total += area * 0.5;

    // Add-on 1: Window cleaning
    if (form.field.addon1?.values === "Yes") {
      total += 20;
    }

    // Normalize addon2 values
    const rawValues = form.field.addon2?.values || [];
    const selectedServices = Array.isArray(rawValues) ? rawValues : [rawValues];

    // Add service prices
    for (const service of selectedServices) {
      if (typeof service !== "string") continue;
      if (service.includes("Deep carpet cleaning")) total += 30;
      if (service.includes("Fridge cleaning")) total += 15;
      if (service.includes("Laundry service")) total += 25;
    }

    // Promo code
    if (form.field.promoCode === "SAVE20") {
      total *= 0.8;
    }

    // Output
    form.var.basePrice = `$${base.toFixed(2)}`;
    form.var.totalPrice = `$${total.toFixed(2)}`;
  }
</script>

Frequently asked questions and solutions

Do I need to specify the step where the field is located?

No, just setting the field’s default value is enough. You can pre-fill an input field regardless of which step it’s in.

I have set up everything according to the manual, but the text just disappears in the live view.

There can be multiple reasons. Most common of them are:

Mistakes in code: please double-check if the code was copied without any additional characters.
Missing or extra blank spaces: even a simple blank space can lead to errors.
Wrong syntax: keep in mind, that there are different syntax types, depending on the element you use. Refer to Case 3.

How long can my link be?

As long as you need! While there are technical limitations, 99.9% of users will never reach them. 🙂

What pricing plan do I need for this?

You require the "Optimize" Forms & Funnels add-on.

💡Do you have any feedback concerning this article? Please let us know through our live chat or at support@onepage.io so that we may keep it up to date. Thank you! 🙂

What are Query Parameters?

Why use Query Parameters?

Campaign Tracking. Marketers commonly use parameters like

How to modify your Links

Case 1: Auto-fill form fields

Case 2: Auto-fill in select fields - finding & using the select field ID

Case 3: Displaying any Input’s value

How it works:

For “Select” fields:

For the “Name” field:

Visibility options

Case 4: Displaying any input in next steps or finish steps

Case 5. Use JavaScript to manipulate queries

How it works:

If performing actions on an external server is needed :

If you require an asynchronous approach:

If you need to save the data from the server:

Real-life examples

Frequently asked questions and solutions

Do I need to specify the step where the field is located?

I have set up everything according to the manual, but the text just disappears in the live view.

How long can my link be?

What pricing plan do I need for this?