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

Рады сообщить, что мы добавили функционал, который позволяет устанавливать динамические значения в форму, при размещении ее у себя на сайте.

Для чего это необходимо?

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

Как использовать у себя на сайте?

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

<div id="form_{ID}_1"></div>
<script type="text/javascript">
(function (d, w, c) {
    (w[c] = w[c] || []).push({formId:{ID},host:"formdesigner.ru",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.ru/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.ru",formHeight:{HEIGHT}, el: "form_{ID}_1", center: 1});

на:

(w[c] = w[c] || []).push({
    formId:{ID},
    host:"formdesigner.ru",
    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.ru",
        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.ru/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.ru",
    formHeight: {HEIGHT},
    el: "form_{ID}_1",
    center: 1,
    title: '{TITLE}',
    fields: {
        {FIELD}: '{VALUE}'
    }
});

где вместо {TITLE} - задается нужное название формы.

Точно также можно устанавливать значения в форму, при использовании всплывающего окна. Допустим код вызова нашего окна выглядет так:

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

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

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

Т.е. мы в код вызова функции FDPopup.open добавили новый параметр fields, в котором передаем для каких элементов установить нужные значения.

Если же вам необходимо передать в форму данные после ее загрузки, то необходимо использовать следующую функцию:

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

Передача данных в форму из URL

Очень часто возникает необходимость передавать в форму данные из URL. Например, Вы делаете email рассылку и вам нужно передавать имя подписчика и его email на страницу вашего сайта, где размещена наша форма.

Для этого в URL страницы вашего сайта добавляются дополнительные GET параметры. Если адрес страницы вашего сайта выглядит так:

https://mytestsite.ru/page.html

То для того, чтобы передать на эту страницу имя и email, необходимо сформировать вот такой URL:

https://mytestsite.ru/page.html?name=Имя&email=test@testuser.ru

Т.е. GET параметры добавляются в URL через знак вопроса ? и разделяются знаком &.

Так вот, как передать значение GET параметра из URL в форму, которая размещена на этой странице?

Для этого необходимо считать эти параметры используя Javascript. Это можно сделать так:

var url = new URL(document.location.href);
var name = url.searchParams.get('name'); // имя подписчика
var email = url.searchParams.get('email'); // email подписчика

Теперь остается передать полученные значения в форму так, как мы рассказывали выше. Итоговый код формы будет выглядеть вот так:

<div id="form_{ID}_1"></div>
<script type="text/javascript">
(function (d, w, c) {
    var url = new URL(document.location.href);
    (w[c] = w[c] || []).push({
        formId:{ID},
        host:"formdesigner.ru",
        formHeight:{HEIGHT},
        el: "form_{ID}_1",
        center: 1,
        fields: {
            name: url.searchParams.get('name'),
            email: url.searchParams.get('email')
        }
    });
    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.ru/js/iform.js";
    var h=d[g]("head")[0] || d[g]("body")[0];
    h.appendChild(s);
})(document, window, "fdforms");
</script>

Таким же образом передаются данные и во всплывающее окно с формой.

Если у Вас будут какие-либо сложности, то задавайте свои вопросы нам через форму обратной связи.