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