Перейти до основного контенту

Як використовувати динамічний контент і параметри запиту в Onepage?

У цій статті ви дізнаєтеся, як використовувати параметри запиту в Onepage.

Alina avatar
Автор: Alina
Оновлено понад 3 тиж. тому

Що таке параметри запиту?

Параметри запиту (частина URL після знака питання ?) — це потужний спосіб передавати інформацію на вашу сторінку в Onepage. Вони особливо корисні для багатоступеневих форм, відстеження даних кампаній і точнішого налаштування маркетингових активностей.

Ця інструкція допоможе вам вже сьогодні почати працювати з параметрами запиту, щоб досягати кращих результатів у майбутньому.

Навіщо використовувати параметри запиту?

  • Відстеження кампаній.

Маркетологи часто використовують параметри на зразок
​?utm_source=facebook, щоб визначити, які саме кампанії приносять найбільше лідів.

  • Персоналізація.

Додавання, наприклад, ?name=Max до посилання дозволяє автоматично заповнити поле "Ім'я" значенням "Max", покращуючи таким чином користувацький досвід.

Як змінювати свої посилання

Стандартна структура параметра запиту виглядає так:

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

  • ? позначає початок параметрів запиту.

  • param1 і param2 — це ключі параметрів (наприклад, coupon, utm_source, ref).

  • value1 і value2 — це значення параметрів (наприклад, NY2026, google, maxmustermann).

Давайте детальніше розглянемо можливості використання параметрів запиту в Onepage

Випадок 1: Автозаповнення полів форми

У Onepage ви зможете використовувати ці параметри в полях форми таким чином:

{{query.param1}}

Наприклад, якщо ваше посилання виглядає так: https://example.com/form?coupon=NY2025, використовуйте {{query.coupon}} у полі “Значення за замовчуванням”, щоб автоматично заповнити це поле значенням NY2025.

Випадок 2: Автоматичне заповнення полів вибору — як знайти та використовувати ID поля

Використання параметрів посилання з текстовими полями є досить простим, але як бути з полями вибору, такими як картки, чипи або випадаючі списки?

  1. Натисніть на меню з трьома крапками поруч із полем «Значення за замовчуванням» у налаштуваннях вашого поля вибору (Select).

  2. Скопіюйте згенерований ID (наприклад, 294c124c-aa43-46df-adba-...).

  3. У вашому посиланні встановіть параметр, використовуючи цей ID. Наприклад:

    ?selectedOption=294c124c-aa43-46df-adba-...

  4. Тепер, після копіювання ID, замініть вміст поля «Значення за замовчуванням» на бажане ім’я параметра, наприклад, selectedOption, щоб отримати щось на кшталт цього:

Випадок 3: Відображення значення будь-якого поля введення

Цю функцію можна використовувати в різних сценаріях, наприклад:

  • Інтерактивні вікторини: миттєво показувати відповіді, щоб підтвердити вибір користувача («Ви обрали: Барселона»).

  • Підтвердження бронювання: динамічно показувати введену дату бронювання («Ви обрали: 12 квітня 2025 року»), щоб запевнити користувача.

Як це працює:

  1. Додайте поле форми та задайте йому внутрішнє ім’я (наприклад, userName).

  2. Додайте текстовий елемент, щоб динамічно відображати введене значення, використовуючи синтаксис:
    ​{{ form.field.userName }}

Для полів типу “Select”:

  1. Додайте поле типу “select” і задайте йому внутрішнє ім’я (наприклад, mySelect).

  2. Додайте текстовий елемент, щоб динамічно відображати вибране значення, використовуючи синтаксис:
    ​{{ form.field.mySelect.values }}

Для поля “Name”:

  1. Встановіть внутрішнє ім’я (наприклад, INTERNAL_NAME).

  2. Додайте текстовий елемент, щоб динамічно відображати введене значення, використовуючи такі синтаксиси:

  • Показати ім’я: {{ form.field.INTERNAL_NAME.firstName }}

  • Показати по батькові (середнє ім’я): {{ form.field.INTERNAL_NAME.middleName }}

  • Показати прізвище: {{ form.field.INTERNAL_NAME.lastName }}

Порівняймо вигляд у редакторі:

Ось, як це буде виглядати для користувача у режимі перегляду:

Параметри відображення

Якщо ви бажаєте створити резервне значення (значення за замовчуванням), будь ласка, дотримуйтесь цієї інструкції:

  • Додайте значення для “default” у такому форматі: {{ form.field.userName|default('Default value') }}

  • |default('Any string') це формат, який буде показано у випадку, якщо параметр не був переданий.

Якщо ви хочете приховати текстовий блок, доки не буде вибрано значення:

  1. Вставте наступний код у текстовий елемент:

    {% if form.field.mySelect.values %}Selected: {{ form.field.mySelect.values }}{% endif %}

  2. Замініть form.field.mySelect.values на синтаксис відповідного елемента. Зверніться до Case 3, щоб дізнатися, який синтаксис підходить для конкретного типу елемента.

  3. Замініть Selected: на ваш власний текст.

📌Примітка: ви також можете поєднувати це зі звичайними текстовими полями.
Наприклад:

