Тёмный

Переносим галочку согласия под поля ввода в стандартной форме Тильды 

Сергей Ревин
Подписаться 1,4 тыс.
Просмотров 2 тыс.
50% 1

В Тильде нет стандартного способа нормально разместить галочку согласия в горизонтальной форме, поэтому приходится использовать коды.
-------------------------
👇 Ссылки на мои соцсети:
💬 Telegram t.me/revinsergey
📸 Instagram / sergeyrevin
-------------------------
Коды из видео:
Код 1. Отправка события нажатия кнопки:
gist.github.com/kumsht/a527e1...
Код 2. Перенос галочки согласия вниз:
gist.github.com/kumsht/671efd...
Код 3. Настройка вида чекбокса:
gist.github.com/kumsht/9f261e...
-------------------------
Music by FASSoundsfrom Pixabay
-------------------------

Опубликовано:

 

28 янв 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 31   
@sergeyrevin
@sergeyrevin 7 месяцев назад
UPD: Тильда выпустила обновление (t.me/dsgnwarm/121), в котором есть функционал объединения полей в одну строку, что в целом заменяем использование кодов из этого видео
@natalyadyukina9099
@natalyadyukina9099 11 месяцев назад
Перенести галочку не получилось, но я вышла из положения другим способом, у меня только одно поле ввода и я просто сделала вертикальную форму, но воспользовалась "переносом кнопки" и скруглением углов чекбокса. Спасибо большое!
@alexpina8902
@alexpina8902 Год назад
Супер. Желаю роста аудитории
@Good-web-studio
@Good-web-studio Год назад
Огонь! Очень полезно
@galllushko
@galllushko 4 месяца назад
Большое спасибо!
@morikskris
@morikskris Год назад
Спасибо, очень помогли!
@deniszuev2447
@deniszuev2447 Год назад
Не, ну это топ!
@VadimPasternak
@VadimPasternak Год назад
Ты знал что он такой кодер?
@user-qb5zk2bf6k
@user-qb5zk2bf6k 2 месяца назад
Здравствуйте! Спасибо, все получилось, правда не весь код использовала )))) А подскажите такой момент. У меня это форма для подписки на рассылку. Сейчас у меня заявки падают в тильду. А каким образом мне сделать так, чтобы попадали именно в рассыльщик? По умолчанию мы настраиваем в форме связь с адресной книгой рассыльщика. А в данном случае как это будет? У нас же кнопка сделана отдельно от формы и в ней только ссылка на форму
@sergeyrevin
@sergeyrevin 2 месяца назад
Отдельная кнопка полностью эмулирует работу "настоящей" кнопки из формы и никак не влияет на отправку, весь функционал формы сохраняется полностью
@tatyvashkevich7481
@tatyvashkevich7481 Год назад
В адаптации в мобильной версии, всеравно пришлось делать вертикальную. И тут некрасиво с отспупами получилось. А так спасибо, здорово и понятно объясняете.
@sergeyrevin
@sergeyrevin Год назад
да, когда записывал ролик, это было экспресс-видео, где я сразу не учел, что еще адаптив будет, но вот код: @media screen and (min-width: 959px) { .uc-test .tn-form_horiz .t-form__inputsbox { display: flex !important; flex-wrap: wrap !important; } .uc-test .t-checkbox__control { width: max-content !important; } } который исправляет эту недоработку, us-test класс самого зеро-блока. Использовал его в проекте dreamston.ru/preschool (форма почти в самом низу), для десктопа и мобилки используется один и тот же блок
@tatyvashkevich7481
@tatyvashkevich7481 Год назад
@@sergeyrevin Ваш проект очень красивый. Спасибо, Сергей) Подписалась
@baltda
@baltda 11 месяцев назад
@@sergeyrevinСергей, а куда это вставлять 😢
@sergeyrevin
@sergeyrevin 11 месяцев назад
@@baltda в блок t123. Если следовать по таймлайну из видео - это код №2 (полностью использовать нужно код из этого комментария ВМЕСТО кода №2)
@baltda
@baltda 11 месяцев назад
@@sergeyrevin Сергей, спасибо большое! В Итоге все равно не получалось, пригласил коллегу, который кодит сайты чтобы помог, он убрал какую то строчку и все заработало, может кто то тоже столкнется с моей проблемой: @media screen and (min-width: 959px) { .tn-form_horiz .t-form__inputsbox { display: flex !important; flex-wrap: wrap !important; } .t-checkbox__control { width: max-content !important; } }
@The_Lucky_777
@The_Lucky_777 4 месяца назад
а где для начала взять эту форму с галочкой ?
@michaelbrownru
@michaelbrownru 5 месяцев назад
Сергей, подскажите, пожалуйста, а есть ли возможность уменьшить размер чекбокса? Области где ставится галочка?
@sergeyrevin
@sergeyrevin 5 месяцев назад
да, в свойстве .t-checkbox__indicator дописать параметры height и width
@michaelbrownru
@michaelbrownru 5 месяцев назад
Спасибо большое! Сейчас допишу. Если Вас не затруднит, ответьте, пожалуйста ещё на один вопрос: подскажите, пожалуйста, что делать если таких формы две одинаковые. Одна - на странице, одна в футере. Block ID прописал верный. BLOCK CSS CLASS NAME прописал, в одном блоке указал uc-test, в другом uc-page Не работает. Одинаковые тоже пробовал. при заполнении одной из форм и отправке данных внизу страницы показывается сообщение об ошибке - не все данные заполнены. Листаю до футера - там светятся красным окно ввода данных. И наоборот - заполняю низ, то ошибка вверху. Что можно с этим сделать?
@sergeyrevin
@sergeyrevin 5 месяцев назад
@@michaelbrownru отправка разных форм настраивается в коде отправки события нажатия (это код по первой ссылке). Для разных форм нужно указать разные значения ссылки #sendmyform. Т.е. для одной формы, и на кнопке и в коде прописать, например, #sendmyform1, а для другой формы и в коде и в ссылке на кнопке #sendmyform2
@michaelbrownru
@michaelbrownru 5 месяцев назад
@@sergeyrevin благодарю вас! Сегодня опробую!
@nneytiry
@nneytiry 10 месяцев назад
Все получилось, но только коды применяются ко всем формам на странице😅 Можно как-то прописать ограничение только к конкретной форме?)
@sergeyrevin
@sergeyrevin 10 месяцев назад
Да, можно, если указать в коде класс самого зеро-блока @media screen and (min-width: 959px) { .uc-test .tn-form_horiz .t-form__inputsbox { display: flex !important; flex-wrap: wrap !important; } .uc-test .t-checkbox__control { width: max-content !important; } } uc-text это класс зеро-блока в котором находится форма. В этом же коде действует ограничение работы кода для резрешения экрана от 959px код будет работать, меньше - не будет, это сделано для того, чтобы на адаптиве эту же форму можно было бы без проблем переключить в вертикальный режим
@nneytiry
@nneytiry 10 месяцев назад
@@sergeyrevin Спасибо огромное, все получилось 🔥 Вроде этот же код есть ниже в комментариях, но кто тоже тупит слово uc-test нужно прописать в настройках ⚙ зеро-блока, где "Добавить CSS Class Name". И код применится непосредственно к одному блоку, а не ко всем формам на странице 😅
@michaelbrownru
@michaelbrownru 5 месяцев назад
@@nneytiry, @sergeyrevin подскажите, пожалуйста, что делать если таких формы две одинаковые. Одна - на странице, одна в футере. Block ID прописал верный. BLOCK CSS CLASS NAME прописал, в одном блоке указал uc-test, в другом uc-page Не работает. Одинаковые тоже пробовал. прои заполнении 1 и отправке данных внизу страницы показывается сообщение об ошибке - не все данные заполнены. Листаю до футера - там светятся красным окно ввода данных.
@5365218
@5365218 5 месяцев назад
При вставке формы в зеро блоке нет квадратика с текстом. Как его добавить не подскажите?
@sergeyrevin
@sergeyrevin 5 месяцев назад
Если под «квадратиком» имеется ввиду чекбокс с галочкой, то нужно зайти в настройки формы (на правой панели настроек: Input fields), и добавить добавить поле Checkbox
@5365218
@5365218 5 месяцев назад
p.s. двойной клик на форму и выбираем Checkbox :)
@LAnnDm
@LAnnDm 3 месяца назад
У меня текст пошел друг под другом. Не в одну строку
@andreykovshov166
@andreykovshov166 2 месяца назад
То же самое( Вроде всё по видео делал, но не получилось. Я нашёл другой выход - сделал всё, как автор, убрал кнопку из формы, только сделал её вертикальной и добавил чекбокс, но без текста в его поле. И потом просто накинул текст с соглашением о политики конфиденциальности рядом с чекбоксом. Вуаля) Но за код спасибо!
Далее
Самоприкорм с сестрой 😂
00:19
Просмотров 208 тыс.
Слайдер в zero block тильда
4:11
Просмотров 69 тыс.