Прокачай стандартные формы в Тильде на 300% (В описании новая версия)
Vložit
- čas přidán 12. 09. 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, чтобы наводя на неё курсор менялся на "руку с пальцем"?
Кто-нибудь разобрался?
Благодарю от всей Души!)))))))
Это слишком классно, что бы быть правдой. Я сплю. Почему другие продают это за мульёны. СПАСИБО!
Супер! Как всегда очень полезно!
Ты на скорости 25х посмотрел?)
Спасибо за комментарий, приятно слышать🔥
Молодец, подробно и без воды. Красавчик
Очень интересно, легко и круто!!!
а можно ли так де сделать с радио-кнопками??
Очень крутой приём! Успехов тебе !)
Благодарю)
Все круто, работает. Огромное спасибо, но есть ли способ подсветить обязательное поле для заполнения, в случае если его не заполнили?
Спасибо за пытливость и дотошность! Всех благ!
Твой канал по Тильде самый лучший!!!!!!!!
Спасибо за контент дружище, очень полезно. Интересно больше видео с кодом,библиотеками и все что касается front end.
И тебе спасибо за комментарий)
Я с радостью. Пиши, если есть предложения)
сейчас я потихоньку разбираюсь с gsap и barba.js для анимированных переходов по страницам
Привет! Круто 👍🏻 Однако при нажатии на “Enter” на стилизованных формах, всплывает окошко об отправке.
Один из самых полезных каналов на ютубе!
Очень высокая оценка, спасибо, приятно)
Стараюсь давать только максимально качественный контент, которого еще не было на ютубе :D
Привет! Подскажи, а с загрузкой файла можно что-нибудь придумать в этом случае?
Все очень доступно и понятно, но есть один вопрос.
Есть ли возможность кастомизировать форму для загрузки файла, вписав в этот готовый код еще пару строк для данного поля?
мне тоже очень актуален данный вопрос
Решили вопрос?
Так же очень актуален этот вопрос
Есть ли возможность кастомизировать форму для загрузки файла?
Красавчик, офигенно придумал и осуществил
Стас, спасибо за видосик. Очень полезно и информативно, впрочем, как всегда) Только вчера ломала голову, как сделать нормальный калькулятор, а не колбасу на много пикселов вниз) И тут ты...как Санта...с подарком) Лайкосик зарядила!)
Спасибо, я очень рад, что помог)
10:15 кнопки можно убрать без стилей. Просто задать этим кнопкам ширину и высоту = 0
Необычно и лайк за видео и нестандартный подход.
Спасибо! В свое время очень не хватило знания про картинки и чекбоксы
Мужик ты супер! Если ты покажешь кастомизацию с корзиной - это будет огниииищеее! Например поэтапный экран или что то отличное от стандарта Тильды. Очень актуально.
Спасибо)
Если честно, с магазинами работал очень мало, однако, я постараюсь найти что-нибудь интересное
То, что ты делаешь, это бомба
Я рад, что тебе понравилось)
Спасибо за комментарий
Появился вопрос)
А как к этому всему прикрутить загрузку файлов на обменник?) Чтобы все это с формой работало. И кнопку загрузки сделать кастомную, с нужным дизайном)
А как отправку файла сделать? И еще не обводятся красным поля которые обязательны для заполнения , в случае их не заполнения
Спасибо большео за видео. Но есть вопрос, кКак привязать фейковую кнопку к настоящей форме? Что в самой кнопке прописать?
Я тоже не пойму как их связать) Ты разобрался как это сделать?
@@user-ir6ww2of1b Да, разобрался. Ничего прописывать не надо. Кнопка автоматом привязывается. Если не срабатывает, попробуй изменить FakeName наименования и Name формы, сделать более краткими. Мне помогло.
нашли ответ на вопрос?@@user-ir6ww2of1b
безумно полезное видео. спасибо большое
Благодарю за видео, всё предельно ясно) очень помогли)
Классное видео, Большое Спасибо! Возник вопрос как соединить формы радиокнопок.
Я долго искала решение этой проблемы с формами в Zero блоке и очень обрадовалась, когда нашла Ваше видео! Спасибо Вам большое, так все понятно и подробно объясняется, у меня почти все получилось сделать, как в дизайне. Все кроме подключения поля, чтобы можно было загрузить файл. Вы в видео говорили, что на поля с вводом данных подходит input, а под поле с загрузкой что нужно писать? Или в этом случае скрипт намного сложнее?
Аналогичная проблема, надеюсь у вас получилось в итоге найти решение
есть минусы этого решения(
1) После отправки данных приходит окно успеха, но когда ты закрываешь окно, поля в форме по прежнему заполнненый инфой и это может смутить пользователя, приняли ли заявку или нет.
2) поля обязательные поля не подсввечиаются красным, так как в фейковой фоорме я убрал стили
У меня нет слов. Ты гений.
Воу, достаточно высокая оценка :D
Стараюсь, спасибо)
Благодарю за видео!
Привет, ты безумно мне помог, спасибо огромное!!! Единственный вопрос, какие шаги нужно предпринимать, чтобы сделать sbs анимацию по клику, дабы форма выделялась, а то у меня не работает это
Спасибо)) очень помог)) еще бы что то подобное увидеть с меню))
Ооооооооооооооооооочень круто! Спасибо!
Ооооочень рад это слышать :D
И тебе спасибо за коммент
Ты лучший, сколько раз уже меня выручил - не сосчитать
Очень полезное видео, спасибо !
Очень классное решение! Спасибо большое) Станислав, или кто-то из ребят, можете подсказать, какую команду в коде задать, что бы была возможность подключить "загрузку документа"? Спасибо
Спасибо! Вот как раз ломал голову по поводу форм...
Молодец -красава!!! Ждем больше калькуляторов от тебя!
Спасибо, очень годный контент!
если кому-то надо связать элементы загрузки файлов, то вот следующая запись:
у меня в данном случае фейковая переменная элемента загрузки файлов равна fileF, а реальная file. Но в записи написано fileF_0, так и должно быть, не убирайте подучеркивание и ноль. При загрузке и нажатии файл не отображается в реальной форме, но после отправки файл появится в вашей CRM. В обеих формах укажите api вашей crm.
$('input[name="file"]').val($('input[name="fileF_0"]').val()).click(function() {
console.log(document.getElementsByTagName('input'));
});
Огромное спасибо
Очень круто, спасибо чувак! Один вопрос, нужно использовать в форме телефон. Нужно добавлять поле в одну строчку (input) или прямо с маской можно задействовать телефон? Надеюсь понятно написал)
Как и где смотреть все остальные типы полей ?
Очень познавательно, просто и понятно, без лишней мишуры! Лайк! Подписка!
подскажи пожалуйста, а можно добавить калькулятор к такой форме? (чтобы пользователь видел стоимость выбранных товаров и услуг) ?
Вы классный, спасибо вам )
Очень полезно! Супер!
Ты сделал мой день! Спасибо за урок. В Pop Up квиз этот трюк можно повторить?
Ты просто лучший!
Круто. Спасибо! Как понимаю, реальную форму можно взять любую стандартную, не обязательно ее в Zero block делать?
Не помню, можно ли стандартные формы проименовать так же легко. Ну, по идее, имена у них должны стоять стандартные. Так что без проблем.
Зеро блок был взят для простоты объяснения. Там project, а там projectFake - их связали друг с другом, и всё работает
не срабатывает кнопка с фейковой формы. не нажимается(
у меня то же самое. вы не решили эту проблему никак пока?
Подскажите пожалуйста, почему кнопка не работает?
ОГРОМНОЕ СПАСИБО!!!!!!!
Просто невероятная информация , спасибо большое ❤подскажите пожалуйста, какой ввод для календаря нужно вставить ? ( вот как для текстового поля - ‘textarea’ ) 🙏🏽 буду очень благодарна ❤
Станислав, возможно глупый вопрос, но до меня не доходит) Какая ссылка должна стоять в кнопке, которая видна на опубликованном сайте? Вот у меня кнопка с отправкой емейла, и я не допру никак)) Если ничего не ставить, то кнопка работает и отправляет данные в срм, но она опознается курсором мыши как текстовая область(
Здравствуйте! Вы как-то решили проблему? тоже с этим столкнулась(
@@insideuheart здравствуйте)
Нет, не получилось тогда решить проблему(
Вы пробовали просто пустой хештег ставить на эту кнопку? Может тогда нормально покажет курсор? Но насколько помню, тогда мне не помогло)
Умопомрачительный тутор!))
Интересно, а можно ли также подключить поле с загрузкой файла
Спасибо огромное за видео. Максимально подробно и понятно. а есть ли возможность привязать к форме поле "загрузить файл"? буду очень благодарна за ответ
Привет, а у меня почему-то при наведении на кнопку отправить форму не работает ХОВЕР (палец не появляется), но при нажатии всё работает! как можно победить?
Очень крутое видео, безумно помогло! Только один вопрос: как сделать, чтобы после нажатия "отправить" данные, введенные в поля фейковой формы очищались (как бы обновлялись, чтобы можно было вводить уже новые данные, не удаляя в ручную)?
Спасибо ты большой молодец
А откуда кнопка взялась неожиданно? Это часть какой-то из форм?
привет, спасибо большое за объяснение и приложенный код! а как сделать так, чтобы кнопка, которую нажмёт пользователь вела себя как кнопка, а не как текстовый элемент? я ведь правильно понял, что мы в неё никакую ссылку не вшивали, и когда наводишь мышку на неё, то он видет это как текстовый блок, который можно выделить, а не как кликабельный элемент. то есть, она нажимается, всё работает, но интуитивно когда наводишь мышку, она не превращается в руку с пальцами)
Добрый день, скажите, пожалуйста, как решили эту проблему. У меня тоже в этом загвоздка
Очень круто!!! спасибо )
Ты молодец! Я думаю у тебя будут классные сайты!
Спасибо за добрые слова)
получиться ли такое провернуть еще с полем с календарем?
Спасибо огромное! Всё работает!
а можно ещё сделать так, чтоб после отправки инпуты очищались от введённой инфы?
В функции, где идёт клик по фейковой кнопке, нужным инпутам присваивать пустое значение, типа такого: $(селектор инпута).val = "";
@@design_scripts Каеф!!)) Ты - лучший! Спасибо тебе!))
Почему у меня не работает кнопка?
Где ты был рантше, я так долго искал эту тему
Так уж получилось, я - вебдизайнер (с)
Фраза, в которой больше боли чем кажется. 100 жиз из 100
Спасибо за видео подскажите пожалуйста а оригинальную форму обязательно в зероблоке делать и почему у меня после отправки не выводиться "спасибо данные успешно отправлены" спасибо за ранее
подскажи, пожалуйста, можно ли кастомизировать попап формы на Тильда и если можно, то будет ли видос?)) спасибо за ролики, ты крутой!
Ай да хитрец)
Спасибо брат, всё получилось
Станислав, а как быть с загрузкой файла? Нельзя эту функцию здесь делать?
Все супер понятно! А кнопке в фэйковой форме какой URL прописать? Запуталась...
нашли ответ на вопрос?
Большое спасибо)
А как сделать чтобы можно было только 1 картинку выбрать?👉👈Как Radio button
К сожалению, из-за этого кода также пропадают кнопки из других форм, в том числе стандартных. Пробовал из style убрать надстройку про маскировку кнопок из фейковых форм, всё равно не помогает.
Кнопки на стандартных pop-up формах появляются только после того, как полностью скрываешь блок с кодом.
Как быть в этом случае? Помогите пожалуйста
Размеры кнопки в ноль по высоте и ширине ставишь и параметр "input margin bottom" во фкладке настройки стиля формы тоже ноль и кнопку тогда не получится нажать, и стиль скрытия кнопки убираешь из кода. все норм
@@ПроСто-я8ю у меня такая же проблема, и ваш совет не помог, если нажимать enter, чтобы форму отправить, фейковая кнопка срабатывает
какую ссылку ты вставил в кнопку фейковой формы, а то я не понимаю??
нашли ответ на вопрос?
Спасибо за видео, но форма не получилась хотя делал как у вас в видео. Фэйковая кнопка "Отправить" не нажимается если в ее настройках не указать url, а если указать, то после нажатия на фэйк кнопку идет переход по указанному url. Что делать?
Мне не понравилось, что на опубликованной странице кнопка фейковая не подсвечивалась как активная, прописала #sendmyform в ссылке, никуда не переходит, заявки в CRM отправляются, всё работает. Может быть не тот класс кнопки прописали?
@@annagolovina9673 Спасибо, помогло
Привет ! а как заменить чекбокс, вместо картинки на кнопку ?
ты очень крут. Хотел спросить, можно ли в тильду добавить анимированный html5 баннер сделанный в Adobe Animate?
Давай попробуем)
Пиши в вк или инсту. Контакты в описании
Привет! Спасибо за видео!
Подскажи пожалуйста, у меня такая проблема при использовании кода. При скрытии блока с реальной формой перестаёт нажиматься кнопка на фейковой. +к этому кнопка в целом не воспринимается как кнопка, то есть курсором можно скопировать текст "свяжитесь со мной". В чем может быть проблема? Буду очень благодарна помощи!
У меня такая же проблема. Есть решение?
@@muhittemirtasov6625 у них подписка платная, но кодов много разных очень, полезные.
@@muhittemirtasov6625 nolim модификация
Стас, привет. Полезный видос. Спасибо. А как связать отправку файла из фэйковой формы с настоящей?
Честно, с отправкой файлов не разбирался. По идее, логика такая же: при действии пользователя на фейковую форму имитировать то же действие на настоящей
удалось разобраться?
Привет, Друг!
Большое спасибо за видео, очень помог
Но есть вопрос по phone input
Какой код html для дублирования в оригинальную форму можно использовать для телефона?
Спасибо за полезную инфу!
Только почему-то не могу подвязать фиктивную форму к реальной с блоком «вопрос с ответом».
Может кто знает в чем проблема, напишите, пожалуйста
@@DI-lv9cc если вдруг тебе это еще надо, то нужно в фейковой задать ввод текста в одну строчку и соответсвенно выбрать метод input
@@egorks12323 спасибо, брат
А как сделать калькулятор с кастомными ползунками??