Как добавить форму в конструкторе сайтов Tilda

Чтобы добавить форму на страницу сайта, созданного с помощью конструктора сайтов Tilda, Вам необходимо зайти во вкладку "Получить код" в необходимой форме и скопировать код из поля "Код для вставки на сайт. Javascript (рекомендуем)":

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

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

Слева откроется библиотека блоков, опуститесь вниз и выберите раздел "Другое":

Нажмите кнопку HTML-код:

Этот блок добавится и далее нажмите кнопку "Контент" для редактирования:

Теперь, вставьте ранее скопированный код формы, в поле "HTML КОД/КОД ВИДЖЕТА":

Нажмите кнопку "Сохранить и закрыть":

Добавленный код сохранится и, чтобы увидеть изменения, кликните "Опубликовать":

После публикации форма будет уже отображена на странице сайта:

Если необходимо, чтобы форма открывалась в виде всплывающего окна (Popup) по клику кнопки, которая у Вас добавлена с помощью инструментов Tilda, Вам необходимо нажать кнопку "Контент":

Вам необходимо добавить такой код в поле "Ссылка для кнопки":

javascript:FDPopup.open(ID123456,{'hideCloseBtn':false,'host':'formdesigner.ru','overlay':{'background':'#000000','opacity':0.1}});

Где ID123456 - ID Вашей формы

Если Вы форму размещаете один раз на сайте, то в конструкторе выше кнопки, необходимо выбрать добавления HTML-блока в виде:

В этом блоке нужно добавить такой код:

<script type="text/javascript" src=https://formdesigner.ru/js/widgets/popup.js?v=0.0.3"></script>

После добавления сохраните и нажмите кнопку "Опубликовать":

При просмотре по клику на кнопку из тильды, откроется форма:

Если у Вас форма будет размещена на нескольких страницах сайта, то рекомендуем добавить код вызова формы в "head" сайта. Для этого Вам необходимом зайти в "Настройки сайта":

Выберите раздел "Ещё":

В поле "HTML-код для вставки внутрь HEAD", нажмите кнопку "Редактировать код":

Укажите аналогичный код:

<script type="text/javascript" src=https://formdesigner.ru/js/widgets/popup.js?v=0.0.3"></script>

Сохраните настройки и опубликуйте.

Описанный способ выше отлично работает. Также можно в другом виде добавить отображение попапа.

Чтобы форма открывалась в виде всплывающего окна (Popup) по клику кнопки, которая у Вас добавлена с помощью инструментов Tilda, Вам необходимо выбрать добавления HTML-блока в виде "Popup HTML-код в попапе":

Блок попапа добавится и далее нажмите кнопку "Контент" для редактирования

В Tilda попап работает таким образом:

• когда страница загружается наш код выполняется, форма встраивается там где нужно
• потом javascript код Tilda вырезает всё содержимое попапа и сохраняет где-то у себя
• когда кликаешь на кнопку, то попап показывается и в него вставляется то содержимое, что он вырезал, но там у нас уже есть форма, а когда вставляется код, то вызывается еще раз наша форма, поэтому в некоторых случаях происходит дублирование формы
  

В режиме редактирования блока попапа вставляете такой же код, только необходимо добавить такие строчки, чтобы не было дублирования:

setTimeout(function(){
            if ($('#form_ID_1').is(':visible')) {
            ...
            ...
            }
        }, 0);

Этот код проверяет, если попап отображается, то делается небольшая задержка и форма вставляется, а если попап скрыт, то ничего не происходит.

В поле "ССЫЛКА НА POPUP", Вы должны использовать указанную ссылку для кнопок или блока, где должен показываться этот попап. Например, добавили кнопку "Кнопка всплывающего окна", заходим в настройки этой кнопки и в поле "ССЫЛКА ДЛЯ КНОПКИ" указываем ссылку, ранее полученную:

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

Теперь, при клике на заданную кнопку, откроется попап:

Если Вы будете вставлять всплывающее окно на страницу, в виде "Ушко", то скопируйте необходимый код в нашем конструкторе:

И также добавьте HTML-код и зайдите в настройки редактирования, кликнув кнопку "Контент":

Вставьте код в поле "HTML КОД/КОД ВИДЖЕТА", нажмите "Сохранить и закрыть" и "Опубликовать":

На сайте появится всплывающее окно в виде "Ушко":

Чтобы добавить всплывающее окно в виде кнопки, внешний вид которой, Вы можете настроить в нашем конструкторе, то таким же образом добавляете код с помощью HTML-блока. Аналогичным образом добавляется код и для всплывающего окна в виде автопоказа.

Стоит отметить, если Вы встраиваете несколько форм на странице, то необходимо изменить значение после ID формы: (form_{ID}_X). Более подробную информацию найдёте здесь.