Т И Л Ь Д О Ш Н А Я

Просим обратить внимание: техническая поддержка 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

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