Структура форми замовлення

Структура форми замовлення

Секція типу order-form — особлива: вона підтримує PHP обробник, Telegram інтеграцію та конструктор додаткових полів.

template.html форми

<div class="order-form-wrap my-form-01" id="order">
    <h2>{{ORDER_TITLE}}</h2>
    <form class="m1-form"
          data-product="{{PRODUCT_NAME}}"
          data-tg-token="{{TELEGRAM_TOKEN}}"
          data-tg-chat="{{TELEGRAM_CHAT_ID}}"
          data-success="{{SUCCESS_URL}}">

        <!-- Захист від ботів (honeypot) — обов'язково -->
        <input type="text" name="_hp" tabindex="-1" autocomplete="off"
               style="position:absolute;left:-9999px;width:1px;height:1px;opacity:0" aria-hidden="true">

        <!-- Стандартні поля -->
        <input class="field" type="text" name="name"  placeholder="{{NAME_PLACEHOLDER}}"  required autocomplete="name">
        <input class="field" type="tel"  name="phone" placeholder="{{PHONE_PLACEHOLDER}}" required autocomplete="tel">

        <!-- Місце для додаткових полів з конструктора -->
        {{HTML_EXTRA_FIELDS}}

        <button class="btn-submit" type="submit">{{SUBMIT_TEXT}}</button>
    </form>

    <div class="form-success" style="display:none">
        <h3>{{SUCCESS_TITLE}}</h3>
        <p>{{SUCCESS_TEXT}}</p>
    </div>
</div>

Важливі атрибути форми

Конструктор форм та HTML_EXTRA_FIELDS

Адміністратор може додавати додаткові поля через вбудований конструктор форм у редакторі секцій. Додаткові поля зберігаються у data.vars.HTML_EXTRA_FIELDS і вставляються в шаблон без екранування завдяки префіксу HTML_.

⚠️ Якщо {{HTML_EXTRA_FIELDS}} відсутній у template.html — конструктор форм не матиме де розмістити додаткові поля.

data.vars для форми

"data": {
  "vars": {
    "ORDER_TITLE":      "Замовити зараз",
    "PRODUCT_NAME":     "Назва товару",
    "TELEGRAM_TOKEN":   "7123456789:AAG...",
    "TELEGRAM_CHAT_ID": "-1001234567890",
    "NAME_PLACEHOLDER": "Ваше ім'я",
    "PHONE_PLACEHOLDER": "+380 XX XXX-XX-XX",
    "SUBMIT_TEXT":      "Замовити зі знижкою",
    "SUCCESS_TITLE":    "Дякуємо!",
    "SUCCESS_TEXT":     "Ми зателефонуємо найближчим часом",
    "SUCCESS_URL":      "",
    "HTML_EXTRA_FIELDS": ""
  }
}