Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода
1) В Zero block создаем форму и добавляем нужные нам поля.
2) Добавляем код в блок T123. Код 1 для двух колонок, код 2 для трех колонок.
3) В коде заменяем .tn-elem__986 168 601 554 888 163 328 на class формы из Zero block.
Если нужно чтобы кнопка была по центру формы, добавляем код 3, заменив в нем class формы из Zero block.
Если нужно что бы на экранах 960px и меньше была стандартная форма, в одну колонку, применяем код 4.
Формы в 2 или 3 колонки в Zero Block
Код 1: на 2 колонки
.tn-elem__986168601554888101247 .t-form__inputsbox < display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; >.tn-elem__986168601554888101247 .t-input-group < flex: 50% 0 0; padding: 0 15px; box-sizing: border-box; >.tn-elem__986168601554888101247 .tn-form__submit
Код 2: на 3 колонки
.tn-elem__986168601554888101247 .t-form__inputsbox < display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; >.tn-elem__986168601554888101247 .t-input-group < flex: 33.33% 0 0; padding: 0 15px; box-sizing: border-box; >.tn-elem__986168601554888101247 .tn-form__submit
Код 3: ставит кнопку формы по центру
.tn-elem__986092821554888101247 .tn-form__submit
Код 4: для экранов меньше 960px будет стандартная форма
Как сделать форму, чтобы принимать данные?
Чтобы сделать форму, подключите сервисы приема данных в Настройках сайта → Формы, выберите подходящий блок из категории «Форма» настройте его и опубликуйте страницу с формой.
Похожие вопросы
- Как отправлять заявки себе в Telegram?
- Как отправлять заявки себе на почту?
- Заявки из форм не приходят
- Как поменять цвет текста или фона в сообщении об успешной отправке формы?
- Как отправлять заявки в SMS?
Этот ответ был вам полезен?
Просмотры: 57799
Сообщить о нарушении прав
Если вы считаете, что пользователь Tilda Publishing нарушает ваши права, отправьте нам сообщение через форму
Как связаться с поддержкой
Для консультаций по функциям платформы используйте форму обратной связи в вашем личном кабинете или напишите на team@tilda.cc
Как сделать свою уникальную форму в Zero Block на Tilda?
Модификация поможет сделать свою кастомную форму на Zero Block используя разные поля ввода и кнопку.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Генератор кода
id Zero Block с формой
id блока BF204N
Ссылка для кнопки отправки
Включить отправку формы кнопкой Enter?
Отключить стандартный попап «Спасибо»?
Класс для своего текста «Спасибо»
Настройки стандартного popup блока «Спасибо»
Цвет фона popup
Цвет крестика popup
Цвет иконки popup
Цвет текста popup
Радиус скругления popup
Текст popup
Войдите в аккаунт чтобы получить доступ к генератору кода
Этот генератор кода доступен только тем кто оплатил подписку
КОПИРОВАТЬ КОД
- Инструкция
- Пример
1. Создаем создаем в зеро блок свою форму(можно использовать комбинацию из нескольких форм с различными типами полей ввода, расположенных в нужном вам порядке)
2. В настройках кнопки формах удаляем текст из кнопки и ставим размер 0 высота 0 ширина. У полей ввода можно заполнить переменную variblename или оставить пустой.
3. Создаем кнопку(это также может быть шейп, картинка, текст) и присваиваем ей ссылку #sendform
4. Добавь на страницу блок BF204N. Подключаем к нему нужный приемщик данных. В полях ввода ничего не трогаем. Если нужно перенаправлять пользователя на страницу «спасибо» то указываем ссылку в форме через «контент»
5. Копируем Id Zero Block и id блока BF204N и вставляем в генератор кода
6. Указываем в генераторе доп. настройки и настраиваем стандартный popup Спасибо.
7. Копируем готовый код и вставляем в HTML блок T123
Примечание! После отправки данных можно показывать свой текст и другие элементы. Для этого нужным элементам указываем класс из поля «класс для своего текста спасибо». По стандарту класс: tc-success-text . Скрипт скроет эти элементы и покажет их после отправки формы вместе или вместо стандартного popup.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка «Add CSS Class Name» и далее, справа в настройках указываем класс
Для целей успеха ссылки брать из блока BF204N
Как создать свою кнопку в форме ZeroBlock на Tilda
Как выполнить данный пример:
1) Создали ZeroBlock
2) Добавили в него форму
3) Удалили надпись у кнопки формы и сделали ширину и высоту 0px
4) Создали обычную кнопку из button или shape
5) Назначили ей ссылку #sendmyform
6) Добавили код на страницу в блок ДРУГОЕ►Т123
В коде заменили ID нашего ZeroBlock #rec113649472
Внимание:
Пример работает только с одной формой на одной странице.
Применение скрипта к нескольким формам приведёт к ошибке его работы.
Пример формы со своей кнопкой.