← Вставка формы на сайт

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создай любую веб-форму
всего за 3 минуты!

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