Динамічна підстановка значень у форму

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

Для чого це необхідно?

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

Як використовувати у себе на сайті?

Для цього використовуйте javascript-код, для вставки форми до себе на сайт. В особистому кабінеті в розділі "Отримати код" він буде виглядати приблизно так:

<div id="form_{ID}_1"></div>
<script type="text/javascript">
(function (d, w, c) {
    (w[c] = w[c] || []).push({formId:{ID},host:"formdesigner.com.ua",formHeight:{HEIGHT}, el: "form_{ID}_1", center: 1});
    var s = d.createElement("script"), g = "getElementsByTagName";
    s.type = "text/javascript"; s.charset="UTF-8"; s.async = false;
    s.src = (d.location.protocol == "https:" ? "https:" : "http:")+"//formdesigner.com.ua/js/iform.js";
    var h=d[g]("head")[0] || d[g]("body")[0];
    h.appendChild(s);
})(document, window, "fdforms");
</script>

де замість {ID} - стоятиме ID форми, а замість {HEIGHT} - висота форми.

Для того, щоб встановити значення у форму, необхідно замінити рядок:

(w[c] = w[c] || []).push({formId:{ID},host:"formdesigner.com.ua",formHeight:{HEIGHT}, el: "form_{ID}_1", center: 1});

на:

(w[c] = w[c] || []).push({
    formId:{ID},
    host:"formdesigner.com.ua",
    formHeight:{HEIGHT},
    el: "form_{ID}_1",
    center: 1,
    fields: {
        {FIELD}: '{VALUE}'
    }
});

де:

  • {FIELD} - назва макроса потрібного поля без фігурних дужок
  • {VALUE} - значення, яке необхідно встановити

Для того, щоб дізнатися {FIELD} елемента, необхідно перейти в налаштування потрібного вам елемента в розділ "Розширені параметри":

Тут у полі "Назва макросу" ви можете перевизначити системне значення і вказати своє. Саме це значення і потрібно використовувати як {FIELD} елемента.

<div id="form_{ID}_1"></div>
<script type="text/javascript">
(function (d, w, c) {
    (w[c] = w[c] || []).push({
        formId: {ID},
        host: "formdesigner.com.ua",
        formHeight: {HEIGHT},
        el: "form_{ID}_1",
        center: 1,
        fields: {
            field2421858: 'Нове значення'
        }
    });
    var s = d.createElement("script"), g = "getElementsByTagName";
    s.type = "text/javascript"; s.charset="UTF-8"; s.async = false;
    s.src = (d.location.protocol == "https:" ? "https:" : "http:")+"//formdesigner.com.ua/js/iform.js";
    var h=d[g]("head")[0] || d[g]("body")[0];
    h.appendChild(s);
})(document, window, "fdforms");
</script>

Крім цього, ще можна змінювати назву форми, для цього необхідно додати такий параметр:

(w[c] = w[c] || []).push({
    formId: {ID},
    host: "formdesigner.com.ua",
    formHeight: {HEIGHT},
    el: "form_{ID}_1",
    center: 1,
    title: '{TITLE}',
    fields: {
        {FIELD}: '{VALUE}'
    }
});

де замість {TITLE} - задається потрібна назва форми.

Так само можна встановлювати значення у форму під час використання спливаючого вікна. Припустимо код виклику нашого вікна має такий вигляд:

<script type="text/javascript" src="http://formdesigner.com.ua/js/widgets/popup.js"></script>
<a target="_blank" onclick="FDPopup.open({ID}, {'hideCloseBtn':false,'host':'formdesigner.com.ua','overlay':{'background':'#000000','opacity':0.1}}); return false;" href="http://formdesigner.com.ua/form/view/{ID}">Зворотній зв'язок</a>

Для того, щоб встановити значення у форму, потрібно використовувати ось такий код:

<script type="text/javascript" src="http://formdesigner.com.ua/js/widgets/popup.js"></script>
<a target="_blank" onclick="FDPopup.open({ID}, {
    hideCloseBtn: false,
    host: 'formdesigner.com.ua',
    overlay: {'background':'#000000','opacity':0.1},
    fields: {
       {FIELD}: '{VALUE}'
    }
}); return false;" href="http://formdesigner.com.ua/form/view/<strong>{ID}</strong>">Обратная связь</a>

Тобто ми в код виклику функції FDPopup.open() додали новий параметр fields, в якому передаємо для яких елементів встановити потрібні значення.

Передача даних у форму після її завантаження

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

window.FDSetData('form_{ID}_1', {
    title: '{TITLE}',
    fields: {
        {FIELD}:'{VALUE}'
    }
});

Якщо у Вас будуть якісь складнощі, то ставте свої запитання нам через форму зворотного зв'язку.

Коментарі
Готові шаблони веб-форм
Free

Шаблон визначення індексу споживчої лояльності (NPS)

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

Дізнайтеся вартість абонемента у фітнес-клуб

Пройдіть тест і отримаєте 3 заняття безкоштовно Докладніше
Platinum

Сюжет твоєї кар'єри

Шаблон тестування в гральній формі допоможе з'ясувати Вашим користувачам, в якому вигляді розвивається його кар'єра: драма, комедія або бойовик Докладніше
Platinum

Тест на знання світових столиць

Пройдіть тест на знання світових столиць. Дізнайтеся Ваш рівень Докладніше

Замовте розробку форми під ключ

Немає часу розбиратися з усіма налаштуваннями самому? Не проблема!
Замовте розробку веб-форми у нас