Прокачай стандартные формы в Тильде на 300% (В описании новая версия)
Vložit
- čas přidán 26. 08. 2024
- Данное видео устарело. Новая версия: • КАСТОМИЗИРУЙ формы в T...
___________________________________________________________
___________________________________________________________
Прокачай стандартные формы в Тильде на 300%
Сегодня я покажу, как с помощью кода html/css/js на тильде максимально кастомизировать стандартные формы tilda zero block. Благодаря этому способу вы сможете объединять формы и задавать им любое расположение и дизайн внутри зеро блока.
🦜Поддержать автора копейкой: www.donational...
Ссылка на код для форм tilda: yadi.sk/d/0YZr...
___________________________________________
✅Поделись видео с друзьями: • Прокачай стандартные ф...
✅Подпишись на канал и поставь🔔: / @design_scripts
Прокачай стандартные формы в Тильде на 300%
___________________________________________
ВК: id11717...
Instagram: / bistricky_stanislav
Email: rootdesign.help@gmail.com
___________________________________________
теги:
#tilda, #тильда, #дизайн, #вебдизайн, #design, #тильдошная, #motilda, #zeroblock, #зероблок, #скрипт, #скриптынатильда, #tildaws, #тильдасайт, #tildazeroblock, #тильдаzeroblock
Небольшие эксперименты с заголовком и превью 👉👈
класс
Подскажи пожалуйста, поле для загрузки файла в форму это input?
@@TV-ye5jv тоже интересует этот вопрос
Чувак!!! Ты как глоток ледяной колы в аду для некодеров, которым нужны лайфхаки с тильдой! Спасибо большое за контент! Большой респект! И очень доступно пошагово обьясняешь, в отличие от других авторов
Молодец! Было бы полезно видео на смежную тему: как сделать крутой калькулятор.
Чувак, это очень круто. Каждый видос, как озарение. А ведь когда-то я считал тильду обычным конструктором сайтов
Спасибо за коммент, многие так до сих пор считают)
@@design_scripts она только раздражает своей топорностью
Тильда и есть обычный конструктор. Для реализации самых обычных штук нужно постоянно использовать костыли.
А за видос огромное спасибо.)
Как же это божественнооооооо. Спасибо большое за проделанный труд и то что делишься знаниями. Продолжай в том же духе )
Спасибо, приятно видеть, что мой контент заходит)
Продолжаю и пока останавливаться не планирую :D
Аааа, это просто лучшее видео по Тильде!! Я была очень расстроена, когда поняла, что не смогу применить свой дизайн при верстке, но теперь это наконееец-то получится. Спасибо! :)
Это нечто: все предельно просто и понятно, дотошность в расписывании каджого последовательного действия вводит в экстаз, ну и Тильда становится все более привлекательной, благодаря тебе!!!!
Почему у этого канала всего 3к подписчиков? Тут контент минимум на 100к.
Просто лучший!
Спасибо, постоянно стараюсь расти, искать что-то новое, чего ещё ни у кого не было)
Приятно слышать😌
Благодарю от всей Души!)))))))
Это слишком классно, что бы быть правдой. Я сплю. Почему другие продают это за мульёны. СПАСИБО!
Волшебник!!! Огромное спасибо за то, что просветляешь умы тильдошников и вдохновляешь на новые идеи!
Спасибо огромное за ваш труд, давно думал как это можно реализовать!))
Рад, что помог)
Удивил так удивил) В принцыпе знал об этом, но твой скрипт более простой и рассказ очень понятный для освоения. Теперь точно данный способ закрепил в голове!) Спасибо!
Да, поскольку канал, в основном, для людей, не связанных с вёрсткой кодом, я стараюсь давать инфу максимально подробно, упрощённо и с примерами)
Спасибо за приятный комментарий)
Подскажи, пожалуйста, что нужно указать в настройках фейковой кнопки, вместо URL, чтобы наводя на неё курсор менялся на "руку с пальцем"?
Кто-нибудь разобрался?
Очень интересно, легко и круто!!!
а можно ли так де сделать с радио-кнопками??
Молодец, подробно и без воды. Красавчик
10:15 кнопки можно убрать без стилей. Просто задать этим кнопкам ширину и высоту = 0
Твой канал по Тильде самый лучший!!!!!!!!
есть минусы этого решения(
1) После отправки данных приходит окно успеха, но когда ты закрываешь окно, поля в форме по прежнему заполнненый инфой и это может смутить пользователя, приняли ли заявку или нет.
2) поля обязательные поля не подсввечиаются красным, так как в фейковой фоорме я убрал стили
Привет! Круто 👍🏻 Однако при нажатии на “Enter” на стилизованных формах, всплывает окошко об отправке.
Один из самых полезных каналов на ютубе!
Очень высокая оценка, спасибо, приятно)
Стараюсь давать только максимально качественный контент, которого еще не было на ютубе :D
Супер! Как всегда очень полезно!
Ты на скорости 25х посмотрел?)
Спасибо за комментарий, приятно слышать🔥
Спасибо! В свое время очень не хватило знания про картинки и чекбоксы
Спасибо за пытливость и дотошность! Всех благ!
Мужик ты супер! Если ты покажешь кастомизацию с корзиной - это будет огниииищеее! Например поэтапный экран или что то отличное от стандарта Тильды. Очень актуально.
Спасибо)
Если честно, с магазинами работал очень мало, однако, я постараюсь найти что-нибудь интересное
Красавчик, офигенно придумал и осуществил
Спасибо за контент дружище, очень полезно. Интересно больше видео с кодом,библиотеками и все что касается front end.
И тебе спасибо за комментарий)
Я с радостью. Пиши, если есть предложения)
сейчас я потихоньку разбираюсь с gsap и barba.js для анимированных переходов по страницам
Очень крутой приём! Успехов тебе !)
Благодарю)
Ты лучший, сколько раз уже меня выручил - не сосчитать
Все круто, работает. Огромное спасибо, но есть ли способ подсветить обязательное поле для заполнения, в случае если его не заполнили?
Огромное спасибо
Стас, спасибо за видосик. Очень полезно и информативно, впрочем, как всегда) Только вчера ломала голову, как сделать нормальный калькулятор, а не колбасу на много пикселов вниз) И тут ты...как Санта...с подарком) Лайкосик зарядила!)
Спасибо, я очень рад, что помог)
Классное видео, Большое Спасибо! Возник вопрос как соединить формы радиокнопок.
Необычно и лайк за видео и нестандартный подход.
Спасибо! Вот как раз ломал голову по поводу форм...
То, что ты делаешь, это бомба
Я рад, что тебе понравилось)
Спасибо за комментарий
У меня нет слов. Ты гений.
Воу, достаточно высокая оценка :D
Стараюсь, спасибо)
Привет! Подскажи, а с загрузкой файла можно что-нибудь придумать в этом случае?
Появился вопрос)
А как к этому всему прикрутить загрузку файлов на обменник?) Чтобы все это с формой работало. И кнопку загрузки сделать кастомную, с нужным дизайном)
А как отправку файла сделать? И еще не обводятся красным поля которые обязательны для заполнения , в случае их не заполнения
безумно полезное видео. спасибо большое
если кому-то надо связать элементы загрузки файлов, то вот следующая запись:
у меня в данном случае фейковая переменная элемента загрузки файлов равна fileF, а реальная file. Но в записи написано fileF_0, так и должно быть, не убирайте подучеркивание и ноль. При загрузке и нажатии файл не отображается в реальной форме, но после отправки файл появится в вашей CRM. В обеих формах укажите api вашей crm.
$('input[name="file"]').val($('input[name="fileF_0"]').val()).click(function() {
console.log(document.getElementsByTagName('input'));
});
Благодарю за видео, всё предельно ясно) очень помогли)
Как и где смотреть все остальные типы полей ?
Благодарю за видео!
Привет, ты безумно мне помог, спасибо огромное!!! Единственный вопрос, какие шаги нужно предпринимать, чтобы сделать sbs анимацию по клику, дабы форма выделялась, а то у меня не работает это
Все очень доступно и понятно, но есть один вопрос.
Есть ли возможность кастомизировать форму для загрузки файла, вписав в этот готовый код еще пару строк для данного поля?
мне тоже очень актуален данный вопрос
Решили вопрос?
Так же очень актуален этот вопрос
Есть ли возможность кастомизировать форму для загрузки файла?
Спасибо)) очень помог)) еще бы что то подобное увидеть с меню))
ОГРОМНОЕ СПАСИБО!!!!!!!
не срабатывает кнопка с фейковой формы. не нажимается(
у меня то же самое. вы не решили эту проблему никак пока?
Очень полезное видео, спасибо !
Спасибо, очень годный контент!
Ты просто лучший!
Ооооооооооооооооооочень круто! Спасибо!
Ооооочень рад это слышать :D
И тебе спасибо за коммент
Спасибо большео за видео. Но есть вопрос, кКак привязать фейковую кнопку к настоящей форме? Что в самой кнопке прописать?
Я тоже не пойму как их связать) Ты разобрался как это сделать?
@@user-ir6ww2of1b Да, разобрался. Ничего прописывать не надо. Кнопка автоматом привязывается. Если не срабатывает, попробуй изменить FakeName наименования и Name формы, сделать более краткими. Мне помогло.
нашли ответ на вопрос?@@user-ir6ww2of1b
Интересно, а можно ли также подключить поле с загрузкой файла
Молодец -красава!!! Ждем больше калькуляторов от тебя!
Привет, а у меня почему-то при наведении на кнопку отправить форму не работает ХОВЕР (палец не появляется), но при нажатии всё работает! как можно победить?
Подскажите пожалуйста, почему кнопка не работает?
Очень классное решение! Спасибо большое) Станислав, или кто-то из ребят, можете подсказать, какую команду в коде задать, что бы была возможность подключить "загрузку документа"? Спасибо
Вы классный, спасибо вам )
Просто невероятная информация , спасибо большое ❤подскажите пожалуйста, какой ввод для календаря нужно вставить ? ( вот как для текстового поля - ‘textarea’ ) 🙏🏽 буду очень благодарна ❤
Спасибо огромное! Всё работает!
а можно ещё сделать так, чтоб после отправки инпуты очищались от введённой инфы?
В функции, где идёт клик по фейковой кнопке, нужным инпутам присваивать пустое значение, типа такого: $(селектор инпута).val = "";
@@design_scripts Каеф!!)) Ты - лучший! Спасибо тебе!))
Так уж получилось, я - вебдизайнер (с)
Фраза, в которой больше боли чем кажется. 100 жиз из 100
Очень полезно! Супер!
Очень познавательно, просто и понятно, без лишней мишуры! Лайк! Подписка!
подскажи пожалуйста, а можно добавить калькулятор к такой форме? (чтобы пользователь видел стоимость выбранных товаров и услуг) ?
Спасибо ты большой молодец
Я долго искала решение этой проблемы с формами в Zero блоке и очень обрадовалась, когда нашла Ваше видео! Спасибо Вам большое, так все понятно и подробно объясняется, у меня почти все получилось сделать, как в дизайне. Все кроме подключения поля, чтобы можно было загрузить файл. Вы в видео говорили, что на поля с вводом данных подходит input, а под поле с загрузкой что нужно писать? Или в этом случае скрипт намного сложнее?
Аналогичная проблема, надеюсь у вас получилось в итоге найти решение
Привет ! а как заменить чекбокс, вместо картинки на кнопку ?
Где ты был рантше, я так долго искал эту тему
Почему у меня не работает кнопка?
Ты сделал мой день! Спасибо за урок. В Pop Up квиз этот трюк можно повторить?
получиться ли такое провернуть еще с полем с календарем?
А откуда кнопка взялась неожиданно? Это часть какой-то из форм?
Умопомрачительный тутор!))
А как сделать калькулятор с кастомными ползунками??
Спасибо за ролик . Остановилась на 12 минуте. По какой-то причине при тесте "ввода и отображения текста" в поле тру формы выдает ошибку "не одно поле не заполнено" , Как чинить?
Очень крутое видео, безумно помогло! Только один вопрос: как сделать, чтобы после нажатия "отправить" данные, введенные в поля фейковой формы очищались (как бы обновлялись, чтобы можно было вводить уже новые данные, не удаляя в ручную)?
привет, спасибо большое за объяснение и приложенный код! а как сделать так, чтобы кнопка, которую нажмёт пользователь вела себя как кнопка, а не как текстовый элемент? я ведь правильно понял, что мы в неё никакую ссылку не вшивали, и когда наводишь мышку на неё, то он видет это как текстовый блок, который можно выделить, а не как кликабельный элемент. то есть, она нажимается, всё работает, но интуитивно когда наводишь мышку, она не превращается в руку с пальцами)
Добрый день, скажите, пожалуйста, как решили эту проблему. У меня тоже в этом загвоздка
Спасибо огромное за видео. Максимально подробно и понятно. а есть ли возможность привязать к форме поле "загрузить файл"? буду очень благодарна за ответ
Объясните что с кнопкой, я вроде всё по инструкции делала но на кнопку нажать не могу и от этого весть процесс безсмысслен. Хелпните, напишите пошагово как правильно её поставить что бы зароботало
Очень круто!!! спасибо )
Спасибо за полезную инфу!
Только почему-то не могу подвязать фиктивную форму к реальной с блоком «вопрос с ответом».
Может кто знает в чем проблема, напишите, пожалуйста
@@DI-lv9cc если вдруг тебе это еще надо, то нужно в фейковой задать ввод текста в одну строчку и соответсвенно выбрать метод input
@@egorks12323 спасибо, брат
Станислав, а как быть с загрузкой файла? Нельзя эту функцию здесь делать?
Ты молодец! Я думаю у тебя будут классные сайты!
Спасибо за добрые слова)
Спасибо за видео подскажите пожалуйста а оригинальную форму обязательно в зероблоке делать и почему у меня после отправки не выводиться "спасибо данные успешно отправлены" спасибо за ранее
Очень круто, спасибо чувак! Один вопрос, нужно использовать в форме телефон. Нужно добавлять поле в одну строчку (input) или прямо с маской можно задействовать телефон? Надеюсь понятно написал)
Большое спасибо)
К сожалению, из-за этого кода также пропадают кнопки из других форм, в том числе стандартных. Пробовал из style убрать надстройку про маскировку кнопок из фейковых форм, всё равно не помогает.
Кнопки на стандартных pop-up формах появляются только после того, как полностью скрываешь блок с кодом.
Как быть в этом случае? Помогите пожалуйста
Размеры кнопки в ноль по высоте и ширине ставишь и параметр "input margin bottom" во фкладке настройки стиля формы тоже ноль и кнопку тогда не получится нажать, и стиль скрытия кнопки убираешь из кода. все норм
@@user-sn4xs9so1b у меня такая же проблема, и ваш совет не помог, если нажимать enter, чтобы форму отправить, фейковая кнопка срабатывает
Спасибо брат, всё получилось
А как сделать чтобы можно было только 1 картинку выбрать?👉👈Как Radio button
Ай да хитрец)
Круто. Спасибо! Как понимаю, реальную форму можно взять любую стандартную, не обязательно ее в Zero block делать?
Не помню, можно ли стандартные формы проименовать так же легко. Ну, по идее, имена у них должны стоять стандартные. Так что без проблем.
Зеро блок был взят для простоты объяснения. Там project, а там projectFake - их связали друг с другом, и всё работает
А есть способ, как перехватывать значения не чекбоксов, а радиокнопок?
Здравствуйте! Возникла такая проблема, что кнопка не работает, вообще не активная. Как можно исправить данную проблему?
у меня то же самое. вы не решили проблему никак пока?
Здравствуйте! А можно ли сделать так, чтобы при ховере поле ввода меняло цвет, а при клике обводку? Уж больно дотошный клиент попался...🥴
у меня фейковая кнопка некликабельная, как решить вопрос
Привет, решил вопрос? Та же проблема
какую ссылку ты вставил в кнопку фейковой формы, а то я не понимаю??
нашли ответ на вопрос?
Мне кажется ты сильно усложнил жизнь новичкам).
Даже из обычной формы с помощью CSS можно сделать приемлемый результат.
На мой взгляд с CSS работать намного проще чем с JS (имею ввиду фикс багов)
Вот пример (форма: BF204N + T123 с использованием только CSS) - project1966745.tilda.ws/
Здравствуйте! У вас есть рабочая страница с примером? По данной ссылке не переходит
Все супер понятно! А кнопке в фэйковой форме какой URL прописать? Запуталась...
нашли ответ на вопрос?