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

Service evaluation form

The client will fill in the form and you will be able to take into account all the comments. Details
Gold

Mortgage Calculation

Template for mortgage calculation by annuity or differential payment Details
Gold

Complete the survey and get a selection of apartments in new housing in the city

Apartments in new buildings, on the secondary market, townhouses, Pass the survey and get a selection of apartments in new housing in the city, as well as in the secondary market. Details
Platinum

Selection of auto parts

Template in the form of a request, where the user can select a car brand, year of manufacture, specify data from the technical data sheet, contact details. You can edit the template to suit your needs. Details

We use cookies to make it easier for you to use the website. By using this page, you agree to our cookie policy.