Т И Л Ь Д О Ш Н А Я

Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода

1) В Zero block создаем форму и добавляем нужные нам поля.

2) Добавляем код в блок T123. Код 1 для двух колонок, код 2 для трех колонок.

3) В коде заменяем .tn-elem__986 168 601 554 888 163 328 на class формы из Zero block.

Если нужно чтобы кнопка была по центру формы, добавляем код 3, заменив в нем class формы из Zero block.

Если нужно что бы на экранах 960px и меньше была стандартная форма, в одну колонку, применяем код 4.

Формы в 2 или 3 колонки в Zero Block

Код 1: на 2 колонки


<!-- Тильдошная форма в 2 колонки -->
<style>
    .tn-elem__986168601554888101247 .t-form__inputsbox {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: flex-start;
    }
    .tn-elem__986168601554888101247 .t-input-group {
        flex: 50% 0 0;
        padding: 0 15px;
        box-sizing: border-box;
    }
    .tn-elem__986168601554888101247 .tn-form__submit {
        margin-left: 15px;
        flex: 100% 0 0;
    }
</style>

Код 2: на 3 колонки


<!-- Тильдошная форма в 3 колонки -->
<style>
    .tn-elem__986168601554888101247 .t-form__inputsbox {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .tn-elem__986168601554888101247 .t-input-group {
        flex: 33.33% 0 0;
        padding: 0 15px;
        box-sizing: border-box;
    }
    .tn-elem__986168601554888101247 .tn-form__submit {
        margin-left: 15px;
        flex: 100% 0 0;
    }
</style>

Код 3: ставит кнопку формы по центру


<!-- Тильдошная кнопка формы по центру -->
<style>
    .tn-elem__986092821554888101247 .tn-form__submit {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
    }
</style>

Код 4: для экранов меньше 960px будет стандартная форма


<!-- Тильдошная кнопка формы по центру -->
<style>
    @media (min-width: 960px) {
        .tn-elem__987165151554888101247 .t-form__inputsbox {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            align-items: flex-start;
        }
        .tn-elem__987165151554888101247 .t-input-group {
            flex: 50% 0 0;
            padding: 0 15px;
            box-sizing: border-box;
        }
        .tn-elem__987165151554888101247 .tn-form__submit {
            margin-left: 15px;
            flex: 100% 0 0;
        }
    }
</style>

<style>
    @media (min-width: 960px) {
        .tn-elem__987165151554888101247 .tn-form__submit {
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
        }
    }
</style>

Есть вопросы?

comments powered by HyperComments

Вот что есть еще

Модификация

Зависимая анимация

Анимация элементов при наведении или по клику

Эффект

Цветной дым по клику

Полюбившимся многим эффект реалистичного цветного дыма

Модификация

Поэкранный скролл

Ввертикальный, горизонтальный или смешанный поэкранный скролл