Dynamic value substitution in the form

We're happy to announce that we've added functionality that allows you to set dynamic values in a form when you host it on your site.

Why do we need this?

First of all it will be useful for sites that use the same form on different pages of their site, for example, for quick ordering of products, you have a form in the product card and to make it easier for the customer to fill out the form you can automatically substitute certain values in the form, and you can also change the name of the form itself.

How do I use it on my site?

You'll use a javascript code to embed the form on your site. It will look something like this in the "Get code" section of your account:

<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>

Where {ID} will be the form ID, and {HEIGHT} will be the height of the form.

To set a value in the form, you must replace the string:

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

at:

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

Where:

  • {FIELD} - The name of the macro of the desired field without curly braces
  • {VALUE} - value to set
In order to find out {FIELD} element you need to go to the form settings and click on the icon as shown below:

Macro list

You see a popup with a list of all available substitution variables:

List of available variables

This list shows the macro name on the left and the form element it corresponds to on the right. Find the item and copy the macro value. If you delete the curly brackets, you get the value {FIELD} of the item you want.
.

<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: 'New Value'.
        }
    });
    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>

You can also change the name of a form by adding the following parameter:

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

Where {TITLE} is replaced with the desired form name.

In the same way, you can set values in a form when you use a popup window. Let's say the code to call our popup looks like this

<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}">Feedback</a>

In order to set the value in the form, you need to use code like this:

<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>">Feedback</a>

That is, we added a new parameter fields in the function call code FDPopup.open, in which we pass for which elements to set the desired values.

If you need to send data to the form after it has been loaded, you need to use the following function:

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

Passing data into a form from a URL

Often you need to pass data from a URL into a form. For example, you are doing an email newsletter and you need to pass the subscriber's name and email address to a page on your site that includes our form.

https://mytestsite.ru/page.html

To get your name and email to that page, you'll need to generate this URL:

https://mytestsite.ru/page.html?name=Имя[email protected]

This means the GET parameters are added to the URL with a question mark ? and separated by &.

So how do I transfer the GET parameter value from the URL to the form on this page? .

This requires you to read those parameters using Javascript. You can do it this way:

var url = new URL(document.location.href);
var name = url.searchParams.get('name'); // subscriber name
var email = url.searchParams.get('email'); // subscriber's email

Now all that's left to do is to pass those values into the form, just like we did above. The final code for the form looks like this:

<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>

The same way you would pass data to the popup with the form.

If you have any questions, ask us at feedback form.

Tags:
Comments
Ready-made templates of web forms
Basic

Conference room rental

Get a selection of optimal offers for renting a conference room Details
Platinum

Making a staircase structure

After answering a few questions, applicants calculate the cost of making a similar structure for the required parameters Details
Gold

Initial visit patient forms

Get more information about your patient medical history with this simple and easy to use form Details
Gold

Calculate delivery cost

Answer a few simple questions and get a rough estimate of the shipping cost of your shipment. Details