{% 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.

Випадок 4: Відображення будь-якого введеного значення на наступних кроках або на завершальному етапі

Процес такий самий, як і на попередньому кроці. Просто використовуйте ті самі параметри запиту далі без змін.

Випадок 5. Передача даних форми через параметри URL-запиту

Ця функція зчитує введені значення з вашої форми та додає їх до URL-адреси переадресації у вигляді параметрів запиту, щоб наступна сторінка могла прочитати й використати ці значення.

Ви можете підставити будь-яке поле — текстове, випадаючий список, ім’я тощо — просто вставивши його внутрішнє ім’я в шаблон URL-адреси.

Можна комбінувати кілька параметрів одночасно, щоб передати стільки значень, скільки потрібно.

Як налаштувати:

  1. Натисніть Редагувати форму (Edit form).

  2. Перейдіть до кроку Action і відкрийте його налаштування.

  3. Виберіть дію Redirect (переадресація).

  4. У полі URL вставте свій шаблон з параметрами запиту.

Ось кілька прикладів:

  • Text fields:

    https://mypage.com/?{{form.field.INTERNAL_NAME}}

  • Select fields:

    https://mypage.com/?{{form.field.INTERNAL_NAME.values}}

  • Name fields:

    https://mypage.com/?{{form.field.INTERNAL_NAME.firstName}}&{{form.field.INTERNAL_NAME.middleName}}&{{form.field.INTERNAL_NAME.lastName}}

⚠️ Важливо: замініть INTERNAL_NAME на фактичну внутрішню назву вашого поля. Будь ласка, зверніться до випадку 3 для отримання додаткової інформації.

Ознайомтесь із нашим відео-демонстраційним роликом:

Випадок 6. Використання JavaScript для обробки запитів

Цей варіант дозволяє виконувати різноманітні перетворення, створюючи власні функції на JavaScript, а потім посилаючись на них у конструкторі.

Як це працює:

  • Напишіть функцію та додайте її до коду сайту в розділі <body>.

  • Застосуйте її на сторінці, вказавши в потрібному полі.

  • Синтаксис: {{ transformMyText(form.field.myInput) }}

Якщо потрібно виконувати дії на зовнішньому сервері:

У цьому прикладі ми використовуємо власний JavaScript-код для виклику віддаленого сервера та локальні змінні форми для збереження отриманих даних.

  1. Створіть елементи форми.

Напишіть власний код для отримання даних із віддаленого сервера.

Натисніть, щоб подивитись код

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




  1. form.var.asyncData = data — зберігає дані, отримані від сервера, у локальну змінну.

  2. Викличте власний код: {{ fetchTotalPrice(form) }}

  3. Відобразіть змінну: Total price: {{ form.var.asyncData }}

📌Примітка: у цьому прикладі крок створення сервера не включено, оскільки він є індивідуальним для кожного клієнта.

Якщо вам потрібен асинхронний підхід:

📌 Примітка: це варіація попереднього прикладу, але з асинхронним отриманням даних на окремому кроці, після чого відбувається автоматичний перехід до наступного кроку за допомогою коду.

Щоб вручну перейти до наступного кроку, використовуйте: form.state.nextFrame().

У цьому прикладі ми очікуємо на отримання даних із сервера, і щойно вони надходять — автоматично переходимо до наступного кроку.

Натисніть, щоб подивитись код

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

Якщо вам потрібно зберегти дані з сервера

Будь ласка, перегляньте нашу відеоінструкцію.

У цих прикладах ми використовуємо CloudFlare workers як сервер. Посилання на сервер: https://demo-server.onepage-io.workers.dev/ Цей сервер просто множить значення: https://demo-server.onepage-io.workers.dev/?price=200&count=5

Натисніть, щоб подивитись код

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 });
  },
};

Приклади з реального життя:

  1. Цільова сторінка з купоном

🔗 Посилання: https://yourdomain.com/offer?coupon=SUMMER50

📌 Використання: Поле для введення має значення за замовчуванням {{query.coupon}}, тому воно автоматично заповнюється “SUMMER50.”

2. Підписка на розсилку

🔗 Посилання: https://yourdomain.com/signup?utm_source=Instagram

📌 Використання: Сховане поле, яке зберігає utm_source для аналітики.

3. Попередньо вибраний пакет послуг

🔗 Посилання: https://yourdomain.com/services?plan=294c124c-aa43-46df-adba-...

📌 Використання: Поле вибору автоматично обирає правильний план.

4. Показ кастомного тексту на основі одного з трьох введених значень, при цьому приховуючи його до вибору

Натисніть, щоб подивитись код

{% 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. Застосування промокоду на імпровізованому чекауті

Натисніть, щоб подивитись код

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

6. «Оцінка вартості», де вся інформація з Кроку 1 та Кроку 2 об'єднується для формування остаточної ціни.
​

Натисніть, щоб подивитись код

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

Поширені питання та їх вирішення

Чи потрібно вказувати крок, на якому знаходиться поле?

Ні, достатньо просто встановити значення поля за замовчуванням. Ви можете заповнити поле введення незалежно від того, на якому кроці воно знаходиться.

Я налаштував усе згідно з інструкцією, але текст просто зникає в режимі перегляду.

Може бути декілька причин. Найпоширеніші з них:

  • Помилки в коді: будь ласка, перевірте ще раз, чи код було скопійовано без зайвих символів.

  • Пропущені або зайві пробіли: навіть один зайвий пробіл може спричинити помилку.

  • Неправильний синтаксис: майте на увазі, що існують різні типи синтаксису, залежно від елемента, який ви використовуєте. Зверніться до Випадку 3.

Наскільки довгим може бути моє посилання?

Скільки завгодно! Хоча існують технічні обмеження, 99,9% користувачів ніколи не досягнуть їх. 🙂

Який тарифний план мені потрібен для цього?

Вам потрібен план "Optimize" для Квізів та Воронок.

💡Бажаєте залишити відгук до цієї статті? Будь ласка, напишіть у наш чат або за адресою support@onepage.io, і ми зможемо її покращити. Дякуємо! 🙂

Ви отримали відповідь на своє запитання?