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

Добавление универсального кода в Tilda

Откройте в Тильде "Настройки сайта":

Перейдите в меню к пункту "Вставка кода":

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

Откроется окно - Вставка кода в HEAD:

Тут необходимо вставить код из FormDesigner. Для этого перейдите в конструкторе в нужной форме во вкладку "Получить код". В разделе "Универсальный код", после выбранных параметров ширины блока, нажмите кнопку "Получить код для вставки":

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

Нажмите сохранить:

В то место, где необходимо отображение формы на странице сайта, нажмите + Добавить блок:

Выберите HTML:

Кликните кнопку "Контент":

Сюда необходимо скопировать с FormDesigner код, опустившись ниже кода инициализации, HTML-блок на сайте:

Нажмите "Опубликовать":

В добавленном месте на сайте будет отображена форма:

Добавление формы в виде всплывающего окна по клику на кнопку Tilda

Аналогичным образом необходимо добавить код всплывающего окна из универсального кода:

Активировав переключатель "Открытие формы во всплывающем окне при нажатии на кнопку или ссылку". Настройте параметры всплывающего окна и нажмите "Получить код для вставки":

Скопируйте код инициализации, нажав кнопку копировать:

И вставьте его в Тильде в разделе "Вставка кода в HEAD"(как делали это выше).

Далее скопируйте код "При нажатии на ссылку добавьте этот код" ниже кода инициализации:

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

Вставьте ранее скопированный код в поле "Ссылка", сохраните и опубликуйте.

Добавление формы с помощью "Кода для вставки"

Далее перейдите в 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). Более подробную информацию найдёте здесь.