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

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

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

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

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

Для этого используйте 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>

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

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

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

Онлайн-запись на массаж

Заполните форму и запишитесь на массаж Подробнее
Basic

Шаблон исследования узнаваемости бренда

Данный шаблон поможет узнать уровень осведомленности клиентов о вашем бренде Подробнее
Platinum

Какой ты инноватор?

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

Анкета покупателя недвижимости

Вы можете полностью опросить потенциального покупателя, чтобы удовлетворить его потребности Подробнее

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

Нет времени разбираться со всеми настройками самому? Не проблема!
Закажите разработку веб-формы у нас