Як розмістити форму кілька разів на сторінці

Іноді при розробці посадкової сторінки або лендингу виникає необхідність розмістити одну і ту ж веб-форму кілька разів на сторінці. Наші веб-форми дозволяють це зробити, і зараз я розповім, як це можна зробити.

Якщо подивитися на код веб-форми за замовчанням, який ви вставляєте на сайт, він виглядає таким чином:

<div id="form_{ID}_1"></div>
<script type="text/javascript">
    (function (d, w, c) {
     (w[c] = w[c] || []).push({formId:{ID},host:"formdesigner.com.ua",formHeight:0, el: "form_{ID}_1", center: 0});
     var s = d.createElement("script"), g = "getElementsByTagName";
     s.type = "text/javascript"; s.charset="UTF-8"; s.async = true;
     s.src = (d.location.protocol == "https:" ? "https:" : "http:")+"//formdesigner.com.ua/js/iform.js";
     var h=d[g]("head")[0] || d[g]("body")[0];
     h.appendChild(s);
    })(document, window, "fdforms");
</script>

Тут потрібно звернути увагу на ID елемента - form_{ID}_1, де замість {ID} буде стояти ID вашої форми.

ID формы

Но ID html елемент повинен бути унікальним на сторінці. Тому, щоб розмістити одну і ту ж веб-форму кілька разів на сторінці, потрібно зробити цей ID унікальним. Достатньо просто в кінці замість 1, поставити 2, і т.д. для всіх наступних форм:

<div id="form_{ID}_2"></div>
<div id="form_{ID}_3"></div>

Змінивши ID html елемента, куди буде виводитися форма, потрібно ще якось повідомити форму про ці зміни. Для цього в JavaScript коді форми є спеціальний параметр - el.

Саме в цьому параметрі вказується ID HTML елемента, куди потрібно вставити форму. Давайте тепер подивимося на підсумковий варіант коду для вставки другої форми:

<div id="form_{ID}_2"></div>
<script type="text/javascript">
    (function (d, w, c) {
     (w[c] = w[c] || []).push({formId:{ID},host:"formdesigner.com.ua",formHeight:0, el: "<strong>form_{ID}_2</strong>", center: 0});
     var s = d.createElement("script"), g = "getElementsByTagName";
     s.type = "text/javascript"; s.charset="UTF-8"; s.async = true;
     s.src = (d.location.protocol == "https:" ? "https:" : "http:")+"//formdesigner.com.ua/js/iform.js";
     var h=d[g]("head")[0] || d[g]("body")[0];
     h.appendChild(s);
    })(document, window, "fdforms");
</script>

Як видно з прикладу вище, ми у двох місцях змінили ID елемента (form_{ID}_2), а решта коду залишився колишньою.

Не забудьте змінити {ID} на ID своєї веб-форми!

Так легко можна розмістити веб-форму від FormDesigner.com.ua кілька разів на одній сторінці.

Як розмістити оптимально різні форми на сайті

Для оптимізації швидкості завантаження кількох форм на сайті можна використовувати такий код:

<script type="text/javascript">
    (function (d, w, c) {
     (w[c] = w[c] || []).push(
         {formId:{ID},host:"formdesigner.com.ua",formHeight:100, el: "form_{ID}_1", center: 1},
         {formId:{ID},host:"formdesigner.com.ua",formHeight:100, el: "form_{ID}_2", center: 1},
         {formId:{ID},host:"formdesigner.com.ua",formHeight:100, el: "form_{ID}_3", center: 1},
         {formId:{ID},host:"formdesigner.com.ua",formHeight:100, el: "form_{ID}_4", center: 1},
         {formId:{ID},host:"formdesigner.com.ua",formHeight:100, el: "form_{ID}_5", center: 1},
         {formId:{ID},host:"formdesigner.com.ua",formHeight:100, el: "form_{ID}_6", center: 1},
      );
     var s = d.createElement("script"), g = "getElementsByTagName";
     s.type = "text/javascript"; s.charset="UTF-8"; s.async = true;
     s.src = (d.location.protocol == "https:" ? "https:" : "http:")+"//formdesigner.com.ua/js/iform.js";
     var h=d[g]("head")[0] || d[g]("body")[0];
     h.appendChild(s);
    })(document, window, "fdforms");
</script>