Как разместить форму несколько раз на странице

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

Если взглянуть на код веб-формы по умолчанию, который вы вставляете на сайт, то он выглядит таким образом:

<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: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.ru/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.ru",formHeight:0, el: "form_{ID}_2", 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.ru/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.ru несколько раз на одной странице.

Как разместить оптимально разные формы на сайте

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

<script type="text/javascript">
    (function (d, w, c) {
     (w[c] = w[c] || []).push(
         {formId:{ID},host:"formdesigner.ru",formHeight:100, el: "form_{ID}_1", center: 1},
         {formId:{ID},host:"formdesigner.ru",formHeight:100, el: "form_{ID}_2", center: 1},
         {formId:{ID},host:"formdesigner.ru",formHeight:100, el: "form_{ID}_3", center: 1},
         {formId:{ID},host:"formdesigner.ru",formHeight:100, el: "form_{ID}_4", center: 1},
         {formId:{ID},host:"formdesigner.ru",formHeight:100, el: "form_{ID}_5", center: 1},
         {formId:{ID},host:"formdesigner.ru",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.ru/js/iform.js";
     var h=d[g]("head")[0] || d[g]("body")[0];
     h.appendChild(s);
    })(document, window, "fdforms");
</script>