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

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

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

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

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

Для этого используйте 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: {
            field141212: 'Новое значение'
        }
    });
    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>

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

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

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

Изготовление лестничной конструкции

Ответив на несколько вопросов, пользователю рассчитают стоимость изготовления лестничной конструкции по необходимым параметрам Подробнее
Platinum

Калькулятор пластиковых окон

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

Океаны Земли

Тест позволяет узнать уровень знаний по океанам Земли Подробнее
Platinum

Какой уход необходим для вашей кожи лица?

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

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

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