В Тильде есть формы, и легко там можно добавить чек-бокс и перенести его в любое место – но не под кнопку, кнопка всегда последняя. Иногда это смотрится не очень. Достаточно часто в горизонтальных формах галочка согласия с политикой конфиденциальности размещается внизу. В интернете есть несколько модификаций для переноса чекбокса под кнопку, но как раз с горизонтальными формами они работают не очень. Поэтому я сделала свой вариант, ниже есть инструкция и можно скопировать код.
Получится вот такая форма:
1 Создаем Zero блок и добавляем форму, выбираем Form design – Horizontal
2 Добавили в ней поле Checkbox с нужным текстом. Получается страшненькая форма:
3 Добавляем код в блок Другое – Т123
<style>
.chformstyle .t-form__inputsbox {
display: flex;
flex-wrap: wrap;
}
.chformstyle .t-input-group_em,
.chformstyle .t-input-group_ph,
.chformstyle .tn-form__submit {
flex: 1;
min-width: 200px;
margin-bottom: 8px;
}
.chformstyle .t-input-group_cb {
flex-basis: 100%;
order: 1;
}
/* Чтобы кнопка растягивалась и подстраивалась по ширине */
.chformstyle .tn-form__submit .t-submit {
width: 100% !important;
}
/* Стили для текста и ссылки в чекбоксе */
.chformstyle .t-checkbox__labeltext,
.chformstyle .t-checkbox__labeltext a {
color: white !important; /* Здесь можно указать цвет ссылки в подписи чек-бокса */
text-decoration: none !important;
transition: color 0.3s ease !important;
}
/* Цвет ссылки при наведении */
.chformstyle .t-checkbox__labeltext a:hover {
color: #ffd700 !important; /* Здесь можно указать цвет ссылки при наведении в подписи чек-бокса */
}
.chformstyle .t-checkbox__indicator {
border: 2px solid #000000; /* Здесь можно указать цвет самого чек-бокса */
}
/* Возвращаем вертикальность расположения полей на маленьких разрешениях */
@media (min-width: 480px) and (max-width: 960px) {
.chformstyle .t-form__inputsbox {
flex-direction: column;
}
.chformstyle .t-input-group_em,
.chformstyle .t-input-group_ph,
.chformstyle .tn-form__submit {
min-width: 100% !important; /* Занимает всю ширину */
}
}
}
</style>
4 Если на странице есть еще формы, то лучше для данной конкретной формы добавить стиль: правой кнопкой по форме – Add CSS class name. У меня в коде используется .chformstyle – но можно заменить на какой-то свой и соответственно заменить и в коде. Если форма одна, то это вообще можно из кода удалить (автозаменой например).
5 Для узких разрешений в форме нужно поменять горизонтальное направление на вертикальное и скорректировать ширину блока.
