модификация

Как сделать поля форм в несколько колонок в Tilda

Компактная форма с несколькими полями в одну строку на тильде, быстро и просто

Meet the group, explore the school, and get a free consultation

You agree to our Terms and Conditions

Как это сделано?

1. Добавляем любую форму на страницу, затем добавьте ей класс uc-formcols
2. Добавляем любые поля в форме, в каждом поле в подзаголовке указываем количество колонок от 2 до 12 (следите за тем, чтобы в строке, суммарная ширина всех полей составляла не больше 12 колонок)
3. Добавляем блок T123 и вставляем в него код HTML и готово!

ВАЖНО!
Скрипт работает со всеми формами которые есть в Tilda, он не работает только с горизонтальными формами.

Скопировать

Скопированно


<style>
    .row {
        width: calc(100% + 40px);
        margin-left: -20px;
    }

    .col {
        display: inline;
        float: left;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .col_1 {
        width: 8.3%;
    }
    .col_2 {
        width: 16.6%;
    }
    .col_3 {
        width: 25%;
    }
    .col_4 {
        width: 33.3%;
    }
    .col_5 {
        width: 41.6%;
    }
    .col_6 {
        width: 50%;
    }
    .col_7 {
        width: 58.3%;
    }
    .col_8 {
        width: 66.6%;
    }
    .col_9 {
        width: 75%;
    }
    .col_10 {
        width: 83.3%;
    }
    .col_11 {
        width: 91.6%;
    }
    .col_12 {
        width: 100%;
    }

    @media (max-width: 960px) {
        .col_1,
        .col_2,
        .col_3,
        .col_4,
        .col_5,
        .col_6,
        .col_7,
        .col_8,
        .col_9,
        .col_10,
        .col_11,
        .col_12 {
            width: 100%;
        }
    }
</style>
<script>
    setFormCols('.uc-formcols');

    function setFormCols(id, config = {}) {
        const $wrapper = $(id);

        const $row = $('<div class="row"></div>');
        if (config.padding) {
            $row.css({
                width: `calc(100% + ${parseInt(config.padding) * 2}px)`,
                marginLeft: `-${config.padding}`
            });
        }

        $wrapper
            .find('.t-input-group')
            .wrapAll($row)
            .each(function() {
                const $colText = $(this).find('.t-input-subtitle');
                const col = +$colText.text() || 12;
                $colText.remove();

                const $col = $(`<div class="col col_${col}"></div>`);
                if (config.padding) {
                    $col.css({
                        paddingLeft: config.padding,
                        paddingRight: config.padding
                    });
                }
                $(this).wrap($col);
            });
            
        $wrapper.find('.row').after('<div style="clear: both;"></div>');
    } 
</script>

Что-то не получается?

Спросите у меня в чате ниже, я с удовольствием вам помогу!