Checkbox с эффектом Jelly в формах Tilda
Элемент "Checkbox" в формах Tilda достаточно скучный. Еще и не поддается настройкам через стандартные элементы редактирования. Делая форму обратной связи на главной странице своего сайта, мне понадобился блок с галочками, тут я решил добавить немного забавной анимации при клике на элемент.
Пример checkbox в Zero block доступен по ссылке
На всем сайте
Чтобы стилизовать checkbox на всем сайте, во всех формах, необходимо подключить файл со стилями анимации в header сайта или на страницу, где планируете размещать форму. Если не хотите подключать файлом, то код анимации оставлю в конце статьи.
Далее вставляем копируем следующий код и вставляем в блок Т123 в header сайта или в редактор css в настройках сайта. По умолчанию, в неактивном состоянии блок имеет прозрачность .6, в примере я заменил на 1. Так же добавил border-radius и цвета в стилистике своего сайта. Все легко поменять, следите за комментариями в коде.
Далее вставляем копируем следующий код и вставляем в блок Т123 в header сайта или в редактор css в настройках сайта. По умолчанию, в неактивном состоянии блок имеет прозрачность .6, в примере я заменил на 1. Так же добавил border-radius и цвета в стилистике своего сайта. Все легко поменять, следите за комментариями в коде.
В конкретном блоке
Чтобы стилизовать checkbox в отдельно взятом блоке, необходимо сослаться на id элемента или его css класс. Id вы можете узнать в настройках блока, css класс через инспектор кода в браузере, на опубликованной странице. Пример по ссылке.
Это блок BF204N, в примере я ссылался на id блока
Так же можно делать это через css класс блока, например, если мы хотим поменять стили только у формы в блоках BF204N, его класс .t678
В Zero block
В Zero block вы можете задать css класс своей форме и ссылаться на него при стилизации, checkbox из примера как раз тому показатель. Код примера тут. Так же я добавил свойства для изменения размера элемента, следите за комментариями.
Так что можете просто скопировать код к себе на сайт, и присвоить css классы из примера. Просто выберите нужный размер элемента. Ну и конечно же код анимации Jelly.