Как сделать кастомную форму в тильде
Добавил пользователь Дмитрий К. Обновлено: 04.10.2024
Сравнение веса изображений за счёт их оптимизации на примере шаблона. Вес изображений сайта без адаптивной загрузки — 8,9 Mb. Вес изображений с адаптивной загрузкой — 2,8 Mb
После оптимизации общий вес изображений на сайте в 3 раза меньше
Большинство современных браузеров, например, Chrome, Opera, Firefox и другие поддерживают WebP. Когда пользователь заходит на сайт, скрипт проверит браузер на поддержку формата и, если он поддерживается, запросит с сервера WebP-изображения. Если не поддерживается — отдаст оригинальное изображение в формате, который был загружен — JPEG или PNG. Со временем мы добавим конвертацию изображений в AVIF-формат, который позволит сделать вес изображений ещё легче.
За последнее время вопрос "Как сделать попап из зеро блока" стал слишком частозадаваемым. Ответ на него вы найдете в этой статье. Ниже я расскажу, как сделать PopUp окно из Zero block, так же, как сделать несколько таких окон на странице
Как сделать PopUp из Zero block в Tilda
Пример №1
В данном примере я сделаю PopUp из связки Zero block + BF503 (popup information), в целом можно использовать любой блок PopUp.
- Создаем блок BF503;
- Отчищаем все данные во вкладке "Контент";
- Ставим ширину 100%;
- Создаем Zero Block, наполняем контентом и адаптируем, в качестве фона используйте элемент шейп с заливкой. Фон самого Zero block удалите, чтобы он был прозрачным.
- Добавьте код на страницу;
- Замените id Zero block;
- Замените id BF503.
Пример №2
- Создаем блок BF503;
- Отчищаем все данные во вкладке "Контент";
- Ставим ширину 100%;
- Создаем Zero Block, наполняем контентом и адаптируем, в качестве фона используйте элемент шейп с заливкой. Фон самого Zero block удалите, чтобы он был прозрачным.
- Добавьте код на страницу;
- Замените id Zero block;
- Замените id BF503.
Пример №3
В третьем примере сделаем PopUp окно из той же связки, но разные Zero block будем помещать в 1-но окно BF503. Т.е. нам не придется создавать кучу блоков BF503, если мы хотим сделать несколько PopUp с разным содержимым.
Данная интеграция будет полезна, если ваш сайт размещен на платформе Tilda, и вы хотите собирать контактные данные с помощью формы на нем.
Подготовка к интеграции
Перед настройкой интеграции вам нужно:
- создать дополнительные поля в системе eSputnik, аналогичные полям, которые вы планируете добавить в форму;
- подготовить письмо для подтверждения контакта (DOI);
- подготовить форму подписки;
- выбрать цель формы.
О создании дополнительных полей вы можете прочесть в специальной статье, а мы перейдем к следующим этапам подготовки.
Подготовка письма со ссылкой для подтверждения контакта
Кликните по кнопке, отвечающей за подтверждение подписки, и выберите одноименный тип ссылки.
При этом тип события выбирать не обязательно, т. к. он подставляется автоматически и является системным. При желании, вы можете настроить и свое событие.
Создание формы подписки
Перейдите во вкладку “Сайт” - “Формы”.
Здесь можно увидеть список созданных форм, количество запросов или заполнений каждой из них, а также дату последнего изменения. Здесь же можно удалить ненужную форму. Для этого нажмите на три точки напротив названия формы и выберите “Удалить”.
В колонке “Запросы” считается количество заполнений форм, а не количество новых контактов. Люди могут заполнить форму, но не подписаться, либо заполнить ее больше одного раза.
Введите произвольное название и выберите сервис (пока доступен только Tilda). Нажмите “Далее”.
Выбор цели формы
Следующий шаг - определить цель формы.
Необходимо выбрать, в какую группу будут добавляться контакты: в новую либо уже существующую. Если вы создаете новую группу, то задайте ей название и метки, которые будут полезны в быстрой навигации.
Определяем, какие данные собираем. Для этого есть три опции:
Новые. Используется для сбора новых подписчиков. Для данной опции необходимо будет использовать Double Opt-In. Далее вы сможете выбрать письмо для подтверждения контакта, которое запускается с помощью системного сценария.
Все. Могут подписываться как новые, так и старые контакты. Это можно использовать, например, для записи на вебинар. Для клиентов, которые ранее не были подписаны, необходимо использовать Double Opt-In. Если существующий клиент заполнит форму, то в систему не придет событие и письмо подтверждения отправлено не будет.
Дополнительные данные для существующих контактов. Эта опция нужна для обновления контактной информации, когда, например, нужно собрать данные о дате рождения клиента. Новые контакты подписаться не смогут, следовательно, использовать Double Opt-In не нужно.
Нажимаем “Далее” и переходим к следующему шагу.
Интеграция с Tilda
На вкладке “Интеграция с Tilda” добавьте ссылку на ваш сайт.
Вставьте URL для Webhook в аккаунте Tilda. Для этого:
Перейдите в личный кабинет Tilda и выберите ваш сайт.
Перейдите в настройки сайта, в раздел Формы, и выберите Webhook.
Далее скопируйте и вставьте автоматически сгенерированную ссылку в Webhook URL и нажмите кнопку “Добавить”. Ссылку можно найти на вкладке “Интеграция с Tilda”.
Вернитесь в личный кабинет и перейдите в режим редактирования сайта.
Наведите курсор на блок с формой подписки и нажмите кнопку “Контент”.
Выберите созданный Webhook в подключенных сервисах и нажмите кнопку "Сохранить и закрыть”.
Сопоставление полей
Есть три поля, которые добавляются в поля контакта в eSputnik автоматически: email, номер телефона и имя.
На выбор также доступные другие системные поля: пол, дата рождения, часовой пояс и прочие. Если вы собираете другие данные в форме подписки, например, модель телефона или возраст, тогда нужно создать дополнительные поля, а потом сопоставить их.
Для сопоставления доступны все поля простого типа: числовые и текстовые, а также чекбоксы, выпадающие списки, категории подписок и дата. Также можно выбрать формат даты и тип разделителя.
Есть два варианта сопоставить их:
Для форм, опубликованных на сайте и подключенных к Webhook:
Заполните вашу форму и отправьте запрос.
Слева будут отображаться параметры запроса: поля и данные пользователя с Tilda. Необходимо сопоставить их с нужными дополнительными полями, созданными в eSputnik.
Для форм, которые не опубликованы на сайте и не подключены к Webhook:
Нажмите "Новое поле" и создайте параметр запроса вручную.
Сопоставьте его с полем контакта
При сопоставлении данных с неопубликованной формой есть особенность: если в названии поля в Tilda есть пробел, например, “Your Age”, то его следует заменить на знак нижнего подчеркивания “_”, и запрос будет выглядеть так: “Your_Age”. Также нужно обращать внимание на регистры: они должны быть идентичными.
Проверка и редактирование настроек
Переходим на последний этап настройки. Здесь можно перепроверить и в случае необходимости отредактировать параметры формы и группу, куда попадает контакт после заполнения формы.
Формы подписки по умолчанию создаются с включенным "Double opt-in".
Если вы сохраняете новые контакты, то необходимо добавить письмо, которое получит человек после подписки для подтверждения контакта. Если в аккаунте уже есть созданное письмо-подтверждение, то оно подставится к форме автоматически.
Теперь нужно определиться, куда будет попадать клиент после подтверждения:
на стандартную страницу переадресации с благодарностью за подписку;
перейдет по вашему URL (при условии, что ваш домен верифицирован.
Также вы можете повысить вовлеченность, добавив приветственное письмо, которое клиент получит после подтверждения, либо целую цепочку писем.
За отправку письма для подтверждения контакта или отправки Welcome-письма отвечают системные сценарии, однако, при желании, вы можете изменить их в любой момент.
Так как в Тильде не реализован блок старой доброй боковой панели, хочу рассказать, как самому сделать фиксированный сайдбар с помощью Zero-блока.
Сложность фиксированного сайдбара не в нем самом, а в том, чтобы он правильно "прилипал" при прокрутке страницы. В данной статье я рассмотрю три типа сайдбара и как их можно реализовать на конструкторе Tilda.
Но сначала я вкратце расскажу как сделать простую боковую панель без фиксации.
Сетка Тильды состоит из 12 колонок, пусть 3 крайние справа будет занимать наш сайдбар, 8 - контент сайта, а оставшаяся колонка послужит отступом между ними.
Сайдбар создаем в Zero-блоке примерно как показано на скриншоте:
Все объекты позиционируем относительно левого края Window Container и сдвигаем влево в самое начало контейнера окна (такое положение элементов необходимо задать из-за сдвига зеро-блока, которое будет производиться с помощью css-кода).
Обратите внимание, что у Zero-блока должен быть прозрачный фон.
Ниже создаем контент, который будет напротив сайдбара. Для этого следует выбрать блок, в котором есть возможность задать ширину количеством колонок. В настройках выставляем ширину в 8 колонок и без отступа слева.
Далее идет блок с html-кодом, в котором нужно прописать некоторые правила для корректного отображения сайдбара:
Читайте также: