ГлавнаяНовостиДинамическая подстановка значений в форму Зарегистрироваться бесплатно

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


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

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

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

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

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

    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: 0});

на:


(w[c] = w[c] || []).push({

    formId:{ID},

    host:"formdesigner.ru",

    formHeight:{HEIGHT},

    el: "form_{ID}_1",

    center: 0,

    fields: {

        {FIELD}: '{VALUE}'

    }

});

где:

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

Допустим в html-коде формы есть такое поле:


<input type="text" value="" placeholder="" data-id="141212" id="field141212" name="field141212" style="width:75%;" class="text required">

тогда {FIELD} будет равен атрибуту name - field141212 и код будет выглядеть так:


<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: 0,

        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>

Если вы не разбираетесь в html-коде, то узнать {FIELD} элемента можно при помощи "переменных подстановки". Для этого перейдите в настройки формы и нажмите на иконку, как показано ниже:

Вставка переменных подстановки

Перед вами откроется всплывающее окно со списком всех доступных переменных подстановки:

Список доступных переменных

В данном списке слева выводится название макроса, а справа элемент формы, которому он соответствует. Найдите нужный элемент и скопируйте значение макроса. Удалив фигурные скобки вы получите нужно значение {FIELD} элемента.

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


(w[c] = w[c] || []).push({

    formId:{ID},

    host:"formdesigner.ru",

    formHeight:{HEIGHT},

    el: "form_{ID}_1",

    center: 0,

    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/{ID}">Обратная связь</a>

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

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

window.FDSetData('form_{ID}_1', {

    title: '{TITLE}',

    fields: {

        {FIELD}: '{VALUE}'
    
    }

});

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

© Шамшур Иван, 2012-2017. Все права защищены. Контакты | Политика конфиденциальности
Нашли ошибку?
Оставить идею или отзыв
Контакты