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